最近畫布的問題又多起來了，所以更新一篇新的畫布分辨率列表用于參考，不要再被這些簡單的問題束縛了。

一、移動端 APP 畫布定義

移動端 APP 指的是安裝在移動設(shè)備系統(tǒng)上的原生 APP 應(yīng)用，不是移動端的網(wǎng)頁或在微信里運(yùn)行的小程序。

面對原生 APP 設(shè)計，我們要考慮兩個關(guān)鍵問題 —— 系統(tǒng)和機(jī)型。系統(tǒng)就是指面向 iOS 還是 AndROId，機(jī)型則是在對應(yīng)系統(tǒng)陣容中具體應(yīng)用的設(shè)備類型是哪個。

在移動端項(xiàng)目中，如果要同時開發(fā)和上架 iOS、Android 系統(tǒng)，那么通常以 iOS 端的設(shè)計為標(biāo)準(zhǔn)來適配 Android 系統(tǒng)。僅面向 Android 系統(tǒng)開發(fā)的應(yīng)用，才會直使用 Android 相關(guān)的規(guī)范創(chuàng)建畫布。

國產(chǎn)手機(jī)雖然都有自己深度定制的系統(tǒng)，但它們本質(zhì)上都是 Android，使用相同標(biāo)準(zhǔn)即可。即使是"獨(dú)立"的鴻蒙，在界面的應(yīng)用上也和 Android 對齊，所以也不用額外考慮。

而在 iOS 端，蘋果近 10 年出的設(shè)備包含了十幾種規(guī)格，所以我們必須要考慮設(shè)計的畫布要以哪個設(shè)備作為標(biāo)準(zhǔn)。

最簡單、準(zhǔn)確的思路，就是跟隨"最新官方組件庫"中使用的分辨率。在 iOS17 中，使用的是 15 Pro 的 393*852，在 iOS 18 中，使用的是 16 Pro 的 402*874。

官方除了使用最新設(shè)備的規(guī)格外，還有個要點(diǎn)，就是目標(biāo)設(shè)備是 —— 中等尺寸。比 16 Pro 小的有 Mini、比它大的有 Plus、Pro Max，做中間尺寸的設(shè)計可以更簡單地向下和向上適配。

但在一些團(tuán)隊(duì)內(nèi)部，可能還在延續(xù)上古時期制定的標(biāo)準(zhǔn)做設(shè)計，比如使用 iPhone6 的 375 或 Plus 的 414，不是說這么設(shè)計就開發(fā)不出來，而是設(shè)計出來的結(jié)果和今天最主流或者和馬上就要成為最主流機(jī)型的實(shí)際效果有較大的偏差，屬于沒必要去產(chǎn)生的問題。

建議面對還在使用舊版分辨率的項(xiàng)目時，可以和開發(fā)討論將設(shè)計稿切換成新的分辨率的可行性，常規(guī)情況下更換交付設(shè)計稿的尺寸對開發(fā)來說沒區(qū)別，但有些開發(fā)水平不行，所以設(shè)計師只能妥協(xié)沿用之前的版本。

而在 Android 端，類似的問題也存在。早先 Android 的通用畫布尺寸是 720P （720*1280），那時候還有很多 5 寸的屏幕。而今天的安卓設(shè)備中，6.3 寸的屏幕就叫 mini 了……

所以安卓設(shè)計的畫布同樣要拋棄這種古老的規(guī)格，而新的參數(shù)同樣建議使用 MaterialDesign3 里給出的范例，即 412*958。

而在安卓的移動端中，還有個 iOS 沒有的特殊場景，就是折疊屏。

上下翻折屏尺寸和普通手機(jī)沒區(qū)別所以忽略，而左右翻折的屏幕通常都是內(nèi)屏，而這個內(nèi)屏的規(guī)格五花八門（FindN 系列或華為三折），所以沒辦法以具體設(shè)備作為標(biāo)準(zhǔn)，建議使用官方組件中的 Expanded 畫布分辨率 905*680。

最后總結(jié)一遍，移動端原生 APP 設(shè)計中，默認(rèn)創(chuàng)建 iOS 標(biāo)準(zhǔn)的 402*874 或 393*852，面對 Android 端的設(shè)計時創(chuàng)建 412*958，左右折疊屏則使用 905*680。

要理解原生 APP UI 界面設(shè)計是設(shè)計一套可適配的布局標(biāo)準(zhǔn)，而不是固定尺寸的平面視覺，前端程序員會根據(jù)交付的內(nèi)容去做適配，我們要做到的就是盡可能確保設(shè)計稿能反應(yīng)主流設(shè)備的預(yù)覽效果即可。

二、小程序和 H5 畫布定義

移動端的設(shè)計并不只有原生 APP 的設(shè)計，與之相對的就是小程序和 H5 活動頁的設(shè)計。

這里首先要普及一個概念，就是原生 APP 運(yùn)行的環(huán)境是手機(jī)系統(tǒng)，小程序運(yùn)行的環(huán)境是微信自己的系統(tǒng)，H5 運(yùn)行的環(huán)境則是瀏覽器的系統(tǒng)（內(nèi)核）。

微信和瀏覽器器內(nèi)核要實(shí)現(xiàn)的目標(biāo)之一就是跨端一致，保證不同系統(tǒng)、客戶端呈現(xiàn)相同的效果。所以我們面對小程序和 H5 頁面設(shè)計時，就不能按原生應(yīng)用的邏輯來設(shè)計。

其中，微信官方定義的小程序分辨率是寬 375，高 ≥ 667（不同設(shè)備比例不同，高度要適配），我們可以使用 375*812 的規(guī)格創(chuàng)建畫布。

大于 375 的設(shè)備如 390、393、402、440 等，微信會使用等比縮放的方式渲染小程序界面，簡單來說就是"無腦放大"。

這么做雖然讓大屏無法發(fā)揮顯示更多內(nèi)容的優(yōu)勢，但可以很好的規(guī)避適配產(chǎn)生的各種問題，讓設(shè)計師和開發(fā)者只需要盯著一個尺寸實(shí)施即可。同時小程序因?yàn)轶w量限制，內(nèi)容天生就少，所以官方制定了用體驗(yàn)換生態(tài)穩(wěn)定性的策略。

而 H5 開發(fā)本質(zhì)上是網(wǎng)頁前端開發(fā)，瀏覽器沒有做限制有很大的靈活性，且 H5 頁面比小程序還簡單（簡陋），用原生 APP 的適配邏輯去實(shí)現(xiàn) H5 就更沒有必要。

所以 H5 頁面也普遍使用小尺寸畫布進(jìn)行放大適配更大的屏幕，而這里的小尺寸就不僅是 375*667 的，還可以使用更小的 360*640（安卓的 720P），用哪個就要和前端做確認(rèn)了。

最后總結(jié)一遍，小程序和 H5 都可以使用 375*812 的畫布，而 H5 還可以使用更小的 360*640。

因?yàn)樗鼈兊膽?yīng)用場景都是可以上下滾動的，所以高度相對靈活，盡量避免設(shè)計正好全屏高的界面。

三、桌面端網(wǎng)頁和程序的畫布定義

PC 端的網(wǎng)頁和畫布類似，都是面對一個可以變更大小的窗口區(qū)域（不是屏幕分辨率）做設(shè)計。因?yàn)榇翱诖笮〉目缍群艽?，所以初始設(shè)計創(chuàng)建的畫布邏輯和移動端不同。

移動端使用的是中間尺寸做界面，而桌面端的設(shè)計更注重從最小或較小的尺寸做設(shè)計，因?yàn)橹灰∑镣瓿稍O(shè)計，那么一定可以往大適配，而先完成大屏設(shè)計，再往小適配就很容易出現(xiàn)問題（內(nèi)容不夠放）。

在網(wǎng)頁的設(shè)計中，包含兩種模式，定寬型和響應(yīng)式式。定寬網(wǎng)頁即主要內(nèi)容區(qū)域（版心）的寬度是固定的，不隨瀏覽器變更，而常見的版心寬度有兩個規(guī)格，小的在 1000px 上下，大的在 1200 上下。

因?yàn)閯?chuàng)建畫布會額外預(yù)留左右的留白，以及要考慮系統(tǒng)、瀏覽器會占據(jù)一定的高度空間，所以創(chuàng)建網(wǎng)頁畫布可以使用 1280*620 (720-100) 和 1440*800 (900-100) 的分辨率，但因?yàn)榫W(wǎng)頁可以上下滾動，所以高度可以隨意修改。

在響應(yīng)式網(wǎng)頁中，因?yàn)轫撁鏁鶕?jù)斷點(diǎn)（Breakpoint）的規(guī)則進(jìn)行布局調(diào)整，所以設(shè)計時需要提供不同斷點(diǎn)區(qū)間的設(shè)計，也就是每應(yīng)用一個斷點(diǎn)區(qū)域創(chuàng)建一個畫布。

這就要看設(shè)計師想要創(chuàng)建多少斷點(diǎn)區(qū)域出來了，但建議先從 1280 這個較小的分辨率開始設(shè)計，然后再向下或向上做其它版本，最小的桌面端網(wǎng)頁通常是 800px，最大適配不超過 2560px。

桌面端的程序和網(wǎng)頁不同的是，它的顯示區(qū)域是由自己決定的，所以形成了兩種模式，一種是固定尺寸，一種是動態(tài)尺寸。

固定尺寸就是軟件的窗口大小是固定的，不能被修改，比如檸檬、Magent、iState 之類的系統(tǒng)工具。

另一種動態(tài)尺寸則是用戶可以自由修改窗口大小的類型，不管是 Adobe 還是 Office，我們可以隨意拖拽窗口到我們自己想要的狀態(tài)。

通常，軟件為了防止適配錯誤，會限制最小的縮放尺寸，復(fù)雜的軟件通常最小寬度在 800 上下，最小高度在 600 上下，而最大長寬則沒有限制。

最后總結(jié)起來，桌面端的網(wǎng)頁固定尺寸，使用 1280*620 以及 1440*800 兩個單屏尺寸，高度可以修改，響應(yīng)式網(wǎng)頁則根據(jù)斷點(diǎn)設(shè)置創(chuàng)建畫布，沒有統(tǒng)一標(biāo)準(zhǔn)。桌面端軟件固定和動態(tài)尺寸都沒有固定標(biāo)準(zhǔn)，只是復(fù)雜軟件會限制最小寬高在 800、600 像素。

總結(jié)

在結(jié)尾，我們把提到的尺寸統(tǒng)一整理一遍，方便大家記憶。

作者：超人的電話亭