设计尺寸一直都是设计师最热衷讨论的问题，讨论到最后结论总是一个死板的尺寸，很少有人去讲也真正明白背后的逻辑。今天的设计杂谈就带大家来了解一下，设计尺寸背后的逻辑以及设计尺寸如何去定义。希望之后在大家的交流中不要再去纠结我的设计尺寸究竟应该是多少？还是那句老话，耐心看完，你一定有所收获～
我先说结论，常见 B端设计稿尺寸建议采用 1440×820，因为去除浏览器顶部页签以及地址栏高度 80px ，因此高度上为820px 而不是大家常见的900px。
一、设计尺寸从何而来
相信很多 B 端产品设计师 都是从 C 端产品 中转型而来。想要搞懂设计尺寸的基本逻辑，我们先搞清楚大家熟悉C端产品的情况。在移动端设计尺寸上的定义，我们只需要考虑 IOS 设备与安卓设备之间分辨率的区别。
企业回网站建设可以咨询一下苏州市亿韵商务信息有限公司,多年互联网实战经验,不与同行争高价，不和市场比低值，我们尊重劳动成果，尽心呈现价值,以满足用户需求放在首位，亿韵，只为做更适合您的网站建设服务商.苏州市亿韵商务信息有限公司（以下简称"。
而在目前，大多数移动端设计稿都是采取 iPhone 12 尺寸 即：375 x 812 的分辨率。
因为移动端也会存在多个分辨率的情况，我们针对其他不同的尺寸，通常采取简单页面一稿适配多端，只针对核心页面进行多分辨率的适配。
上面我们算是理解了作为移动端的分辨率的基本情况。而设计稿的尺寸是从何而来？
我个人认为会有以下几点：
主流性：
由于iPhone 12 类的手机尺寸占比逐年增高，早期的 iPhone 8 的分辨率已经不再合适现如今手机的屏幕尺寸。因此决定分辨率尺寸的第一个因素便是这个分辨率的市场占有率。由于手机全面屏时代的到来大多数手机的屏幕比例都演化成类 16:9 的尺寸，因此参照 iOS 的生态下，我们的设计稿就会有如此的转变。
兼容性：
作为移动端最为基准的设计尺寸，它一定要具备兼容性才能成为基准的尺寸。
二、设备数据推导设计尺寸
搞清楚了移动端的逻辑，我们再去思考一下桌面WEB端的情况呢？
网页一般没有规定标准尺寸，一般的有1024*768 和800*600.现在大家都用前者。网页中的广告尺寸 1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*60 4.首页中部通栏，尺寸580*60 5.内页。
一种是销售需要经常外出拜访客户，移动办公场景为主。
另一种是在公司办公，通过电话的方式对客户进行办公，主要是固定位置进行办公。
首先通过用户访谈了解到大多数销售都是采取移动办公的形式，因为销售需要对不同的企业进行登门拜访，拜访完成会跟进一些销售记录。因此对于电脑分辨率会相对较小。对其分辨率的数据埋点得知，分辨率以：1440×900、1366×768 两种为主。
网页设计选用的分辨率是72像素，使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计，一般采用全屏展示和两侧留白的方式。全屏展示，是整个网站看起来大气一些，但是布局要合理安排，不然看起来有些傻大的感觉。
第二种场景下，用户以1920×1080 分辨率为主，主要是市面上的办公显示器多为24寸 即1920×1080。
然后想要去寻找作为设计稿的尺寸也与移动端一样，需要满足：主流性、兼容性两种不同特性的需求。
因此在我的设计稿中，会采用 1440×900 的尺寸，因为它更容易兼容且更为主流。
OK，我再举一个反例，在我之前做过的一个线下诊所系统中，通过走访我们了解到，几乎所有的医生都是配备的24寸显示器，分辨率也都为1920×1080。
因此在尺寸的选择上就没有必要去一味的选择 1440 这一尺寸，我相信我的读者脑瓜子没有这么不灵活。
三、对于浏览器的适配
首先显示器的分辨率并不能代表我们的实际设计尺寸，就像在iPhone 的设计稿中，会有StatusBar的存在，会预留上半部分空间。
广告尺寸：300*250像素 广告位置：第一屏两侧 文字链接(Text link)规格：不超过10个汉字 广告位置：第一屏 第二屏 备注:文字链接长度以不折行为准 网页设计LOGO的标准尺寸 120×120 这种广告规格适用于。
因为现目前，大多数B端产品都是通过浏览器的方式进行呈现，大家也都知道电脑的浏览器中（Chrome浏览器为主），还会存在页签高度以及当前网址、书签栏（书签栏大多数是隐藏的，因此不算进内），而想要真实了解设备中一屏的高度，就还需要对上面的分辨率尺寸进行处理：电脑分辨率 – 页签高度 – 网址栏 – 书签栏 = 设计稿真实高度
因此想要让自己的设计稿被前端进行完整还原，就必须将浏览器页面当中的很多因素考虑进去。类似于我们去设计移动端的小程序，他也会有顶部固定的区域进行展示。
1、800*600分辨率下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768分辨率下，网页宽度保持在1002以内，如果全屏显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在d。
大家可能不太清楚页面当中究竟高度为多少，这里为大家提供了 Figma /Sketch 的设计模版，方便大家进行研究查阅。
(1920*1080分辨率下)顶部banner尺寸建议1920*500，最顶部信息栏与导航栏建议高度40、126 04 网页中字体也是有使用规范的，合适的字体大小才能展现出最完美的效果，网页尺寸标准字体不标准也不行(1920*1080分辨率下)
今天就简单讲了讲设计尺寸。
题图来自Unsplash，基于CC0协议。
