網頁設計規範

作者：龍 時(shí)間：2018-07-30 浏覽：

終于，經曆過長(cháng)篇大(dà)論網站的(de)原理(lǐ)與組成部分(fēn)後，我們要談談網站設計的(de)規範了(le)。網站設計并無具體平台限定的(de)風格，也(yě)沒有必須要設計的(de)系統級導航欄和(hé)工具欄。所以網站設計更加靈活，然而因爲太靈活也(yě)會讓我們的(de)設計師無從下(xià)手。那麽接下(xià)來(lái)我将介紹網站設計的(de)規範，在您工作的(de)時(shí)候可(kě)以參考。注意，在設計之前一定要和(hé)前端溝通(tōng)我們使用(yòng)的(de)尺寸、字體、交互等，這(zhè)樣有助于後期不會有誤會。

1. 畫(huà)闆尺寸

因爲網頁尺寸與用(yòng)戶屏幕相關，而用(yòng)戶屏幕的(de)種類難以統計。所以我們的(de)設計稿隻能主要顧及主流用(yòng)戶的(de)分(fēn)辨率，其他(tā)分(fēn)辨率用(yòng)适配的(de)方式來(lái)解決。在最新版 Photoshop 網站 Web 預設尺寸給了(le)我們一些啓示：常見尺寸（1366x768px）、大(dà)網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這(zhè)些是主流尺寸，而我們如果做(zuò)網站時(shí)建議(yì)按主流的(de)分(fēn)辨率1920x1080px來(lái)設計。所以我們通(tōng)常設計網站時(shí)的(de)網站寬度爲1920px，每個(gè)屏幕的(de)高(gāo)度約爲900px。爲什(shén)麽是900px呢(ne)？因爲1080還(hái)要減去浏覽器頭部和(hé)底部高(gāo)度，大(dà)約就是900px了(le)。内容安全區(qū)域爲1200px （或1000px / 1400px）。以這(zhè)個(gè)尺寸來(lái)設計相對(duì)标準。當然在設計網頁前需要知會前端設計尺寸，因爲對(duì)于适配的(de)方式和(hé)後續配合他(tā)們更有發言權。

2. 文字規範

我們現在都知道了(le)網站上面的(de)文字是通(tōng)過前端工程師重新寫在代碼裏的(de)。那這(zhè)種文字在浏覽器上的(de)渲染與系統和(hé)浏覽器有關。比如在蘋果電腦(nǎo)上看到的(de)文字效果和(hé) Windows 系統電腦(nǎo)上看到的(de)文字效果就有所不同：蘋果會對(duì)文字進行渲染，而 windows 的(de)文字幾乎充滿了(le)像素顆粒。按照(zhào)用(yòng)戶占比來(lái)說無疑 Windows 的(de)用(yòng)戶是主流，所以盡管我們可(kě)能使用(yòng)蘋果電腦(nǎo)設計網頁，但是設計出來(lái)的(de)網頁效果也(yě)應該和(hé) Windows 顯示一緻。否則我們設計完漂亮的(de)設計稿，程序員(yuán)無法還(hái)原成我們設計的(de)樣子。另外，字号的(de)大(dà)小也(yě)非常重要。網頁的(de)顯示區(qū)域決定了(le)文字不可(kě)以過大(dà)，在網站設計中我們的(de)文字大(dà)小一般來(lái)說是12-20像素。爲什(shén)麽不能比12px更小？因爲如果比12像素更小的(de)中文無法放得(de)下(xià)複雜(zá)的(de)筆畫(huà)了(le)。而且奇數的(de)文字表現和(hé)适配都不好做(zuò)，也(yě)就是說我們必須使用(yòng)偶數的(de)字号來(lái)設計。那麽總結一下(xià)：文字使用(yòng)宋體、大(dà)小爲12px、渲染方式選擇無。稍大(dà)一些的(de)字體使用(yòng)微軟雅黑(hēi)、大(dà)小爲14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和(hé)數字需使用(yòng) Arial字體，渲染方式選擇無。

3. 圖片規範

網站設計中的(de)圖片常用(yòng)4（寬）：3（高(gāo)）、16（寬）：9（高(gāo)）、1:1等比例。具體圖片大(dà)小沒有固定要求，但整數和(hé)偶數爲佳。主要是考慮到一些适配的(de)問題。作爲内容出現的(de)圖片一定需要有介紹信息和(hé)排序信息。圖片的(de)格式有很多(duō)，比如支持多(duō)級透明(míng)的(de) png 格式、圖片文件很小的(de) jpg 格式、支持透明(míng)/不透明(míng)并且支持動畫(huà)的(de) gif 格式等。在保證圖像清晰度地情況下(xià)文件大(dà)小越小越好，如何讓網頁使用(yòng)的(de)圖片更小呢(ne)？

第一種方法，給程序員(yuán)切圖的(de)時(shí)候我們可(kě)以适當縮小圖片文件的(de)大(dà)小。比如 Photoshop 中存儲爲 web 所用(yòng)格式就會比快(kuài)速存儲文件更小。

第二種方法，可(kě)以嘗試使用(yòng)例如 Tinypng、智圖等工具再次壓縮圖片。這(zhè)些工具會把圖片中的(de)多(duō)餘信息删除并且壓縮，而圖像質量不受損失。

第三種方法，Google 研發了(le)一種 Webp 格式，它的(de)圖片壓縮體積大(dà)約隻有 JPEG 的(de)2/3，能節省大(dà)量的(de)服務器寬帶資源。比如 Facebook、Ebay 還(hái)有我們設計師常用(yòng)的(de)站酷圖片存儲都是使用(yòng)了(le) Webp 圖片格式。

第四種方法，浏覽器和(hé)服務器握手時(shí)需要下(xià)載網頁所調用(yòng)的(de)圖片資源，那麽如果一個(gè)網站有一百張圖片的(de)話(huà)，浏覽器和(hé)服務器就得(de)握一百次。第一會耗費服務器資源，第二訪問速度就會慢(màn)一些。所以前端工程師們有一種做(zuò)法，就是把網頁中所使用(yòng)的(de)圖片拼成一大(dà)張 png。然後每個(gè)調用(yòng)圖片的(de)元素都調用(yòng)這(zhè)張圖片然後分(fēn)别位移一點兒(ér)，顯示的(de)那塊區(qū)域移動到一大(dà)張圖片中所需要的(de)那個(gè)圖像。

4. 按鈕

按鈕的(de)風格在過去的(de)十幾年發生了(le)很大(dà)的(de)變化(huà)，由一開始的(de)「斜面與浮雕」風格過渡到後面的(de)「拟物(wù)風格」，現在更流行的(de)是扁平風格。如果按鈕在一張圖片中，爲了(le)不影(yǐng)響圖片的(de)美(měi)觀性，會去掉填充隻保留邊框，這(zhè)種設計方式叫做(zuò)幽靈按鈕。注意在設計按鈕時(shí)記得(de)同時(shí)設計好按鈕的(de)鼠标懸停、按下(xià)狀态。

5. 表單

在網站設計中我們經常需要使用(yòng)一些輸入框、下(xià)拉菜單、彈窗(chuāng)、單選框、複選框、編輯器等。這(zhè)些都是系統級的(de)控件，一般是直接調用(yòng)系統設計的(de)。但是系統設計有時(shí)不能滿足我們的(de)要求：系統内置的(de)表單高(gāo)度不夠，點擊起來(lái)不舒服；不符合網站整體設計的(de)品牌感等。那麽我們可(kě)以通(tōng)過 CSS 給這(zhè)些表單增加樣式，包括顔色、大(dà)小、内外邊距等。所以我們遇到涉及到表單的(de)需求時(shí)也(yě)可(kě)以進行自定義設計。

6. 栅格

我們把整體寬度定義爲 W。然後整個(gè)寬度分(fēn)成多(duō)個(gè)等分(fēn)單元 A。每個(gè)單元 A 中有元素 a 和(hé)間距 i。所以他(tā)們之間的(de)關系就是 (A×n)-i=W。當然每個(gè)應用(yòng)的(de)尺寸不止可(kě)以整除成一種栅格，這(zhè)就要看我們内容排版的(de)疏密程度了(le)。之後，我們将過多(duō)内容的(de)栅格和(hé)另一個(gè)栅格相加得(de)到更大(dà)的(de)排版空間；其他(tā)元素都須老老實實呆在自己的(de)栅格内，這(zhè)樣就完成了(le)一個(gè)布局非常科學的(de)設計了(le)。 比如：

栅格系統具體有以下(xià)優勢：能大(dà)大(dà)提高(gāo)網頁的(de)規範性。在栅格系統下(xià)，頁面中所有組件的(de)尺寸都是有規律的(de)。另外，基于栅格進行設計，可(kě)以讓整個(gè)網站各個(gè)頁面的(de)布局保持一緻。這(zhè)能增加頁面的(de)相似度，提升用(yòng)戶體驗。

7. 适配Retina屏幕

2012年蘋果發布了(le) Retina Macbook Pro，Retina 屏幕的(de)電腦(nǎo)占有量越來(lái)越高(gāo)了(le)。Retina 屏幕簡單地說就是屏幕密度是傳統屏幕的(de)兩倍，擁有更大(dà)地清晰度。甚至可(kě)以滿足我們視網膜最高(gāo)的(de)識别度，所以也(yě)叫視網膜屏幕。這(zhè)種屏幕下(xià)我們設計的(de)安全距離大(dà)約爲1000像素的(de)網站就顯得(de)非常粗糙了(le)。所以如果我們現在 Retina 屏幕下(xià)顯示一個(gè)400X300PX的(de)區(qū)域，實際上我們需要提供給前端一張800X600PX的(de)切圖才行，因爲 Retina 屏幕一個(gè)點頂過去兩個(gè)像素。那麽我們的(de)用(yòng)戶是視網膜屏占比更多(duō)的(de)用(yòng)戶，比如設計師群體，那怎麽兼顧高(gāo)清屏幕和(hé)普通(tōng)屏幕呢(ne)？

首先我們需要以視網膜屏幕大(dà)小完成設計稿，建議(yì)是傳統設計稿的(de)兩倍。之後切出兩套切圖（非 Retina 屏幕用(yòng)戶如果也(yě)加載雙倍大(dà)小的(de)資源會很慢(màn)），普通(tōng)的(de)切圖命名爲如logo.jpg，Retina切圖命名爲logo@2x.jpg。前端用(yòng)代碼來(lái)識别，如果屏幕是 Retina 就加載雙倍尺寸，不是則加載普通(tōng)尺寸。前端可(kě)以使用(yòng) Retina.js提供的(de)技術進行識别。

8. 自适應與響應式網站

我們看到有些網站使用(yòng)電腦(nǎo)端或者手機端甚至 iPad 去浏覽時(shí)體驗都非常好。這(zhè)就需要我們爲了(le)用(yòng)戶體驗而進行網站的(de)自适應或響應式布局了(le)。響應式與自适應的(de)原理(lǐ)是相似的(de)，都是通(tōng)過代碼檢測設備屏幕寬度，根據不同的(de)設備加載不同的(de) css。

自适應網站

自适應網站的(de)設計稿是一緻的(de)，但是設計稿需要考慮屏幕變小時(shí)的(de)變化(huà)方式。比如一個(gè)網站的(de)内容有5個(gè)區(qū)塊和(hé)4個(gè)間距，那麽如果寬度縮小成900時(shí)需要如何變化(huà)，這(zhè)就是自适應布局。比如站酷網、Dribbble 等網站都采用(yòng)了(le)自适應布局。

響應式網站

響應式網站則需要設計不同版本的(de)設計稿，然後根據不同的(de)設備提供不同的(de) CSS 樣式。比如判定你設備的(de)寬度是750px，那麽網站就知道你使用(yòng)了(le)手機來(lái)訪問，就會給你導入一份手機才有的(de)樣式；如果是電腦(nǎo)的(de)寬度就給你導入電腦(nǎo)的(de) CSS 樣式。對(duì)于設計師來(lái)說，自适應需要考慮網站在不同設備寬度下(xià)的(de)整除與排版；響應式則需要設計電腦(nǎo)、平闆、手機等至少三套設計稿（但這(zhè)三套設計稿的(de)内容是一緻的(de)）。總之，自适應和(hé)響應式都是網站爲了(le)用(yòng)戶體驗所适應浏覽設備而做(zuò)出的(de)努力。

适配的(de)規範

手機方面：适配手機頁面時(shí)，我們一般以 iPhone 爲畫(huà)布标準。原因是 iPhone 相對(duì)顯示比較清晰，并且要求較高(gāo)。而且用(yòng)戶占有量也(yě)很高(gāo)。在适配時(shí)我們一般以750x1334px尺寸爲主，然後将網站導航改變爲手機 APP 常常使用(yòng)的(de)漢堡包+抽屜式導航的(de)形式。同時(shí)網站裏的(de)按鈕也(yě)需要變爲手機 APP 中我們看到的(de)左右幾乎滿屏的(de)按鈕，并且每個(gè)按鈕要大(dà)于88PX，方便手指的(de)點擊。字體方面，我們要把網站的(de)字體全部改爲蘋方字體，并且字号設置爲24PX以上，渲染方式設置成銳利。英文則需要使用(yòng) SF-UI 代替。也(yě)就是将網站改變成一個(gè)類 APP 的(de)手機網頁，這(zhè)樣才可(kě)以保證手機用(yòng)戶體驗良好。如果用(yòng)戶使用(yòng)安卓手機，那麽前端代碼則會基于設計稿的(de)設計适度加大(dà)圖片與間距來(lái)适應安卓屏幕。

iPad：iPad的(de)尺寸爲1024×768、2048x1536px等，無論怎麽變基本與電腦(nǎo)屏幕尺寸類似。所以在 iPad 上浏覽網頁是基本舒适的(de)。因此，很多(duō)網站并沒有專門爲 iPad 做(zuò)适配，如果我們希望 iPad 用(yòng)戶用(yòng)的(de)更爽，可(kě)以從文字大(dà)小（24PX以上）、按鈕大(dà)小（88PX左右以及以上）、交互形式（抽屜式導航、導航不随屏幕滾動）等方式入手。

總結

無論您面對(duì)的(de)項目是 To C 的(de)還(hái)是 To B 的(de)網站産品，我們都應該首先确立設計風格 > 尋找設計素材 > 建立情緒闆 > 完成視覺稿 > 切圖标注 > 建立視覺規範 > 進行項目走查。

如果設計一般網站的(de)頁面，可(kě)以按照(zhào)1920 X 1080px尺寸設計。每屏高(gāo)度900px，字體使用(yòng)宋體12px、無和(hé)微軟雅黑(hēi) 14-20、Windows LCD。Banner 盡量滿屏，但是圖片需要按照(zhào)4:3或16:9等比例來(lái)設計。做(zuò)網站時(shí)可(kě)以建立栅格以更好地進行自适應和(hé)響應式布局，我們也(yě)要爲超鏈接和(hé)按鈕設計不同的(de)相應鼠标的(de)狀态；另外我們也(yě)可(kě)以多(duō)多(duō)嘗試在網站設計中加入視差滾動、雪(xuě)碧圖動畫(huà)等好玩的(de)交互。

如果設計手機端的(de)頁面，可(kě)以按照(zhào)750X1334PX尺寸設計。字體使用(yòng)蘋方24PX以上、銳利。英文字體使用(yòng)SF UI。按鈕和(hé)點擊區(qū)域需要大(dà)于88PX方便手指點擊。并且頭部需要預留出微信或浏覽器的(de)導航區(qū)域。