背景

老婆從 UI 轉(zhuǎn)工業(yè)設(shè)計(jì)后，經(jīng)常遇到奇奇怪怪的屏幕尺寸。由于有 UI 背景，各種工控機(jī)的 UI 界面也歸她設(shè)計(jì)。這些屏幕尺寸經(jīng)常讓她無從下手，不知道畫布該設(shè)置多大。

這是個普遍問題，許多 UI 設(shè)計(jì)師不理解屏幕的工作原理。尤其是從 Retina 高清屏出現(xiàn)后，屏幕引入了倍數(shù)的概念，讓大量 UI 設(shè)計(jì)師不知道設(shè)計(jì)稿畫布應(yīng)該設(shè)成多大。

常見的設(shè)備還好，F(xiàn)igma、Sketch 等設(shè)計(jì)工具往往自帶了尺寸。但工業(yè)設(shè)計(jì)、智能家居、物聯(lián)網(wǎng)領(lǐng)域，有大量不常見的屏幕尺寸。互聯(lián)網(wǎng) UI 設(shè)計(jì)師接觸到這類任務(wù)，往往就懵逼了。

其實(shí)，這有規(guī)律可循。核心就是 PPI，每英寸對應(yīng)的像素值，這是物理世界和像素世界的橋梁，是換算的中介。有人管這個叫像素密度，這個名字起得很形象，像素點(diǎn)越密集，顆粒感越少，顯像越細(xì)膩。

有許多設(shè)計(jì)科普文章都詳細(xì)闡釋了這背后的原理。但對 UI 設(shè)計(jì)師來說，懂一點(diǎn)屏幕原理雖好，但不懂也不應(yīng)成為從業(yè)的障礙。在講究精細(xì)分工的現(xiàn)代社會，畫畫的人也不必知道畫紙是怎么造出來的。

所以，UI 設(shè)計(jì)師需要的并不是科普文，而是一個計(jì)算器。輸入屏幕參數(shù)，計(jì)算器直接告訴他們畫布應(yīng)該設(shè)成多大。

計(jì)算

為了實(shí)現(xiàn)這個簡單產(chǎn)品，背后的計(jì)算過程梳理如下。

輸入方面，設(shè)計(jì)師要輸入如下信息：

1. 屏幕像素寬度
2. 屏幕像素高度
3. 屏幕尺寸（也就是對角線長多少英寸）
4. 屏幕使用距離（近/觸屏、中/鍵鼠、遠(yuǎn)/遙控）
5. 習(xí)慣的 App 設(shè)計(jì)稿寬度（1125、750、375，沒有就選最接近的）

知道屏幕像素寬高，根據(jù)畢達(dá)哥拉斯定理（勾股定理）可以算出屏幕對角線的像素?cái)?shù)量。再除以屏幕尺寸，就得到每英寸像素?cái)?shù)，即 PPI。

PPI = 對角線像素?cái)?shù) / 屏幕尺寸 = √(像素寬度^2 + 像素高度^2) / 屏幕尺寸

根據(jù)屏幕使用距離不同，用 PPI 除以不同的常量除數(shù)，再取整，就能直接得到屏幕倍數(shù)。真實(shí)的屏幕倍數(shù)五花八門，但設(shè)計(jì)慣例是當(dāng)作整數(shù)處理，這是屏幕碎片化問題的公認(rèn)解法。

屏幕倍數(shù) = PPI / 除數(shù)

具體為：近距離除數(shù)為 150，中距離除數(shù)為 110，遠(yuǎn)距離除數(shù)為 40。

至于這除數(shù)怎么來的，是我收集了一些屏幕的參數(shù)，通過數(shù)據(jù)分析反推出來的近似值。我發(fā)現(xiàn)，多數(shù)觸屏設(shè)備的 PPI 除以它的實(shí)際倍數(shù)，結(jié)果都在 150 附近。同理，中距離和遠(yuǎn)距離的屏幕，除以各自的實(shí)際倍數(shù)，結(jié)果都在 110 和 40 附近。

這種圖表不常見，我介紹一下：這叫箱線圖，boxplot，用來表達(dá)數(shù)據(jù)在單個維度上的分布范圍與集中程度。這圖一般的表格軟件畫不出來，我用 Python 畫的。

炒股的朋友有嗎？是不是很像 K 線圖？沒錯，道理差不多，這個圖關(guān)鍵信息也是看 4 個位置：

1. 細(xì)線頂端：最大值（最高價）
2. 細(xì)線底端：最小值（最低價）
3. 粗柱子頂端：第三四分位數(shù)（開/收盤價）
4. 粗柱子底端：第一四分位數(shù)（收/開盤價）

粗柱子內(nèi)部還多一條橫線，這是 K 線圖沒有的，代表中位數(shù)，我 PPI 除數(shù)就是按中位數(shù)取了個整。

多解釋一下中位數(shù)和四分位數(shù)的概念：如果把所有統(tǒng)計(jì)過的設(shè)備按 PPI 除數(shù)從低到高排列，然后切一刀下去，讓左右兩邊設(shè)備數(shù)量相同，這切的位置就是中位數(shù)。左右兩邊再用同樣的方法對半切，切的位置就分別是第一四分位數(shù)和第三四分位數(shù)。

為什么不簡單點(diǎn)取平均數(shù)呢？可以看到細(xì)線比柱子高很多，說明越往高低去，分布越稀疏，越容易出現(xiàn)個別數(shù)據(jù)偏離很遠(yuǎn)。但我們要的是能代表多數(shù)設(shè)備的除數(shù)，所以要排除這些極端值的影響，因而選擇中位數(shù)。

接下來，回到我們上一個公式：

屏幕倍數(shù) = PPI / 除數(shù)

PPI 已經(jīng)算出來了，除數(shù)也通過統(tǒng)計(jì)得到了。既然得到了屏幕倍數(shù)，核心問題已經(jīng)解決。接下來還要考慮設(shè)計(jì)師自身的習(xí)慣，有的人愛用 1 倍大小畫布設(shè)計(jì)（Figma 和 Sketch 用戶居多），有的人愛用 2 倍或 3 倍（PS 主力的設(shè)計(jì)師居多）。

用屏幕的像素寬高，分別除以屏幕倍數(shù)，得到屏幕邏輯像素寬高。再各自乘以習(xí)慣的 App 設(shè)計(jì)稿寬度對應(yīng)的倍數(shù)（1125、750、375 分別對應(yīng) 3 倍、2 倍、1 倍），就得到最終結(jié)果，畫布該設(shè)置多大。

畫布寬 = 屏幕像素寬 / 屏幕倍數(shù) × 設(shè)計(jì)稿倍數(shù)

畫布高 = 屏幕像素高 / 屏幕倍數(shù) × 設(shè)計(jì)稿倍數(shù)

隨之而來還有 2 個問題：切圖切多大？字號設(shè)多大？

切圖倍數(shù) = 屏幕倍數(shù) / 設(shè)計(jì)稿倍數(shù)

比如屏幕倍數(shù) 2 倍，你習(xí)慣按 1 倍設(shè)計(jì)，切圖就切 2 倍。你習(xí)慣按 2 倍設(shè)計(jì)，切圖就切 1 倍。

但如果你習(xí)慣按 3 倍設(shè)計(jì)呢？所以還要加個限制，設(shè)計(jì)稿倍數(shù)不能大于屏幕倍數(shù)，那沒有意義，出現(xiàn)這種情況就把按屏幕倍數(shù)當(dāng)做設(shè)計(jì)稿倍數(shù)。

字號和設(shè)計(jì)稿倍數(shù)直接相關(guān)。比如常見的提示文案小字字號，設(shè)計(jì)稿 1 倍，一般就是 12px，2 倍就是 24px，以此類推。字號也受設(shè)計(jì)稿倍數(shù)不能大于屏幕倍數(shù)的規(guī)則制約。

這一章看下來是不是快缺氧了？這就是為什么我要把它做成產(chǎn)品，設(shè)計(jì)師的時間不應(yīng)該用來算這種東西。一個產(chǎn)品可以幫大家節(jié)省數(shù)不清的時間。

當(dāng)然，如果對屏幕的原理感興趣，想要更深入閱讀，還可以看這篇老文：https://www.uisdc.com/mobile-ui-measurement-guideline

雖然其中的屏幕分辨率數(shù)值早已過時，但原理沒變。

最初是做了一個 Excel 版計(jì)算器，為了驗(yàn)證我的計(jì)算方法是否正確。但使用不夠直觀友好，不適合作為正式產(chǎn)品。索性做成一個公開可訪問的網(wǎng)頁小工具吧！需求反正已經(jīng)寫這么詳細(xì)了，用 AI 編程，不一次搞定都說不過去了。

接下來，輪到 AI 干活了。我把上面內(nèi)容和下面的任務(wù)都給 AI 看，讓它把我要的產(chǎn)品實(shí)現(xiàn)出來。

任務(wù)

理解以上背景和計(jì)算原理，幫我生成一個 Html 小工具。要求如下：

1. 產(chǎn)品名就叫“UI 畫布尺寸計(jì)算器”。
2. 響應(yīng)式開發(fā)，支持桌面與移動端使用。
3. 由于項(xiàng)目簡單，且無后端交互，使用原生 HTML/CSS/Javascript 即可，減少依賴。
4. CSS 和 JS 要放在獨(dú)立的文件里，不要混在 HTML 頁面中，便于維護(hù)。
5. JS 代碼邏輯盡量解耦和模塊化，常量放在開頭便于配置。
6. 用戶輸入項(xiàng)較多，設(shè)計(jì)完善的表單驗(yàn)證和信息提示。輸入項(xiàng)最好帶有示例，以 placeholder 或其它形式皆可。
7. 輸出結(jié)果包含以下信息：畫布寬度；畫布高度；切圖輸出的倍數(shù)；小字建議字號，比如：12px（1 倍）/24px（2 倍）/36px（3 倍）
8. 輸出結(jié)果的排版設(shè)計(jì)要直觀，不要僅是數(shù)字的羅列。要根據(jù)結(jié)果的實(shí)際值畫出一個屏幕的示意圖，結(jié)果各項(xiàng)數(shù)值標(biāo)注在示意圖適當(dāng)?shù)奈恢谩?/li>
9. 整個產(chǎn)品提供深色模式和淺色模式切換，默認(rèn)淺色模式。
10. 使用#2A9D8F 作為品牌色。

結(jié)果

果然，一步到位！

只是它沒按我的要求使用原生 HTML/CSS/Javascript，而是用了 Typescript/TailwindCSS/Next.js。這套技術(shù)棧對于我這種 IE6 時代的上古前端有點(diǎn)要命，一開始我甚至都不知道在本地如何預(yù)覽。不過這都不是難事，問問 AI 就學(xué)會了，順便了解了現(xiàn)代前端技術(shù)的思想和基石，部署其實(shí)非常簡單。

這不，產(chǎn)品就上線了嘛： https://ui-size.victor42.work/

看來對于簡單的小工具，以后就是得先寫文章，文章寫完，工具也就寫完了。

最后，拿著我收集來的屏幕參數(shù)數(shù)據(jù)給 AI，讓它調(diào)用 MCP 操作瀏覽器一個個輸入驗(yàn)算，算出的屏幕倍數(shù)與真實(shí)情況高度吻合，尤其近距離和中距離設(shè)備都非常準(zhǔn)確。唯一不準(zhǔn)的是遠(yuǎn)距離大屏幕，屏幕倍數(shù)相比實(shí)際值有一定偏離，因?yàn)楹芏啻蟪叽顼@示器和電視的實(shí)際倍數(shù)是 1.5，不是整數(shù)。

總體來說，應(yīng)該可以很好地解決工業(yè)設(shè)計(jì)領(lǐng)域各類小眾屏幕的計(jì)算問題。

作者：Victor_42