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