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