@CE青年:設計尺寸一直都是設計師最熱衷討論的問題,討論到最后結論總是一個死板的尺寸,很少有人去講也真正明白背后的邏輯。今天的設計雜談就帶大家來了解一下,設計尺寸背后的邏輯以及設計尺寸如何去定義。希望之后在大家的交流中不要再去糾結設計尺寸究竟應該是多少?還是那句老話,耐心看完,你一定有所收獲~
我先說結論,常見 B端設計稿尺寸建議采用 1440×820,因為去除瀏覽器頂部頁簽以及地址欄高度 80px ,因此高度上為?820px?而不是大家常見的 900px
設計尺寸從何而來
相信很多?B 端產品設計師?都是從?C 端產品?中轉型而來。想要搞懂設計尺寸的基本邏輯,我們先搞清楚大家熟悉C端產品的情況。在移動端設計尺寸上的定義,我們只需要考慮?IOS 設備與安卓設備之間分辨率的區別。
而在目前,大多數移動端設計稿都是采取?iPhone 12 尺寸?即:375 x 812 的分辨率(這里就不討論什么物理分辨率以及設計分辨率等內容)。
因為移動端也會存在多個分辨率的情況,我們針對其他不同的尺寸,通常采取簡單頁面一稿適配多端,只針對核心頁面進行多分辨率的適配。
上面我們算是理解了作為移動端的分辨率的基本情況。而設計稿的尺寸是從何而來?
大家想想,為什么我們在移動端設計稿的尺寸會從以前的iPhone 8(375×667)轉移到iPhone 12 (375×812)呢?
我個人認為會有以下幾點:
- 主流性
由于iPhone 12 類的手機尺寸占比逐年增高,早期的 iPhone 8 的分辨率已經不再合適現如今手機的屏幕尺寸。因此決定分辨率尺寸的第一個因素便是這個分辨率的市場占有率。由于手機全面屏時代的到來大多數手機的屏幕比例都演化成類 16:9 的尺寸,因此參照 iOS 的生態下,我們的設計稿就會有如此的轉變。
- 兼容性
作為移動端最為基準的設計尺寸,它一定要具備兼容性才能成為基準的尺寸。
兼容性即能夠通過該尺寸進行向上、向下的拓展,方便在一些主要頁面中多尺寸的設計,比如:iPhone X的尺寸,可以進行拓展成為 iPhone 8 、iPhone 12 Pro Max 以及各類安卓端產品。減少設計稿因分辨率所帶來的差異性。
設備數據推導設計尺寸
搞清楚了移動端的邏輯,我們再去思考一下桌面WEB端的情況呢?
因為 B端產品的特殊性,在互聯網中的分辨率數據只能作為一個輔助的參考(比如百度瀏覽研究院的數據),更多對于尺寸的定義還是來自你用戶使用的設備。
比如我們在一個針對銷售的 CRM 系統中,銷售使用的場景有兩種:
- 一種是銷售需要經常外出拜訪客戶,移動辦公場景為主。
- 另一種是在公司辦公,通過電話的方式對客戶進行辦公,主要是固定位置進行辦公。
首先通過用戶訪談了解到大多數銷售都是采取移動辦公的形式,因為銷售需要對不同的企業進行登門拜訪,拜訪完成會跟進一些銷售記錄。因此對于電腦分辨率會相對較小。對其分辨率的數據埋點得知,分辨率以:1440×900、1366×768 兩種為主。
第二種場景下,用戶以1920×1080 分辨率為主,主要是市面上的辦公顯示器多為24寸 即1920×1080。
然后想要去尋找作為設計稿的尺寸也與移動端一樣,需要滿足:主流性、兼容性兩種不同特性的需求。
因此在我的設計稿中,會采用 1440×900 的尺寸,因為它更容易兼容且更為主流。
OK,我再舉一個反例,在我之前做過的一個線下診所系統中,通過走訪我們了解到,幾乎所有的醫生都是配備的24寸顯示器,分辨率也都為1920×1080。
因此在尺寸的選擇上就沒有必要去一味的選擇 1440 這一尺寸,我相信我的讀者腦瓜子沒有這么不靈活。
對于瀏覽器的適配
首先顯示器的分辨率并不能代表我們的實際設計尺寸,就像在iPhone 的設計稿中,會有StatusBar?的存在,會預留上半部分空間。
因為現目前,大多數B端產品都是通過瀏覽器的方式進行呈現,大家也都知道電腦的瀏覽器中(Chrome瀏覽器為主),還會存在頁簽高度以及當前網址、書簽欄(書簽欄大多數是隱藏的,因此不算進內),而想要真實了解設備中一屏的高度,就還需要對上面的分辨率尺寸進行處理:
電腦分辨率 – 頁簽高度 – 網址欄 – 書簽欄 = 設計稿真實高度
即:1440×820?尺寸進行設計
因此想要讓自己的設計稿被前端進行完整還原,就必須將瀏覽器頁面當中的很多因素考慮進去。類似于我們去設計移動端的小程序,他也會有頂部固定的區域進行展示。
大家可能不太清楚頁面當中究竟高度的邏輯,這里為大家提供了 Figma/Sketch?的設計模版,方便大家進行研究查閱。
領取方式:關注公眾號,然后在后臺回復?“設計尺寸”即可。
今天就簡單講了講設計尺寸。
原文鏈接:CE青年(公眾號)
作者:CE青年
轉載請注明:學UI網 » B 端項目設計稿尺寸究竟是多少?