如何定義B端產品及B端產品經理方法論
2025-3-24 天宇 移動端UI設計文章及欣賞
互聯網時代，我們所看到的屏幕有許多的尺寸，如果設計師為每個尺寸都單獨進行設計，那將是一個大工程。那如果減少設計的工作量呢？讓我們來跟著作者學習一下移動端UI設計的適配吧~
在互聯網時代，產品形態是多種多樣的，就手機行業而言，設計師需要面對的屏幕尺寸至少也有一兩百種，我們不可能為每一種屏幕尺寸單獨進行，巨大的工作量是我們無法承受的。
需要一些方法或者說是手段，幫助我們縮減巨大的工作量，這些方法手段的集合就是——UI設計適配。UI設計適配幫助設計師只需要維護幾種尺寸的設計稿，就可以兼容市面上絕大多數的屏幕尺寸，達到不同屏幕尺寸下，視覺效果接近一致的目的。
本篇文章我們主要關注移動端應用的UI設計適配，將從以下幾點來介紹：
那么下面，我們進入正式內容。
UI設計適配是指將同一款應用或網頁的用戶界面針對不同的設備、分辨率、屏幕尺寸、操作系統等因素進行調整，以確保用戶界面的一致性和可用性。
這段定義包含了一些專業名詞，還是讓人有點難理解，如果我們隱藏那些專業名詞，用圖形化的方式去解釋這個定義，如圖1.1，左邊是一個16:9屏幕尺寸的設計稿，我們需要將它轉變為一個1:1屏幕尺寸的設計稿。你要如何處理？
在開始設計前，就需要考慮可能存在屏幕尺寸和比例差異較大情況，就如同圖1.1，應當如何適配；設計中，就會考慮得更細致，頂部輪播Banner是固定的寬度，還是根據不同的屏幕尺寸寬度自適應寬度，圖1.1是選擇了固定寬度；而在設計之后，有可能開發時會發現，如果只有兩個Banner圖，沒法像設計稿中展示3個Banner圖，這時又需要你思考要如何處理。
以上，我們談到這三個場景中你思考和處理問題的過程，就是在進行UI設計適配。
由此看出，適配是UI設計中的過程，卻不是一個具體的環節，不像是標注切圖是固定的流程。它融入在整個UI設計的過程中。在設計前，設計中，設計后都可能會考慮UI設計適配問題。
為了用戶體驗的一致性。
這里的「一致性」主要關注的是視覺表現層是否一致。如圖1.2，是「vivo瀏覽器」在「vivoX Fold 2」機型上，內屏與外屏的首頁截圖。整個頁面在布局結構，控件類型和元素尺寸以及間距都是基本一致的。
用戶體驗中，視覺表現層的一致性是基礎中的基礎。保證了「一致性」，就會有效地降低用戶的使用成本，即使用戶更換了不同的設備，也不會有使用的困難。UI設計適配則是達成這一目標的重要方法之一。
不過，也請大家注意，這里說的「有幾乎相同的用戶體驗」是限定在屏幕尺寸接近的電子設備上。比如說，我們不能要求一個屏幕尺寸7英寸的手機應用和一臺27英寸的PC電腦客戶端，視覺表現層基本一致，即便他們的是同一個應用，也會因為交互方式和操作系統的不同而天差地別。
用戶界面不是物理實體，需要一些物理實體去承載它。
本小節我們將重點解釋一些你需要知道與適配息息相關的概念?？偟膩碚f，對于適配我們需要著重理解三個參數——邏輯（像素）分辨率，物理（像素）分辨率和倍率，以及他們之間的相互關系。
了解這些概念，是為了幫助我們面對一些適配問題時，能明白為什么會產生這樣的問題，針對問題尋找合適的解決方案就會更加從容
舉一個簡單的例子，如圖2.1，左右兩個尺寸不同屏幕，都有著完全一致的元素。要達到這樣的效果，「邏輯分辨率」，「物理分辨率」和「倍率」 發揮了關鍵作用。
屏幕比例很好理解，既設備屏幕尺寸的寬高比值。在2016年之前，業內主流的手機屏幕比例都是16:9；但在這一年命運的齒輪開始轉動，小米公司的發布了，對手機行業影響深遠的機型——小米MIX一代，屏幕比例是17:9，由此手機屏幕開啟了全面屏設計時代。時至今日，手機屏幕比例已經完全轉向了18:9，19:9，20:9等等，手機的屏幕高度在不斷地增加。
那么這個比例的變化，是否對我們適配內容有影響呢？
影響是存在的，只是影響并不大，而且僅在一些特定場景下有影響。
我們以「vivo i視頻」影視頁面為例（圖2.2），高度的變化帶來了縱向空間的延展，需要展示更多的內容，對設計適配的影響是比較小的。受影響的一些特定場景，我們將會在之后「適配的手段」小節中詳細說明。
分辨率一詞，人們在日常生活中是一個比較常見的概念。比較常說的——720p，1080p，2k，4k等等，都是在說分辨率。
這些參數對應在UI設計中，指的是物理分辨率。物理分辨率是用來衡量屏幕中的像素數量，相同的屏幕尺寸和一定的觀看距離下，分辨率越高，畫面越清晰，反之則是會模糊。
物理分辨率是一個物理世界存在的具象概念，而邏輯分辨率則是一個抽象概念，對應存在于軟件的代碼層面。可以理解為代碼層面有一塊虛擬的屏幕，邏輯分辨率就是衡量這塊虛擬屏幕的像素數量，同樣這里的「像素」也是不存在的抽象概念。
邏輯分辨率也是由一組參數表達的，并且我們是可以知道這個值是多少的，如圖2.3，節選自蘋果的《人機交互指南》，其中詳細地列舉了iPhone，iPad和iPod的邏輯分辨率和物理分辨率。
我們選擇其中一條來解釋邏輯分辨率，物理分辨率和倍率之間的關系。如圖2.3，簡單說來就是——邏輯分辨率乘以倍率就是物理分辨率。
在這個公式中多了兩個單位——“pt”和“px”，px很好理解就是我們設計中所用的像素單位，而pt則是開發代碼中尺寸單位，“pt”來源于印刷行業的術語，翻譯過來是“點”。圖2.3中的“@2x”和“@3x”就是系統默認倍率，我們會常常稱之為一倍圖，二倍圖，三倍圖以此類推。
“@1x”是比較久遠的手機設備，目前已經基本不在設計的考慮范疇了。在一倍圖的情況下，此時的1pt剛好等于1px，這樣就可以減少開發工程師和設計師之間溝通成本。因為假設你的設計稿是使用的三倍圖，那么換算的公式則是1pt=3px，如果和開發溝通時不說明具體的單位，你說12，開發工程師可能就會理解成12pt，但是實際想表達的是12px，這樣最后的效果就會是有較大的誤差。所以在很多設計團隊，針對iOS設備設計時，仍然使用一倍圖作為設計稿尺寸，從而打通了開發工程師與設計師之間的溝通壁壘。不會因為單位不統一，造成結果的誤差。
那么來到Android這邊，道理是一樣的，只是在參數和概念名詞會有些不同。如圖2.5，標黃色的部分是我們目前使用的較多的屏幕尺寸（可能高度數值略有不同）。
首先，Android的倍率是用英文命名的，如mdpi等，但是習慣上我們還是稱之為一倍圖等；其次，“dp”是Android系統中邏輯像素的單位，等同于iOS中的“pt”。
Android系統和iOS系統的邏輯分辨率的參數值是相近的，這也是很多設計團隊只會基于iOS進行設計，Android開發工程師直接使用基于iOS的設計稿進行開發。因為差別不大，只要在適配時候使用相同邏輯，就可以少設計一次相同頁面，也是為了降低設計成本。
以上內容也就說明，我們在本節開頭的例子（圖2.1），為什么不同的尺寸的屏幕，為什么能保持相同的元素布局，因為兩個物理分辨率不同的屏幕都是，基于一個相同邏輯分辨率，等比放大得到的（圖2.6）。
這一小節，我們將介紹適配不同的尺寸屏幕的具體手段——固定尺寸與自適應尺寸。
先說簡單的，固定尺寸。固定代表著是一個絕對值，固定不變的。
固定尺寸主要是分為兩個場景，一是元素的固定尺寸，這個元素主要是指圖標，按鈕，部分的卡片容器（如Banner）和一些系統控件（如布爾開關，單選多選等）。如圖3.1，vivo賬號的登錄頁面中的登錄按鈕，在折疊屏內屏與外屏不同屏幕尺寸下，按鈕的尺寸依然是相同的
二是元素間的固定間距，主要是指元素與元素間的間距固定和元素與屏幕邊緣的邊距固定。固定的間距有助于相似元素成為一組，符合格式塔原理。比如圖標與文字，卡片列表等。
在手機系統中的設置頁面，如圖3.2，將有關聯性類目使用較小的固定間距排列，不同類別的則是使用分割線和更大的固定間距排列，這些固定間距不會因為機型，屏幕尺寸的不同而發生改變。
自適應尺寸也細分為三個場景：元素等比適應，元素間間距自適應和元素彈性自適應。元素等比適應
以寬高的某一邊適配屏幕的寬高，剩余的一邊跟隨比例等比適配。這里主要指圖片，視頻的適配為主。因為這些元素的比例必須是固定的，所以我們只能去等比縮放（如圖3.2）。
通常來說我們都是以寬度去適配，但是這些年短視頻App的火熱，需要為用戶營造沉浸式的觀看體驗。豎版的視頻往往是以高度適配，那么會帶來一個問題，寬度有可能會超出屏幕寬度，超出的部分就會被裁切，但是為了給用戶更好的沉浸式觀看體驗，會選擇裁切視頻。
當然你可能會有疑惑，那如果用戶上傳了一個橫版比例的視頻或圖片，如果按照寬度適配，裁切的內容是不是太多了，而且畫面的清晰度也會降低很多？
沒錯，這里我們就需要在不同的場景下，使用不同的適配策略。所以就會針對橫版內容，就是以寬度適配，豎版以高度適配。
元素間間距自適應
間距自適應的適配手段，是以百分比數值計算適應元素與元素之間的間距，元素與屏幕邊緣的間距。以百分比計算間距，那么就需要一個基數，這個基數往往是以屏幕分辨率的寬度和高度為基數。
這個方法主要是針對元素較少的頁面，也就是我們在「基本概念」小節中說到的不同的屏幕高度變化帶來的影響。最典型的是手機的鎖屏場景，還有狀態結果頁面的展示（圖3.7）。
如圖3.8，還是vivo賬號的登錄頁，在折疊屏內屏與外屏，可以很明顯看到按鈕距離底部的間距是不同的，這里就是用百分比的間距。
元素彈性自適應
彈性自適應，是指控制元素的外邊距與內間距，同向尺寸彈性自適應。彈性的意思是有多少的空白區域就填充滿。如圖3.9，當右側多一個按鈕時，就需要左側元素彈性的適應填充剩余的空白區域。
同時我們會有一個衍生的適配手段——矩形等分適配，是指將屏幕（或區域）進行平均分割成相同寬度（或高度）的矩形（分割的矩形之間可以有固定間距，固定間距可為0px），而不同的元素在矩形中居中放置。
矩形等分主要會是標簽欄，宮格式布局和圖片視頻的瀑布流形式，花瓣網就是其中之一，比較方便適應網頁寬度的不斷改變。移動端中，目前這一方法我們會常用在折疊屏的適配中。如圖3.11，排行榜模塊在內屏是以雙列展示，而在內屏中則是因為寬度增加，需要內容填充頁面，而變成了三列。
以上就是主要的UI設計適配手段，總結一下：
我們也只是列舉幾個典型場景，實際業務場景是復雜的，需要注意多種手段相互配合使用。
以上就是關于移動端UI設計適配的全部內容了。
感謝你的閱讀，希望對你的設計工作有所幫助。
作者：宋丹強
本文由人人都是產品經理合作媒體 @VMIC UED 授權發布，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan