零基礎(chǔ) UI 入門七：教你快速上手APP適配

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

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

往期回顧：

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

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

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

但是，同期設(shè)備中的 iPhone 13 pro max 的尺寸是 428*926，iPhone13 mini 的尺寸是 375*812。它們?cè)撛趺崔k？

我們是不是要為三個(gè)版本的尺寸都提供設(shè)計(jì)稿，程序員也要為三個(gè)版本的屏幕都獨(dú)立進(jìn)行頁(yè)面設(shè)置？顯然是不可能的。

在這種情況就要應(yīng)用前端適配技術(shù)，讓設(shè)計(jì)元素可以根據(jù)屏幕的尺寸自動(dòng)適應(yīng)，生成合理的結(jié)果。

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

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

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

4.1.1 適配的基本原則

在設(shè)計(jì)過(guò)程中，我們要將相同的內(nèi)容放到不同畫布中，會(huì)使用外部調(diào)節(jié)框進(jìn)行縮放的操作。

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

適配的核心要點(diǎn) —— 子元素和父級(jí)元素的相互作用方式。

理解這個(gè)要點(diǎn)，就要知道畫面中的任何元素，都包含明確層級(jí)結(jié)構(gòu)的（ 類似 HTML 的 DOM 結(jié)構(gòu) ），最頂級(jí)從畫布本身開(kāi)始，到下級(jí)的文件夾、圖層、視圖（View）等。

比如我們?cè)?Figma 中創(chuàng)建一個(gè)寬 375*44 的頂部導(dǎo)航欄的文件夾（Frame 也可以），里面放了兩個(gè)圖標(biāo)和標(biāo)題。當(dāng)我們拖動(dòng)這個(gè)文件夾的寬，放大成 414*44，那么子元素肯定不該被等比拉伸。

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

所以，再進(jìn)一步解釋，合理的做法應(yīng)該是，三個(gè)元素尺寸保持一致的情況下，左側(cè)圖標(biāo)應(yīng)該基于左側(cè)邊緣對(duì)齊，中間的標(biāo)題垂直居中，右側(cè)圖標(biāo)右側(cè)邊緣對(duì)齊。

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

整個(gè)項(xiàng)目的適配，就是對(duì)里面的父、子級(jí)組件設(shè)置對(duì)應(yīng)的規(guī)則，來(lái)滿足顯示的需要。當(dāng)然，適配不僅僅包含上面這一種模式，下面我們分別來(lái)講解一下。

4.1.2 子元素基于父元素對(duì)齊

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

在 Figma 的響應(yīng)式設(shè)置中，有一個(gè)田字格，就是用來(lái)設(shè)置對(duì)齊方式的圖例（做的一點(diǎn)也不直觀…）。

4.1.3 子元素基于父元素縮放

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

我們?cè)谝话丬浖械木幗M拉伸縮放，都是里面的元素長(zhǎng)寬比例共同受到影響，但是在 Figma 的相應(yīng)設(shè)置中，允許我們對(duì)橫和豎分開(kāi)設(shè)置 “scale” 縮放規(guī)則。

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

4.1.4 子元素基于父元素裁切

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

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

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

所以，多余的部分會(huì)被裁切，是我們?cè)跍?zhǔn)備圖片素材時(shí)必須要考慮到的問(wèn)題。

4.1.5 基于間距的適配

上面我們說(shuō)了，等比縮放，適合子元素處于橫豎通欄的情況，因?yàn)樗鼈冏笥覜](méi)有留白。如果有留白的再等比縮放，就會(huì)導(dǎo)致間距被放大，這顯然不符合預(yù)期。

所以，在 Figma 響應(yīng)式設(shè)置菜單中，還有個(gè)選項(xiàng)叫 Left and right，同時(shí)保持左右對(duì)齊，講更通俗一點(diǎn)，就是保持和上級(jí)元素左右間距一致。

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

元素寬度 = 父級(jí)寬度 - （左側(cè)邊距+右側(cè)邊距）

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

比如，下方我們定義了頁(yè)間距為 16，元素間距為 8 的情況，那么適配下來(lái)的結(jié)果如下。

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

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

4.1.6 父元素基于子元素適配

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

在 Figma 中，這種做法就并不在響應(yīng)式布局設(shè)置中，而是 Auto layout 中的 Resizing 設(shè)置里。

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

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

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

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

• 卡片可以基于父級(jí)的屏幕做左右對(duì)齊設(shè)置
• 文字元素根據(jù)父級(jí)卡片寬度做左右對(duì)齊設(shè)置
• 卡片的高度根據(jù)子元素文字的高度適配

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

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

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

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

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

只要項(xiàng)目沒(méi)有明確的安卓設(shè)計(jì)要求，必須針對(duì)官方規(guī)范另外設(shè)計(jì)和開(kāi)發(fā)獨(dú)立的版本，那么我們就只需要對(duì)設(shè)計(jì)稿進(jìn)行小范圍的補(bǔ)充即可。

常規(guī)頁(yè)面的適配，幾乎不需要設(shè)計(jì)參與，因?yàn)橹皇瞧聊贿m配基礎(chǔ)上，再替換了安卓官方的狀態(tài)欄和底部指示器。

而一些因?yàn)榘姹静町悾瑫?huì)和 iOS 版本在功能和內(nèi)容上就有不同的頁(yè)面，就確實(shí)需要我們額外提供設(shè)計(jì)稿了，設(shè)計(jì)的規(guī)范可以依舊以之前的為標(biāo)準(zhǔn)。

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

只要注意以上幾個(gè)問(wèn)題，不會(huì)導(dǎo)致開(kāi)發(fā)看著 iOS 設(shè)計(jì)稿無(wú)從下手，那么就不會(huì)產(chǎn)生太大的問(wèn)題了。

以上就是和規(guī)范有關(guān)的最后分享，適配的邏輯剛開(kāi)始看比較繞，實(shí)際觀察頁(yè)面的時(shí)候多思考，就會(huì)發(fā)現(xiàn)其實(shí)非常的簡(jiǎn)單。以后規(guī)范還有什么需要補(bǔ)充的話，我們會(huì)額外添加新的分享出來(lái)。

我們下篇再賤～

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