最近 iPhone15 系新品已經(jīng)發(fā)布，很快就要正式開始出貨了。
出乎意料的是，今年 iPhone15 的屏幕分辨率居然改了，和 iPhone14pro、15pro 用了相同的尺寸（2556 * 1179 , 460ppi），意味著未來蘋果陣營的主力機(jī)型尺寸要統(tǒng)一了，而過去我們主要使用的 iOS 畫布分辨率也成為過去式。

iOS 以后設(shè)計(jì)要開始用新分辨率了，也趁這個(gè)機(jī)會(huì)，來做一篇關(guān)于 UI 設(shè)計(jì)中畫布創(chuàng)建尺寸的匯總，一次性解決你們所有畫布創(chuàng)建中的疑問和難題。

很多人以為的畫布創(chuàng)建參數(shù)就是根據(jù)設(shè)備、系統(tǒng)的類型，列個(gè)清單就行了，以后跟著這個(gè)清單創(chuàng)建即可。

想起來很美好，但卻難以實(shí)現(xiàn)，原因是畫布會(huì)受到很多外部條件的影響，即使是相同的設(shè)備和系統(tǒng)，都可能在不同的項(xiàng)目場景中使用不同的分辨率。

專業(yè)的設(shè)計(jì)師必然會(huì)根據(jù)實(shí)際的場景做分析，決定使用什么分辨率創(chuàng)建畫布，而不是死記硬背直接照搬。所以，我們先理解畫布的創(chuàng)建受哪些條件影響，以及應(yīng)該遵循什么原則：

• 設(shè)備的物理和邏輯分辨率

• 系統(tǒng)規(guī)范的分辨率定義

• 適配和響應(yīng)式原則的兼顧

• 目標(biāo)用戶群體設(shè)備的定位

• 設(shè)備顯示方案的特性

• 團(tuán)隊(duì)的工作流和歷史包袱

1.1 設(shè)備的物理和邏輯分辨率

第一個(gè)概念，就是分辨率本身包含兩個(gè)層級(jí)，物理分辨率和邏輯分辨率。

物理分辨率指的是顯示器硬件上搭載的像素?cái)?shù)，比如 iPhone15pro的分辨率2556*1179，就是在這個(gè)6.1寸的屏幕中，垂直方向有2556個(gè)像素點(diǎn)，水平方向有1179個(gè)像素點(diǎn)。

這些像素點(diǎn)是物理單元，在制造過程中就集成到屏幕中，無法被更改。所以物理的分辨率是由屏幕的參數(shù)決定的，每臺(tái)設(shè)備的物理分辨率是固定的。

而邏輯分辨率，則是軟件在渲染到屏幕上時(shí)應(yīng)用的分辨率。比如你在電腦上打開分辨率設(shè)置頁面，可以更改屏幕的分辨率，從而影響顯示的效果，這就叫邏輯分辨率。

以移動(dòng)端開發(fā)為代表的平臺(tái)，從代碼設(shè)計(jì)的層面上就全部避開對物理分辨率的定義，無論在 iOS 或者安卓開發(fā)中，都是使用邏輯單位（PT、DP等）而不是像素單位。而這些邏輯單位也是矢量單位，所以在UI類矢量設(shè)計(jì)軟件中，使用的畫布分辨率和官方屏幕硬件的分辨率不一樣。

系統(tǒng)會(huì)根據(jù)特定的算法，對邏輯分辨率創(chuàng)建的內(nèi)容進(jìn)行解析和渲染，作用到顯示器上。所以有了 1x、2x、3x 的倍率概念，意思就是系統(tǒng)根據(jù)顯示器的分辨率密度，對邏輯分辨率的數(shù)值進(jìn)行對應(yīng)比例的放大。

比如iPhone15 的邏輯分辨率是 393*852，使用了 3x 的倍率，就成為 2556 * 1179 像素。

而以 PS 為首的位圖軟件則不具備相應(yīng)的矢量的特性，所以無法使用邏輯分辨率，而使用物理分辨率來創(chuàng)建畫布。

同理，很多電腦使用的 4K 屏，僅僅是提升顯示的精度，并不是容納的內(nèi)容直接達(dá)到 4K 級(jí)，而是使用更小的邏輯分辨率進(jìn)行顯示，確保內(nèi)容是可以看清的。所以 Windows 有個(gè)界面放大的設(shè)置，本質(zhì)上就是減少邏輯分辨率的尺寸，讓內(nèi)容可以顯示得更大。

所以，在 UI 的設(shè)計(jì)中我們創(chuàng)建的畫布，可以直接理解成是基于邏輯分辨率創(chuàng)建畫布，而我們必須要提前搞清楚的，就是針對指定設(shè)備設(shè)計(jì)過程中，邏輯分辨率和物理分辨率之間的換算關(guān)系，是1：1，還是1：N。

1.2 系統(tǒng)規(guī)范的分辨率定義

前面已經(jīng)說過，邏輯分辨率和物理分辨率是兩碼事。但是邏輯分辨率麻煩就麻煩在 “邏輯” 上，只要系統(tǒng)開發(fā)者能搭建出一套合理的邏輯，那么像怎么換算成物理分辨率都可以。

所以當(dāng)我們針對一些特定的系統(tǒng)進(jìn)行設(shè)計(jì)時(shí)，開發(fā)者往往會(huì)給出指定的邏輯分辨率尺寸，且不對標(biāo)固定的屏幕或硬件。

最典型的就是小程序，它之前指定的基礎(chǔ)畫布是 750*1334 rpx，這是一個(gè)小程序特有的單位，我們可以選擇直接創(chuàng)建這個(gè)尺寸的畫布，也可以使用 375 * 667 進(jìn)行設(shè)計(jì)后面再轉(zhuǎn)換成 2x 格式輸出或標(biāo)注……而 rpx 這個(gè)單位就會(huì)自動(dòng)換算適配到不同屏幕中去（和 iOS 和 Android 不同，暫不解釋）。

其它的開放平臺(tái)如支付寶的、智能家居的、私有云系統(tǒng)等，都可能包含類似的畫布指定參數(shù)，在這樣的前提下，就直接使用官方指定的數(shù)值即可。

而沒有官方要求的場景，則需要進(jìn)一步根據(jù)后面的條件判斷。

1.3 適配和響應(yīng)式原則的兼顧

為什么很多界面的設(shè)計(jì)無法獲得官方指定的尺寸，原因就是要兼顧的情況太多，比如網(wǎng)頁或者桌面端的程序，要適配各種各樣的桌面分辨率，界面的窗口還要支持各種縮放。

所以，只要不是只在同一種規(guī)格屏幕上運(yùn)行，且不變更窗口大小的話，那么就一定要考慮軟件的界面適配問題，要確保它們在多種環(huán)境下都能正常顯示。也就是界面的顯示尺寸不是固定死的，而是 “活的”，會(huì)根據(jù)一定的邏輯進(jìn)行縮放。

這些縮放的方法包括等比縮放、自適應(yīng)、響應(yīng)式等方案。具體的不在這里介紹，可以看我之前解釋響應(yīng)式的干貨分享。

文章鏈接：B 端響應(yīng)式界面應(yīng)該怎么做？

而自適應(yīng)、響應(yīng)式的應(yīng)用邏輯里，有個(gè)不可逆的特征，就是從小的尺寸往大的適配容易，而從大的尺寸往小的適配難。

也就是如果你做了一個(gè) 800px 寬且填滿內(nèi)容的頁面，要放大到 2560px 適配起來是很容易的，而如果反過來，則會(huì)出現(xiàn)一堆的問題。因?yàn)楹唵蔚淖赃m應(yīng)規(guī)則是不可能在縮小畫布的情況下還容納那么多信息的，就必然要通過更復(fù)雜的規(guī)則對界面布局做調(diào)整，比如換行、折疊、隱藏等等。

尤其在 B 端領(lǐng)域，很多前端擺爛完的結(jié)果，就是大屏幕顯示還正常，一縮放就直接崩盤了。比如下圖，是前面改版案例中的原頁面，在 1920px、1280px 寬下顯示的效果，也就是如果用戶用小屏幕上網(wǎng)本訪問，接近沒法用的狀態(tài)。

文章鏈接：實(shí)例改版 | 一次完整的交互優(yōu)化可以這么做

所以在面對這種尺寸不會(huì)固定，需要做多設(shè)備適配的場景中，官方?jīng)]辦法強(qiáng)制你用某個(gè)尺寸（還有別的因素），且不是適合直接用較大的尺寸去設(shè)計(jì)。

通常會(huì)選擇中等偏小的尺寸開始設(shè)計(jì)，等于從一開始就在考慮小尺寸的兼容，那么進(jìn)行放大的適配就非常輕松，大幅度降低出錯(cuò)的概率。

也強(qiáng)調(diào)一點(diǎn)，如果在這種場景中，領(lǐng)導(dǎo)還是程序員沒有任何理由的讓你用 1080p 的畫布做設(shè)計(jì)，只能有一個(gè)可能，就是他們對適配兼容性和畫布的關(guān)系缺乏正確的理解。按這個(gè)尺寸做沒問題，只要確認(rèn)窗口縮小時(shí)的適配出問題，鍋由誰背即可。

1.4 目標(biāo)用群體設(shè)備的定位

這個(gè)意思就是搞清楚項(xiàng)目面向的客戶端設(shè)備，屏幕規(guī)格是不是固定的。雖然有些系統(tǒng)和設(shè)備可以產(chǎn)生很多不同的分辨率，但在一些特定情況下可以人為做出統(tǒng)一，拒絕多樣性的可能。

比如做門店的定制平板，如果定制的設(shè)備規(guī)格完全一樣，只定 iPad9，那么其它 iPad 什么尺寸就暫時(shí)不需要操心了?；蛘呓o客服中心定制了相同的臺(tái)式機(jī)和顯示器，所有客服用的都是一樣的顯示器且全屏運(yùn)行，那么其它設(shè)備和分辨率也不需要考慮了。

所以前期的設(shè)計(jì)需求分析中，一定要搞清楚是不是只面向一種規(guī)格的屏幕運(yùn)行，如果是的話，它的邏輯和物理分辨率換算的規(guī)格是什么樣的。

1.5 設(shè)備顯示方案的限制

設(shè)備顯示方案指的是怎么把你的UI界面給展示出來的方案，這個(gè)聽起來比較拗口，最常見的應(yīng)用場景就是在大屏的展示。

大屏本身有很多方案，單投影、多投影組合、大型LED定制設(shè)備、多臺(tái)顯示器拼接，不同的顯示方都會(huì)影響項(xiàng)目的前端開發(fā)方案。

并且，不同的顯示方案會(huì)構(gòu)成不同的拓?fù)潢P(guān)系，比如電腦要通過顯卡視頻端口輸出到分配器，分配器可能再轉(zhuǎn)接更多的分配器后再實(shí)現(xiàn)畫面的拼接。

在這個(gè)拓?fù)潴w系中，有一系列的問題要探究，比如顯卡視頻口輸出的分辨率上限（高端顯卡支持8k120，低端可能只支持4k30），分配器的支持上限，拼接屏幕的分辨率規(guī)格等。

拼接大屏的顯示分辨率不可能是把所有顯示器的分辨率集合起來顯示，比如拼了12個(gè)4k的屏幕，如果完整顯示的話像素總量就是 4k*12，沒有任何顯卡可以支持這種分辨率的輸出。所以必須把它們整合成一個(gè)更小的畫布分辨率進(jìn)行顯示，而這個(gè)更小的分辨率上限就是拓?fù)潢P(guān)系中涉及到的設(shè)備的上限。

而具體的長寬分辨率參數(shù)，也不一定是主流的數(shù)值，比如720、1080、2k、4k這種，因?yàn)楹芏啻笃恋谋壤芷孑猓苑直媛室欢ㄊ亲远x的，而自定義的分辨率邏輯像素總量也不能超過前面的上限。

這樣解釋下來新手可能會(huì)看暈，但這是做大屏必須掌握的能力。雖然理論上設(shè)備的供應(yīng)商會(huì)給一些基本的解決方案，和給你個(gè)可用的分辨率參數(shù)，但一些復(fù)雜的場景里，必須由設(shè)計(jì)師根據(jù)對項(xiàng)目的理解定義（比如使用的3D引擎在高分辨率下的運(yùn)行效率）。

總結(jié)起來，就是類似大屏這種多屏幕組合的顯示場景中，每個(gè)項(xiàng)目的情況完全不同，設(shè)計(jì)師要自己定義畫布的邏輯分辨率，用于正常顯示在最終的顯示設(shè)備中。

1.6 團(tuán)隊(duì)的工作流和歷史包袱

這點(diǎn)本來不是特別想講，但想了下似乎是繞不過去的話題，那還是得談一談。

前面舉出的例子都是基于合理的、有效的項(xiàng)目畫布創(chuàng)建目標(biāo)為準(zhǔn)，而部分項(xiàng)目中并不會(huì)太關(guān)心你用的畫布標(biāo)準(zhǔn)是不是正確的，或者說有其它的原因?qū)е率褂谜_的畫布比錯(cuò)誤的畫布成本還高。

比如還在用 PS 做界面而且不打算換軟件的，且積累了不少源文件，那么你要?jiǎng)映叽缇偷迷诿看握{(diào)用過去的組件時(shí)全部手動(dòng)修改一遍，以及要讓其他同事全部更改自己的習(xí)慣。

類似的問題還有很多，就不多做解釋。要強(qiáng)調(diào)的是，你要自己分的清楚當(dāng)前畫布的定義，是合理的，還僅僅是一種慣性依賴，因?yàn)楦钠饋硖闊┧詫幵赣貌缓线m的。

以上就是定義分辨率所需掌握的主要原則和要點(diǎn)，更細(xì)節(jié)的內(nèi)容需要你們自己去查看相關(guān)資料做積累，包括像素的顯示邏輯、顯示信號(hào)輸出、倍率轉(zhuǎn)換原則等等，全都是作為專業(yè) UI 設(shè)計(jì)師最最最最基礎(chǔ)的知識(shí)點(diǎn)。

2.1 移動(dòng)端 App?畫布制定

移動(dòng)端目前主要的變化是 iPhone15 也應(yīng)用 393 寬的分辨率，390 的設(shè)備開始慢慢進(jìn)入淘汰階段，所以不再像 iPhone14 時(shí)期還是推薦 390 寬作為 APP 界面創(chuàng)建標(biāo)準(zhǔn)。

2.2 小程序畫布制定

小程序應(yīng)用了 rpx 的自適應(yīng)單位，會(huì)針對基礎(chǔ)的畫布進(jìn)行比例縮放，來實(shí)現(xiàn)在不同手機(jī)屏幕的適配。而小程序不是只在手機(jī)上顯示的，還可以在電腦端運(yùn)行，進(jìn)行特定的適配。

同時(shí)，官方文檔內(nèi)的描述從 375 變成了414……官方源文件內(nèi)既有 375 的組件也有 414 的，主打一個(gè)混亂和抽象……

頁面地址：https://developers.weixin.qq.com/miniprogram/design/adapt.html#_2-未適配小程序在PC端體驗(yàn)

2.3 Pad 端畫布設(shè)置

Pad 的平板也包含 iOS 和 Android （鴻蒙……），比較奇怪的是iOS 的尺寸，如果做蘋果的平板沒有制定設(shè)備，則根據(jù)官方的尺寸定義即可。

2.4 網(wǎng)頁的畫布設(shè)置

網(wǎng)頁的設(shè)置包含定寬型戰(zhàn)士網(wǎng)頁和響應(yīng)式類網(wǎng)頁，以版心為準(zhǔn)的單屏分辨率尺寸建議，包含高度中大致減去瀏覽器和系統(tǒng)欄的部分，單屏高度僅用于做屏高預(yù)判，實(shí)際設(shè)計(jì)超出一屏很正常，高度最終根據(jù)內(nèi)容決定。

而響應(yīng)式優(yōu)先建議使用中尺寸進(jìn)行設(shè)計(jì)，同時(shí)復(fù)雜的項(xiàng)目最好挑選2-3個(gè)頁面輸出3個(gè)尺寸的版本，用于和開發(fā)確認(rèn)響應(yīng)式邏輯的應(yīng)用。

2.5 桌面端程序畫布設(shè)置

桌面端的程序設(shè)計(jì)很難有標(biāo)準(zhǔn)的規(guī)則，這和程序類型有很大的關(guān)系，可以是騰訊檸檬這種小工具，也可以是類似 Adobe PS 這種專業(yè)軟件。

但是同理，桌面端的軟件更注重小屏幕尺寸的兼容，不像網(wǎng)頁可以在瀏覽器左右滾動(dòng)，所以沒有外部影響的話建議最大做到 1280 的尺寸。

2.6 大屏端畫布設(shè)置

大屏端前面也說過，每個(gè)項(xiàng)目差異都很大，往往每個(gè)項(xiàng)目用的分辨率都不同，得設(shè)計(jì)師自己解決。

但這里還有個(gè)比較蛋疼且常見的場景，就是無法計(jì)算出具體分辨率的情況下，就要求先輸出設(shè)計(jì)稿，那么我們就可以以 1080 高作為標(biāo)準(zhǔn)，根據(jù)空間的比例設(shè)置寬度。

比如 21：9 的寬高比，那么寬就是 1080 / 9 * 21 = 2560，畫布的分辨率就是 2560 ：1080，要是連比例都沒有，那就使用最基礎(chǔ)的 1080P來完成。

2.7 定制化設(shè)備

最后就是純定制化設(shè)備，這個(gè)就屬于我完全沒辦法給出建議參數(shù)的類型，因?yàn)槎ㄖ苹娘@示器尺寸和規(guī)格實(shí)現(xiàn)是太多了。

畫布的定義需要設(shè)計(jì)師去和硬件供應(yīng)商進(jìn)行溝通，了解物理分辨率大小，以及判斷顯示場景下是否需要使用和物理分辨率不同的邏輯分辨率，再和團(tuán)隊(duì)討論并最終確定。

結(jié)尾

以上就是關(guān)于畫布定義中你們該了解的一切，希望你們看完了之后，可以忘記具體的數(shù)值，再每次項(xiàng)目設(shè)計(jì)前，去思考一遍項(xiàng)目面向的場景需要定義什么樣的尺寸，并能和團(tuán)隊(duì)做出高質(zhì)量的、有效的畫布定義的溝通。

而不是針對固定場景就背一套數(shù)值用一輩子，這種不動(dòng)腦子的做法實(shí)在是太外行了……

后面我會(huì)把尺寸的設(shè)計(jì)做成一份 PDF，整合更多的尺寸要素進(jìn)來，大家有別的想要看到的內(nèi)容可以在下面留言。

目前下期B端課程也在招生中，想要告別小白的身份，就抓緊時(shí)間來咨詢了！周五的公開課也不要錯(cuò)過，還有驚喜！

課程介紹：今年最后一期｜B端產(chǎn)品設(shè)計(jì)課開啟招生

我們下篇再賤~~