中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：設(shè)計(jì)尺寸一直都是設(shè)計(jì)師最熱衷討論的問(wèn)題，大或小，長(zhǎng)或短，都需要根據(jù)具體情況具體分析。想要了解清楚設(shè)計(jì)尺寸，就得先明白背后的邏輯。本文作者將從三個(gè)方面，分析設(shè)計(jì)尺寸背后的邏輯以及設(shè)計(jì)尺寸如何去定義，希望對(duì)你有幫助。

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

我先說(shuō)結(jié)論，常見(jiàn) B端設(shè)計(jì)稿尺寸建議采用 1440×820，因?yàn)槿コ秊g覽器頂部頁(yè)簽以及地址欄高度 80px ，因此高度上為820px 而不是大家常見(jiàn)的900px。

一、設(shè)計(jì)尺寸從何而來(lái)

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

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

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

因?yàn)橐苿?dòng)端也會(huì)存在多個(gè)分辨率的情況，我們針對(duì)其他不同的尺寸，通常采取簡(jiǎn)單頁(yè)面一稿適配多端，只針對(duì)核心頁(yè)面進(jìn)行多分辨率的適配。

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

大家想想，為什么我們?cè)谝苿?dòng)端設(shè)計(jì)稿的尺寸會(huì)從以前的iPhone 8（375×667）轉(zhuǎn)移到 iPhone 12 （375×812）呢？

我個(gè)人認(rèn)為會(huì)有以下幾點(diǎn)：

主流性：

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

兼容性：

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

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

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

搞清楚了移動(dòng)端的邏輯，我們?cè)偃ニ伎家幌伦烂鎃EB端的情況呢？

因?yàn)?B端產(chǎn)品的特殊性，在互聯(lián)網(wǎng)中的分辨率數(shù)據(jù)只能作為一個(gè)輔助的參考（比如百度瀏覽研究院的數(shù)據(jù)），更多對(duì)于尺寸的定義還是來(lái)自你用戶使用的設(shè)備。比如我們?cè)谝粋€(gè)針對(duì)銷售的 CRM 系統(tǒng)中，銷售使用的場(chǎng)景有兩種：

• 一種是銷售需要經(jīng)常外出拜訪客戶，移動(dòng)辦公場(chǎng)景為主。
• 另一種是在公司辦公，通過(guò)電話的方式對(duì)客戶進(jìn)行辦公，主要是固定位置進(jìn)行辦公。

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

第二種場(chǎng)景下，用戶以1920×1080 分辨率為主，主要是市面上的辦公顯示器多為24寸 即1920×1080。

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

因此在我的設(shè)計(jì)稿中，會(huì)采用 1440×900 的尺寸，因?yàn)樗菀准嫒萸腋鼮橹髁鳌?/p>

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

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

三、對(duì)于瀏覽器的適配

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

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

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

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

今天就簡(jiǎn)單講了講設(shè)計(jì)尺寸。

作者：CE青年，2B行業(yè)的2B設(shè)計(jì)師～公眾號(hào)：CeDesign

本文由 @CE青年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。