網(wǎng)頁設計規(guī)范

時間：2022-07-25 09:21:01 | 來源：網(wǎng)站運營

時間：2022-07-25 09:21:01 來源：網(wǎng)站運營

網(wǎng)頁設計也被稱為 Web Design、網(wǎng)站設計、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設計。雖然現(xiàn)在我們常使用移動端上的 APP 來獲取資訊，但是針對于企業(yè)來講，企業(yè)網(wǎng)站也是必不可少的一種形式，從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國的網(wǎng)站高速發(fā)展了近三十年。電腦的分辨率只有800×600像素，那時的網(wǎng)站性能和體驗都不好，而現(xiàn)在網(wǎng)站設計和過去已經(jīng)有了巨大的變化：注重用戶體驗、注重頁面內(nèi)容、多媒體等設計讓如今的網(wǎng)站體驗并不比軟件和手機 APP 差。加上個人電腦的普及，網(wǎng)站仍然是人機交互中非常重要的平臺之一。那么作為 UI設計師我們就必須掌握網(wǎng)站設計的規(guī)范和理解網(wǎng)站運行的原理，才能更好地駕馭這個平臺。

因互聯(lián)網(wǎng)的發(fā)展，現(xiàn)今對網(wǎng)頁設計的要求也提高了，所以有個自己的設計規(guī)范會使設計簡潔而高效。接下來，我們會從尺寸、字體、圖片、顏色等方面來開展深入探索嘍！其實設計規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個產(chǎn)品的設計規(guī)范應該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

網(wǎng)頁的布局主要有兩種：

左右布局和居中布局。布局不一樣使設計的空間也不相同。

⑴、左右布局，靈活性強，UI限制??；左右通欄為導航欄，寬度沒具體限制，可根據(jù)實際情況調(diào)整；右側(cè)為內(nèi)容板塊范圍，是網(wǎng)站內(nèi)容展示區(qū)域。

⑵、居中布局，中間的深色部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示；兩邊留白沒實際用圖，只是為適配而存在。

當前最流行的分辨率是1920px*1080px的，所以建議創(chuàng)建網(wǎng)頁尺寸為1920px*1080px，頁面內(nèi)容區(qū)域（版心）常設置為1200px（或1000px -1200px區(qū)間），以這個尺寸來設計相對標準。每個屏幕的高度約為900px左右。

網(wǎng)頁設計字體的選擇可以微軟雅黑，英文及數(shù)字可以使用Arial字體；說完字體咱們該說字體的字重、字號、行高、字間距、行間距、段間距了、字體顏色。

字號（所有字號使用偶數(shù)）：

正文：12px－18px之間

12px是應用于網(wǎng)頁的最小字體，適用于非突出性的日期，版權等注釋性內(nèi)容。

14px 則適用于非突出性的普通正文內(nèi)容。

英文可偏小些 ：10px－16px

導航欄字體：一般在14px-18px區(qū)間，最大不超過18px，禁用加粗

字體間距

相鄰兩個文字的間距，其實不需要太過介意，除了特殊的需求之外，都可以使用默認數(shù)值的間距。

行間距，推薦使用 字體大小的1.5-1.7倍 作為參考；

字間距，推薦使用 0/25/50即，當用12px 的字體時，行間距：18-20；

字體顏色

正文字體顏色，建議選用 #333333到#666666 之間的顏色。

輔助性的，注釋類的文字，則可以選用#999999之類的比較淺的顏色。