“给这个屏幕设计UI,我画布要建多大啊?”
背景
老婆从UI转工业设计后,经常遇到奇奇怪怪的屏幕尺寸。由于有UI背景,各种工控机的UI界面也归她设计。这些屏幕尺寸经常让她无从下手,不知道画布该设置多大。
这是个普遍问题,许多UI设计师不理解屏幕的工作原理。尤其是从Retina高清屏出现后,屏幕引入了倍数的概念,让大量UI设计师不知道设计稿画布应该设成多大。
常见的设备还好,Figma、Sketch等设计工具往往自带了尺寸。但工业设计、智能家居、物联网领域,有大量不常见的屏幕尺寸。互联网UI设计师接触到这类任务,往往就懵逼了。
其实,这有规律可循。核心就是PPI,每英寸对应的像素值,这是物理世界和像素世界的桥梁,是换算的中介。有人管这个叫像素密度,这个名字起得很形象,像素点越密集,颗粒感越少,显像越细腻。
有许多设计科普文章都详细阐释了这背后的原理。但对UI设计师来说,懂一点屏幕原理虽好,但不懂也不应成为从业的障碍。在讲究精细分工的现代社会,画画的人也不必知道画纸是怎么造出来的。
所以,UI设计师需要的并不是科普文,而是一个计算器。输入屏幕参数,计算器直接告诉他们画布应该设成多大。
计算
为了实现这个简单产品,背后的计算过程梳理如下。
输入方面,设计师要输入如下信息:
- 屏幕像素宽度
- 屏幕像素高度
- 屏幕尺寸(也就是对角线长多少英寸)
- 屏幕使用距离(近/触屏、中/键鼠、远/遥控)
- 习惯的App设计稿宽度(1125、750、375,没有就选最接近的)
知道屏幕像素宽高,根据毕达哥拉斯定理(勾股定理)可以算出屏幕对角线的像素数量。再除以屏幕尺寸,就得到每英寸像素数,即PPI。
PPI = 对角线像素数 / 屏幕尺寸 = √(像素宽度^2 + 像素高度^2) / 屏幕尺寸
根据屏幕使用距离不同,用PPI除以不同的常量除数,再取整,就能直接得到屏幕倍数。真实的屏幕倍数五花八门,但设计惯例是当作整数处理,这是屏幕碎片化问题的公认解法。
屏幕倍数 = PPI / 除数
具体为:近距离除数为150,中距离除数为110,远距离除数为40。
至于这除数怎么来的,是我收集了一些屏幕的参数,通过数据分析反推出来的近似值。我发现,多数触屏设备的PPI除以它的实际倍数,结果都在150附近。同理,中距离和远距离的屏幕,除以各自的实际倍数,结果都在110和40附近。
这种图表不常见,我介绍一下:这叫箱线图,boxplot,用来表达数据在单个维度上的分布范围与集中程度。这图一般的表格软件画不出来,我用Python画的。
炒股的朋友有吗?是不是很像K线图?没错,道理差不多,这个图关键信息也是看4个位置:
- 细线顶端:最大值(最高价)
- 细线底端:最小值(最低价)
- 粗柱子顶端:第三四分位数(开/收盘价)
- 粗柱子底端:第一四分位数(收/开盘价)
粗柱子内部还多一条横线,这是K线图没有的,代表中位数,我PPI除数就是按中位数取了个整。
多解释一下中位数和四分位数的概念:如果把所有统计过的设备按PPI除数从低到高排列,然后切一刀下去,让左右两边设备数量相同,这切的位置就是中位数。左右两边再用同样的方法对半切,切的位置就分别是第一四分位数和第三四分位数。
为什么不简单点取平均数呢?可以看到细线比柱子高很多,说明越往高低去,分布越稀疏,越容易出现个别数据偏离很远。但我们要的是能代表多数设备的除数,所以要排除这些极端值的影响,因而选择中位数。
接下来,回到我们上一个公式:
屏幕倍数 = PPI / 除数
PPI已经算出来了,除数也通过统计得到了。既然得到了屏幕倍数,核心问题已经解决。接下来还要考虑设计师自身的习惯,有的人爱用1倍大小画布设计(Figma和Sketch用户居多),有的人爱用2倍或3倍(PS主力的设计师居多)。
用屏幕的像素宽高,分别除以屏幕倍数,得到屏幕逻辑像素宽高。再各自乘以习惯的App设计稿宽度对应的倍数(1125、750、375分别对应3倍、2倍、1倍),就得到最终结果,画布该设置多大。
画布宽 = 屏幕像素宽 / 屏幕倍数 × 设计稿倍数
画布高 = 屏幕像素高 / 屏幕倍数 × 设计稿倍数
随之而来还有2个问题:切图切多大?字号设多大?
切图倍数 = 屏幕倍数 / 设计稿倍数
比如屏幕倍数2倍,你习惯按1倍设计,切图就切2倍。你习惯按2倍设计,切图就切1倍。
但如果你习惯按3倍设计呢?所以还要加个限制,设计稿倍数不能大于屏幕倍数,那没有意义,出现这种情况就把按屏幕倍数当做设计稿倍数。
字号和设计稿倍数直接相关。比如常见的提示文案小字字号,设计稿1倍,一般就是12px,2倍就是24px,以此类推。字号也受设计稿倍数不能大于屏幕倍数的规则制约。
这一章看下来是不是快缺氧了?这就是为什么我要把它做成产品,设计师的时间不应该用来算这种东西。一个产品可以帮大家节省数不清的时间。
当然,如果对屏幕的原理感兴趣,想要更深入阅读,还可以看这篇老文:https://victor42.eth.limo/post/3435/,虽然其中的屏幕分辨率数值早已过时,但原理没变。
最初是做了一个 Excel版计算器,为了验证我的计算方法是否正确。但使用不够直观友好,不适合作为正式产品。索性做成一个公开可访问的网页小工具吧!需求反正已经写这么详细了,用AI编程,不一次搞定都说不过去了。
接下来,轮到AI干活了。我把上面内容和下面的任务都给AI看,让它把我要的产品实现出来。
任务
理解以上背景和计算原理,帮我生成一个HTML小工具。要求如下:
- 产品名就叫“UI画布尺寸计算器”。
- 响应式开发,支持桌面与移动端使用。
- 由于项目简单,且无后端交互,使用原生HTML/CSS/Javascript即可,减少依赖。
- CSS和JS要放在独立的文件里,不要混在HTML页面中,便于维护。
- JS代码逻辑尽量解耦和模块化,常量放在开头便于配置。
- 用户输入项较多,设计完善的表单验证和信息提示。输入项最好带有示例,以placeholder或其它形式皆可。
- 输出结果包含以下信息:
- 画布宽度
- 画布高度
- 切图输出的倍数
- 小字建议字号,比如:12px(1倍)/24px(2倍)/36px(3倍)
- 输出结果的排版设计要直观,不要仅是数字的罗列。要根据结果的实际值画出一个屏幕的示意图,结果各项数值标注在示意图适当的位置。
- 整个产品提供深色模式和浅色模式切换,默认浅色模式。
- 使用#2A9D8F作为品牌色。
结果
果然,一步到位!
只是它没按我的要求使用原生HTML/CSS/Javascript,而是用了Typescript/TailwindCSS/Next.js。这套技术栈对于我这种IE6时代的上古前端有点要命,一开始我甚至都不知道在本地如何预览。不过这都不是难事,问问AI就学会了,顺便了解了现代前端技术的思想和基石,部署其实非常简单。
这不,产品就上线了嘛:https://ui-size.victor42.work/
看来对于简单的小工具,以后就是得先写文章,文章写完,工具也就写完了。
最后,拿着我收集来的屏幕参数数据给AI,让它调用MCP操作浏览器一个个输入验算,算出的屏幕倍数与真实情况高度吻合,尤其近距离和中距离设备都非常准确。唯一不准的是远距离大屏幕,屏幕倍数相比实际值有一定偏离,因为很多大尺寸显示器和电视的实际倍数是1.5,不是整数。
总体来说,应该可以很好地解决工业设计领域各类小众屏幕的计算问题。