免费！超实用的UI画布尺寸计算器（附开发过程）
· 2026-09-04 16:21:40
背景
老婆从 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://www.uisdc.com/mobile-ui-measurement-guideline
虽然其中的屏幕分辨率数值早已过时 ，但原理没变。
最初是做了一个 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 ，不是整数 。
总体来说 ，应该可以很好地解决工业设计领域各类小众屏幕的计算问题 。
作者 ：Victor_42
文章推荐：
小鸡宝宝考考你:端五节的“端”是甚么含义 ？蚂蚁庄园6.22日谜底
黄山揽胜之地“亮光顶”是黄山的最岑岭吗？蚂蚁庄园6.25日谜底
猜一猜 ：菜看中的“玉兰片”是甚么对象做的？蚂蚁庄园7.26日谜底