除了適配 iPhone X ，來看看我們是怎么適配 iPhone 11。iPhone X 上市已經有一段時間了，不知道使用 iPhone X 的小伙伴是否已經習慣了 iOS 11 操作系統和 iPhone X 手機特有的操作體驗。滴滴出行在 iPhone X 發售前就針對其操作特性進行了界面適配，保障了 iPhone X 用戶的全面屏操作。

引言

滴滴出行在 iPhone X 發售前就針對其操作特性進行了界面適配，保障了 iPhone X 用戶的全面屏操作。現在 iPhone X 的適配結果已經得到了良好的用戶反饋，由此我們梳理了移動端界面 iPhone X 的適配方案，并從整個適配過程中探索到萬變不離其宗的適配方法，為后續不斷更新的多尺寸屏幕提供更好更快的適配思路。

整篇文章分四個章節

• iPhone X 系統特性
• 界面常用元素適配方案
• “去邊界化”設計
• “去邊界化”設計的應用

全文多圖預警，需要直接看“去邊界化”設計理念的小伙伴，可以跳到第三部分開始。

iPhone X操作特性

iPhone X 是蘋果公司十周年推出的重點產品，無論外觀還是技術都有著革命性的創新，讓我們先來回顧下 iPhone X 在界面使用體驗上都有哪些操作特性。

屏幕變長

因大部分設計師都用 iPhone 8 來做設計稿，所以我們用 iPhone 8 與 iPhone X 做對比。

（* iPhone 6、iPhone 6s、iPhone 7 與 iPhone 8 屏幕分辨率一致）

iPhone X 使用了 5.8 英寸高分辨率、大圓角顯示屏。iPhone X 與 iPhone 8 的顯示屏寬度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空間多展示約 20% 的畫面。

iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的圖像，界面內容由手機硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設計時 iPhone X 和 iPhone 8 的設計寬度可以通用 375pt，而實際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。

喬布斯曾說，手持設備最理想的屏幕尺寸是 3.5寸，這是因為單手操作時3.5寸屏幕基本能做到大拇指無障礙全覆蓋。但隨著人們對手機功能多樣化的需求，主流屏幕遠大于3.5寸。

iPhone X 是 5.8 寸，屏幕已經超越了絕大多數用戶的拇指覆蓋范圍，這就導致左上和右下角的單手操作不夠方便。很多基于 F 型流動視線設計的 App，通常會將重要的功能入口置于左上角，在 iPhone X 上，視線優先和拇指操作未必可以同時滿足，這就要求設計師們對操作盲區的功能進行多重考量，評估是否要針對 iPhone X 做出位置調整。

異形狀態欄（齊劉海）

iPhone 8 屏幕狀態欄高 20pt，iPhone X 狀態欄高 44pt 并有齊劉海形狀遮罩。狀態欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設計信息展示方式避讓狀態欄，以便保持各屏幕展示效果的統一。

蘋果官方不建議采用隱藏或遮擋狀態

欄的設計，相對 iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內容，且狀態欄顯示了對用戶有用的信息，除非隱藏狀態欄能帶來更大的收益，否則還是建議保留。

增加主屏幕指示條

iPhone X 屏幕最底部設置了主屏幕指示條，用戶可從屏幕底端使用滑動手勢進入主屏幕或切換應用。這些系統的全局操作會優先于App應用的操作。在設計用戶沉浸式的產品如視頻、游戲時，可以適當的隱藏主屏幕指示條。

主屏幕指示條下方的內容仍是可點擊操作的，但要避免在屏幕最底部設置重要操作內容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會根據指示條底部背景自動切換。

設置安全區

從 iOS 11 開始，蘋果引入了安全區域的概念。在 iPhone 8 等屏幕上，安全區域默認是除了狀態欄以外的屏幕范圍。在 iPhone X 上，安全區域默認是除去頂部狀態欄以及底部主屏幕指示條周邊的范圍。

遵照系統安全區的概念進行設計和開發，大多數使用系統標準UI元素（如導航欄、表單、內容集）的應用程序會自動適應設備的新外形，不需手動調整，這樣會大量節省開發人員的工作量。所以在這里提倡大家遵照系統提倡的方式進行開發布局，不僅方便iPhone X 的適配工作，也方便后續iOS 系統更新以及界面元素的自動匹配。

固定在屏幕上展示的內容應始終在安全區域內，如頂導、底部tab欄等。垂直滾動的內容，如列表，圖片流，需要一直延伸到底部，也就是會在安全區之外展示，這樣才能確保提供全面屏操作體驗。

常用元素適配方案

正是因為 iPhone X 有著許多操作特性，我們的設計方案必須針對 iPhone X 進行適配。以下是針對常見界面元素整理的通用適配規則。

吸頂元素

對于吸頂元素的適配原則是：避讓狀態欄，內容區吸附于安全區頂部，狀態欄背景顏色根據吸頂元素進行調整。

頂部導航欄

導航欄直接平移到安全區頂部即可，iPhone X 狀態欄高度自動適配，狀態欄底色與iPhone 8 時保持統一。

頂部通知

通知區域平移至安全區域，通知背景向上加高 44pt，狀態欄內容保持在最上層展示。

吸底元素

吸底元素的適配原則是：內容平移至安全區底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區域與吸底元素顏色協調。

吸底tab欄、選擇器、對話輸入框等

信息內容平移至安全區域底部，主屏幕指示條下方填充相應背景色。

吸底按鈕

信息內容平移至安全區域底部，界面底部背景填充相應背景色，按鈕可點擊區域不變。

底部擴展信息

有些信息位于底部隱藏狀態，需展開顯示，由于 iPhone X 屏幕較長，且安全區域未撐滿屏幕，所以會露出原本隱藏的信息。這時候通常會采用形狀遮罩遮蓋隱藏信息，或對底部隱藏信息的位置進行特殊調整。

信息流

信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動瀏覽信息不受影響。主屏幕指示條下方內容仍可點擊，此區域滑動手勢優先觸發系統操作。信息流最底部內容要保障在安全區內

全屏元素

全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。

全屏圖片

因全屏圖片在 iPhone X 上仍要保持全屏的話，會被裁剪掉圖片信息，所以要根據畫面具體元素進行選擇，是充滿屏幕裁剪圖片，還是在空白區域填充色塊（系統默認填充黑色）。

App 開屏圖片直接調取 iPhone 8 Plus 在 iPhone X 展示會被裁剪，所以最好是單獨出圖適配，圖片尺寸為 375pt×812pt (1125×2436px @3x)。

（* 因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨適配的話可以調取 iPhone 8 Plus 圖片裁剪使用）

全屏閱讀模式

當需要沉浸式閱讀的時候，我們會采用隱藏狀態欄的形式，將屏幕全部用于展示信息，但是這種形式在iPhone X 上因為齊劉海的原因效果并不理想。所以在 iPhone X 上建議保留頂部狀態欄，信息在頂部安全區內展示，狀態欄的底色可以根據信息內容進行調整。

左右布局元素

最典型的左右布局就是抽屜導航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯疊加，就會稍顯信息混亂，建議抽屜導航的寬度根據主屏幕指示條的位置進行調整，完整露出或完全遮擋指示條。

居中元素

居中元素在適配中的影響較小，對話框、Toast 提示等均不需單獨適配。

對話框

對話框為全局居中的元素，不受四周元素的影響，在 iPhone X 上不需單獨適配，保障對話框的背景充滿屏幕即可。

缺省頁

因頂部狀態欄是不建議遮擋的部分，所以頂部加上頂導距離會很高，這樣就導致整體界面稍有重心下移的感覺。尤其在缺省圖形居中的界面，重心下移的感覺更為明顯，這種情況下建議對界面元素進行單獨適配調整，以便達到視覺平衡。

以上的適配規則基本可以滿足所有場景的基礎適配需求。當然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現效果的一致性，這種情況就需要單獨設計方案，不是通用規則能滿足的了。

滴滴出行針對內部產品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規則與特殊規則運用場景舉例說明。設計平臺將此適配指南發放到各業務部門，由業務方產出自己各功能場景下的適配方案。在此過程中我們發現，即使規則已經很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規則的情況，需要設計平臺持續跟進，講解規則走查適配效果。

造成這種情況的原因大多是因為界面設計的時候沒有充分考慮其后期延展，導致多屏幕下不能保持統一樣式，無法通用適配規則。這讓我們開始思考如何設計界面才能包容多屏幕的展現。

“去邊界化”設計

設備屏幕在不斷更新，適配需求就是持續的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統各種各樣的屏幕尺寸及屏幕形狀（夏普AQUOS S2）。

設計界面時，如果對市面的主流屏幕挨個設計是有極其高的時間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機廠商的發售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性…

帶著這些問題不斷的思考總結，我們形成了一套自己的設計理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是“去邊界化”設計。

“去邊界化”設計，是指在設計之初把邊界限制去掉，定義好界面元素的特性及層級關系后，再套用到屏幕邊框之中。與常規設計的區別在于，讓內容成為獨立且完整的組合體，再根據設定好的變化規則組合到不同的邊界中去。這樣保障了內容的最大適用程度，且保障各屏幕展示規則的統一性。

目前我們最常做還是手機界面，未來VR、AR成熟起來，我們所設計的界面就會更大，甚至會大到無形。運用“去邊界化”設計，可以讓我們更好的適應未來。另外回到手機界面，我們完成一個設計方案后，也可以運用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。

其大無外，其小無內，在界面設計上，我們也需要突破界限，精益求精，讓每一個元素都豐富而完整。

“去邊界化”設計的應用

定義元素特性

這里的元素特性，除了元素本身的基礎功能及操作方式外，從三個角度進行思考，

• 延展性
• 吸附性
• 流動性

（*這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解“去邊界化”設計）

延展性

延展性指元素是否會在不同尺寸屏幕進行尺寸變化。定義元素的延展屬性是適配的基礎，確定什么元素大小可變，什么元素大小不可變，才能讓適配方案清晰統一。

如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進行延展變化，而icon、文字等為固定大小不會隨著屏幕進行變化。

延展變化又可分為等比延展、橫向延展、全部延展。

通常圖片、視頻元素使用等比延展，保障畫面比例統一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據其承載信息和屏幕背景尺寸進行調整，長寬均跟隨變化。

吸附性

界面中的元素都不是獨立存在的，每個元素都和其它某個元素存在一定聯系，所以定義好元素之間的吸附關系，方便后續元素的重新組合。

如下圖，btn吸附于界面（或安全區）底部，適配到其它屏幕依然保持與界面（或安全區）底部的吸附性。而下圖中的toast提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。

流動性

流動性將元素比作水，依附與一個容器內展示，根據容器的尺寸變化而變化。多為文字流、圖片流等信息元素所具備。

針對流動性的元素主要是定義其容器的延展性和吸附性，流動元素本身大小不變，位置形態上跟隨容器進行變化。當然還要考慮元素過多超出容器后的顯示方案，是被截斷還是省略等等。如下圖，文字圖片流在信息容器內進行流動展示。

組織信息結構

從平面維度思考元素關系可以理解為元素間的吸附性，但界面元素不總是在同一個平面上，App 界面通常分為 背景層 、內容層 、操作層 、狀態層 ，這些層級在高度上是相互疊加的。

決定元素層級的因素主要是其表達內容的主次關系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產品功能更豐富，更貼近人們真實的立體世界，也就更符合用戶的認知和操作邏輯。

無論界面的邊界如何變化，元素間的層級結構一旦定下是不會隨邊界變化而改變的。建立元素的縱向層級關系，便于在不同場景保持統一的元素優先級。

在“去邊界化”設計中，除了元素自身特性（延展性、吸附性、流動性）清晰，元素間的組合層級關系必須排布合理，邏輯清晰，才能讓整個產品層級統一，多屏幕展現層級統一。

元素組件化

我們有講到界面中所有的元素都不是獨立的，有時某幾個元素組合表達同一個功能，關系非常緊密，甚至可以捆綁移動，我們把這些功能密切相關的元素進行封裝，看做一個完整的大元素，這就是我們常說的組件。

組件化的特點就是詳盡每個元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關系，操作聯動，使其成為一個完整的操作場景。

組件還可以根據功能需求與其它元素自由組合，使得組件可以不斷復用，大大提升設計效率，及適配效率。

組件化的意義有很多，可以方便設計元素的復用，方便開發組件的復用，減少代碼及元素冗余，方便設計方案的修改等等。橫向組件化之于“去邊界化”設計，主要是在確立了元素特性及層級關系后，以整合元素成為組件的方式提升設計及適配效率。

以上就是“去邊界化”設計理念，包括定義元素三大特性：延展性、吸附性、流動性，然后確定信息的橫縱向層級關系，橫向功能關系緊密的元素可進行組件化處理。這樣整個界面的元素都是層級清晰且不依靠邊界的，這時再給界面套用一個屏幕邊框就非常有依據了，且能保障所有適配界面具有統一性。

梳理清楚設計理念之后，還需要將上述原則梳理形成設計規范，同步至團隊所有成員，以達到團隊共識保障最終的效果呈現。

制定設計規范

以規矩為方圓則成，以尺寸量長短則得，設計規范可以幫助設計師快速認知元素特性及使用規則，工作中快速復用通用元素，提升設計效率，且可以通過規范說明對新功能尋求設計指導和參考。

規范的貫徹執行，可以保持產品設計語言與品牌形象的統一，保障在不斷更新迭代中產品體驗不走樣。統一的使用體驗可以保障用戶流暢的使用產品，快速識別產品功能，簡單高效進行操作。此外通過規范說明，可以實現開發人員與設計師的高效溝通，另外，將組件開發形成設計組件庫，可以提升開發效率，方便代碼的復用。

在“去邊界化”的設計理念中設計規范也是不可缺少的環節，把定義好的元素特性和確定的組織結構總結成設計規范，是把理論層面上的探索轉換成實踐指導。

以上就是完整的“去邊界化”設計理念在實際工作中的應用：從定義應用中元素的延展性、吸附性和流動性，到把零散的信息元素組成橫向、縱向有序的結構，并把上述特性和結構形成設計規范在設計、開發團隊中應用推廣。

小結

從蘋果發布會開始，滴滴設計團隊內部就開始進行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應用的適配規范、上線后跟蹤反饋等，適配只是一個很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執行的態度做好每一件事情。

從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會出現的新產品、新系統等，我們不滿足于一次次被動的適配，更希望可以主動的應對變化，所以我們摸索出了“去邊界化”設計理念，希望這個理念能對大家的設計工作有所啟發，讓我們為未來做好準備。

站酷（公眾號：diditaxiued）

作者：滴滴出行CDX

總結

以上是生活随笔為你收集整理的【滴滴体验设计研究·实践篇】从 iPhone X 适配说起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。