2022-6-14 博博
滴滴出行在 iPhone X 發(fā)售前就針對其操作特性進行了界面適配，保障了 iPhone X 用戶的全面屏操作?，F在 iPhone X 的適配結果已經得到了良好的用戶反饋，由此我們梳理了移動端界面 iPhone X 的適配方案，并從整個適配過程中探索到萬變不離其宗的適配方法，為后續(xù)不斷更新的多尺寸屏幕提供更好更快的適配思路。
iPhone X 是蘋果公司十周年推出的重點產品，無論外觀還是技術都有著革命性的創(chuàng)新。讓我們先來回顧下 iPhone X 在界面使用體驗上都有哪些操作特性。
如果你對 iPhone X 還不夠了解，可以看看這些 ：
1. 屏幕變長
因大部分設計師都用 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 上，視線優(yōu)先和拇指操作未必可以同時滿足，這就要求設計師們對操作盲區(qū)的功能進行多重考量，評估是否要針對 iPhone X 做出位置調整。
2. 異形狀態(tài)欄（齊劉海）
iPhone 8 屏幕狀態(tài)欄高 20pt，iPhone X 狀態(tài)欄高 44pt 并有齊劉海形狀遮罩。狀態(tài)欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設計信息展示方式避讓狀態(tài)欄，以便保持各屏幕展示效果的統(tǒng)一。
蘋果官方不建議采用隱藏或遮擋狀態(tài)欄的設計，相對 iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內容，且狀態(tài)欄顯示了對用戶有用的信息，除非隱藏狀態(tài)欄能帶來更大的收益，否則還是建議保留。
3. 增加主屏幕指示條
iPhone X 屏幕最底部設置了主屏幕指示條，用戶可從屏幕底端使用滑動手勢進入主屏幕或切換應用。這些系統(tǒng)的全局操作會優(yōu)先于App應用的操作。在設計用戶沉浸式的產品如視頻、游戲時，可以適當的隱藏主屏幕指示條。
主屏幕指示條下方的內容仍是可點擊操作的，但要避免在屏幕最底部設置重要操作內容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會根據指示條底部背景自動切換。
4. 設置安全區(qū)
從 iOS 11 開始，蘋果引入了安全區(qū)域的概念。在 iPhone 8 等屏幕上，安全區(qū)域默認是除了狀態(tài)欄以外的屏幕范圍。在 iPhone X 上，安全區(qū)域默認是除去頂部狀態(tài)欄以及底部主屏幕指示條周邊的范圍。
遵照系統(tǒng)安全區(qū)的概念進行設計和開發(fā)，大多數使用系統(tǒng)標準UI元素（如導航欄、表單、內容集）的應用程序會自動適應設備的新外形，不需手動調整，這樣會大量節(jié)省開發(fā)人員的工作量。所以在這里提倡大家遵照系統(tǒng)提倡的方式進行開發(fā)布局，不僅方便 iPhone X 的適配工作，也方便后續(xù) iOS 系統(tǒng)更新以及界面元素的自動匹配。
固定在屏幕上展示的內容應始終在安全區(qū)域內，如頂導、底部tab欄等。垂直滾動的內容，如列表，圖片流，需要一直延伸到底部，也就是會在安全區(qū)之外展示，這樣才能確保提供全面屏操作體驗。
正是因為 iPhone X 有著許多操作特性，我們的設計方案必須針對 iPhone X 進行適配。以下是針對常見界面元素整理的通用適配規(guī)則。
1. 吸頂元素
對于吸頂元素的適配原則是：避讓狀態(tài)欄，內容區(qū)吸附于安全區(qū)頂部，狀態(tài)欄背景顏色根據吸頂元素進行調整。
2. 吸底元素
吸底元素的適配原則是：內容平移至安全區(qū)底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區(qū)域與吸底元素顏色協(xié)調。
3. 信息流
信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動瀏覽信息不受影響。主屏幕指示條下方內容仍可點擊，此區(qū)域滑動手勢優(yōu)先觸發(fā)系統(tǒng)操作。信息流最底部內容要保障在安全區(qū)內。
4. 全屏元素
全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規(guī)則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態(tài)，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。
因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨適配的話可以調取 iPhone 8 Plus 圖片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屜導航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯疊加，就會稍顯信息混亂，建議抽屜導航的寬度根據主屏幕指示條的位置進行調整，完整露出或完全遮擋指示條。
6. 居中元素
居中元素在適配中的影響較小，對話框、Toast 提示等均不需單獨適配。
以上的適配規(guī)則基本可以滿足所有場景的基礎適配需求。當然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現效果的一致性，這種情況就需要單獨設計方案，不是通用規(guī)則能滿足的了。
滴滴出行針對內部產品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規(guī)則與特殊規(guī)則運用場景舉例說明。設計平臺將此適配指南發(fā)放到各業(yè)務部門，由業(yè)務方產出自己各功能場景下的適配方案。
在此過程中我們發(fā)現，即使規(guī)則已經很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規(guī)則的情況，需要設計平臺持續(xù)跟進，講解規(guī)則走查適配效果。
造成這種情況的原因大多是因為界面設計的時候沒有充分考慮其后期延展，導致多屏幕下不能保持統(tǒng)一樣式，無法通用適配規(guī)則。這讓我們開始思考如何設計界面才能包容多屏幕的展現。
設備屏幕在不斷更新，適配需求就是持續(xù)的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統(tǒng)各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。
設計界面時，如果對市面的主流屏幕挨個設計是有極其高的時間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機廠商的發(fā)售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性……
帶著這些問題不斷的思考總結，我們形成了一套自己的設計理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是「去邊界化」設計。
「去邊界化」設計，是指在設計之初把邊界限制去掉，定義好界面元素的特性及層級關系后，再套用到屏幕邊框之中。與常規(guī)設計的區(qū)別在于，讓內容成為獨立且完整的組合體，再根據設定好的變化規(guī)則組合到不同的邊界中去。這樣保障了內容的最大適用程度，且保障各屏幕展示規(guī)則的統(tǒng)一性。
目前我們最常做還是手機界面，未來VR、AR 成熟起來，我們所設計的界面就會更大，甚至會大到無形。運用「去邊界化」設計，可以讓我們更好的適應未來。
另外回到手機界面，我們完成一個設計方案后，也可以運用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。
其大無外，其小無內，在界面設計上，我們也需要突破界限，精益求精，讓每一個元素都豐富而完整。
1. 定義元素特性
這里的元素特性，除了元素本身的基礎功能及操作方式外，從三個角度進行思考，延展性、吸附性、流動性。
這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解「去邊界化」設計。
如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進行延展變化，而icon、文字等為固定大小不會隨著屏幕進行變化。
延展變化又可分為：等比延展、橫向延展、全部延展。
通常圖片、視頻元素使用等比延展，保障畫面比例統(tǒng)一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據其承載信息和屏幕背景尺寸進行調整，長寬均跟隨變化。
如下圖，button 吸附于界面（或安全區(qū)）底部，適配到其它屏幕依然保持與界面（或安全區(qū)）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。
針對流動性的元素主要是定義其容器的延展性和吸附性，流動元素本身大小不變，位置形態(tài)上跟隨容器進行變化。當然還要考慮元素過多超出容器后的顯示方案，是被截斷還是省略等等。
如下圖，文字圖片流在信息容器內進行流動展示。
2. 組織信息結構
從平面維度思考元素關系可以理解為元素間的吸附性，但界面元素不總是在同一個平面上，App 界面通常分為 背景層 、內容層 、操作層 、狀態(tài)層 ，這些層級在高度上是相互疊加的。
決定元素層級的因素主要是其表達內容的主次關系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產品功能更豐富，更貼近人們真實的立體世界，也就更符合用戶的認知和操作邏輯。
無論界面的邊界如何變化，元素間的層級結構一旦定下是不會隨邊界變化而改變的。建立元素的縱向層級關系，便于在不同場景保持統(tǒng)一的元素優(yōu)先級。
在「去邊界化」設計中，除了元素自身特性（延展性、吸附性、流動性）清晰，元素間的組合層級關系必須排布合理、邏輯清晰，才能讓整個產品層級統(tǒng)一，多屏幕展現層級統(tǒng)一。
3. 元素組件化
我們有講到界面中所有的元素都不是獨立的，有時某幾個元素組合表達同一個功能，關系非常緊密，甚至可以捆綁移動，我們把這些功能密切相關的元素進行封裝，看做一個完整的大元素，這就是我們常說的組件。
組件化的特點就是詳盡每個元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關系，操作聯(lián)動，使其成為一個完整的操作場景。
說到組件化設計，這有一篇必看好文：《進階必讀！可能是最全面的組件化開發(fā)與設計指南》。
組件還可以根據功能需求與其它元素自由組合，使得組件可以不斷復用，大大提升設計效率，及適配效率。
組件化的意義有很多，可以方便設計元素的復用，方便開發(fā)組件的復用，減少代碼及元素冗余，方便設計方案的修改等等。橫向組件化之于「去邊界化」設計，主要是在確立了元素特性及層級關系后，以整合元素成為組件的方式提升設計及適配效率。
以上就是「去邊界化」設計理念，包括定義元素三大特性：延展性、吸附性、流動性，然后確定信息的橫縱向層級關系，橫向功能關系緊密的元素可進行組件化處理。這樣整個界面的元素都是層級清晰且不依靠邊界的，這時再給界面套用一個屏幕邊框就非常有依據了，且能保障所有適配界面具有統(tǒng)一性。
梳理清楚設計理念之后，還需要將上述原則梳理形成設計規(guī)范，同步至團隊所有成員，以達到團隊共識保障最終的效果呈現。
4. 制定設計規(guī)范
以規(guī)矩為方圓則成，以尺寸量長短則得，設計規(guī)范可以幫助設計師快速認知元素特性及使用規(guī)則，工作中快速復用通用元素，提升設計效率，且可以通過規(guī)范說明對新功能尋求設計指導和參考。
規(guī)范的貫徹執(zhí)行，可以保持產品設計語言與品牌形象的統(tǒng)一，保障在不斷更新迭代中產品體驗不走樣。統(tǒng)一的使用體驗可以保障用戶流暢的使用產品，快速識別產品功能，簡單高效進行操作。此外通過規(guī)范說明，可以實現開發(fā)人員與設計師的高效溝通，另外，將組件開發(fā)形成設計組件庫，可以提升開發(fā)效率，方便代碼的復用。
在「去邊界化」的設計理念中設計規(guī)范也是不可缺少的環(huán)節(jié)，把定義好的元素特性和確定的組織結構總結成設計規(guī)范，是把理論層面上的探索轉換成實踐指導。
以上就是完整的「去邊界化」設計理念在實際工作中的應用：從定義應用中元素的延展性、吸附性和流動性，到把零散的信息元素組成橫向、縱向有序的結構，并把上述特性和結構形成設計規(guī)范在設計、開發(fā)團隊中應用推廣。
從蘋果發(fā)布會開始，滴滴設計團隊內部就開始進行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應用的適配規(guī)范、上線后跟蹤反饋等，適配只是一個很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執(zhí)行的態(tài)度做好每一件事情。
從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會出現的新產品、新系統(tǒng)等，我們不滿足于一次次被動的適配，更希望可以主動的應對變化，所以我們摸索出了「去邊界化」設計理念，希望這個理念能對大家的設計工作有所啟發(fā)，讓我們?yōu)槲磥碜龊脺蕚洹?
轉載請注明：優(yōu)設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
