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

一、網(wǎng)頁尺寸

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

二、文字規(guī)范

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

網(wǎng)頁字體設(shè)計(jì)規(guī)范

三、圖片規(guī)范

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

四、按鈕設(shè)計(jì)

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

五、表單設(shè)計(jì)

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

六、自適應(yīng)與響應(yīng)式網(wǎng)站

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

1、自適應(yīng)網(wǎng)站

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

2、響應(yīng)式網(wǎng)站

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

3、適配的規(guī)范

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

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

參考鏈接：

http://gagu89.com/seojianzhan/17709.html

修改于：2024-08-26