網(wǎng)頁ui設(shè)計規(guī)范整理合集！

時間：2023-10-04 02:36:01 | 來源：網(wǎng)站運營

時間：2023-10-04 02:36:01 來源：網(wǎng)站運營

網(wǎng)頁ui設(shè)計規(guī)范整理合集?。壕W(wǎng)頁ui設(shè)計規(guī)范還是很多人關(guān)心的問題，對于剛?cè)肼毜男氯藖碚f，網(wǎng)頁ui設(shè)計規(guī)范也是需要自己去了解一些的，我個人雖然已經(jīng)在這個行業(yè)有兩年的經(jīng)驗了，但還是需要不斷學習的。所以今天我們就這些問題來說說我從業(yè)兩年的一些總結(jié)和經(jīng)驗，希望能夠幫助到你們，在以后的職業(yè)道路上也算是一點小建議。










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

在了解網(wǎng)頁設(shè)計規(guī)范之前，我們先簡單了解網(wǎng)站的分類，網(wǎng)站的分類按對象劃分可分為 To C端和 To B端兩種：

To C端是面向用戶和消費者，所以設(shè)計上一定要可以吸引人，并且以用戶為中心考慮體驗設(shè)計。

To B 端是面向商家和專業(yè)人士，因而TO B與 TO C端在設(shè)計上是大相徑庭的， To B 類網(wǎng)頁最重要的是效率而不是體驗。







因互聯(lián)網(wǎng)的發(fā)展，現(xiàn)今對網(wǎng)頁設(shè)計的要求也提高了，所以有個自己的設(shè)計規(guī)范會使設(shè)計簡潔而高效。根據(jù)本大寶貝的設(shè)計細節(jié)，相信你很快就能與大神比擬了，哈哈哈哈，開個小玩笑，下面咱們就從尺寸、字體、圖片、顏色等方面來開展深入探索嘍！其實設(shè)計規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個產(chǎn)品的設(shè)計規(guī)范應該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。今天我們就先來了解to c設(shè)計規(guī)范，后期會出TO B的設(shè)計規(guī)范 ！

一、網(wǎng)頁尺寸







1.網(wǎng)頁的布局主要有兩種：左右布局和居中布局。布局不一樣使設(shè)計的空間也不相同。

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







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







2.當前最流行的分辨率是1920px*1080px的，所以建議創(chuàng)建網(wǎng)頁尺寸為1920px*1080px，頁面中心區(qū)域常設(shè)置為1200px（或1000px -1400px區(qū)間），以這個尺寸來設(shè)計相對標準。每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。










2.文字

網(wǎng)頁中字體也是有使用規(guī)范的，合適的字體大小才能展現(xiàn)出最完美的效果（1920px*1080px分辨率下）

那些漂亮的網(wǎng)頁設(shè)計，它們都是用的什么字體的？

網(wǎng)頁設(shè)計字體的選擇可以根據(jù)企業(yè)調(diào)性去挑選字體的，因為字體本身也是有性格的，為了方便大家使用，我把網(wǎng)頁設(shè)計中經(jīng)常用到的字體，希望能給新手一些指導，有自己的一套用字方法，那當然是極好的







說完字體咱們該說字體的字重、字號、行高、字間距、行間距、段間距了、字體顏色。

字號：

正文：12px－18px之間

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

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

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

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

整站文字：12px-36px區(qū)間







某一個網(wǎng)頁的規(guī)范：

網(wǎng)站的字體大小并沒有硬性規(guī)定具體的字號，根據(jù)實際情況可以酌情考慮，但是要使用偶數(shù)字號。

1、字體規(guī)格也不需要太多，最多使用三種混搭，當一個頁面中使用的字體超過 3 種時，會給用戶帶來“不專業(yè)”、“沒有權(quán) 威性”、“沒有層次結(jié)構(gòu)”之類的感覺。

2、層次的區(qū)別，可以改變字體顏色或加粗來體現(xiàn)。

3、字體優(yōu)先使用各操作系統(tǒng)默認的字體。字體選擇有版權(quán)、筆畫嚴謹、清晰可讀、經(jīng)典。

字體間距

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

行間距，推薦以 字體大小的1.5-2倍 作為參考；

段間距，推薦以 字體大小的2-2.5倍 作為參考。

即，當用14px 的字體時，行間距：21px-28px；段間距：28px-35px。

字體顏色

主文字顏色，建議使用 公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識性和記憶性。

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

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







如果，你對顏色駕馭能力比較強，你也可以選用 偏公司VI顏色的深色，作為正文字體顏色或者輔助性文字顏色。

例如公司的品牌色是藍色，那么，正文字體就可以選用偏藍的深色。

這樣處理之后，文字就帶有了環(huán)境色，網(wǎng)站整體色調(diào)將更加和諧。

以上就是網(wǎng)頁ui設(shè)計規(guī)范的總結(jié)，希望對你能夠幫助，在學習的過程需要多注重實踐動手能力，只有自己動手了才能夠真正了解到其中的一些細節(jié)。大家有了解更多關(guān)于UI設(shè)計學習方法、小技巧以及行業(yè)相關(guān)信息，都可以一起交流，我會把兩年來的UI設(shè)計師工作經(jīng)驗和建議傾囊相授的。