iPhone X已經(jīng)上市一段時間了，我不知道iPhone X的朋友是否習(xí)慣了iOS 11和iPhone X手機(jī)的操作體驗。

在iPhone X發(fā)布之前，Drip travel已經(jīng)將其操作功能連接起來，確保了iPhone X用戶的全屏操作?，F(xiàn)在iPhone X的適應(yīng)結(jié)果得到了很好的用戶反饋，因此我們在移動界面上梳理了iPhone X的適應(yīng)方案，并從整個適應(yīng)過程中探索了適應(yīng)方法。隨后更新的多尺寸屏幕提供更好和更快的適應(yīng)想法。

整篇文章分為四章

iPhone X系統(tǒng)功能

接口通用元件適配方案

“去邊界”設(shè)計

“去邊界”設(shè)計的應(yīng)用

iPhone X操作功能

iPhone X是蘋果公司成立10周年推出的重要產(chǎn)品，在外觀和技術(shù)方面都進(jìn)行了革命性的創(chuàng)新。讓我們首先回顧一下iPhone X在界面體驗中的操作功能。

如果您對iPhone X不夠了解，可以查看以下內(nèi)容：

《優(yōu)設(shè)首發(fā)!iPhone X 官方人機(jī)交互指南中文版》

《iPhone X適配沒那么復(fù)雜，但也不是看上去這么簡單》

《取消了Home鍵的 iPhone X，交互方式都有哪些變化?》

1.屏幕變長

由于大多數(shù)設(shè)計師使用iPhone 8進(jìn)行設(shè)計草圖，我們使用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圖像，界面內(nèi)容被手機(jī)硬件屏蔽為具有圓角和傳感器（頂部劉海）的形狀。因此，iPhone X和iPhone 8的設(shè)計寬度在界面設(shè)計中可以達(dá)到375pt，而實際的iPhone X屏幕像素為375pt× 812pt（1125× 2436px），剪切圖像使用@ 3x圖像。

喬布斯曾表示，手持設(shè)備的最佳屏幕尺寸為3.5英寸，因為3.5英寸屏幕基本上可以實現(xiàn)單手操作的完全無障礙覆蓋。但隨著手機(jī)功能多樣化的需求，主流屏幕遠(yuǎn)大于3.5英寸。

iPhone X是5.8英寸，屏幕超過了大多數(shù)用戶的拇指覆蓋范圍，這使得左上角和右下角的單手操作不方便。許多基于F型移動視線設(shè)計的應(yīng)用程序通常會在左上角放置重要的功能條目。在iPhone X上，可能無法同時滿足視線優(yōu)先級和拇指操作，這要求設(shè)計人員具有多功能操作盲點的功能?？紤]是否要對iPhone X進(jìn)行位置調(diào)整。

2.異形狀態(tài)欄（齊六海）

iPhone 8屏幕狀態(tài)欄高20pt，iPhone X狀態(tài)欄高44pt，帶有劉海形狀的面罩。狀態(tài)欄位置顯示的信息受iPhone X上的劉海掩碼的影響。需要特別考慮顯示效果，甚至重新設(shè)計信息顯示模式以避開狀態(tài)欄，以保持每個的均勻性。屏幕顯示效果。

Apple不建議隱藏或阻止?fàn)顟B(tài)欄。與iPhone 8相比，iPhone X具有更高的垂直顯示空間以顯示更多內(nèi)容，狀態(tài)欄顯示用戶的有用信息，除非隱藏狀態(tài)欄可以獲得更大的利潤，否則建議保留。

3.添加主屏幕指示燈

主屏幕欄設(shè)置在iPhone X屏幕的底部，用戶可以使用滑動手勢進(jìn)入主屏幕或從屏幕底部切換應(yīng)用程序。這些系統(tǒng)的全局操作優(yōu)先于App應(yīng)用程序的操作。在設(shè)計用戶沉浸式產(chǎn)品（如視頻和游戲）時，您可以適當(dāng)?shù)仉[藏主屏幕欄。

主屏幕欄下方的內(nèi)容仍然可以點擊，但避免在屏幕的最底部設(shè)置重要操作，并避免使用與欄沖突的手勢。主屏幕欄只有黑白，并會根據(jù)欄底部的背景自動切換。

4.設(shè)置安全區(qū)域

從iOS 11開始，Apple引入了安全區(qū)域的概念。在iPhone 8等屏幕上，安全區(qū)域默認(rèn)為狀態(tài)欄以外的一系列屏幕。在iPhone X上，安全區(qū)域默認(rèn)刪除頂部狀態(tài)欄和底部主屏幕欄周圍的范圍。

根據(jù)系統(tǒng)安全區(qū)域的概念設(shè)計和開發(fā)，大多數(shù)使用系統(tǒng)標(biāo)準(zhǔn)UI元素的應(yīng)用程序（如導(dǎo)航欄，表單，內(nèi)容集）將自動適應(yīng)設(shè)備的新形狀，無需手動調(diào)整，為開發(fā)人員節(jié)省了很多工作量。因此，建議遵循系統(tǒng)主張開發(fā)布局的方式，這不僅有利于iPhone X的適應(yīng)性，還有利于后續(xù)的iOS系統(tǒng)更新和界面元素的自動匹配。

固定在屏幕上的內(nèi)容應(yīng)始終位于安全區(qū)域，例如頂部指南，底部標(biāo)簽欄等。內(nèi)容的垂直滾動（例如列表，圖像流）需要一直延伸到底部，這顯示在安全區(qū)域之外以確保全屏操作體驗。

共同元素適應(yīng)方案

由于iPhone X具有許多操作功能，因此我們的設(shè)計必須適用于iPhone X.以下是常見界面元素的一般適配規(guī)則。

天花板元素

天花板元件的適應(yīng)原則是：避讓狀態(tài)欄，內(nèi)容區(qū)域吸附在安全區(qū)域的頂部，狀態(tài)欄的背景顏色根據(jù)天花板元素進(jìn)行調(diào)整。

頂部導(dǎo)航欄：導(dǎo)航欄可以直接轉(zhuǎn)換到安全區(qū)域的頂部。 iPhone X狀態(tài)欄高度自動調(diào)整，狀態(tài)欄背景顏色與iPhone 8一致。

熱門通知：通知區(qū)域平移到安全區(qū)域，通知背景提升44pt，狀態(tài)欄內(nèi)容保持在頂層。

2.吸收元素

適應(yīng)底層元素的原則是：將內(nèi)容翻譯到安全區(qū)域的底部，界面背景層元素（界面背景顏色，背景圖像，全屏地圖等）填充屏幕，并且區(qū)域主屏幕指示條下方與底部元素的顏色相協(xié)調(diào)。

底部標(biāo)簽欄，選擇器，對話框輸入框等：信息內(nèi)容被翻譯到安全區(qū)域的底部，相應(yīng)的背景顏色填充在主屏幕指示條下。

底部按鈕：信息內(nèi)容被翻譯到安全區(qū)域的底部。界面底部的背景填充相應(yīng)的背景顏色，可以單擊該按鈕。

底部擴(kuò)展信息：一些信息隱藏在底部，需要擴(kuò)展。由于iPhone X屏幕較長且安全區(qū)域未滿，因此將顯示原始隱藏信息。此時，形狀掩模通常用于覆蓋隱藏信息，或者底部隱藏信息的位置是專門調(diào)整的。

3.信息流

信息流在主屏幕指示條下方傳遞，并顯示屏幕顯示?；瑒訛g覽信息不受影響。主屏幕欄下方的內(nèi)容仍可點擊，此區(qū)域中的滑動手勢優(yōu)先觸發(fā)系統(tǒng)操作。應(yīng)在安全區(qū)域中保護(hù)信息流的最底層內(nèi)容。

4.全屏元素

全屏元素主要是圖片，視頻，游戲屏幕，全屏地圖等。適應(yīng)規(guī)則是：全屏元素必須保持在iPhone X全屏狀態(tài)，以確保圖像信息比例正確且不變形，并接受硬件傳感器齊劉海和圓角面具。

全屏圖像：由于全屏圖像仍然需要在iPhone X上保持全屏，因此圖像信息將被裁剪，因此您應(yīng)根據(jù)屏幕的特定元素進(jìn)行選擇，是否已滿屏幕裁剪圖像，或填充空白區(qū)域中的顏色塊（系統(tǒng)默認(rèn)填充黑色））。應(yīng)用程序打開屏幕圖像直接iPhone 8 Plus在iPhone X上裁剪，因此最好單獨(dú)繪制，圖像大小為375pt&次; 812pt（1125× 2436px @ 3x）。

由于iPhone X和iPhone 8 Plus都使用@ 3x圖像，因此可以在不打開屏幕的情況下使用iPhone 8 Plus進(jìn)行裁剪。

全屏閱讀模式：當(dāng)需要沉浸式閱讀時，我們將使用隱藏狀態(tài)欄顯示所有屏幕，但由于齊劉，這種形式在iPhone X上并不理想。所以在iPhone X上，建議保留頂部狀態(tài)欄，信息顯示在頂部安全區(qū)域，狀態(tài)欄的背景顏色可以根據(jù)信息內(nèi)容進(jìn)行調(diào)整。

5.左右布局元素

最典型的左右布局是抽屜導(dǎo)航。抽屜拉出后，如果信息卡和主屏指示器是隔行掃描的，信息會略微混淆。建議根據(jù)主屏幕指示條的位置調(diào)整抽屜導(dǎo)航的寬度。遮擋條完全被遮擋。

6.中心元素

中心元素對自適應(yīng)的影響較小，對話框，Toast提示等不需要單獨(dú)調(diào)整。

對話框：對話框是一個全局居中的元素，不受周圍元素的影響。它不需要在iPhone X上單獨(dú)調(diào)整，以確保對話框的背景充滿了屏幕。

默認(rèn)頁面：由于頂部狀態(tài)欄不建議用于遮擋，因此頂部加上頂部引導(dǎo)距離將很高，這將導(dǎo)致輕微的重心移動整個界面。特別是在具有默認(rèn)圖形居中的界面中，移動重心的感覺更加明顯。在這種情況下，建議分別調(diào)整界面元素以實現(xiàn)視覺平衡。

上述適應(yīng)規(guī)則基本上可以滿足所有場景的基本適應(yīng)要求。當(dāng)然，還有很多特殊情況。您不需要保持iPhone 8和iPhone X的一致性。這種情況需要單獨(dú)的設(shè)計，而不是一般規(guī)則。

Didi Travel已經(jīng)為內(nèi)部產(chǎn)品制作了一套適應(yīng)指南，并且數(shù)十頁完整的適應(yīng)方案描述，盡可能地說明了普遍規(guī)則和特殊規(guī)則的使用。設(shè)計平臺向每個業(yè)務(wù)部門發(fā)布此適應(yīng)指南，業(yè)務(wù)部門在其自身的功能方案下生成適應(yīng)方案。

在這個過程中，我們發(fā)現(xiàn)即使規(guī)則已經(jīng)非常詳細(xì)，但在Webapp和H5頁面等多種場景中仍然存在一些不清楚如何適應(yīng)或不能普遍適應(yīng)的情況。設(shè)計平臺需要跟進(jìn)并解釋規(guī)則。適應(yīng)效果。

造成這種情況的大多數(shù)原因是由于接口設(shè)計未被充分考慮用于其后續(xù)擴(kuò)展，導(dǎo)致無法在多個屏幕下維護(hù)的統(tǒng)一樣式，并且不能使用一般適應(yīng)規(guī)則。這使我們可以開始考慮如何設(shè)計一個接口以適應(yīng)多個屏幕。

“去邊界”設(shè)計

設(shè)備屏幕不斷更新，適應(yīng)需求無窮無盡，iPhone 4來自iPhone 4– iPhone 5– iPhone 6– iPhone X，屏幕尺寸不斷變化，甚至屏幕的形狀邊界都在變化，更不用說Android的各種屏幕尺寸和屏幕形狀。例如，夏普AQUOS S2。

在設(shè)計界面時，如果市場的主流屏幕設(shè)計有極高的時間成本，我們怎樣才能使適應(yīng)更加平靜，而不必緊張地跟隨手機(jī)制造商的腳步？有沒有辦法提高適應(yīng)效率？可以一勞永逸地完成嗎？需要調(diào)整的元素是否具有一些共性……

隨著這些問題的不斷思考和總結(jié)，我們已經(jīng)形成了一套自己的設(shè)計理念，可以使這一事物適應(yīng)一百一百，這就是“去邊界”的設(shè)計。

“去邊界”設(shè)計是指在設(shè)計開始時刪除邊界限制，定義界面元素的特征和層次關(guān)系，然后將它們應(yīng)用于屏幕邊界。與傳統(tǒng)設(shè)計的不同之處在于內(nèi)容成為獨(dú)立且完整的組合，然后根據(jù)設(shè)定的變更規(guī)則組合成不同的邊界。這保證了內(nèi)容的最大適用性并保證了每個屏幕的顯示規(guī)則的一致性。

目前，我們經(jīng)常做手機(jī)界面。未來，VR和AR將會成熟。我們設(shè)計的界面將更大，甚至不可見。使用“去邊界”設(shè)計使我們能夠更好地適應(yīng)未來。

另外，回到手機(jī)界面，在我們完成設(shè)計解決方案之后，我們還可以使用“去邊界”的方法來檢查界面元素是否在多屏適應(yīng)方面存在問題，并減少不必要的適應(yīng)工作量。

它很大，很小，在界面設(shè)計中，我們還需要突破界限，不斷改進(jìn)，并使每個元素豐富和完整。

“去邊界”設(shè)計的應(yīng)用

1.定義元素特征

除了元件本身的基本功能和操作方法之外，這里的元件的特征從延展性，吸附性和流動性三個角度考慮。

這里我們采用相同的放大倍率，不同尺寸的屏幕自適應(yīng)作為示例，省略放大率轉(zhuǎn)換使我們更容易理解“去邊界”設(shè)計。

可擴(kuò)展性：延展性是指元素在不同大小的屏幕上是否會改變大小。定義元素的擴(kuò)展屬性是適應(yīng)的基礎(chǔ)。確定元素的大小是可變的并且元素的大小不可變，使得自適應(yīng)方案清晰且均勻。

如下圖所示，圖片，卡片，背景，列表，按鈕等元素可以隨屏幕擴(kuò)展，而圖標(biāo)，文本等固定大小不隨屏幕而變化。

擴(kuò)展變化可以分為：相等擴(kuò)展，橫向擴(kuò)展和完全擴(kuò)展。

通常，圖像和視頻元素按比例擴(kuò)展，以確保圖像的比例均勻且不變形;列表，按鈕等大多是水平擴(kuò)展的，信息量不會隨著變化而變化;卡片，背景等根據(jù)其方位信息和屏幕背景大小進(jìn)行調(diào)整。長度和寬度都遵循變化。

吸附：界面中的元素不是獨(dú)立的。每個元素與其他元素都有一定的關(guān)系。因此，限定元素之間的吸附關(guān)系以促進(jìn)后續(xù)元素的重組。

如下圖所示，按鈕連接到接口（或安全區(qū)）的底部，其他屏幕仍然連接到接口（或安全區(qū)）的底部。下圖中的吐司提示是界面的中心，即其吸附是界面的中心，并且通過適應(yīng)其他屏幕來保持吸附性能。

流動性：流動性將元素與水相比較，與容器相連，并根據(jù)容器的大小而變化。大多數(shù)情況下，它由諸如文本流和圖片流之類的信息元素提供。

流動性元素主要用于定義容器的延展性和吸附性。流動元件本身的尺寸是恒定的，并且位置形狀隨容器而變化。當(dāng)然，在元素超出容器之后，我們還必須考慮顯示方案，無論是截斷還是省略。

如下所示，文本圖像流顯示在信息容器中。

2.組織信息結(jié)構(gòu)

從平面尺寸考慮元素關(guān)系可以理解為元素之間的吸附，但界面元素并不總是在同一平面上。 App界面通常分為背景層，內(nèi)容層，操作層和狀態(tài)層。這些級別彼此高度疊加。

決定元素水平的因素主要是表達(dá)內(nèi)容的主要和次要關(guān)系。重要和緊迫的因素是最重要的，而不重要和緊迫的因素是最重要的。將界面從平面尺寸填充到三維尺寸使得產(chǎn)品更加通用并且更接近真實的三維世界，這更符合用戶的認(rèn)知和操作邏輯。

無論界面的邊界如何變化，元素之間的層次結(jié)構(gòu)都不會隨著邊界的變化而變化。建立元素的垂直層次關(guān)系，以在不同場景中保持統(tǒng)一的元素優(yōu)先級。

在“去邊界”設(shè)計中，除了元素本身的特性（延展性，吸附性，流動性）之外，元素之間的層次關(guān)系必須合理和邏輯地排列，以便整個產(chǎn)品層次結(jié)構(gòu)可以統(tǒng)一，多屏顯示層次結(jié)構(gòu)Unite。

3.元素組件化

我們已經(jīng)說過界面中的所有元素都不是獨(dú)立的。有時某些元素組合表達(dá)相同的功能，關(guān)系非常接近，甚至可以捆綁和移動。我們將這些密切相關(guān)的元素封裝起來，并將其視為一個完整的大元素，這就是我們常說的。

組件化的特點是耗盡每個元素的操作反饋，擴(kuò)展方案，顯示容器，極限情況等，然后定義元素和元素之間的吸附關(guān)系，并操作連接使其成為一個完整的操作場景。

說到組件設(shè)計，有一篇必看文章：《進(jìn)階必讀!可能是最全面的組件化開發(fā)與設(shè)計指南》。

組件還可以根據(jù)功能要求與其他元件自由組合，使組件可以連續(xù)重復(fù)使用，大大提高設(shè)計效率和適應(yīng)效率。

組件化有許多含義，可以促進(jìn)設(shè)計元素的重用，促進(jìn)開發(fā)組件的重用，減少代碼和元素冗余，并促進(jìn)設(shè)計方案的修改。水平組件化基于“去邊界”設(shè)計，其主要是在建立元素特征和層次關(guān)系之后通過將元素集成到組件中來提高設(shè)計和適應(yīng)效率。

以上是“去邊界”設(shè)計概念，包括定義元素的三個特征：延展性，吸附性，流動性，然后確定信息的水平和垂直層次關(guān)系。具有緊密水平函數(shù)關(guān)系的元素可以被組件化。這樣，整個界面的元素是清晰的，不依賴于邊界。此時，將屏幕邊框應(yīng)用于接口是非常有效的，并且可以確保所有適配接口的一致性。

在整理出設(shè)計概念之后，還有必要將上述原則融入設(shè)計規(guī)范中，并將其與團(tuán)隊的所有成員同步，以實現(xiàn)團(tuán)隊共識保證的最終結(jié)果。

4.制定設(shè)計規(guī)范

規(guī)則是方形圓，尺寸很小。設(shè)計規(guī)范可以幫助設(shè)計人員快速識別元素特征和使用規(guī)則，快速重用工作中的常見元素，提高設(shè)計效率，并可以通過規(guī)范尋求新功能。設(shè)計指導(dǎo)和參考。

規(guī)范的實施可以保持產(chǎn)品設(shè)計語言和品牌形象的統(tǒng)一，并保證產(chǎn)品體驗在連續(xù)更新迭代中沒有差異。統(tǒng)一的用戶體驗確保了用戶對產(chǎn)品的順利使用，產(chǎn)品功能的快速識別以及簡單高效的操作。此外，通過規(guī)范，您可以實現(xiàn)開發(fā)人員和設(shè)計人員之間的有效溝通。此外，組件開發(fā)可用于形成設(shè)計組件庫，這可以提高開發(fā)效率并促進(jìn)代碼重用。

在“去邊界”的設(shè)計理念中，設(shè)計規(guī)范也是不可或缺的環(huán)節(jié)。將明確定義的要素特征和確定的組織結(jié)構(gòu)定義為設(shè)計規(guī)范，是將理論層面的探索轉(zhuǎn)化為實踐指導(dǎo)。

以上是完整的“去邊界”設(shè)計理念在實際工作中的應(yīng)用：從定義應(yīng)用中元素的可擴(kuò)展性，吸附性和流動性，到形成分散信息元素的水平和垂直有序結(jié)構(gòu)，以及特征和結(jié)構(gòu)形成設(shè)計規(guī)范，用于設(shè)計和開發(fā)團(tuán)隊的應(yīng)用和推廣。

總結(jié)

在Apple會議上，Didi設(shè)計團(tuán)隊的設(shè)計團(tuán)隊開始研發(fā)iPhone X.了解iPhone X的操作特性，探索Drip Travel應(yīng)用程序的適應(yīng)規(guī)格，上線后的后續(xù)反饋等。適應(yīng)性是只是一個小的工作要求，但它也可以做很多，這是很多工作。我們希望堅持這一點。最終的執(zhí)行態(tài)度是做一切。

通過這項改編工作，我們不僅看到了iPhone X，還看到了將來會繼續(xù)出現(xiàn)的新產(chǎn)品和系統(tǒng)。我們對被動適應(yīng)一勞永逸不滿意，我們希望我們能夠積極應(yīng)對變化，因此我們探索了“去邊界”的概念，希望這個概念能激發(fā)每個人的設(shè)計工作，為我們做好準(zhǔn)備。未來。

« 感謝金義金服裝“滿足財富，感恩禮貌”盛大開幕 | 不要被“精準(zhǔn)營銷”所迷惑，應(yīng)該進(jìn)行有效的營銷 »