B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

释放双眼,带上耳机,听听看~!
设计尺寸一直都是设计师最热衷讨论的问题,讨论到最后结论总是一个死板的尺寸,很少有人去讲也真正明白背后的逻辑。今天就带大家来了解一下,设计尺寸背后的逻辑以及设计尺寸如何去定义。

设计尺寸一直都是设计师最热衷讨论的问题,讨论到最后结论总是一个死板的尺寸,很少有人去讲也真正明白背后的逻辑。今天的设计杂谈就带大家来了解一下,设计尺寸背后的逻辑以及设计尺寸如何去定义。希望之后在大家的交流中不要再) o B E } L g x去纠结我的设计尺寸究竟应该是多少?还是那句老话,耐心看完,你一定有所收获~

我先说结论,常见 B 端设计稿尺寸建议采用 144082u 2 – * R H Z0,因为去除浏览器顶部页签以及地址栏高度. # a [ ~ / 80px,因此高度上为 820px 而不是大家常见的 900px

设计尺寸从何而来

相信很多 B 端产品设计师都是从 C 端产品中转型而来。想要搞懂设计尺寸的基本f 9 E ( Y F逻辑I ? 9 ^ K,我们先搞清楚大家熟悉 C 端产品的情况。在移动端设计尺寸上的定义,我们只需要考虑 iOS 设备与安卓设备之间分辨率的区别。而在目前,大多数移动端设计稿都是采取 iPhone 12c c G : } 尺寸即:375 x 812 的分辨率

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

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

因为移动端也会存在多个分辨率的情况,我们针对其他不同的尺寸,通常采取简单页面一稿适配多端,只针对核心页面进行多分辨率的适配。上面我们算是理解了作为移动端的分辨率的基本情况。而设计稿的尺寸是从何而来?大家想想,为什么我们在移动端设计稿的尺寸会从以前的 iPhone 8(375667)转移到 iPhone 12(375812)呢?

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

1. 主流性

由于 iPhone 12 类的手机尺寸占比逐年增q ` q , h H B高,早期的 iPhone 8 的分辨率已经不再合适现如今手机的屏幕尺寸。因此决定R ? ? S分辨率尺寸的第一个因素便是这个分辨率的市场占有率。由于手机全面屏时代的到来大多数手机的屏幕比例都演化成类 16:9 的尺寸,因此参照 iOS 的生态下,我们的设计稿就会有如此的转变

2. 兼容性

作为移动端最为基准的设计尺寸,它一定要具备P e =兼容性才能成为基准的尺寸。兼容性即能7 o k , 9 P p够通过该尺寸进行向上、向下的拓展,方便在一些主要页面中多尺寸的设计m z ~ } 3 ~ $,比如:iPhone X 的尺寸,可以进行拓展成为 iPhone 8、iPhone 12Q u Y Pro Max 以及各类安卓端产品。减少设计稿因分辨率所带来的差异性

设备数据推导设计尺寸

搞清楚了移动端的逻辑,我们再去思考一下桌面 WEB 端的情况呢?

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

因为 B 端产品的特殊性,在互联网4 c F ! f 9 J u j中的分辨率数据只能作为一个辅助的参考(比如百度浏览研究^ e @院的数据),更多对于尺寸的定义还是来自你用户使用的设备。比如我们在一个针对销售的 CRM 系统中,销售使用的场景有两种:

  • 一种是销售需要经常外出拜访客户,移动办公场景为主
  • ! % : g d | P |一种K ? [ * k n : q是在公司办公,通V B g x r ] V % C过电话的方式对客户进行办公,主要是固定位置进行办公

首先通过用户访谈了解到大多数销售都是采取移动办公的形式,因为销售需要对不同的企业进行登门拜访,拜访完成会跟进一些销售记录。因此对于电脑分辨率会相对较小J J a 8 Z。对其分辨率的数据埋点得知,分辨率以:1440900、1366768 两种为主。第二种场景下,用户以 19201080 分辨率为主,主Y b h f要是市面上的办公显示器多为 24 寸即 19201080然后想要去寻找作为设计稿的尺寸也与移动端一样,需要满足:主流性、兼容性两种不同特性的需求。因此在我的设计稿中,会采用 1440900 的L ( v t J ?尺寸,因为它更容易兼容且更为主流

OK,我m G 0再举一个反例,在我之前做过的一个线下诊所系统中,通过走访我们了解到,几乎所有的医生都是配备的 24 寸显示器,分辨率也都为 19201080。

因此在尺寸的选择上就没有必要去一味的选择 1440 这一尺寸。

对于浏览器的适配

首先显示器的分辨率并不能代表我们的实际设计尺寸,就像在 iPhone 的设计稿中,会有 StatusBar 的存在,会预留上半部分空间

因为目前,大多数 B 端产品都是通过浏览器的方式[ 3 l ^ ! 0进行呈现,大家也都知道电脑的浏览器中(Chrome 浏览器为主),还会存在页签高度以Y 2 @ !及当前网址、书签栏(书签栏大多数是隐藏的,因此不算进内),而想要真$ X . i n P k实了解设备中一屏的高度,就还需要对上面的分辨率尺寸进行处理:

| } P脑分辨率 – 页签高度 – 网址栏 – 书签栏 = 设计稿真{ c 1实高度,即:14_ # w p M40820 尺寸进行设计

因此想要让自己的设计稿被前端进行完整还原,就必须将浏览器页面当中的很多因W 8 e 6 E M _ ~素考虑进去。类似6 g – 7 . 3 K i于我们去设计移动端的小程序,他也会有顶部固定的区域进行展示。大家可能不太清楚页面当中高度的逻辑,这里为大家提供了 Figma/Sketch 的设计模版,方便大家进行研究查阅。

Sketch 模板通过附件下载即可。

Figma :https://www.figma.com/file/SpeT78WV M B j q 2 !ls7I0FjiPvGDqqd

欢迎关注作% : @ 2 y Y s者的微信t | h | , _ & F ]公众号:CE青年

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

B 端设计稿尺寸究竟是多少? ​看完这篇你就懂了!

给TA打赏
共{{data.count}}人
人已打赏
教程分享

结合支付宝「集五福」案例,聊聊如何做好运营活动互动设计

2021-3-18 17:17:11

教程分享

这些 Dribbble 顶尖大神的作品,是我每日学习的源泉

2021-3-18 17:19:10

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索