隨著用戶認知提升，網頁設計也在不斷的向前發(fā)展，同時也逐步形成了一些規(guī)范，比如網頁尺寸、文字規(guī)范、圖片規(guī)范、按鈕設計、表單設計、自適應設計與響應設計等。接下來小編跟你詳細分享網頁設計規(guī)范，以便您在設計之前一定要和前端溝通使用的尺寸、字體、交互等，這樣有助于后期，不會有誤會。

一、網頁尺寸

因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統(tǒng)計。所以設計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在最新版 Photoshop 網站 Web 預設尺寸給了一些啟示：常見尺寸（1366x768px）、大網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等，這些是主流尺寸，如果做網站時建議按主流的分辨率1920x1080px來設計，通常設計網站時的網站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內容安全區(qū)域為1200px （或1000px / 1400px）。以這個尺寸來設計相對標準。當然在設計網頁前需要知會前端設計尺寸，因為對于適配的方式和后續(xù)配合他們更有發(fā)言權。

二、文字規(guī)范

網站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關。比如在蘋果電腦上看到的文字效果和 Windows 系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會對文字進行渲染，而 windows 的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑 Windows 的用戶是主流，所以盡管使用蘋果電腦設計網頁，但是設計出來的網頁效果也應該和 Windows 顯示一致。否則設計完成的設計稿，程序員無法還原成設計的樣子。另外，字號的大小也非常重要。網頁的顯示區(qū)域決定了文字不可以過大，在網站設計中文字大小一般來說是12-20像素。為什么不能比12px更小？因為如果比12像素更小的中文無法放得下復雜的筆畫了。而且奇數的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數的字號來設計。那么總結一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數字需使用 Arial字體，渲染方式選擇無。

網頁字體設計規(guī)范

三、圖片規(guī)范

網站設計中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數和偶數為佳。主要是考慮到一些適配的問題。作為內容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動畫的 gif 格式等。

四、按鈕設計

按鈕的風格在過去的十幾年發(fā)生了很大的變化，由一開始的「斜面與浮雕」風格過渡到后面的「擬物風格」，現(xiàn)在更流行的是扁平風格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會去掉填充只保留邊框，這種設計方式叫做幽靈按鈕。注意在設計按鈕時記得同時設計好按鈕的鼠標懸停、按下狀態(tài)。

五、表單設計

在網站設計中經常需要使用一些輸入框、下拉菜單、彈窗、單選框、復選框、編輯器等。這些都是系統(tǒng)級的控件，一般是直接調用系統(tǒng)設計的。但是系統(tǒng)設計有時不能滿足我們的要求：系統(tǒng)內置的表單高度不夠，點擊起來不舒服；不符合網站整體設計的品牌感等。那么可以通過 CSS 給這些表單增加樣式，包括顏色、大小、內外邊距等。所以遇到涉及到表單的需求時也可以進行自定義設計。

六、自適應與響應式網站

有些網站使用電腦端或者手機端甚至 iPad 去瀏覽時體驗都非常好。這就需要為了用戶體驗而進行網站的自適應或響應式布局了。響應式與自適應的原理是相似的，都是通過代碼檢測設備屏幕寬度，根據不同的設備加載不同的 css。

1、自適應網站

自適應網站的設計稿是一致的，但是設計稿需要考慮屏幕變小時的變化方式。比如一個網站的內容有5個區(qū)塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應布局。

2、響應式網站

響應式網站則需要設計不同版本的設計稿，然后根據不同的設備提供不同的 CSS 樣式。比如判定你設備的寬度是750px，那么網站就知道你使用了手機來訪問，就會給你導入一份手機才有的樣式；如果是電腦的寬度就給你導入電腦的 CSS 樣式。對于設計師來說，自適應需要考慮網站在不同設備寬度下的整除與排版；響應式則需要設計電腦、平板、手機等至少三套設計稿（但這三套設計稿的內容是一致的）?？傊赃m應和響應式都是網站為了用戶體驗所適應瀏覽設備而做出的努力。

3、適配的規(guī)范

手機方面：適配手機頁面時，我們一般以 iPhone 為畫布標準。原因是 iPhone 相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時我們一般以750x1334px尺寸為主，然后將網站導航改變?yōu)槭謾C APP 常常使用的漢堡包+抽屜式導航的形式。同時網站里的按鈕也需要變?yōu)槭謾C APP 中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個按鈕要大于88PX，方便手指的點擊。字體方面，我們要把網站的字體全部改為蘋方字體，并且字號設置為24PX以上，渲染方式設置成銳利。英文則需要使用 SF-UI 代替。也就是將網站改變成一個類 APP 的手機網頁，這樣才可以保證手機用戶體驗良好。如果用戶使用安卓手機，那么前端代碼則會基于設計稿的設計適度加大圖片與間距來適應安卓屏幕。

優(yōu)化猩SEO：網頁設計一定要注重規(guī)范，有規(guī)范的網頁呈現(xiàn)在用戶面前會更能體現(xiàn)專業(yè)性，同時，網頁設計一定要網頁的適配性設計，移動端用戶的使用用戶已經超過了電腦端，絕不能忽視移動端用戶體驗設計。

參考鏈接：

http://www.sonygallery.com.cn/seojianzhan/17709.html

修改于：2024-08-26