前言

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

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

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

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

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

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

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

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

1. 你要如何處理？

圖 1.1:適配過(guò)程

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

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

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

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

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

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

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

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

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

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

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

本小節(jié)我們將重點(diǎn)解釋一些你需要知道與適配息息相關(guān)的概念。總的來(lái)說(shuō)，對(duì)于適配我們需要著重理解三個(gè)參數(shù)——邏輯（像素）分辨率，物理（像素）分辨率和倍率，以及他們之間的相互關(guān)系。

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

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

圖 2.1:尺寸不同屏幕比較

1. 屏幕比例

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

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

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

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

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

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

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

分辨率一詞，人們?cè)谌粘Ｉ钪惺且粋€(gè)比較常見(jiàn)的概念。比較常說(shuō)的——720p，1080p，2k，4k等等，都是在說(shuō)分辨率。

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

物理分辨率是一個(gè)物理世界存在的具象概念，而邏輯分辨率則是一個(gè)抽象概念，對(duì)應(yīng)存在于軟件的代碼層面?？梢岳斫鉃榇a層面有一塊虛擬的屏幕，邏輯分辨率就是衡量這塊虛擬屏幕的像素?cái)?shù)量，同樣這里的「像素」也是不存在的抽象概念。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 固定尺寸

先說(shuō)簡(jiǎn)單的，固定尺寸。固定代表著是一個(gè)絕對(duì)值，固定不變的。

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

圖 3.1:vivo 賬號(hào)-登錄頁(yè)按鈕尺寸一致

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

圖 3.2:固定尺寸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這個(gè)方法主要是針對(duì)元素較少的頁(yè)面，也就是我們?cè)凇富靖拍睢剐」?jié)中說(shuō)到的不同的屏幕高度變化帶來(lái)的影響。最典型的是手機(jī)的鎖屏場(chǎng)景，還有狀態(tài)結(jié)果頁(yè)面的展示（圖 3.7）。

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

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

圖 3.8:vivo 賬號(hào)-登錄頁(yè)按鈕位置

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

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

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

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

圖 3.10:矩形等分適配

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

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

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

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

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

以上就是關(guān)于移動(dòng)端 UI 設(shè)計(jì)適配的全部?jī)?nèi)容了。

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

作者：VMIC UED