WEB設(shè)計規(guī)范(2016.10.31)

1、WEB設(shè)計規(guī)范版本V 1.02016.10.31版本說明文檔名稱技術(shù)中心UI設(shè)計-（網(wǎng)頁UI設(shè)計規(guī)范）.doc文檔編號文檔類型技術(shù)文檔密級非保密文檔版本文檔作者完成日期版本說明審核人V1.0盧偲2016-10-31初始版本目錄1.簡介51.1目的51.2整理視覺規(guī)范的幾個原則51.3參考資料62.界面尺寸72.1關(guān)于畫布尺寸72.2關(guān)于布局72.3關(guān)于導(dǎo)航73.文檔規(guī)范整理保存83.1文檔命名83.2文件命名84.文字使用規(guī)范104.1字體104.2字號（這里舉例大多數(shù)情況，特殊情況可以特殊處理）105.圖標(biāo)設(shè)計規(guī)范115.1圖標(biāo)繪制115.2小圖標(biāo)類型136.按鈕設(shè)計規(guī)范（WEB手機(jī)通用）1

2、56.1按鈕的狀態(tài)156.2按鈕的形狀166.3按鈕的大小167.LOGO178.檢查產(chǎn)品設(shè)計以及頁面需要遵循的交互原則（WEB手機(jī)通用）188.1尼爾森十大可用性原則189.單獨項目的網(wǎng)頁設(shè)計整理規(guī)范229.1單一網(wǎng)頁端項目UI規(guī)范需要的規(guī)范文檔2210.結(jié)語251.簡介本文定義了關(guān)于公司設(shè)計工作方面的諸多規(guī)范，以及基本設(shè)計思考原則。用于提高今后的工作效率，和工作質(zhì)量。1.1目的（1）解決多人協(xié)作時控件混亂問題（2）解決開發(fā)效率、代碼冗余問題（3）解決產(chǎn)品迭代中品牌形象會走樣問題1.2整理視覺規(guī)范的幾個原則（1）需要掌握好創(chuàng)建的時機(jī)每一個獨立的項目都需要單獨創(chuàng)建規(guī)范文檔，規(guī)范建立的時機(jī)很重要

3、，太早或者太晚都會給后續(xù)迭代帶來很多麻煩。最佳時機(jī)是在完成風(fēng)格定位后做規(guī)范，可以承上啟下高效完成工作。（2）只對非重要界面進(jìn)行規(guī)范設(shè)定整理規(guī)范時，應(yīng)只針對控件、色值、質(zhì)感、動效、品牌元素等重要界面進(jìn)行規(guī)范設(shè)定。不是所有的頁面和元素都需要嚴(yán)格按照規(guī)范設(shè)計制作。（3）規(guī)則需要彈性采用28原則，只針對產(chǎn)品80%的界面進(jìn)行規(guī)范。這里講的80%和20%是一個相對的概念，80%代表色彩、按鈕、字體、間距等重要內(nèi)容，這些內(nèi)容需要進(jìn)行詳細(xì)的規(guī)范說明。另外的20%是指某些控件是不可復(fù)用并且不重要的，這種20%的內(nèi)容不需要花費精力做進(jìn)規(guī)范里。這個28原則需要設(shè)計師根據(jù)具體情況具體分析，作出更適合當(dāng)下的設(shè)計。（4）

4、規(guī)范要有迭代如果設(shè)計師沒有跟著產(chǎn)品改版的節(jié)奏去迭代視覺規(guī)范，一般會出現(xiàn)兩種情況：一是被原規(guī)范的舊樣式束縛，死板的遵循最初的規(guī)范，長久下去會出現(xiàn)視覺樣式過時的問題。二是改版中用了新的視覺風(fēng)格，沒有及時總結(jié)歸納成規(guī)范，這樣一來又會出現(xiàn)品牌形象走樣的問題。（5）規(guī)范要有執(zhí)行力有兩種規(guī)范是缺乏執(zhí)行力的：第一、規(guī)范內(nèi)容不具體，缺少對核心模塊的細(xì)節(jié)說明。各個模塊缺少必需的說明，比如色彩模塊中有主色卻缺少輔助色的說明，按鈕模塊中缺少滑過、點擊、不可點狀態(tài)的說明，字體模塊缺少字體磅數(shù)的分布設(shè)定。這種沒有核心內(nèi)容的規(guī)范，沒有參考價值，規(guī)范的作用幾乎等于零，其他參與項目的設(shè)計師還得找制作規(guī)范的設(shè)計師要相關(guān)的規(guī)范才

5、能進(jìn)行下去，所以這種類型的規(guī)范是沒有執(zhí)行力的。第二、規(guī)范太全面死板太臃腫，無從看起，對后續(xù)設(shè)計有束縛。對所有界面的所有元素進(jìn)行規(guī)范，連不重要的元素也強(qiáng)行歸納進(jìn)來，多達(dá)幾十頁的規(guī)范文檔。造成三方面的影響，一是會增加大量沒必要的工作時間來制作規(guī)范，二是設(shè)計師和程序員需要花很多時間精力去看無關(guān)緊要的內(nèi)容，增加了很多負(fù)擔(dān)。三是設(shè)計本來就不是一件絕對的事，需要20%的靈活空間，不然后面遇到新的頁面，死板的把規(guī)范用在新的頁面上，出來的效果可能并不好。1.3參考資料用合適字號提升用戶體驗：http:/helloweb.wang/yonghutiyan/505.html尼爾森十大可用性原則： 網(wǎng)易設(shè)計規(guī)范透視

6、詳解： 2.界面尺寸2.1關(guān)于畫布尺寸頁面設(shè)計盡量采用柵格系統(tǒng)，主流閱覽器的寬度在1024px-1336px，其中滾輪大約有20幾個像素的寬度。（21px IE閱覽器滾輪寬度）所以，保險一些，實際內(nèi)容區(qū)域為1170px像素，窄版為1000px像素。2.2關(guān)于布局目前很多網(wǎng)站因為想要做成自適應(yīng)寬度的效果，會采用柵格系統(tǒng)設(shè)計頁面，比較出名的如960px網(wǎng)格系統(tǒng)（http:/960.gs/）等，前兩年這是非常流行的設(shè)計方法，但這兩年，貌似網(wǎng)頁設(shè)計又從新回歸了比較隨意的排版方式，可能是因為近兩年手機(jī)UI的崛起，大部分網(wǎng)站會針對手機(jī)制作專門的網(wǎng)頁，不會像前幾年那樣一稿適配，所以，個人觀點，如果一稿適配手

7、機(jī)和web端，那就用柵格系統(tǒng)設(shè)計設(shè)計稿，如果手機(jī)端單獨設(shè)計，那就隨意。2.3關(guān)于導(dǎo)航不同于移動端，網(wǎng)頁端的設(shè)計因為欄目的眾多，導(dǎo)航的樣式就尤為重要。我這里說一些可以注意的地方。首頁內(nèi)容較多，以及滾屏的網(wǎng)站，可以固定導(dǎo)航欄在窗口，或者在網(wǎng)頁右邊添加回到頂部的跳轉(zhuǎn)按鈕，方便用戶跳轉(zhuǎn)欄目。二級菜單較多的網(wǎng)站，需要注意菜單展開的方式。3.文檔規(guī)范整理保存3.1文檔命名文檔的建立和命名規(guī)范這里以我自己的方式寫，如果有更科學(xué)合理的規(guī)范，可以進(jìn)行修改。每個項目開始的時候，需要建立一個以項目名稱命名的文檔。每個項目文檔里面加分文件夾（1），資料文件夾放項目原形文檔，資料圖片，等等準(zhǔn)備工作文件，有時我也喜歡把圖

8、標(biāo)設(shè)計源文件放在這里。設(shè)計稿文件夾則放頁面設(shè)計稿。設(shè)計稿文件夾內(nèi)可以直接放設(shè)計文件，也可以像我一樣分PSD源文件和JPG格式兩個不同的文件夾，方便管理。（1）（2）3.2文件命名如圖，每個頁面為了方便后期按照順序查看，我都會在前面加上編號，登錄頁是0，后面依次按照導(dǎo)航菜單來分，一級菜單為整數(shù)1 2 3（如果一級菜單數(shù)量多過10，為了防止1和11這樣的排序干擾，則寫成01 02 - 03）等等往后排列，二級菜單為小數(shù)0.1 - 0.2 - 0.3等等依次排列，二級菜單內(nèi)的頁面按照先后順序我會再加上0.01 - 0.02 0.03 這樣的排序，這樣，在后期查看頁面順序的時候，就不會出現(xiàn)順序錯位的麻

9、煩了。除了編號，中文命名就直接用菜單欄和每一頁的功能名稱就好。注意：PSD源文件請設(shè)計師在設(shè)計的時候，就注意分組命名，這是一個良好的設(shè)計習(xí)慣，也方便其他同事查看修改。4.文字使用規(guī)范4.1字體網(wǎng)頁中因為電腦自帶字體的限制，所以凡是文字部分都需要使用電腦自帶字體。如：微軟雅黑，黑體，宋體。特殊字體只能切成圖片。注意：因為設(shè)計版權(quán)等原因，特殊字體也請避開方正等版權(quán)字體，防止字體侵權(quán)。4.2字號（這里舉例大多數(shù)情況，特殊情況可以特殊處理）（1）文字的字號盡量選擇12、14、16等偶數(shù)字號，文字最小不能小于12號。（很多閱覽器甚至為了保證不能因為字號太小影響閱讀，小于12號的文字全都強(qiáng)制顯示12號大小

10、。）（2）導(dǎo)航文字及頭部底部文字的字號：頁眉（Header）導(dǎo)航文字12號或14號；菜單（Menu）導(dǎo)航文字1418號；工具條（Sidebar）文字12號或14號，一級菜單使用14號、二級菜單使用12號，或一級菜單使用12號加粗、二級菜單使用12號； 頁腳（Footer）文字12號或14號。（3）正文：大標(biāo)題文字2432號；標(biāo)題文字16或18號；正文文字12號或14號。可根據(jù)實際情況加粗。（4）按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字1416號，可根據(jù)實際情況調(diào)整大小或加粗。（5）廣告語及特別情況則需根據(jù)文字的實際情況設(shè)計字號。（6）同一層級的字號搭配應(yīng)該保持一致。比如，同一層級的版塊

11、中標(biāo)題文字和內(nèi)容文字大小的一致性。5.圖標(biāo)設(shè)計規(guī)范網(wǎng)頁設(shè)計內(nèi)小圖標(biāo)的引用沒有移動端設(shè)計中應(yīng)用那么廣泛，但是具體色設(shè)計規(guī)范都是一樣的。都需要風(fēng)格統(tǒng)一，視覺統(tǒng)一。5.1圖標(biāo)繪制圖標(biāo)須遵圖標(biāo)循柵格系統(tǒng)規(guī)范圖標(biāo)舉例：5.2小圖標(biāo)類型同一產(chǎn)品中，盡量使用同種類型風(fēng)格的小圖標(biāo)。同一欄目小圖標(biāo)則要求完全統(tǒng)一類型和風(fēng)格。其中扁平線性正負(fù)形圖標(biāo)經(jīng)常成對出現(xiàn)，表示點擊前和點擊后兩種狀態(tài)。線性圖標(biāo)舉例：小圖標(biāo)繪制方法不限，一般以PS布爾運算和AI描邊為主要繪制方法，需要精確控制線條的粗細(xì)統(tǒng)一。請注意小圖標(biāo)的圖形務(wù)必保留矢量圖形，不能用位圖，不然后期切圖適配各種屏幕尺寸圖形會變虛。6.按鈕設(shè)計規(guī)范（WEB手機(jī)通用）6

12、.1按鈕的狀態(tài)按鈕一共有四種狀態(tài)。normal：正常情況下的狀態(tài)。Highlighted/Press：突出顯示，按壓，即用戶點擊按鈕不放時按鈕的狀態(tài)。Selected/Hover：選中狀態(tài)，鼠標(biāo)懸停狀態(tài)。Dissbled/Inactive：不可用，失效狀態(tài)。很多按鈕只需要定義正常和按下兩種狀態(tài)就夠了，部分按鈕需要單獨區(qū)分選中狀態(tài)和不可用狀態(tài)。例子：6.2按鈕的形狀相同功能的按鈕尺寸和圓角度數(shù)虛要保持統(tǒng)一。6.3按鈕的大小手機(jī)端因為需要保證按鈕的最佳點擊區(qū)域，所以一般按鈕的點擊范圍至少都要在高度30px以上。具體大小還會根據(jù)實際情況變化。 7.LOGO網(wǎng)站中一般會著重強(qiáng)調(diào)品牌形象，這時候需要提前

13、定義Logo在各種場合的排布方式。例子：8.檢查產(chǎn)品設(shè)計以及頁面需要遵循的交互原則（WEB手機(jī)通用）8.1尼爾森十大可用性原則（1）狀態(tài)可見原則用戶在網(wǎng)頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應(yīng)即時給出反饋?！凹磿r”是指，頁面響應(yīng)時間小于用戶能忍受的等待時間。 開始時間、執(zhí)行百分比動態(tài)顯示（2）環(huán)境貼切原則網(wǎng)頁的一切表現(xiàn)和表述，應(yīng)該盡可能貼近用戶所在的環(huán)境（年齡、學(xué)歷、文化、時代背景），而不要使用第二世界的語言。iPhone人機(jī)交互指南里提到的隱喻與擬物化是很好的實踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。 使用用戶熟悉的表述和名詞（3）撤銷重做原則為了避免用戶的誤用和誤擊，網(wǎng)頁應(yīng)提

14、供撤銷和重做功能。撤銷也要保存用戶曾經(jīng)的信息（4）一致性原則同一用語、功能、操作保持一致。（5）防錯原則通過網(wǎng)頁的設(shè)計、重組或特別安排，防止用戶出錯。（6）易取原則好記性不如爛筆頭。盡可能減少用戶回憶負(fù)擔(dān)，把需要記憶的內(nèi)容擺上臺面。動作和選項應(yīng)該是可見的。 不應(yīng)該讓用戶記住操作路徑和目標(biāo)位置（7）靈活高效原則中級用戶的數(shù)量遠(yuǎn)高于初級和高級用戶數(shù)。為大多數(shù)用戶設(shè)計，不要低估，也不可輕視，保持靈活高效。 為大多數(shù)用戶設(shè)計，兼容少部分特殊用戶（8）易掃原則互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關(guān)信息。（9）容錯原則幫助用戶從錯誤中恢復(fù)，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼，比如404。如果用戶“反悔”，可以直接在回收站恢復(fù)內(nèi)容。（10）人性化幫助原則幫助性提示最好的方式是：1、無需提示；