B 端項目設計稿尺寸究竟是多少？ ​ ​看完這篇你就懂了

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

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

設計尺寸從何而來

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

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

（這裏就不討論什麼物理分辨率以及設計分辨率等內容）

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

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

大家想想，爲什麼我們在移動端設計稿的尺寸會從以前的 **iPhone 8（375x667）**轉移到 **iPhone 12 （375x812）**呢？

我個人認爲會有以下幾點：

由於 iPhone 12 類的手機尺寸佔比逐年增高，早期的 iPhone 8 的分辨率已經不再合適現如今手機的屏幕尺寸。因此決定分辨率尺寸的第一個因素便是這個分辨率的市場佔有率。由於手機全面屏時代的到來大多數手機的屏幕比例都演化成類 16:9 的尺寸，因此參照 iOS 的生態下，我們的設計稿就會有如此的轉變。

作爲移動端最爲基準的設計尺寸，它一定要具備兼容性才能成爲基準的尺寸。

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

設備數據推導設計尺寸

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

因爲 B 端產品的特殊性，在互聯網中的分辨率數據只能作爲一個輔助的參考（比如百度瀏覽研究院的數據），更多對於尺寸的定義還是來自你用戶使用的設備。

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

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

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

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

因此在我的設計稿中，會採用 1440x900 的尺寸，因爲它更容易兼容且更爲主流

OK，我再舉一個反例，在我之前做過的一個線下診所繫統中，通過走訪我們瞭解到，幾乎所有的醫生都是配備的 24 寸顯示器，分辨率也都爲 1920x1080。

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

對於瀏覽器的適配

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

因爲現目前，大多數 B 端產品都是通過瀏覽器的方式進行呈現，大家也都知道電腦的瀏覽器中（Chrome 瀏覽器爲主），還會存在頁籤高度以及當前網址、書籤欄（書籤欄大多數是隱藏的，因此不算進內），而想要真實瞭解設備中一屏的高度，就還需要對上面的分辨率尺寸進行處理：

電腦分辨率 - 頁籤高度 - 網址欄 - 書籤欄 = 設計稿真實高度

即：1440x820 尺寸進行設計

因此想要讓自己的設計稿被前端進行完整還原，就必須將瀏覽器頁面當中的很多因素考慮進去。類似於我們去設計移動端的小程序，他也會有頂部固定的區域進行展示。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/lZiBRcRCfpgoc6mDfO8ugg

猜你喜歡