一、畫布與內(nèi)容區(qū)

1. 考慮設(shè)備分辨率

從 0 到 1 設(shè)計(jì)網(wǎng)站，（除了產(chǎn)品用戶調(diào)研外）首先第一步就是新建畫布，畫布的尺寸取決于應(yīng)用設(shè)備分辨率的市場(chǎng)占有率，下圖是網(wǎng)上可查到的 2021 年 PC 端分辨率的市場(chǎng)占比表。

表中可看出「1920*1080」分辨率是市場(chǎng)占比最高的分辨率，可以以這個(gè)分辨率為基準(zhǔn)進(jìn)行設(shè)計(jì)。排名前三的分辨率「1920*1080」、「1366*768」、「1440*900」市場(chǎng)占比達(dá)到了 62.75%，因此也可以基于兼容性原則，考慮小屏適配大屏優(yōu)于大屏適配小屏，選擇「1440*900」為設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)。目前阿里巴巴和 Meterial Design 的 B 端對(duì)外規(guī)范中，都是使用的 1440 這個(gè)分辨率尺寸。

如果你做的網(wǎng)站是面向某個(gè)確定的群體，也可以以真實(shí)用戶的設(shè)備作為基準(zhǔn)，例如若公司員工都是使用分辨率為「1366*768」的筆記本辦公，那么面向內(nèi)部的網(wǎng)站就可以直接選擇該分辨率作為畫布標(biāo)準(zhǔn)。

2. 首屏高度

網(wǎng)頁的特性之一是必須在瀏覽器內(nèi)打開，因此除了電腦分辨率，還需考慮瀏覽器占用高度，在非全屏打開時(shí)，甚至需要考慮電腦系統(tǒng)本身占用高度。

電腦系統(tǒng)會(huì)占用高度的有菜單欄和程序塢（或稱任務(wù)欄），如下圖所示：

圖片瀏覽器占用高度，需考慮的瀏覽器功能區(qū)如頁簽欄、地址欄和書簽欄，如下圖：

主流瀏覽器界面參數(shù)可參考：

因此，嚴(yán)格來看真實(shí)首屏高度可以選擇為電腦分辨率高度-瀏覽器高度-電腦系統(tǒng)占用高度，寬松點(diǎn)看，可以只考慮電腦分辨率高度-瀏覽器高度。

二、導(dǎo)航選擇

常見的導(dǎo)航模式有左導(dǎo)航和頂導(dǎo)航：

2004 年，學(xué)者 JR Kingsburg 在《A comparison of three-level menu navigation structures for web design》論文中做過側(cè)導(dǎo)航與頂導(dǎo)航可用性研究，在論文中，他實(shí)驗(yàn)了 8 種導(dǎo)航模式（ 左導(dǎo)航 / 側(cè)導(dǎo)航 x 一級(jí)/二級(jí)/三級(jí)導(dǎo)航） 對(duì)用戶導(dǎo)航時(shí)間、猶豫度、鼠標(biāo)移動(dòng)過程、錯(cuò)誤選擇次數(shù)的影響，并對(duì)這 8 種導(dǎo)航模式進(jìn)行了整體評(píng)價(jià)排名。

實(shí)驗(yàn)結(jié)論是當(dāng)一級(jí)導(dǎo)航為側(cè)導(dǎo)航時(shí)，效率高、遲疑和錯(cuò)誤更少，用戶也較喜歡。

但也沒必要因此抹殺頂導(dǎo)航，實(shí)驗(yàn)室的實(shí)驗(yàn)是有局限性的，論文中，被試的任務(wù)都是具體的「購(gòu)買 XXX」，而我們實(shí)際上逛商城的時(shí)候也會(huì)有「不知道要買什么，隨便逛逛」的場(chǎng)景。

我認(rèn)為對(duì)實(shí)驗(yàn)結(jié)論更好的解讀方式是側(cè)導(dǎo)航便于用戶閱讀和理解導(dǎo)航菜單，更好地幫助用戶完成任務(wù)。原理或許可以解釋為側(cè)導(dǎo)航的畫面占比相對(duì)頂導(dǎo)航要大得多，展示空間比較大。使用側(cè)導(dǎo)航時(shí)自然換行比頂導(dǎo)航的間距更利于用戶斷句，自然更容易閱讀理解。加上側(cè)導(dǎo)航的二級(jí)菜單是穩(wěn)定展示的（而頂導(dǎo)航通常在鼠標(biāo)挪走后就消失），所以能夠幫助用戶更高效地完成任務(wù)。

但側(cè)導(dǎo)航也因其導(dǎo)航占用面積較大，不利于內(nèi)容展示。

我們可以通過觀察市面上的網(wǎng)頁來總結(jié)規(guī)律，（如果先不看那些側(cè)導(dǎo)航與頂導(dǎo)航結(jié)合使用的網(wǎng)站的話）使用側(cè)導(dǎo)航的網(wǎng)站如郵箱類網(wǎng)站、后臺(tái)類網(wǎng)站、機(jī)酒購(gòu)票網(wǎng)站都是任務(wù)型的網(wǎng)站；使用頂導(dǎo)航的網(wǎng)站如圖片素材類、圖文消費(fèi)類、視頻類網(wǎng)站都是內(nèi)容型的網(wǎng)站。

那是否可以下結(jié)論說側(cè)導(dǎo)航適合任務(wù)型網(wǎng)站，頂導(dǎo)航適合內(nèi)容型網(wǎng)站呢？我們還可以通過觀察同一個(gè)網(wǎng)站在不同場(chǎng)景下的設(shè)計(jì)來印證這個(gè)觀點(diǎn)。下圖是百度在搜索場(chǎng)景和個(gè)人中心的兩個(gè)頁面，在搜索場(chǎng)景用戶主要訴求是通過瀏覽搜索結(jié)果獲取信息，采用頂導(dǎo)航，讓出大量空間給內(nèi)容呈現(xiàn)；在個(gè)人中心，用戶的主要訴求大概率是某個(gè)具體的任務(wù)（比如換個(gè)頭像、改個(gè)名字，或找自己某個(gè)收藏過的內(nèi)容），使用側(cè)導(dǎo)航方便用戶快速找到想要的功能。

可以說「任務(wù)型網(wǎng)站使用左導(dǎo)航，內(nèi)容型產(chǎn)品使用頂導(dǎo)航」是設(shè)計(jì)師們的共識(shí)了。還有一些網(wǎng)站會(huì)選擇頂導(dǎo)航與側(cè)導(dǎo)航的結(jié)合，頂導(dǎo)航放置一些通用功能如登陸、設(shè)置、全局搜索。

三、布局與適配

側(cè)導(dǎo)航的寬度通常設(shè)置為「200+8n」，從 208 到 272 都有網(wǎng)站使用。頂導(dǎo)航高度沒有比較通用的規(guī)范，從 36 到 80 都有使用案例，選擇合適的高度即可。

不同的 PC 端分辨率有不同的內(nèi)容區(qū)大小參考，以下是一些網(wǎng)絡(luò)數(shù)據(jù)，僅供參考：

實(shí)際使用時(shí)會(huì)結(jié)合安全寬度范圍 + 適配方式 + 柵格體系確定最終的內(nèi)容區(qū)。

接下來就來講講適配方式，適配方式主要有三種：

1. 固定寬度
2. 自適應(yīng)
3. 響應(yīng)式

1. 固定寬度

顧名思義，就是頁面元素固定大小的適配方式，優(yōu)缺點(diǎn)很明顯，成本低，兼容性差。

2. Responsive layout

因?yàn)樽赃m應(yīng)布局和響應(yīng)式布局這倆術(shù)語太接近了，常因口誤&翻譯造成混淆，所以用英文來指代。Responsive layout 簡(jiǎn)單來說就是把原本用 px 為單位值實(shí)現(xiàn)的設(shè)計(jì)以百分比或 rem 實(shí)現(xiàn)，使得網(wǎng)頁在整體布局不變的情況下，網(wǎng)頁元素可以在不同分辨率上得以呈現(xiàn)。

Responsive layout ?；跂鸥裣到y(tǒng)實(shí)現(xiàn)。柵格系統(tǒng)是指將頁面或應(yīng)用程序劃分為等寬的列和行，以便于內(nèi)容的排列和布局，最基本的柵格系統(tǒng)由 column 和 gutter 組成（避免翻譯帶來的歧義就不翻譯了），有的系統(tǒng)還會(huì)設(shè)置 margin。

我們常誤以為柵格系統(tǒng)只有 PC 端網(wǎng)站才會(huì)使用，但我翻看 line 的設(shè)計(jì)規(guī)范網(wǎng)站，發(fā)現(xiàn)它們也有使用柵格，移動(dòng)端有些規(guī)范很可能就是柵格系統(tǒng)的簡(jiǎn)化。

設(shè)置好柵格后，把 column 從固定的 px 值實(shí)現(xiàn)改為百分比或 rem 值實(shí)現(xiàn)就可以做到自適應(yīng)。

3. Adaptive layout

就是通過@media 媒體查詢，給不同大小的屏幕編寫不同的樣式代碼來實(shí)現(xiàn)響應(yīng)式的布局。缺點(diǎn)是多套樣式代碼會(huì)很繁瑣。

實(shí)際開發(fā)可以結(jié)合柵格布局+斷點(diǎn)設(shè)定來實(shí)現(xiàn) Adaptive layout。

提前和開發(fā)溝通好適配方式可以提高溝通和實(shí)現(xiàn)效率，例如提前設(shè)置好柵格系統(tǒng)，確認(rèn)布局方式后，可以規(guī)定設(shè)計(jì)新頁面時(shí)需要適配的最大和最小屏幕，在后續(xù)設(shè)計(jì)稿輸出時(shí)，提前規(guī)劃好布局。

作者：白話說交互