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

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

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

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

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

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

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

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

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

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

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

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

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

為了用戶體驗的一致性。

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

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

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

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

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

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

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

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

1. 屏幕比例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 固定尺寸

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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