推薦閱讀

之前網(wǎng)頁端的適配和響應(yīng)式輸出了不少，但是移動(dòng)端的適配方法卻和網(wǎng)頁端有一定的差異，不能直接套用。加上最近關(guān)于移動(dòng)端適配的學(xué)員問題有很多，所以我干脆匯總一篇移動(dòng)端的適配方法出來，徹底解決大家在這方面的疑問。

因?yàn)橐苿?dòng)端適配是若干零碎問題和場(chǎng)景的合集，所以我會(huì)根據(jù)幾個(gè)不同的疑問展開說明。

1. 不同屏幕大小的適配邏輯
2. 不同像素密度的適配方式
3. 安卓和蘋果的適配做法
4. 手機(jī)端和平板的適配規(guī)范
5. 設(shè)計(jì)交付中的適配說明

不同屏幕大小的適配邏輯

首先適配的第一個(gè)問題，就是面對(duì)手機(jī)屏幕大小不一，顯示畫布尺寸不同的問題。以 iPhone 舉例，在 UI 設(shè)計(jì)軟件中可以創(chuàng)建的尺寸就有好幾種：

安卓手機(jī)就更不用說了，相關(guān)規(guī)格列三天三夜也列不完。屏幕規(guī)格那么多，自然不可能設(shè)計(jì)時(shí)每個(gè)規(guī)格都輸出一套界面，前端開發(fā)更不可能每個(gè)規(guī)格都單獨(dú)寫一套樣式。所以必須應(yīng)用一種技術(shù)和邏輯，只需要開發(fā)一套界面樣式就能自動(dòng)適配所有設(shè)備，這就是移動(dòng)端的屏幕適配規(guī)則。

按常規(guī)理解的話，屏幕適配不就是根據(jù)尺寸或分辨率等比縮放就可以了。再想遠(yuǎn)一點(diǎn)，如果比例不一樣怎么辦，簡(jiǎn)單，保持寬度一致可以上下滾動(dòng)就行了。

這種做法是可以實(shí)現(xiàn)，但是多數(shù)情況下是不合理的，因?yàn)槭謾C(jī)屏幕變大意味著更大的空間可以容納更多信息，而不止是把小屏幕的內(nèi)容放大而已。

所以移動(dòng)端的屏幕適配，除了等比放大以外，還包括對(duì)齊模式、尺寸適應(yīng)兩個(gè)要素。

對(duì)齊模式就是元素和父級(jí)圖層的對(duì)齊關(guān)系，比如頂部的標(biāo)題欄和底部導(dǎo)航，就是基于窗口（上級(jí)圖層）的上對(duì)齊和下對(duì)齊，不管這個(gè)窗口當(dāng)前多大，它們都分別處于最頂端和最底端。

除了上下左右對(duì)齊外，對(duì)齊關(guān)系也可以是上左、上右、下左、下右，且對(duì)齊并不一定得是邊緣完全貼合，可以是預(yù)留一個(gè)固定的數(shù)值。比如一個(gè)在右下角的懸浮標(biāo)簽，它基于上級(jí)畫布右間距為零，下方邊緣間距為 120px，那么效果如下所示：

對(duì)齊是一種相對(duì)關(guān)系，除了上級(jí)畫布以外，也可以是上級(jí)的組件視圖，比如一個(gè)標(biāo)題欄內(nèi)包含返回按鈕、頁面標(biāo)題、更多按鈕，它們分別基于組件視圖左、中、右對(duì)齊，那么組件不管怎么放大，它們的關(guān)系也保持不變。

尺寸適應(yīng)則是元素對(duì)于上、下級(jí)元素尺寸的響應(yīng)邏輯，一種是根據(jù)上級(jí)元素預(yù)留的空間填充，另一種是根據(jù)下級(jí)元素的尺寸變動(dòng)。

比如在上方的案例中，標(biāo)題欄的寬就基于畫布變大而變大，因?yàn)楫嫴紱]有設(shè)置左右內(nèi)間距（Padding），所以它是撐滿的狀態(tài)。而有些情況，上級(jí)元素則會(huì)添加內(nèi)間距，則下級(jí)的元素寬就會(huì)受到影響。比如一個(gè)模態(tài)彈窗設(shè)置了左右 20px 的內(nèi)間距，那么預(yù)留給段落文本的空間就要減去這些間距，那么當(dāng)它基于父級(jí)填充時(shí)，則會(huì)有下面的效果。

還是上面的案例，可以將模態(tài)窗口的高度設(shè)置成根據(jù)下級(jí)段落文本的高度進(jìn)行響應(yīng)，那么它的高度就變成了段落行高加上下內(nèi)間距，段落行數(shù)越多，則模態(tài)窗口的高度越大。

除了上面這種簡(jiǎn)單的案例，尺寸適應(yīng)還可以拓展出不同的用法，比如在一個(gè)雙列列表中，可以先制定父級(jí)的左右內(nèi)間距和列之間的間距（具體的邏輯不深究，都是作為父級(jí)的設(shè)置即可），于是每列的寬度就被動(dòng)確定出來了。

到這里，我們總結(jié)了五種元素適配設(shè)置：

1. 元素基于父級(jí)的對(duì)齊
2. 長(zhǎng)或?qū)挼臄?shù)值不變
3. 長(zhǎng)或?qū)挼牡缺瓤s放
4. 長(zhǎng)或?qū)捇诟讣?jí)填充
5. 長(zhǎng)或?qū)捇谧蛹?jí)響應(yīng)

如果看過 Figma 或即時(shí)課程的話應(yīng)該對(duì)它們感到非常的熟悉，沒錯(cuò)，軟件內(nèi)的響應(yīng)式（Constraints）和自動(dòng)布局（Autolayout）就是用于實(shí)現(xiàn)這些邏輯的功能。

PS：但一定要注意，它們雖然可以實(shí)現(xiàn)部分場(chǎng)景但不夠完美，不能完全等同進(jìn)開發(fā)的層級(jí)結(jié)構(gòu)。

這些元素的適配設(shè)置相互作用，層層傳遞，從而使得整個(gè)頁面可以適配到不同的屏幕中去。而這要繼續(xù)推導(dǎo)出下一個(gè)要點(diǎn)，即頁面適配是頁面內(nèi)元素適配設(shè)置的合集，而不是頁面的獨(dú)立行為。

而在適配設(shè)置中，如果元素的長(zhǎng)或?qū)挄?huì)有變動(dòng)（縮放、填充、響應(yīng)），那么它就沒有固定數(shù)值，而是一個(gè)變量，所以在軟件開發(fā)中不會(huì)設(shè)置它的具體數(shù)值。但我們?cè)谠O(shè)計(jì)界面時(shí)，必然要根據(jù)其中一個(gè)畫布規(guī)格做設(shè)計(jì)，所有元素在畫布中就必然會(huì)有具體的數(shù)值，所以這個(gè)數(shù)值是什么根本不重要，不要用 4 的倍數(shù)去硬套，4 的倍數(shù)只適用于長(zhǎng)寬是被固定的元素或間距。

我們用一個(gè) 393 規(guī)格的頁面進(jìn)行講解，它是如何適配到 375 和 430 兩個(gè)規(guī)格中去的。

在具體項(xiàng)目中，專業(yè)設(shè)計(jì)師在每一個(gè)頁面設(shè)計(jì)過程中都會(huì)考慮適配對(duì)應(yīng)的邏輯，并確保頁面的適配效果保持統(tǒng)一。而不同頁面場(chǎng)景所需的適配方式各不相同，就需要依靠設(shè)計(jì)師的分析和經(jīng)驗(yàn)來完成。

最后，要強(qiáng)調(diào)在一個(gè)專業(yè)的團(tuán)隊(duì)中，移動(dòng)端的適配規(guī)則是由設(shè)計(jì)師決定的，而不是設(shè)計(jì)好界面后直接交付給開發(fā)讓他們發(fā)揮 “主觀能動(dòng)性” 自己判斷。

結(jié)尾

剩余的內(nèi)容想了想還是下篇更新，因?yàn)橐陨蟽?nèi)容是整個(gè)移動(dòng)端適配中最重要的基礎(chǔ)知識(shí)，可以直接影響我們進(jìn)行設(shè)計(jì)。

其余內(nèi)容我們會(huì)在下篇進(jìn)行更新。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭