更多網站設計干貨：

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

1. 考慮設備分辨率

從 0 到 1 設計網站，（除了產品用戶調研外）首先第一步就是新建畫布，畫布的尺寸取決于應用設備分辨率的市場占有率，下圖是網上可查到的 2021 年 PC 端分辨率的市場占比表。

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

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

2. 首屏高度

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

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

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

主流瀏覽器界面參數可參考：

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

二、導航選擇

常見的導航模式有左導航和頂導航：

2004 年，學者 JR Kingsburg 在《A comparison of three-level menu navigation structures for web design》論文中做過側導航與頂導航可用性研究，在論文中，他實驗了 8 種導航模式（ 左導航 / 側導航 x 一級/二級/三級導航） 對用戶導航時間、猶豫度、鼠標移動過程、錯誤選擇次數的影響，并對這 8 種導航模式進行了整體評價排名。

實驗結論是當一級導航為側導航時，效率高、遲疑和錯誤更少，用戶也較喜歡。

但也沒必要因此抹殺頂導航，實驗室的實驗是有局限性的，論文中，被試的任務都是具體的「購買 XXX」，而我們實際上逛商城的時候也會有「不知道要買什么，隨便逛逛」的場景。

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

但側導航也因其導航占用面積較大，不利于內容展示。

我們可以通過觀察市面上的網頁來總結規(guī)律，（如果先不看那些側導航與頂導航結合使用的網站的話）使用側導航的網站如郵箱類網站、后臺類網站、機酒購票網站都是任務型的網站；使用頂導航的網站如圖片素材類、圖文消費類、視頻類網站都是內容型的網站。

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

可以說「任務型網站使用左導航，內容型產品使用頂導航」是設計師們的共識了。還有一些網站會選擇頂導航與側導航的結合，頂導航放置一些通用功能如登陸、設置、全局搜索。

三、布局與適配

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

不同的 PC 端分辨率有不同的內容區(qū)大小參考，以下是一些網絡數據，僅供參考：

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

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

1. 固定寬度
2. 自適應
3. 響應式

1. 固定寬度

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

2. Responsive layout

因為自適應布局和響應式布局這倆術語太接近了，常因口誤&翻譯造成混淆，所以用英文來指代。Responsive layout 簡單來說就是把原本用 px 為單位值實現的設計以百分比或 rem 實現，使得網頁在整體布局不變的情況下，網頁元素可以在不同分辨率上得以呈現。

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

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

設置好柵格后，把 column 從固定的 px 值實現改為百分比或 rem 值實現就可以做到自適應。

3. Adaptive layout

就是通過@media 媒體查詢，給不同大小的屏幕編寫不同的樣式代碼來實現響應式的布局。缺點是多套樣式代碼會很繁瑣。

實際開發(fā)可以結合柵格布局+斷點設定來實現 Adaptive layout。

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

歡迎關注作者微信公眾號：「白話說交互」