尺寸的设计始终是设计师们极为热衷探讨的要点所在，探讨至最终得出的结论往往只是一个刻板的尺寸，鲜少有人能够去陈述并且切实明了其背后所蕴含的逻辑。于今日的设计杂谈特意带领大伙来进行一番了解，关于设计尺寸背后的逻辑以及设计尺寸究竟该如何予以定义。期望在后续大家的交流期间，不要再去纠结自身设计尺寸到底应当是多少？依旧是那句老话，耐心将其看完，你必定会有所收获～。

先来听我讲结论，平常B端设计稿尺寸方面的建议是采用处于1440×820这种规格的，这是因对浏览器顶部页签以及地址栏高度80px进行了去除操作，所以高度呈现为820pxsketch book pro，并非大家通常所见到的900px 。

一、设计尺寸从何而来

诸多B端产品设计师，是从C端产品转型过来的，可相信这一点的人不少。想弄明白设计尺寸的基本逻辑，得先把大家熟悉C端产品这份情况搞清楚。在移动端设计尺寸的定义方面，我们只需考量IOS设备跟安卓设备之间分辨率的差异 。

目前，多数移动端设计稿所采用的，是12尺寸，也就是具有375 x 812分辨率的那种。

（这里就不讨论什么物理分辨率以及设计分辨率等内容）

由于移动端会有多个分辨率的情形，因而对于其他别样的尺寸，一般采用简单页面一稿去适配多端，仅仅针对核心页面开展多分辨率的适配 。

前文之中，我们算作是领会了身为移动端的分辨率的基础情形。那么，设计稿的尺寸究竟是源自何处呢？

各位思考一下，为何咱们于移动端设计稿的尺寸，竟然会从先前的8（特定是375×667）转至那12（确切为375×812）呢？

我个人认为会有以下几点：

主流性：

因为 12 类手机尺寸占比逐年变高，以往那种，相对早期的 8 的分辨率，已不适用于当下手机屏幕尺寸。所以，决定分辨率尺寸的首个因素，就是该分辨率的市场占有率。因手机全面屏时代降临，多数手机屏幕比例演变成类 16:9 的尺寸，故而参照 iOS 的生态情况，我们的设计稿会出现这般转变。

兼容性：

它作为移动端最为基准之设计尺寸，必然得具备适用性方可成为基准的尺寸，。

通过该尺寸实现向上下拓展的特性就是兼容性了，这能便利在某些主要页面中的多尺寸设计，举例而言：X尺寸可拓展成8、12 Pro Max以及各类安卓端产品，以此减少设计稿因分辨率产生的差异性。

二、设备数据推导设计尺寸

已然厘清了移动端的逻辑，我们接着去思索一下桌面WEB端的情形罢？

鉴于B端产品具备特殊性，于互联网里分辨率数据仅可当作一项辅助参考来看待（诸如百度浏览研究院的数据这般），而更多关于尺寸的精准定义实则源于你所使用的用户设备。就好比在一个面向销售的CRM系统当中，销售所运用的场景存在着两种情况：

最开始，借助用户访谈知晓，绝大多数销售采用的是移动办公模式，鉴于销售要去到诸多不同企业登门拜访，拜访结束后还会跟进部分销售记录，所以对于电脑分辨率而言，会相对比较小，通过对其分辨率的数据做好埋点工作后了解到，分辨率主要呈现为1440×900、1366×768这两种 。

于第二种场景的情形之中，用户所采用分辨率是以1920×1080为主的，其主要原因在于市面上作为办公用途的显示器是多为24寸这个规格的情况，而此24寸显示器的分辨率就是属于1920×1080 。

接着打算去寻觅，作为设计稿，其尺寸跟移动端是一样的，这要满足，属于主流性、兼容性这两种不同特性的需求。

然而，于我的设计稿里头sketch book pro，将采用那般由1440乘以900所构成的尺寸，鉴于其具备着更易于存在兼容状况的特性，并且还更为偏向于成为比较主流的一种情况。

好的，我再次列举一个相反的例子，在我先前做过的一个线下诊所系统那里，依据走访我们知晓到，差不多所有的医生配备的都是24寸显示器，分辨率同样都是1920×1080 。

因此，于尺寸的挑选方面，没必要一味地挑选1440这个尺寸，我坚信，我那些读者的脑袋没那么不机灵。

三、对于浏览器的适配

首先，显示器的分辨率，它并非能够代表咱们实际的设计尺寸，就如同在某设计稿里面，会有某种情况存在，会预留出上半部分的空间 。

当下，多数B端产品借由浏览器形式呈现，大家清楚电脑浏览器里（以浏览器为主），有页签高度、当前网址、书签栏（书签栏大多隐藏，故不算在内），而欲真切知晓设备中一屏高度，则要对上述分辨率尺寸予以处理：电脑分辨率减去页签高度，再减去网址栏，最后减去书签栏，所得结果即设计稿真实高度。

故而，若想使得自身的设计稿得以被前端作完整还原，那就必定得把浏览器页面里的诸多因素纳入考量范围。就好比我们去从事移动端小程序的设计工作，它同样会存在顶部固定的区域用于展现 。

或许众人并非特别明晰页面内部到底高度是几许，于此为大伙供给了Figma / 的设计模板，用以便利大家去做研究查阅 。

今天就简单讲了讲设计尺寸。

如有侵权请联系删除！