背景

老婆从 UI 转工业设计后，经常遇到奇奇怪怪的画布屏幕尺寸。由于有 UI 背景
，计算各种工控机的器附 UI 界面也归她设计。这些屏幕尺寸经常让她无从下手，过程不知道画布该设置多大 。免费

这是超实尺寸个普遍问题，许多 UI 设计师不理解屏幕的画布工作原理。尤其是计算从 Retina 高清屏出现后 ，屏幕引入了倍数的器附概念，让大量 UI 设计师不知道设计稿画布应该设成多大 。过程

常见的免费设备还好 ，Figma、超实尺寸Sketch 等设计工具往往自带了尺寸。画布但工业设计 、智能家居、物联网领域，有大量不常见的屏幕尺寸 
。互联网 UI 设计师接触到这类任务 ，往往就懵逼了 。

其实，这有规律可循
。核心就是 PPI，每英寸对应的像素值 ，这是物理世界和像素世界的桥梁，是换算的中介。有人管这个叫像素密度，这个名字起得很形象，像素点越密集，颗粒感越少，显像越细腻。

有许多设计科普文章都详细阐释了这背后的原理 。但对 UI 设计师来说，懂一点屏幕原理虽好，但不懂也不应成为从业的障碍。在讲究精细分工的现代社会，画画的人也不必知道画纸是怎么造出来的 。

所以 ，UI 设计师需要的并不是科普文，而是一个计算器。输入屏幕参数 ，计算器直接告诉他们画布应该设成多大。

计算

为了实现这个简单产品，背后的计算过程梳理如下 。

输入方面，设计师要输入如下信息：

1. 屏幕像素宽度
2. 屏幕像素高度
3. 屏幕尺寸（也就是对角线长多少英寸）
4. 屏幕使用距离（近/触屏
   、中/键鼠、远/遥控）
5. 习惯的 App 设计稿宽度（1125 、750 、375，没有就选最接近的）

知道屏幕像素宽高，根据毕达哥拉斯定理（勾股定理）可以算出屏幕对角线的像素数量。再除以屏幕尺寸 ，就得到每英寸像素数 ，即 PPI 。

PPI = 对角线像素数 / 屏幕尺寸 = √(像素宽度^2 + 像素高度^2) / 屏幕尺寸

根据屏幕使用距离不同，用 PPI 除以不同的常量除数，再取整，就能直接得到屏幕倍数。真实的屏幕倍数五花八门，但设计惯例是当作整数处理，这是屏幕碎片化问题的公认解法 。

屏幕倍数 = PPI / 除数

具体为
：近距离除数为 150，中距离除数为 110 ，远距离除数为 40。

至于这除数怎么来的，是我收集了一些屏幕的参数，通过数据分析反推出来的近似值。我发现，多数触屏设备的 PPI 除以它的实际倍数 ，结果都在 150 附近。同理，中距离和远距离的屏幕，除以各自的实际倍数，结果都在 110 和 40 附近。

这种图表不常见
，我介绍一下：这叫箱线图，boxplot ，用来表达数据在单个维度上的分布范围与集中程度 。这图一般的表格软件画不出来，我用 Python 画的。

炒股的朋友有吗 ？是不是很像 K 线图？没错 ，道理差不多 ，这个图关键信息也是看 4 个位置：

1. 细线顶端：最大值（最高价）
2. 细线底端 ：最小值（最低价）
3. 粗柱子顶端
   ：第三四分位数（开/收盘价）
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://www.uisdc.com/mobile-ui-measurement-guideline

虽然其中的屏幕分辨率数值早已过时
，但原理没变。

最初是做了一个 Excel 版计算器 ，为了验证我的计算方法是否正确 。但使用不够直观友好 ，不适合作为正式产品 。索性做成一个公开可访问的网页小工具吧 ！需求反正已经写这么详细了 ，用 AI 编程，不一次搞定都说不过去了 。

接下来 ，轮到 AI 干活了 。我把上面内容和下面的任务都给 AI 看，让它把我要的产品实现出来。

任务

理解以上背景和计算原理
，帮我生成一个 Html 小工具 。要求如下：

1. 产品名就叫“UI 画布尺寸计算器”。
2. 响应式开发，支持桌面与移动端使用。
3. 由于项目简单，且无后端交互，使用原生 HTML/CSS/Javascript 即可 ，减少依赖。
4. CSS 和 JS 要放在独立的文件里，不要混在 HTML 页面中，便于维护。
5. JS 代码逻辑尽量解耦和模块化 ，常量放在开头便于配置。
6. 用户输入项较多，设计完善的表单验证和信息提示 。输入项最好带有示例，以 placeholder 或其它形式皆可
   。
7. 输出结果包含以下信息 ：画布宽度；画布高度；切图输出的倍数；小字建议字号，比如
   ：12px（1 倍）/24px（2 倍）/36px（3 倍）
8. 输出结果的排版设计要直观 ，不要仅是数字的罗列。要根据结果的实际值画出一个屏幕的示意图
   ，结果各项数值标注在示意图适当的位置。
9. 整个产品提供深色模式和浅色模式切换，默认浅色模式。
10. 使用#2A9D8F 作为品牌色。

结果

果然 ，一步到位！

只是它没按我的要求使用原生 HTML/CSS/Javascript，而是用了 Typescript/TailwindCSS/Next.js。这套技术栈对于我这种 IE6 时代的上古前端有点要命，一开始我甚至都不知道在本地如何预览 。不过这都不是难事 ，问问 AI 就学会了
，顺便了解了现代前端技术的思想和基石，部署其实非常简单。

这不，产品就上线了嘛： https://ui-size.victor42.work/

看来对于简单的小工具，以后就是得先写文章 ，文章写完，工具也就写完了  。

最后，拿着我收集来的屏幕参数数据给 AI，让它调用 MCP 操作浏览器一个个输入验算，算出的屏幕倍数与真实情况高度吻合 ，尤其近距离和中距离设备都非常准确。唯一不准的是远距离大屏幕 ，屏幕倍数相比实际值有一定偏离 ，因为很多大尺寸显示器和电视的实际倍数是 1.5
，不是整数。

总体来说 ，应该可以很好地解决工业设计领域各类小众屏幕的计算问题。

作者：Victor_42