2022-9-8 博博
在選擇網頁設計尺寸時，我們并非只讓產品在部分設備上對訪問者保持可訪問性以及吸引力，而是希望他們無論使用什么設備都可以更好的進行體驗瀏覽。
在早期的設計中我們可能需要針對不同的分辨率輸出不一樣的設計稿，但現在大部分網站平臺都是響應式，這意味著我們只需要做一個在不同設備上都兼容良好的設計即可。
因此我們可以得出B端Web設計中采用主流的最大寬度并非最佳選擇，而是要基于不同設備上的尺寸選擇最具合適的那個。
由于Web端分辨率太分散，我們只考慮占比最大的前幾個，根據百度流量學院里面有關PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。
這三個主流的尺寸在市場中總計占比70.38%，意味著這幾個分辨率的市場占有率體量巨大。它的背后說明了16:9的分辨率已經逐漸的形成一定的規模和使用習慣，我們只需要按照當下主流的分辨率進行針對性的設計即可。
設計稿可在1920、1440以及1366這三個尺寸中進行選擇。
為了更好的在不同的尺寸中都保持體驗的一致性，兼容性原則作為我們選擇最主要的設計標準。
更直白點就是設計尺寸在放大或者縮小的情況下都可以減少因為分辨率帶來的差異性。因此以1440作為基礎的設計尺寸的話，向上或向下適配誤差會較小。
那么假設我們用1366的尺寸做設計稿適配到1920的界面上，界面看上去肯定會特別松散。反之，如果我們用1920的尺寸適配到1366上，界面又會顯得擁擠，甚至可能會出現錯位，這個時候，就只剩下1440的尺寸最適合做設計稿。
設計分辨率的建立要優先考慮目標用戶主要使用的設備，以真實的用戶的應用設備作為基準。這個基準以外的分辨率都是可以進行次要考慮。
由于B端的業務屬性，它需要滿足更細分、特定的商業目標受眾，我們對其進行定制化需求設計。
通過前期調研，發現該集團所有的操作電腦都是由企業統一派發的24寸、分辨率為1920×1080顯示器。那么我們在設計中只需要選擇該分尺寸即可，不需要考慮上下兼容的事。
同理，假如我們的目標用戶都使用1366寬的商務筆記本，那么我們的設計尺寸則可以改為1366×768。
當我們確定好設計尺寸是1440×900后，最好不要直接使用900作為基礎的設計高度，那么高度該如何定義呢。
這里我們不得不提首屏的概念，它指的是不滾動web網頁屏幕的情況下就能被用戶看到的畫面。
根據尼爾森的可用性研究報告，首屏的關注度在80.3%，首屏以下的關注度僅有19.7%，這兩個數據足以表明每一個需要轉化率的網站首屏的重要性，因此我們需要掌握頁面高度，盡可能的把頁面中重要信息在首屏展示。
B端web界面的展示依托于瀏覽器，而瀏覽器除了主窗口顯示的頁面外，還包含了瀏覽器高度（頁簽欄、地址欄、書簽欄）、底部狀態欄。因此我們真實的設計高度=電腦分辨率-瀏覽器高度（130px左右）-底部狀態欄（30px左右），因此可以得出首屏高度≤740為安全區，我們在這個區域內設計的話基本可以保證首屏的內容的展示效率最高。
作者：江鳥的設計生活
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司