PC 端網(wǎng)頁設計對于很多從事 UI 行業(yè)的新人來說是一個充滿未知的領域，對于怎么進行基本的畫布創(chuàng)建，規(guī)格設置，都處于兩眼一抹黑的狀態(tài)。雖然這是因為多數(shù)人沒有系統(tǒng)的學習 UI 知識，它并不是一個合理的現(xiàn)象。

網(wǎng)頁設計也需要從用戶的體驗角度出發(fā)，特別是寬度不超過一屏，其最基本的表現(xiàn)是瀏覽器不出現(xiàn)橫向滾動條。深圳網(wǎng)站設計公司大腕互聯(lián)專注網(wǎng)站建設，網(wǎng)頁設計等建站服務。

960像數(shù)這個神奇的數(shù)字出現(xiàn)之初，大家各說紛紜，有說是因為蘋果設計師在1024×768的分辨率下打開瀏覽器的寬度時974像數(shù)，減去瀏覽器的寬度本生的寬度14像數(shù)，這里這個神奇的960像數(shù)就這樣出生了;也有的說在人眼不轉(zhuǎn)動的情況下所能看到的最大的寬度是960像數(shù)。我相信說這話的人真是無時不刻不在考慮用戶體驗啊

接下來，我們會更新一些網(wǎng)頁設計的干貨，幫助更多 UI 設計師了解網(wǎng)頁設計的基礎知識。

首先，網(wǎng)頁設計的第一步就是畫布創(chuàng)建了，這也是困擾我們的第一個難題。由于市面上存在多種前端技術的應用，以及一些歷史遺留問題、設計場景差異等因素的影響，我們在搜索「網(wǎng)頁設計寬度」這類問題的時候，得到的結果會有非常多的版本，導致更加迷茫。

所以，了解網(wǎng)頁設計的寬度定義，勢必要理解它們的底層原因，因為寬度的設置：只有合適的寬度，沒有絕對正確的寬度。

對于任何網(wǎng)頁設計的項目，寬度設定的標準都是不同的，而在選擇寬度的過程里，需要考慮 2 個核心因素：

1. 設備因素

設備因素即確認項目主要展示的屏幕設備是哪一種，它們對應的分辨率是多少。最粗略的劃分，可以將設備劃分成 PC 端和移動端。這兩者受制與顯示的尺寸，系統(tǒng)的限制，在設計和操作上都有比較大的區(qū)別。

瀏覽設備

瀏覽設備即網(wǎng)頁用戶所使用的屏幕類型，主要考量的標準是屏幕的分辨率（長寬像素數(shù)）。常見的 PC 屏幕分辨率有 1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440 等，再加上一些更加不常見的（比如 surfacebook 的 3000×2000），可以列出數(shù)十種，這是大家都已經(jīng)知道的事情。

所以基于這個前提，很多人會去查找關于屏幕使用分辨率的統(tǒng)計表格，比如下圖這種，然后得出最常用的分辨率是 1080P。有了數(shù)據(jù)支撐，我們不就可以開始動手設計了？

實際上這個做法是錯誤的。對于網(wǎng)頁設計來說，我們首先應該確定的是──最小適配屏幕。

因為在一般場景下，顯示器分辨率如果大于畫布，內(nèi)容可以被我們正常訪問；如果小于畫布，內(nèi)容就會顯示不全，相當于低于這個分辨率設備的用戶被我們放棄了。

所以，做個簡單的計算，如果以 1920×1080 為基礎，則支持的用戶數(shù)為 27.38 %；如果是 800×600，則支持用戶數(shù)低于 3%。

這么考慮的話，我們是不是只要支持最小的分辨率即可？當然也不是。

在今天，1024 以下寬度的設備已經(jīng)非常稀少，即便是 1024 本身，主流的設備也是平板而不是一般的 PC 電腦。當這些設備的數(shù)量低到成為絕對的非主流時，是可以選擇忽略它們，以滿足更多人的需要。

所以通常，我們最低支持的分辨率，不是 1024×768 就是 1280×800。如果大家不相信，可以去各類網(wǎng)站中，用 QQ 截圖工具量一下主要內(nèi)容區(qū)域的寬度，很難出現(xiàn)大于這兩個數(shù)值的情況。

與門戶類相比電商的改版更徹底了，我們來看下主流電商現(xiàn)在的頁面寬度：京東1210像素、當當1200像素、1號店1200像素、新蛋1200像素、蘇寧易購1190像素、易訊1225像素、亞馬孫自適應(最小寬度980像素)。可以看出現(xiàn)在電商主流的頁面設計是1200像素。

先來分析下那個時代主流大戶時至今日的頁面寬度就5到6年前或許更早(下文中姑且說5年前)，大家討論頁面設計寬度時基本都在950像素到1000像素之間，用960像數(shù)來設計為大多數(shù)網(wǎng)頁設計師接受，包括直到現(xiàn)在960PX還是指導著絕大部分門戶類的設計。在那個流行960像素的時代騰訊用的是910像素，而在今年騰訊的新首頁已改版為1000像素。與騰訊同步的還有比如鳳凰網(wǎng)、新華網(wǎng)(在這里吐槽下新華網(wǎng)頁面最外面的黑框)也是1000像素。搜狐、新浪依舊是950像素，網(wǎng)易保持960像素。淘寶網(wǎng)首頁1000像素(淘寶子頻道頁比如：點卡950像素、男裝990像素等各部相同)，淘寶系列新推的網(wǎng)站比如：聚劃算990像素、天貓970像素、天貓電器城990像素、一淘網(wǎng)1200像素。

與門戶類相比電商的改版更徹底了，我們來看下主流電商現(xiàn)在的頁面寬度：京東1210像素、當當1200像素、1號店1200像素、新蛋1200像素、蘇寧易購1190像素、易訊1225像素、亞馬孫自適應(最小寬度980像素)。可以看出現(xiàn)在電商主流的頁面設計是1200像素。

2. 展示類型

展示類型，也只有兩點，即寬度適應屏幕，或者是定寬。

先說說第一種，可能有不少人已經(jīng)聽過響應式布局和自適應設計的大名，先不論它們有什么區(qū)別，它們代表了網(wǎng)頁顯示內(nèi)容隨瀏覽器窗口尺寸變化而變化的技術，比如使用 Bootstrap 架構的星巴克官網(wǎng)，更改瀏覽器窗口寬度后，可以得到以下不同的結果。

如果你現(xiàn)在還需要通過這篇內(nèi)容學習網(wǎng)頁寬度制定的情況下，我是不建議在真實項目中使用這種展示類型的。因為它們都需要對前端架構有一定的熟悉，以及對 CSS 的屬性特性有基本認識，否則就無法在設計過程中直接考慮到其它分辨率下顯示的效果，以及制定不同元素的自適應方式。

響應式設計的規(guī)則非常靈活，會受到更多因素的影響，完整的響應式界面設計會如上圖所示，提供多種尺寸的設計圖。常見的如 1920、1080、640 寬。

如果是定寬的設計，那么就回到前面所說，我們只需要以適配 1280 或 1024 的屏幕展開設計即可。但是，網(wǎng)頁的實際內(nèi)容區(qū)域，和我們要適配的范圍是不同的。

在瀏覽器中，首先有右側(cè)滾動條的因素影響，并且主體內(nèi)容的兩側(cè)也要預留出內(nèi)邊距。

所以，我們真正創(chuàng)建的網(wǎng)頁內(nèi)容區(qū)域，是小于 1280 或者 1024 的。而得出具體的內(nèi)容區(qū)域尺寸的方法，是通過網(wǎng)頁的刪格系統(tǒng)計算出來的。

網(wǎng)頁刪格系統(tǒng)是由平面網(wǎng)格系統(tǒng)衍生出來，針對網(wǎng)頁使用的排版系統(tǒng)。

如果選擇適配 1280，那么設計內(nèi)容的區(qū)域?qū)捦ǔ?1180、1190。而在適配 1024 下，那么內(nèi)容區(qū)域?qū)挸Ｒ姷木陀?950、970、990 等。當我們創(chuàng)建完完整分辨率的畫布，再通過參考線的方式將內(nèi)容區(qū)域規(guī)劃出來即可。

對于網(wǎng)頁設計來說，最重要的參數(shù)就是內(nèi)容區(qū)域的寬度，但也有一些元素是例外，很多人可能發(fā)現(xiàn)網(wǎng)頁有一些元素是超過正常的內(nèi)容區(qū)域的（無論是對一般顯示模式或是自適應模式），最常見的就是頂部的導航欄和底部的頁腳區(qū)域。比如打開淘寶無論拉伸得多長，內(nèi)容區(qū)域固定是 1190 寬，而導航欄卻永遠撐滿整個瀏覽器。

所以，我們不會將這些內(nèi)容的寬度計算在內(nèi)，在設計稿中只要設計了這樣的元素，和前端人員適當溝通和標注，就可以獲得想要的效果。