這是移動端規范的最后一篇，關于移動端適配相關原則的解析。

適配是一個講起來非常麻煩的問題，網上其實基本搜不到靠譜的解釋，這可能就是你們可以找到的唯一一篇完整分享，要好好珍惜。

往期回顧：

手機屏幕尺寸眾多，一直是個很讓人頭疼的問題，蘋果手機自己就包含 7 個尺寸的設備，更遑論機型無數的安卓陣營。

屏幕尺寸不統一，帶來的直接影響就是，我們應該創建一個什么樣尺寸的畫布？

前面的解釋中，我們提到 UI 設計今后會以蘋果 iPhone13 390*844 的尺寸作為標準尺寸，提供相關設計素材。UI 設計師創建畫布，自然也是以這個參數作為標準。

但是，同期設備中的 iPhone 13 pro max 的尺寸是 428*926，iPhone13 mini 的尺寸是 375*812。它們該怎么辦？

我們是不是要為三個版本的尺寸都提供設計稿，程序員也要為三個版本的屏幕都獨立進行頁面設置？顯然是不可能的。

在這種情況就要應用前端適配技術，讓設計元素可以根據屏幕的尺寸自動適應，生成合理的結果。

適配是一種前端開發的概念，多數情況下它和響應式的詞義是一致的。多數設計師最早學習適配都是先從軟件的 “響應式布局” 模塊開始。

設計軟件根據前端適配的邏輯，提供了越來越強大的響應式布局功能，雖然它不能完美實現前端適配的所有細節，但可以非常好的幫助我們理解適配。

后面，我就以 Figma 作為切入工具，講解適配的相關邏輯。

4.1.1 適配的基本原則

在設計過程中，我們要將相同的內容放到不同畫布中，會使用外部調節框進行縮放的操作。

但是前端的適配，并不是簡單的把設計元素等比縮放成另一個尺寸。而是根據實際的需要，對元素的大小進行特殊的控制，我們要搞明白的，就是這個控制的邏輯。

適配的核心要點 —— 子元素和父級元素的相互作用方式。

理解這個要點，就要知道畫面中的任何元素，都包含明確層級結構的（ 類似 HTML 的 DOM 結構 ），最頂級從畫布本身開始，到下級的文件夾、圖層、視圖（View）等。

比如我們在 Figma 中創建一個寬 375*44 的頂部導航欄的文件夾（Frame 也可以），里面放了兩個圖標和標題。當我們拖動這個文件夾的寬，放大成 414*44，那么子元素肯定不該被等比拉伸。

常規的邏輯應該是三個子元素保持尺寸不變，或者最起碼比例不變。但只這么做的話，它們的位置依舊會受到影響，間距也會被等比調整，這種情況還是有問題的。

所以，再進一步解釋，合理的做法應該是，三個元素尺寸保持一致的情況下，左側圖標應該基于左側邊緣對齊，中間的標題垂直居中，右側圖標右側邊緣對齊。

在這個最基礎的適配案例中，我們制定了子元素本身尺寸的規則和基于父級元素的對齊方式，來確定它們相互的作用，而不是直接放大。

整個項目的適配，就是對里面的父、子級組件設置對應的規則，來滿足顯示的需要。當然，適配不僅僅包含上面這一種模式，下面我們分別來講解一下。

4.1.2 子元素基于父元素對齊

子元素基于父元素的對齊，就像上面的案例一樣，我們可以設置元素基于父元素的對齊模式。

在 Figma 的響應式設置中，有一個田字格，就是用來設置對齊方式的圖例（做的一點也不直觀…）。

4.1.3 子元素基于父元素縮放

子元素基于父元素縮放，則是讓子元素隨父級元素等比放大。

我們在一般軟件中的編組拉伸縮放，都是里面的元素長寬比例共同受到影響，但是在 Figma 的相應設置中，允許我們對橫和豎分開設置 “scale” 縮放規則。

類似頂部的通欄 Banner 圖，商品頁頂部商品圖，可以只針對橫向等比縮放，豎向完全不受影響。

4.1.4 子元素基于父元素裁切

上面我們說到了廣告圖可以基于父級屏幕畫布實現寬度的等比縮放，但是，里面的圖片顯然不是等比被拉伸，圖片原始比例如果被修改那必然是錯誤的。

前端環境中，原始圖片上級必然有個圖片容器（蒙版層），圖片基于蒙版就有進一步的顯示規則，而這個規則包含了對超出內容的裁切。

我們既可以設置圖片等比縮放，或者圖片本身尺寸較大基于父級水平居中，不管選那種都會出現最終父級比例和原圖比例不一致的情況。

所以，多余的部分會被裁切，是我們在準備圖片素材時必須要考慮到的問題。

4.1.5 基于間距的適配

上面我們說了，等比縮放，適合子元素處于橫豎通欄的情況，因為它們左右沒有留白。如果有留白的再等比縮放，就會導致間距被放大，這顯然不符合預期。

所以，在 Figma 響應式設置菜單中，還有個選項叫 Left and right，同時保持左右對齊，講更通俗一點，就是保持和上級元素左右間距一致。

定義左右間距，即設置了一個元素寬度的獲取公式：

元素寬度 = 父級寬度 - （左側邊距+右側邊距）

間距的定義不僅僅可以用在子元素只有一列的情況，如果出現兩列、三列的設計，都可以使用定義間距的方式來實現元素的適配。

比如，下方我們定義了頁間距為 16，元素間距為 8 的情況，那么適配下來的結果如下。

根據間距定義多列的做法，元素本身的尺寸就是一個動態的數值，是根據父級的寬度減對應間距得出的，所以不管屏幕怎么變化，都可以得到我們想要的結果。

而多列的設置就超出了 Figma 的功能范疇，需要我們自行計算。

4.1.6 父元素基于子元素適配

前面講的適配，基本都是子元素對父元素的適配規則，這種情況并不是絕對的。父級元素也可以根據子元素進行適配。

在 Figma 中，這種做法就并不在響應式布局設置中，而是 Auto layout 中的 Resizing 設置里。

剛創建的 Auto layout 默認橫豎的設置都是 “Hug Contents”，即根據子元素尺寸實現自身的尺寸適配。比如根據不同的文字數量，實現長度適配的情況（上下左右間距保持不變）。

再比如，在一個社交分享卡片中，中間的文本內容可多可少，但卡片作為一個父元素不應該做成固定的高度，所以它就會根據內容尺寸進行適配。

所以開發狀態下，項目中會有大量的父級元素同樣處于一個動態尺寸的狀態，它們會根據不確定性極高的子元素動態適配。

再深入一點，就是父、子元素可以多層混合、相互作用。在上面的動態卡片案例中：

• 卡片可以基于父級的屏幕做左右對齊設置
• 文字元素根據父級卡片寬度做左右對齊設置
• 卡片的高度根據子元素文字的高度適配

那么最終就可以實現如下的效果。

以上就是主流的一些適配邏輯，雖然適配是由前端完成的，但盡可能在設計過程中對不同元素的適配規則有自己的預判。

并在遇到特殊的適配場景中，可以和前端共同商議而不是完全不懂。

除了屏幕的適配外，最后一點，就是系統的適配了。我們可能要面對 iOS 和 Andorid 的跨平臺適配問題。

上一篇我們已經簡單介紹過安卓的規范，所以也就長話短說了。

只要項目沒有明確的安卓設計要求，必須針對官方規范另外設計和開發獨立的版本，那么我們就只需要對設計稿進行小范圍的補充即可。

常規頁面的適配，幾乎不需要設計參與，因為只是屏幕適配基礎上，再替換了安卓官方的狀態欄和底部指示器。

而一些因為版本差異，會和 iOS 版本在功能和內容上就有不同的頁面，就確實需要我們額外提供設計稿了，設計的規范可以依舊以之前的為標準。

以及，如果要在 iOS 版本中調用了大量官方組件來完成界面的話，那么也盡可能根據安卓官方能匹配的組件進行替換輸出個新的版本。

只要注意以上幾個問題，不會導致開發看著 iOS 設計稿無從下手，那么就不會產生太大的問題了。

以上就是和規范有關的最后分享，適配的邏輯剛開始看比較繞，實際觀察頁面的時候多思考，就會發現其實非常的簡單。以后規范還有什么需要補充的話，我們會額外添加新的分享出來。

我們下篇再賤～

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