互聯(lián)網(wǎng)時(shí)代，我們所看到的屏幕有許多的尺寸，如果設(shè)計(jì)師為每個(gè)尺寸都單獨(dú)進(jìn)行設(shè)計(jì)，那將是一個(gè)大工程。那如果減少設(shè)計(jì)的工作量呢？讓我們來跟著作者學(xué)習(xí)一下移動(dòng)端UI設(shè)計(jì)的適配吧~

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

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

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

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)頁的用戶界面針對不同的設(shè)備、分辨率、屏幕尺寸、操作系統(tǒng)等因素進(jìn)行調(diào)整，以確保用戶界面的一致性和可用性。

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

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

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

如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論

相較于C端產(chǎn)品，B端產(chǎn)品最大的特點(diǎn)是：面向特定領(lǐng)域用戶，且數(shù)量少得多，但更注重對用戶專業(yè)領(lǐng)域操作流程的深度挖掘——也就是專業(yè)性更強(qiáng)，與業(yè)務(wù)的結(jié)合更緊密。

查看詳情 >

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

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

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

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

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

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

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

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

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

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

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

1. 屏幕比例

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

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

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

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

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

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

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

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

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

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

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

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

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

首先，Android的倍率是用英文命名的，如mdpi等，但是習(xí)慣上我們還是稱之為一倍圖等；其次，“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開發(fā)工程師直接使用基于iOS的設(shè)計(jì)稿進(jìn)行開發(fā)。因?yàn)椴顒e不大，只要在適配時(shí)候使用相同邏輯，就可以少設(shè)計(jì)一次相同頁面，也是為了降低設(shè)計(jì)成本。

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

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

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

1. 固定尺寸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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