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