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

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

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

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

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

但是，同期設備中的 iPhone 13 pro max 的尺寸是 428926，iPhone13 mini 的尺寸是 375812。它們該怎么辦？

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

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

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

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

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

4.1.1 適配的基本原則

在設計過程中，我們要將想通的內(nèi)容放到不同畫布中，會使用外部調節(jié)框進行縮放的操作。

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

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

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

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

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

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

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

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

4.1.2?子元素基于父元素對齊

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

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

4.1.3?子元素基于父元素縮放

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

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

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

4.1.4?子元素基于父元素裁切

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

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

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

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

4.1.5 基于間距的適配

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

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

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

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

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

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

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

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

4.1.6 父元素基于子元素適配

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

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

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

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

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

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

• 卡片可以基于父級的屏幕做左右對齊設置

• 文字元素根據(jù)父級卡片寬度做左右對齊設置

• 卡片的高度根據(jù)子元素文字的高度適配

那么最終就可以實現(xiàn)如下的效果。

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

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

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

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

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

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

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

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

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

以上就是和規(guī)范有關的最后分享，適配的邏輯剛開始看比較繞，實際觀察頁面的時候多思考，就會發(fā)現(xiàn)其實非常的簡單。

以后規(guī)范還有什么需要補充的話，我們會額外添加新的分享出來。

目前新的UI實戰(zhàn)班準備開課，大家抓緊參與，學習更系統(tǒng)的知識??！

我們下篇再賤～