前言

在互聯(lián)網(wǎng)時代，產(chǎn)品形態(tài)是多種多樣的，就手機(jī)行業(yè)而言，設(shè)計師需要面對的屏幕尺寸至少也有一兩百種，我們不可能為每一種屏幕尺寸單獨(dú)進(jìn)行，巨大的工作量是我們無法承受的。

需要一些方法或者說是手段，幫助我們縮減巨大的工作量，這些方法手段的集合就是——UI設(shè)計適配。UI設(shè)計適配幫助設(shè)計師只需要維護(hù)幾種尺寸的設(shè)計稿，就可以兼容市面上絕大多數(shù)的屏幕尺寸，達(dá)到不同屏幕尺寸下，視覺效果接近一致的目的。

本篇文章我們主要關(guān)注移動端應(yīng)用的 UI 設(shè)計適配，將從以下幾點(diǎn)來介紹：

1. UI 設(shè)計適配是什么
2. 為什么需要 UI 設(shè)計適配
3. UI 設(shè)計適配的一些基礎(chǔ)概念
4. 如何進(jìn)行 UI 設(shè)計適配

那么下面，我們進(jìn)入正式內(nèi)容。

一、UI 設(shè)計適配是什么？

UI 設(shè)計適配是指將同一款應(yīng)用或網(wǎng)頁的用戶界面針對不同的設(shè)備、分辨率、屏幕尺寸、操作系統(tǒng)等因素進(jìn)行調(diào)整，以確保用戶界面的一致性和可用性。

這段定義包含了一些專業(yè)名詞，還是讓人有點(diǎn)難理解，如果我們隱藏那些專業(yè)名詞，用圖形化的方式去解釋這個定義，如圖 1.1，左邊是一個 16:9 屏幕尺寸的設(shè)計稿，我們需要將它轉(zhuǎn)變?yōu)橐粋€ 1:1 屏幕尺寸的設(shè)計稿。

1. 你要如何處理？

圖 1.1:適配過程

在開始設(shè)計前，就需要考慮可能存在屏幕尺寸和比例差異較大情況，就如同圖 1.1，應(yīng)當(dāng)如何適配；設(shè)計中，就會考慮得更細(xì)致，頂部輪播 Banner 是固定的寬度，還是根據(jù)不同的屏幕尺寸寬度自適應(yīng)寬度，圖 1.1 是選擇了固定寬度；而在設(shè)計之后，有可能開發(fā)時會發(fā)現(xiàn)，如果只有兩個 Banner 圖，沒法像設(shè)計稿中展示 3 個 Banner 圖，這時又需要你思考要如何處理。

以上，我們談到這三個場景中你思考和處理問題的過程，就是在進(jìn)行 UI 設(shè)計適配。

由此看出，適配是 UI 設(shè)計中的過程，卻不是一個具體的環(huán)節(jié)，不像是標(biāo)注切圖是固定的流程。它融入在整個 UI 設(shè)計的過程中。在設(shè)計前，設(shè)計中，設(shè)計后都可能會考慮 UI 設(shè)計適配問題。

二、為什么需要 UI 設(shè)計適配？

為了用戶體驗(yàn)的一致性。

這里的「一致性」主要關(guān)注的是視覺表現(xiàn)層是否一致。如圖 1.2，是「vivo 瀏覽器」在「vivo X Fold 2」機(jī)型上，內(nèi)屏與外屏的首頁截圖。整個頁面在布局結(jié)構(gòu)，控件類型和元素尺寸以及間距都是基本一致的。

圖 1.2:相同的布局結(jié)構(gòu)

用戶體驗(yàn)中，視覺表現(xiàn)層的一致性是基礎(chǔ)中的基礎(chǔ)。保證了「一致性」，就會有效地降低用戶的使用成本，即使用戶更換了不同的設(shè)備，也不會有使用的困難。UI 設(shè)計適配則是達(dá)成這一目標(biāo)的重要方法之一。

不過，也請大家注意，這里說的「有幾乎相同的用戶體驗(yàn)」是限定在屏幕尺寸接近的電子設(shè)備上。比如說，我們不能要求一個屏幕尺寸 7 英寸的手機(jī)應(yīng)用和一臺 27 英寸的 PC 電腦客戶端，視覺表現(xiàn)層基本一致，即便他們的是同一個應(yīng)用，也會因?yàn)榻换シ绞胶筒僮飨到y(tǒng)的不同而天差地別。

三、UI 設(shè)計適配的一些基礎(chǔ)概念

用戶界面不是物理實(shí)體，需要一些物理實(shí)體去承載它。

本小節(jié)我們將重點(diǎn)解釋一些你需要知道與適配息息相關(guān)的概念?？偟膩碚f，對于適配我們需要著重理解三個參數(shù)——邏輯（像素）分辨率，物理（像素）分辨率和倍率，以及他們之間的相互關(guān)系。

了解這些概念，是為了幫助我們面對一些適配問題時，能明白為什么會產(chǎn)生這樣的問題，針對問題尋找合適的解決方案就會更加從容

舉一個簡單的例子，如圖 2.1，左右兩個尺寸不同屏幕，都有著完全一致的元素。要達(dá)到這樣的效果，「邏輯分辨率」，「物理分辨率」和「倍率」 發(fā)揮了關(guān)鍵作用。

圖 2.1:尺寸不同屏幕比較

1. 屏幕比例

屏幕比例很好理解，既設(shè)備屏幕尺寸的寬高比值。

在 2016 年之前，業(yè)內(nèi)主流的手機(jī)屏幕比例都是 16:9；但在這一年命運(yùn)的齒輪開始轉(zhuǎn)動，小米公司的發(fā)布了，對手機(jī)行業(yè)影響深遠(yuǎn)的機(jī)型——小米MIX一代，屏幕比例是17:9，由此手機(jī)屏幕開啟了全面屏設(shè)計時代。時至今日，手機(jī)屏幕比例已經(jīng)完全轉(zhuǎn)向了18:9，19:9，20:9等等，手機(jī)的屏幕高度在不斷地增加。

那么這個比例的變化，是否對我們適配內(nèi)容有影響呢？

影響是存在的，只是影響并不大，而且僅在一些特定場景下有影響。

我們以「vivo i 視頻」影視頁面為例（圖 2.2），高度的變化帶來了縱向空間的延展，需要展示更多的內(nèi)容，對設(shè)計適配的影響是比較小的。受影響的一些特定場景，我們將會在之后「適配的手段」小節(jié)中詳細(xì)說明。

圖 2.2:不同屏幕比例下 App 界面的展示內(nèi)容量不同

2. 邏輯分辨率，物理分辨率和倍率

分辨率一詞，人們在日常生活中是一個比較常見的概念。比較常說的——720p，1080p，2k，4k等等，都是在說分辨率。

這些參數(shù)對應(yīng)在 UI 設(shè)計中，指的是物理分辨率。物理分辨率是用來衡量屏幕中的像素數(shù)量，相同的屏幕尺寸和一定的觀看距離下，分辨率越高，畫面越清晰，反之則是會模糊。

物理分辨率是一個物理世界存在的具象概念，而邏輯分辨率則是一個抽象概念，對應(yīng)存在于軟件的代碼層面。可以理解為代碼層面有一塊虛擬的屏幕，邏輯分辨率就是衡量這塊虛擬屏幕的像素數(shù)量，同樣這里的「像素」也是不存在的抽象概念。

邏輯分辨率也是由一組參數(shù)表達(dá)的，并且我們是可以知道這個值是多少的，如圖 2.3，節(jié)選自蘋果的《人機(jī)交互指南》，其中詳細(xì)地列舉了 iPhone，iPad 和 iPod 的邏輯分辨率和物理分辨率。

圖 2.3:邏輯分辨率與物理分辨率

我們選擇其中一條來解釋邏輯分辨率，物理分辨率和倍率之間的關(guān)系。如圖 2.3，簡單說來就是——邏輯分辨率乘以倍率就是物理分辨率。

圖 2.4:邏輯分辨率，物理分辨率和倍率三者關(guān)系

在這個公式中多了兩個單位——“pt”和“px”，px很好理解就是我們設(shè)計中所用的像素單位，而pt則是開發(fā)代碼中尺寸單位，“pt”來源于印刷行業(yè)的術(shù)語，翻譯過來是“點(diǎn)”。圖2.3中的“@2x”和“@3x”就是系統(tǒng)默認(rèn)倍率，我們會常常稱之為一倍圖，二倍圖，三倍圖以此類推。

“@1x”是比較久遠(yuǎn)的手機(jī)設(shè)備，目前已經(jīng)基本不在設(shè)計的考慮范疇了。在一倍圖的情況下，此時的 1pt 剛好等于 1px，這樣就可以減少開發(fā)工程師和設(shè)計師之間溝通成本。因?yàn)榧僭O(shè)你的設(shè)計稿是使用的三倍圖，那么換算的公式則是 1pt=3px，如果和開發(fā)溝通時不說明具體的單位，你說 12，開發(fā)工程師可能就會理解成 12pt，但是實(shí)際想表達(dá)的是 12px，這樣最后的效果就會是有較大的誤差。所以在很多設(shè)計團(tuán)隊(duì)，針對 iOS 設(shè)備設(shè)計時，仍然使用一倍圖作為設(shè)計稿尺寸，從而打通了開發(fā)工程師與設(shè)計師之間的溝通壁壘。不會因?yàn)閱挝徊唤y(tǒng)一，造成結(jié)果的誤差。

那么來到 AndROId 這邊，道理是一樣的，只是在參數(shù)和概念名詞會有些不同。如圖 2.5，標(biāo)黃色的部分是我們目前使用的較多的屏幕尺寸（可能高度數(shù)值略有不同）。

圖 2.5:Android 手機(jī) 物理分辨率與邏輯分辨率

首先，Android 的倍率是用英文命名的，如 mdpi 等，但是習(xí)慣上我們還是稱之為一倍圖等；其次，“dp”是 Android 系統(tǒng)中邏輯像素的單位，等同于 iOS 中的“pt”。

Android 系統(tǒng)和 iOS 系統(tǒng)的邏輯分辨率的參數(shù)值是相近的，這也是很多設(shè)計團(tuán)隊(duì)只會基于 iOS 進(jìn)行設(shè)計，Android 開發(fā)工程師直接使用基于 iOS 的設(shè)計稿進(jìn)行開發(fā)。因?yàn)椴顒e不大，只要在適配時候使用相同邏輯，就可以少設(shè)計一次相同頁面，也是為了降低設(shè)計成本。

以上內(nèi)容也就說明，我們在本節(jié)開頭的例子（圖 2.1），為什么不同的尺寸的屏幕，為什么能保持相同的元素布局，因?yàn)閮蓚€物理分辨率不同的屏幕都是，基于一個相同邏輯分辨率，等比放大得到的（圖 2.6）。

圖 2.6:Android 手機(jī) 物理分辨率與邏輯分辨率

四、UI 設(shè)計適配的手段

這一小節(jié)，我們將介紹適配不同的尺寸屏幕的具體手段——固定尺寸與自適應(yīng)尺寸。

1. 固定尺寸

先說簡單的，固定尺寸。固定代表著是一個絕對值，固定不變的。

固定尺寸主要是分為兩個場景，一是元素的固定尺寸，這個元素主要是指圖標(biāo)，按鈕，部分的卡片容器（如 Banner）和一些系統(tǒng)控件（如布爾開關(guān)，單選多選等）。如圖 3.1，vivo 賬號的登錄頁面中的登錄按鈕，在折疊屏內(nèi)屏與外屏不同屏幕尺寸下，按鈕的尺寸依然是相同的

圖 3.1:vivo 賬號-登錄頁按鈕尺寸一致

二是元素間的固定間距，主要是指元素與元素間的間距固定和元素與屏幕邊緣的邊距固定。固定的間距有助于相似元素成為一組，符合格式塔原理。比如圖標(biāo)與文字，卡片列表等。

圖 3.2:固定尺寸

在手機(jī)系統(tǒng)中的設(shè)置頁面，如圖 3.2，將有關(guān)聯(lián)性類目使用較小的固定間距排列，不同類別的則是使用分割線和更大的固定間距排列，這些固定間距不會因?yàn)闄C(jī)型，屏幕尺寸的不同而發(fā)生改變。

圖 3.3:設(shè)置頁面中不同的間距

2. 自適應(yīng)尺寸

自適應(yīng)尺寸也細(xì)分為三個場景：元素等比適應(yīng)，元素間間距自適應(yīng)和元素彈性自適應(yīng)。

①元素等比適應(yīng)

以寬高的某一邊適配屏幕的寬高，剩余的一邊跟隨比例等比適配。這里主要指圖片，視頻的適配為主。因?yàn)檫@些元素的比例必須是固定的，所以我們只能去等比縮放（如圖 3.2）。

圖 3.4:寬度固定，高度等比縮放

通常來說我們都是以寬度去適配，但是這些年短視頻 App 的火熱，需要為用戶營造沉浸式的觀看體驗(yàn)。豎版的視頻往往是以高度適配，那么會帶來一個問題，寬度有可能會超出屏幕寬度，超出的部分就會被裁切，但是為了給用戶更好的沉浸式觀看體驗(yàn)，會選擇裁切視頻。

圖 3.5:高度固定，寬度等比縮放

當(dāng)然你可能會有疑惑，那如果用戶上傳了一個橫版比例的視頻或圖片，如果按照寬度適配，裁切的內(nèi)容是不是太多了，而且畫面的清晰度也會降低很多？

沒錯，這里我們就需要在不同的場景下，使用不同的適配策略。所以就會針對橫版內(nèi)容，就是以寬度適配，豎版以高度適配。

圖 3.6:寬度固定，高度等比縮放

②元素間間距自適應(yīng)

間距自適應(yīng)的適配手段，是以百分比數(shù)值計算適應(yīng)元素與元素之間的間距，元素與屏幕邊緣的間距。以百分比計算間距，那么就需要一個基數(shù)，這個基數(shù)往往是以屏幕分辨率的寬度和高度為基數(shù)。

這個方法主要是針對元素較少的頁面，也就是我們在「基本概念」小節(jié)中說到的不同的屏幕高度變化帶來的影響。最典型的是手機(jī)的鎖屏場景，還有狀態(tài)結(jié)果頁面的展示（圖 3.7）。

圖 3.7:間距自適應(yīng)

如圖 3.8，還是 vivo 賬號的登錄頁，在折疊屏內(nèi)屏與外屏，可以很明顯看到按鈕距離底部的間距是不同的，這里就是用百分比的間距。

圖 3.8:vivo 賬號-登錄頁按鈕位置

③元素彈性自適應(yīng)

彈性自適應(yīng)，是指控制元素的外邊距與內(nèi)間距，同向尺寸彈性自適應(yīng)。彈性的意思是有多少的空白區(qū)域就填充滿。如圖 3.9，當(dāng)右側(cè)多一個按鈕時，就需要左側(cè)元素彈性的適應(yīng)填充剩余的空白區(qū)域。

圖 3.9:彈性自適應(yīng)

同時我們會有一個衍生的適配手段——矩形等分適配，是指將屏幕（或區(qū)域）進(jìn)行平均分割成相同寬度（或高度）的矩形（分割的矩形之間可以有固定間距，固定間距可為0px），而不同的元素在矩形中居中放置。

圖 3.10:矩形等分適配

矩形等分主要會是標(biāo)簽欄，宮格式布局和圖片視頻的瀑布流形式，花瓣網(wǎng)就是其中之一，比較方便適應(yīng)網(wǎng)頁寬度的不斷改變。移動端中，目前這一方法我們會常用在折疊屏的適配中。如圖 3.11，排行榜模塊在內(nèi)屏是以雙列展示，而在內(nèi)屏中則是因?yàn)閷挾仍黾?，需要?nèi)容填充頁面，而變成了三列。

圖 3.11:排行榜模塊由雙列改三列

以上就是主要的 UI 設(shè)計適配手段，總結(jié)一下：

1. 設(shè)計適配的手段分為兩大類——固定尺寸和自適應(yīng)尺寸
2. 固定尺寸針對元素自身尺寸和元素間尺寸，都是確定的固定值
3. 自適應(yīng)尺寸細(xì)分為——元素尺寸等比適應(yīng)，元素間間距自適應(yīng)和元素彈性自適應(yīng)，相對應(yīng)的自適應(yīng)的方法都是比值的計算，是一個相對值

我們也只是列舉幾個典型場景，實(shí)際業(yè)務(wù)場景是復(fù)雜的，需要注意多種手段相互配合使用。

以上就是關(guān)于移動端 UI 設(shè)計適配的全部內(nèi)容了。

感謝你的閱讀，希望對你的設(shè)計工作有所幫助。

作者：VMIC UED