背景

老婆從 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，以此類推。字號也受設計稿倍數不能大于屏幕倍數的規則制約。

這一章看下來是不是快缺氧了？這就是為什么我要把它做成產品，設計師的時間不應該用來算這種東西。一個產品可以幫大家節省數不清的時間。

當然，如果對屏幕的原理感興趣，想要更深入閱讀，還可以看這篇老文：http://www.hx168888.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，不是整數。

總體來說，應該可以很好地解決工業設計領域各類小眾屏幕的計算問題。