免費(fèi)！超實(shí)用的UI畫(huà)布尺寸計(jì)算器（附開(kāi)發(fā)過(guò)程）

背景

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

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

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

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

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

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

計(jì)算

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

接下來(lái)，回到我們上一個(gè)公式：

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

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

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

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

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

隨之而來(lái)還有 2 個(gè)問(wèn)題：切圖切多大？字號(hào)設(shè)多大？

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

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

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

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

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

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

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

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

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

任務(wù)

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

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

結(jié)果

果然，一步到位！

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

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

看來(lái)對(duì)于簡(jiǎn)單的小工具，以后就是得先寫(xiě)文章，文章寫(xiě)完，工具也就寫(xiě)完了。

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

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