推薦Web UI 網(wǎng)頁設(shè)計規(guī)范

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

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

推薦Web UI 網(wǎng)頁設(shè)計規(guī)范：Web UI 網(wǎng)頁設(shè)計規(guī)范

寫的真好，共勉，文章內(nèi)容見下。

Web UI 網(wǎng)頁設(shè)計規(guī)范
Original 壹念君 壹念視覺 2018-05-18 18:18
收錄于話題#設(shè)計規(guī)范16個



一、網(wǎng)頁尺寸


制作網(wǎng)頁時，我們選用的分辨率是72像素/英寸，使用的畫布尺寸1920px*1080px。

但是并不代表我們可以在整個畫布上作圖。
網(wǎng)頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設(shè)計的空間也不相同。

1、左右布局
靈活性強， UI的限制小，左邊通欄為導(dǎo)航欄，寬度沒有具體的限制，可根據(jù)實際情況調(diào)整；

右側(cè)為內(nèi)容版塊范圍，是網(wǎng)站內(nèi)容的展示區(qū)域。




2、居中布局
中間的藍(lán)色部分為有效的顯示局域，用于網(wǎng)站內(nèi)容的展示；換句話說，兩邊均為留白，沒有實際用途，只是為了適配而存在；




3.主流電腦屏幕尺寸有以下幾種：





一般網(wǎng)站內(nèi)容顯示的區(qū)域為996px；國內(nèi)網(wǎng)站大部分還是以1000個像素為界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會顯得擁擠。所以網(wǎng)站寬度在1000像素以內(nèi)可以保證大部分用戶舒適的瀏覽網(wǎng)頁。


二、網(wǎng)頁字體

字體設(shè)計的總原則是：可辨識性和易讀性。
網(wǎng)頁的中文字設(shè)計是系統(tǒng)默認(rèn)的字體：宋體、微軟黑體、蘋果系統(tǒng)黑體
英文則建議使用Times New Roamn、Arial、Comis Sans MS等無襯線字體



常用的字號大小有以下幾種：

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

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

16px、18px、20px、26px或者30px 適用于突出性的標(biāo)題內(nèi)容。注意都是偶數(shù)原則，奇數(shù)像素會出毛邊！




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

行間距：推薦以字體大小的1.5—2倍作為參考；
段間距：推薦以字體大小的2—2.5倍作為參考。

例如，當(dāng)選用14px 的字體時，行間距：21—28px；段間距：28px—35px。






四、字體顏色



六種除了主色調(diào)以外都是場景色，需要在不同的場景中使用（例如危險色表示危險的場景）六種是文字排版色，通過文字的不同用色進行文字排版，以表現(xiàn)層次結(jié)構(gòu)。





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





正文字體顏色，保險起見，選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。




五、首屏內(nèi)容
做網(wǎng)頁設(shè)計時，你還要特別注意網(wǎng)頁的首屏內(nèi)容，在構(gòu)圖和內(nèi)容呈現(xiàn)上，首屏模塊的設(shè)計至關(guān)重要。

除去任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩下的是首屏的高度。

Window XP的首屏高度平均值是580px
Window 7的首屏高度平均值是710px

綜合考慮到Window XP已經(jīng)逐漸退出市場，在實際操作時，我們 以710px 作為依據(jù)。

如下圖所示，藍(lán)色區(qū)域則是我們設(shè)計時需要著重考慮的首屏范圍。


另外，是關(guān)于圖片尺寸的問題。
需要全屏顯示的圖片，寬度尺寸嚴(yán)格設(shè)計為1920px。
但是值得注意的是，圖片內(nèi)容的有效范圍不能超過網(wǎng)頁內(nèi)容的有效范圍，即控制在1200px以內(nèi)。
避免遇到小屏幕設(shè)備時，內(nèi)容顯示不全，而造成信息的遺漏的情況。






六、響應(yīng)式布局設(shè)計
響應(yīng)式設(shè)計指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。

由于頁面的寬度發(fā)生了變化，進而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計。直到最后在手機屏幕上的顯示圖片信息變成了一列。



對頁面進行響應(yīng)式的設(shè)計實現(xiàn)，需要對相同內(nèi)容進行不同寬度的布局設(shè)計，有兩種方式：桌面優(yōu)先（從桌面端開始向下設(shè)計）；移動優(yōu)先（從移動端向上設(shè)計）

無論基于哪種模式的設(shè)計，要兼容所有設(shè)備，布局響應(yīng)時不可避免地需要對模塊布局做一些變化（當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點的概念。所以做響應(yīng)式設(shè)計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應(yīng)清晰的一個臨界點，制定了臨界點之后就知道，當(dāng)屏幕的寬度范圍位于哪一個點的時候，我們的頁面信息該如何展示。）
我們通過JS獲取設(shè)備的屏幕寬度，來改變網(wǎng)頁的布局，這一過程我們可以稱之為布局響應(yīng)屏幕。

常見的主要有如下幾種方式：

1、布局不變，即頁面中整體模塊布局不發(fā)生變化，主要有：















2、布局改變，即頁面中的整體模塊布局發(fā)生變化，主要有：






很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能時保持簡單輕巧，而且同一臨界點內(nèi)（發(fā)生布局改變的臨界點稱之為臨界點）保持統(tǒng)一邏輯。否則頁面實現(xiàn)得太過復(fù)雜，也會影響整體體驗和頁面性能。




八、網(wǎng)頁柵格
網(wǎng)上有些關(guān)于柵格化系統(tǒng)的文章講的非常理論化，又是算法又是模塊，而且和響應(yīng)式布局混在一起，讓新晉的網(wǎng)頁設(shè)計師們簡直無從下手，所以這里以案例來說明何時采用以及怎么最快的建立柵格化系統(tǒng)。在所有關(guān)于UI的文章中，我會反復(fù)強調(diào)和前端開發(fā)人員的溝通，因為他們是你設(shè)計方案的執(zhí)行者，這一點非常重要。



1.把柵格化設(shè)計和柵格化布局分開
強調(diào)柵格化設(shè)計（grid-design）和柵格化布局（css grid）分開描述，是個人理解這完全屬于兩個不同的工作，前者針對網(wǎng)頁設(shè)計師，而后者針對前端開發(fā)人員。柵格化設(shè)計是不需考慮頁面的響應(yīng)的基于柵格系統(tǒng)的設(shè)計，主要是為了提高網(wǎng)頁的規(guī)范性。對于一些中規(guī)中矩的網(wǎng)站，或者說一般創(chuàng)意型的網(wǎng)站，柵格化設(shè)計還是非常推薦的，尤其是一些規(guī)模大周期長，后期需要不斷迭代的項目，柵格化設(shè)計讓網(wǎng)頁呈現(xiàn)出專業(yè)可信賴感，并有助于后期的維護。而柵格化布局，特指前端攻城獅使用的css框架，來實現(xiàn)頁面的響應(yīng)式布局。

響應(yīng)式設(shè)計只是網(wǎng)頁設(shè)計的一個折中方案，依賴于項目實際情況進行選擇。對于設(shè)計師來說，如果沒有必須的要求，可選擇廣義的柵格系統(tǒng)，并在此基礎(chǔ)上自由發(fā)揮創(chuàng)意。



2.絕不萬能的柵格化系統(tǒng)
對于是否采用柵格化設(shè)計，采用下面幾個案例說明一下：




（企業(yè)站之類-以介紹幾種單一產(chǎn)品為主）





（功能型網(wǎng)站）





（不拘泥形式的設(shè)計形式）


針對這三個具有代表性的案例，柵格化設(shè)計是沒有必要的。理由很簡單，柵格的優(yōu)點也是缺點，規(guī)范意味著統(tǒng)一也意味著限制，在以上的案例中，無需用柵格來限制設(shè)計師的靈感，畢竟這個社會，還是需要設(shè)計感的。

但絕大多數(shù)情況下，推薦柵格化設(shè)計。尤其是圖文混排、版塊很多的網(wǎng)站，柵格化設(shè)計會讓內(nèi)容雜亂無章的頁面呈現(xiàn)清爽感。

關(guān)于柵格化布局，方案非常多，來看下面幾個案例，我們都稱之為柵格化設(shè)計。



（廣義的柵格化系統(tǒng)-無間距的單元格）





（廣義的柵格化系統(tǒng)-有間距的單元格）





（廣義的柵格化系統(tǒng)-有間距的單元格）

對于不需要考慮頁面響應(yīng)（換句話說，和框架無關(guān)）的網(wǎng)頁設(shè)計，原則可以簡化成一句話：“由設(shè)計師自由決定”。




3.柵格化設(shè)計的參數(shù)
網(wǎng)上搜索結(jié)果最熱的960 gird柵格系統(tǒng)從2009年就開始正式推出，但至今，仍然有很多設(shè)計師在使用，除了考慮到顯示設(shè)備的分辨率，還依賴于960 gird的靈活性。所以，對于新晉web ui來說，采用960 grid 仍然是最佳的方案，不會出彩但也不會出錯。如果是考慮到寬屏的設(shè)計（需要舍棄一部分分辨率不高的用戶），可以把柵格化系統(tǒng)的寬度建為980甚至以上。但沒有柵格化設(shè)計經(jīng)驗的設(shè)計師需要注意，這里說的960是含邊距部分，換句話說，在psd文檔中，你的內(nèi)容部分是950px，柵格化版面可以借助一些非常好用的在線工具，比如知名的Grid.Guide，這是12列柵格在內(nèi)容寬度950下的三種版式規(guī)范，你也可以使用24列，靈活度更高。




Grid-Guide自動生成的柵格系統(tǒng)（寬950-12列）

從圖中可以看出，這三種方案列寬column width和間距gutter不同，剩下的工作對于ui設(shè)計師來說就簡單了很多，你可以把版式規(guī)范的png格式下載下來，作為你網(wǎng)頁設(shè)計的基礎(chǔ)版塊，在此基礎(chǔ)上進行列的劃分?；蛘咧皇且赃@個參數(shù)為基礎(chǔ)，重新建立參考線（我更推薦這種方式，尤其photoshop cc2017的新建參考線版面，裝訂線對應(yīng)Gutter，列寬對應(yīng)column width）。我簡單的拿版式規(guī)范做了個頁面設(shè)計示意圖，這就是基于柵格系統(tǒng)設(shè)計的優(yōu)點，在劃分列時，有理可依，有據(jù)可循。






【基于960grid系統(tǒng)的版塊劃分示意】

當(dāng)然，既然是設(shè)計師，就可以感性的元素再多一些。比如，你希望更多的留白，就可以采用間距值較大的柵格版式，只要整個網(wǎng)站保持一個統(tǒng)一的版式即可。下圖是當(dāng)內(nèi)容寬度為1200時生成的柵格系統(tǒng)，你還可以嘗試很多方案，但Max Width的設(shè)定并不是那么隨意，這個取決于網(wǎng)站的定位。





Grid-Guide自動生成的寬1180的柵格系統(tǒng)（24列）

至于高度和垂直間距，柵格化系統(tǒng)并沒有統(tǒng)一的準(zhǔn)則，設(shè)計師可以采用一些黃金分割之類滿滿的都是設(shè)計感之類的值，或者垂直間距與柵格系統(tǒng)的間距相同或是整倍，總之，也需要一個規(guī)范指導(dǎo)全站設(shè)計。

柵格系統(tǒng)的參數(shù)根據(jù)項目的實際情況，盡量建立10的倍數(shù)或8的倍數(shù)（google material design推薦）。


4.柵格化布局的參數(shù)
在前面提到過，如果網(wǎng)站的需求是響應(yīng)式的設(shè)計，這時，設(shè)計師們一定一定先問一下前端他們準(zhǔn)備如何實現(xiàn)響應(yīng)式布局，而不是把設(shè)計稿完成后交給他們后YY他們能百分百給你復(fù)現(xiàn)你的設(shè)計稿。

關(guān)于響應(yīng)式的柵格系統(tǒng)，首先聲明一點，當(dāng)前端樂意并了解CSS原理和框架的構(gòu)建方式時，可以構(gòu)建其他樣式的網(wǎng)格，比如7、9、11、13等等，甚至各種異形網(wǎng)格，但在絕大多數(shù)情況下，更多的前端攻城獅青睞于高（tou）效(lan)，而他們常用的css框架除了Bootstrap(寬480/768/992/1200,12列)，還有一堆叫不出名字的輕量css框架（畢竟柵格系統(tǒng)只是Bootstrap的一部分，如果只是需要一個響應(yīng)式的css的話，可選的非常多，比如960.gis），除此之外，有可能你那可愛的前端攻城獅用的是flexbox實現(xiàn)響應(yīng)式彈性布局，所以在一切未知確定下來之前，請放下架子，請教一下開發(fā)人員，因為雖然不想承認(rèn)，但這種情況下是前端來指導(dǎo)設(shè)計。值得慶幸的是，這種情況在現(xiàn)實中非常少的，（但不排除你接手的是一個二次開發(fā)的項目等等之類），確定他們使用哪種框架之后，設(shè)計師可以開始自己的工作了。
下面也舉個例子，是960gis的。


【960-grid-system柵格化布局】

看完你也許會明白為什么涉及到柵格化布局需要前端來確定了，960gis的css框架給出了三種方案，24列16列12列，設(shè)計師要在這個基礎(chǔ)上進行設(shè)計。一旦需要柵格化布局，意味著設(shè)計師自由發(fā)揮的空間再次縮減，只有在這三個方案上選一種。這些方案從何而來呢？很簡單，你只要向前端索取他使用的框架的psd模板即可，里面參考線都是建好的。而前端一定會非常樂意幫你這個忙，理由很簡單，你按照他使用的框架規(guī)范進行設(shè)計也是在一定程度上縮減他的工作量，皆大歡喜。比如下面這張，就是目前最新的Bootstrap4的psd文件的截圖。



【Bootstrap4】

設(shè)計師也可以自給自足，一般這些css框架庫都會提供下載途徑。尤其是Bootstrap，作為成熟的框架，很多模板文件可以套用。柵格化布局以使用的css框架庫為準(zhǔn)則，讓前端開發(fā)提供給設(shè)計師再好不過。

九、命名規(guī)范
1、網(wǎng)站設(shè)計及基本框架結(jié)構(gòu)




1.1 Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.

1.2 Header
“header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).


1.3 Navbar
“navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.


1.4 Menu
“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “l(fā)inks“，“sidebar-main”.


1.5 Main
“Main”是網(wǎng)站的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。


1.6 Sidebar
“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.


1.7 Footer
“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.


2、需要注意的幾點:
2.1盡量考慮為元素命名其本身的作用或”用意”，達到語義化。
不要使用表面形式的命名.
如:red/left/big等。

2.2組合命名規(guī)則:
[元素類型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news

2.3 涉及到交互行為的元素命名
凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:
鼠標(biāo)懸停:：hover 點擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited


3、常用命名匯總:
頁頭:header
登錄條:loginbar
標(biāo)志:logo
側(cè)欄:sidebar
廣告條:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
下拉菜單:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動條:scroll
內(nèi)容:content
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
鏈接:links
頁腳:footer
服務(wù):service
熱點:hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyright
網(wǎng)站地圖: sitemap
以上命名規(guī)范僅供參考



聲明：部分文字和圖片來自互聯(lián)網(wǎng)
如有侵權(quán)，請聯(lián)系本號





相關(guān)下載文章（直接點擊以下鏈接閱讀）
iOS設(shè)計尺寸規(guī)范

Android設(shè)計尺寸規(guī)范

小程序設(shè)計規(guī)范

何以解憂 唯有icon

臨摹不是照著抄
一款A(yù)PP從設(shè)計到切圖標(biāo)注適配全記錄
APP UI 視覺設(shè)計規(guī)范

2018年網(wǎng)頁設(shè)計的19個趨勢！
21世紀(jì)最強設(shè)計配色方法
7種UI設(shè)計趨勢超流行
8大史詩級海報設(shè)計技巧
典藏版|百款字體設(shè)計合集
WUI | 極簡網(wǎng)頁界面設(shè)計

10招教你玩轉(zhuǎn)波普風(fēng)
初級設(shè)計師如何獲得BAT面試機會?
2018現(xiàn)役最全的14種平面設(shè)計風(fēng)格
設(shè)計報價 | 一個LOGO該如何報價？
珍藏版 | 為什么攝影師都喜歡前景構(gòu)圖？
典藏版 | 月薪10W的UI設(shè)計師，都上這9類網(wǎng)站
吃透這10個網(wǎng)站，你就明白了網(wǎng)頁中留白的技巧
最新20個作品集網(wǎng)站，別再跟我說沒靈感!
22個必須得知道的設(shè)計趨勢

10個讓人上癮的設(shè)計神器

---

關(guān)鍵詞回復(fù)：

軟件下載 、UI學(xué)習(xí) 、面試、Banner
LOGO、C4D教程，名片，包裝
(可見相對應(yīng)知識文章）




收錄于話題 #設(shè)計規(guī)范
16個
上一篇Apple Watch界面設(shè)計規(guī)范之UI設(shè)計基礎(chǔ)下一篇智能電視UI設(shè)計規(guī)范
Modified on 2018/05/18


People who liked this content also liked

春招想進小米？先來看看這位內(nèi)部應(yīng)屆生的作品集再決定！（第87期）


壹念視覺

不喜歡
不看的原因
OK

• 內(nèi)容質(zhì)量低
• 不看此公眾號

Scan to Follow