設(shè)計尺寸一直都是設(shè)計師最熱衷討論的問題，討論到最后結(jié)論 總是一個死板的尺寸，很少有人去講也真正明白背后的邏輯。今天的 設(shè)計雜談就帶大家來了解一下，設(shè)計尺寸 背后的邏輯以及 設(shè)計尺寸如何去定義。希望之后在大家的交流中不要再去糾結(jié)我的設(shè)計尺寸究竟應(yīng)該是多少？還是那句老話，耐心看完，你一定有所收獲～

我先說結(jié)論， 常見 B端設(shè)計稿尺寸建議采用 1440x820，因為去除瀏覽器頂部頁簽以及地址欄高度 80px ，因此高度上為 820px而不是大家常見的 900px

設(shè)計尺寸從何而來

相信很多 B 端產(chǎn)品設(shè)計師 都是從 C 端產(chǎn)品中轉(zhuǎn)型而來。想要搞懂設(shè)計尺寸的基本邏輯，我們先搞清楚大家熟悉C端產(chǎn)品的情況。在移動端設(shè)計尺寸上的定義，我們只需要考慮 IOS 設(shè)備與 安卓設(shè)備之間分辨率的區(qū)別。

而在目前，大多數(shù)移動端設(shè)計稿都是采取 iPhone 12 尺寸即：375 x 812 的分辨率

（這里就不討論什么物理分辨率以及設(shè)計分辨率等內(nèi)容）

因為移動端也會存在多個分辨率的情況，我們針對其他不同的尺寸，通常采取 簡單頁面一稿適配多端，只針對 核心頁面進行多分辨率的適配。

上面我們算是理解了作為移動端的分辨率的基本情況。而設(shè)計稿的尺寸是從何而來？

大家想想，為什么我們在移動端設(shè)計稿的尺寸會從以前的 iPhone 8（375x667）轉(zhuǎn)移到 iPhone 12 （375x812）呢？

我個人認(rèn)為會有以下幾點：

主流性

主流性

由于iPhone 12 類的手機尺寸占比逐年增高，早期的 iPhone 8 的分辨率已經(jīng)不再合適現(xiàn)如今手機的屏幕尺寸。因此決定分辨率尺寸的第一個因素便是這個分辨率的市場占有率。由于手機全面屏?xí)r代的到來大多數(shù)手機的屏幕比例都演化成類 16:9 的尺寸，因此參照 iOS 的生態(tài)下，我們的設(shè)計稿就會有如此的轉(zhuǎn)變。

展開全文

兼容性

兼容性

作為移動端最為基準(zhǔn)的設(shè)計尺寸，它一定要具備兼容性才能成為基準(zhǔn)的尺寸。

兼容性即能夠通過該尺寸進行向上、向下的拓展，方便在一些主要頁面中多尺寸的設(shè)計，比如：iPhone X的尺寸，可以進行拓展成為 iPhone 8 、iPhone 12 Pro Max 以及各類安卓端產(chǎn)品。減少設(shè)計稿因分辨率所帶來的差異性。

設(shè)備數(shù)據(jù)推導(dǎo)設(shè)計尺寸

搞清楚了移動端的邏輯，我們再去思考一下 桌面WEB端的情況呢？

因為 B端產(chǎn)品的特殊性，在互聯(lián)網(wǎng)中的分辨率數(shù)據(jù)只能作為一個輔助的參考（比如百度瀏覽研究院的數(shù)據(jù)），更多對于尺寸的定義還是來自你用戶使用的設(shè)備。

比如我們在一個針對銷售的 CRM 系統(tǒng)中，銷售使用的場景 有兩種：

一種是銷售需要經(jīng)常 外出拜訪客戶，移動辦公場景為主。

另一種是在 公司辦公，通過電話的方式對客戶進行辦公，主要是固定位置進行辦公。

一種是銷售需要經(jīng)常 外出拜訪客戶，移動辦公場景為主。

另一種是在 公司辦公，通過電話的方式對客戶進行辦公，主要是固定位置進行辦公。

首先通過用戶訪談了解到大多數(shù)銷售都是采取 移動辦公的形式，因為銷售需要對不同的企業(yè)進行登門拜訪，拜訪完成會跟進一些銷售記錄。因此對于 電腦分辨率會相對 較小。對其分辨率的數(shù)據(jù)埋點得知，分辨率以：1440x900、1366x768 兩種為主

第二種場景下，用戶以1920x1080 分辨率為主，主要是市面上的辦公顯示器多為24寸 即1920x1080

然后想要去尋找作為設(shè)計稿的尺寸也與移動端一樣，需要滿足：主流性、兼容性兩種不同特性的需求。

因此在我的設(shè)計稿中，會采用 1440x900 的尺寸，因為它更容易 兼容且更為 主流

OK，我再舉一個反例，在我之前做過的一個線下診所系統(tǒng)中，通過走訪我們了解到，幾乎所有的醫(yī)生都是配備的24寸顯示器，分辨率也都為1920x1080。

因此在尺寸的選擇上就沒有必要去一味的選擇 1440 這一尺寸，我相信我的讀者腦瓜子沒有這么不靈活。

對于瀏覽器的適配

首先顯示器的分辨率并不能代表 我們的實際設(shè)計尺寸，就像在iPhone 的設(shè)計稿中，會有 StatusBar 的存在，會預(yù)留上半部分空間。

因為現(xiàn)目前，大多數(shù)B端產(chǎn)品都是通過瀏覽器的方式進行呈現(xiàn)，大家也都知道電腦的瀏覽器中（Chrome瀏覽器為主），還會存在 頁簽高度以及 當(dāng)前網(wǎng)址、書簽欄（書簽欄大多數(shù)是隱藏的，因此不算進內(nèi)），而想要真實了解設(shè)備中一屏的高度，就還需要對上面的分辨率尺寸進行處理：

電腦分辨率 - 頁簽高度 - 網(wǎng)址欄 - 書簽欄 = 設(shè)計稿真實高度

即： 1440x820 尺寸進行設(shè)計

因此想要讓自己的設(shè)計稿被前端進行完整還原，就必須將瀏覽器頁面當(dāng)中的很多因素考慮進去。類似于我們?nèi)ピO(shè)計移動端的小程序，他也會有頂部固定的區(qū)域進行展示。

大家可能不太清楚頁面當(dāng)中究竟高度的邏輯，這里為大家提供了 Figma/Sketch 的 設(shè)計模版，方便大家進行研究查閱。

領(lǐng)取方式：點擊個在看，在后臺回復(fù) “設(shè)計尺寸 ”即可

對話張小龍：微信的設(shè)計和理念 (精髓篇)

一篇看懂網(wǎng)頁端交互創(chuàng)意怎么做

如果微信收費10塊錢一個月，你還繼續(xù)用嗎？