很多工作了幾年的設(shè)計(jì)師依然搞不懂小程序畫布創(chuàng)建依據(jù)和適配邏輯，所以今天針對(duì)這個(gè)問(wèn)題，做一篇簡(jiǎn)單的分享，來(lái)對(duì)這種基礎(chǔ)知識(shí)點(diǎn)做個(gè)掃盲。
首先小程序之所以叫小程序，因?yàn)樗皇窃谑謾C(jī)、電腦系統(tǒng)上運(yùn)行的應(yīng)用（Native），而是在微信里運(yùn)行的應(yīng)用。也就是說(shuō)，微信本身有套系統(tǒng)，而小程序的設(shè)計(jì)要遵循的是微信的設(shè)計(jì)規(guī)范，而不是蘋果、安卓、微軟的設(shè)計(jì)規(guī)范。
這么做的原因是為了讓開(kāi)發(fā)者只用一套代碼，就能在所有平臺(tái)、系統(tǒng)上的微信運(yùn)行，并展示出相同的效果。這個(gè)邏輯和網(wǎng)頁(yè)類似，不管你在什么平臺(tái)還是系統(tǒng)只要安裝了瀏覽器，就可以讀取相同的網(wǎng)頁(yè)，而不用針對(duì)不同平臺(tái)寫一套全新的代碼出來(lái)。
雖然小程序主要在移動(dòng)端運(yùn)行，它的設(shè)計(jì)理念會(huì)盡量貼合原生應(yīng)用，多數(shù)控件、組件、交互的設(shè)計(jì)方式一樣，但系統(tǒng)不同必然會(huì)導(dǎo)致細(xì)節(jié)上的差異，而界面的畫布就是最大的問(wèn)題。
首先小程序官方創(chuàng)建了一套自己的語(yǔ)言，WXML、WXSS、WXS，分別對(duì)應(yīng)網(wǎng)頁(yè)前端的 HTML、CSS、JavaScript。控制尺寸、樣式的語(yǔ)言是 WXSS，而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位，也不是移動(dòng)端會(huì)用的 pt、dp、sp 這樣的矢量單位，而是一個(gè)很特殊的“
變種單位
”。
微信系統(tǒng)在渲染界面時(shí)，固定了移動(dòng)端視圖窗口為 750rpx。不管你在蘋果還是安卓系統(tǒng)，用的是無(wú)劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯，都使用 750rpx 渲染。
換句話說(shuō)，
rpx 的長(zhǎng)度即 —— 屏幕的 1/750
。
這是個(gè)比較抽象的概念，移動(dòng)端使用矢量單位，是為了在屏幕變大的同時(shí)擴(kuò)大畫布尺寸，提升顯示容量，所以有了適配原則，組件的應(yīng)用自動(dòng)布局適應(yīng)空間的變化。
但是小程序不一樣，微信采用了最簡(jiǎn)單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中，直接縮放內(nèi)容來(lái)填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個(gè)小程序界面。
如果我們把它們縮放成一樣的寬相互疊加，會(huì)發(fā)現(xiàn)元素大小是一樣的（Mac 端字體和移動(dòng)端有差異，所以有一定寬度差異，但是字號(hào)相同）。
但正常的移動(dòng)端應(yīng)用，使用自動(dòng)布局而不是等比放大，覆蓋到一起是不會(huì)重疊的，比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
所以，微信的畫布就是 750rpx 寬適配到所有移動(dòng)端屏幕，但高度會(huì)根據(jù)比例調(diào)整，畢竟不同屏幕的長(zhǎng)寬比不一樣。
再進(jìn)一步分析，750 這個(gè)數(shù)值哪來(lái)的呢？一看就知道是 iPhone 早期和低端設(shè)備的實(shí)際分辨率，即 375 的 2x 數(shù)值。雖然現(xiàn)在移動(dòng)端設(shè)計(jì)已經(jīng)從 375 過(guò)渡到 390 再更新到目前的 393，但小程序依舊使用375。
原因和之前響應(yīng)式分享中提到的一樣 ——
往大適配容易，往小適配難
！
現(xiàn)在市場(chǎng)上還保留數(shù)量可觀的 375 設(shè)備，以微信的角色和體量就勢(shì)必要兼容它們。既然兼容它們，那
設(shè)計(jì)和渲染就以兼容的最小畫布為準(zhǔn)向上放大
，而沒(méi)有向下縮小的顧慮，這可以最大保證兼容性和可用性。
用 375 規(guī)格的設(shè)備去創(chuàng)建畫布是沒(méi)有問(wèn)題的，不管你是使用 iPhone SE 還是 iPhone Mini 為標(biāo)準(zhǔn)都可以。
因?yàn)橄到y(tǒng)用的 750rpx，所以原則上使用 750*1334 或 750*1624 畫布創(chuàng)建最佳，但實(shí)際情況還是有出路。因?yàn)楣俜浇M件庫(kù)用的是 375 寬....
這又涉及到現(xiàn)實(shí)情況的考慮，畢竟設(shè)計(jì)是設(shè)計(jì)，開(kāi)發(fā)是開(kāi)發(fā)。在設(shè)計(jì)過(guò)程中我們往往會(huì)用其它應(yīng)用設(shè)計(jì)好的素材，尤其一些大廠應(yīng)用，小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調(diào)一遍，和重做差不多，而且參數(shù)和設(shè)計(jì)師習(xí)慣不同，會(huì)出很多錯(cuò)誤。
所以，正常創(chuàng)建小程序的畫布使用常規(guī)的 375 畫布即可。而在進(jìn)入開(kāi)發(fā)階段，程序員可以直接在即時(shí)、 Figma、藍(lán)湖的標(biāo)注設(shè)置中使用 2x 的倍率，既可以獲得 rpx 的具體數(shù)值。
這是個(gè)隱患問(wèn)題，建議盡量在設(shè)計(jì)前和你們的前端程序員核對(duì)一遍懂不懂的如何換算數(shù)值，創(chuàng)建 375 是否有阻力，如果一定強(qiáng)調(diào)要用 750，你再自己展開(kāi)后續(xù)的對(duì)線，誰(shuí)贏了聽(tīng)誰(shuí)的……
除了標(biāo)準(zhǔn)移動(dòng)端畫布外，還有個(gè)非常鬼畜的地方，就是組件庫(kù)內(nèi)有個(gè) Half-screen Dialog，里面的組件用的是 414 寬。這數(shù)值是 iPhone 8 Plus/ XS Max 的規(guī)格，總不能還特意去支持這些古代大屏吧？
414 是小程序在電腦端啟動(dòng)時(shí)使用的規(guī)格，未經(jīng)適配的小程序在電腦端的窗口就是固定的 414*736 。
用 736 這個(gè)高也和兼容小屏幕有關(guān)就不展開(kāi)了，且小程序在電腦端也可以使用響應(yīng)式的適配，只是這個(gè)需求實(shí)在太少，所以也不在這里多做介紹，感興趣的可以自己研究官方規(guī)范。
最后，我自己當(dāng) AI 做總結(jié)
：
-
-
-
rpx 長(zhǎng)度是移動(dòng)端屏幕的 1/750
-
小程序適配不同手機(jī)屏幕的方式是根據(jù)寬度等比縮放
-
創(chuàng)建小程序設(shè)計(jì)畫布使用 375*667 或 375*812
-
小程序在電腦端上會(huì)放大成 414*736
-
電腦端調(diào)用的原生組件和移動(dòng)端不同
作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
