更多尺寸教程：

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

一、移動端 APP 畫布定義

移動端 APP 指的是安裝在移動設備系統上的原生 APP 應用，不是移動端的網頁或在微信里運行的小程序。

面對原生 APP 設計，我們要考慮兩個關鍵問題 —— 系統和機型。系統就是指面向 iOS 還是 Android，機型則是在對應系統陣容中具體應用的設備類型是哪個。

在移動端項目中，如果要同時開發和上架 iOS、Android 系統，那么通常以 iOS 端的設計為標準來適配 Android 系統。僅面向 Android 系統開發的應用，才會直使用 Android 相關的規范創建畫布。

國產手機雖然都有自己深度定制的系統，但它們本質上都是 Android，使用相同標準即可。即使是“獨立”的鴻蒙，在界面的應用上也和 Android 對齊，所以也不用額外考慮。

而在 iOS 端，蘋果近 10 年出的設備包含了十幾種規格，所以我們必須要考慮設計的畫布要以哪個設備作為標準。

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

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

但在一些團隊內部，可能還在延續上古時期制定的標準做設計，比如使用 iPhone6 的 375 或 Plus 的 414，不是說這么設計就開發不出來，而是設計出來的結果和今天最主流或者和馬上就要成為最主流機型的實際效果有較大的偏差，屬于沒必要去產生的問題。

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

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

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

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

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

最后總結一遍，移動端原生 APP 設計中，默認創建 iOS 標準的 402*874 或 393*852，面對 Android 端的設計時創建 412*958，左右折疊屏則使用 905*680。

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

二、小程序和 H5 畫布定義

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

這里首先要普及一個概念，就是原生 APP 運行的環境是手機系統，小程序運行的環境是微信自己的系統，H5 運行的環境則是瀏覽器的系統（內核）。

微信和瀏覽器器內核要實現的目標之一就是跨端一致，保證不同系統、客戶端呈現相同的效果。所以我們面對小程序和 H5 頁面設計時，就不能按原生應用的邏輯來設計。

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

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

這么做雖然讓大屏無法發揮顯示更多內容的優勢，但可以很好的規避適配產生的各種問題，讓設計師和開發者只需要盯著一個尺寸實施即可。同時小程序因為體量限制，內容天生就少，所以官方制定了用體驗換生態穩定性的策略。

而 H5 開發本質上是網頁前端開發，瀏覽器沒有做限制有很大的靈活性，且 H5 頁面比小程序還簡單（簡陋），用原生 APP 的適配邏輯去實現 H5 就更沒有必要。

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

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

因為它們的應用場景都是可以上下滾動的，所以高度相對靈活，盡量避免設計正好全屏高的界面。

三、桌面端網頁和程序的畫布定義

PC 端的網頁和畫布類似，都是面對一個可以變更大小的窗口區域（不是屏幕分辨率）做設計。因為窗口大小的跨度很大，所以初始設計創建的畫布邏輯和移動端不同。

移動端使用的是中間尺寸做界面，而桌面端的設計更注重從最小或較小的尺寸做設計，因為只要小屏完成設計，那么一定可以往大適配，而先完成大屏設計，再往小適配就很容易出現問題（內容不夠放）。

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

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

在響應式網頁中，因為頁面會根據斷點（Breakpoint）的規則進行布局調整，所以設計時需要提供不同斷點區間的設計，也就是每應用一個斷點區域創建一個畫布。

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

桌面端的程序和網頁不同的是，它的顯示區域是由自己決定的，所以形成了兩種模式，一種是固定尺寸，一種是動態尺寸。

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

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

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

最后總結起來，桌面端的網頁固定尺寸，使用 1280*620 以及 1440*800 兩個單屏尺寸，高度可以修改，響應式網頁則根據斷點設置創建畫布，沒有統一標準。桌面端軟件固定和動態尺寸都沒有固定標準，只是復雜軟件會限制最小寬高在 800、600 像素。

總結

在結尾，我們把提到的尺寸統一整理一遍，方便大家記憶。

歡迎關注作者的微信公眾號：「超人的電話亭」