iPhoneX適配之UI設計、交互設計

時間 2019-11-08

標籤 iphonex 適配設計交互简体版

原文原文鏈接

前言

蘋果發佈了全新的iPhone X全面屏手機，這也是首款採用OLED屏幕的iPhone手機，它的正面設計被更多人吐槽，以前被戲稱爲「劉海」的凹槽如今有了更多其餘名稱，「眉毛」、「頭簾」等等。對於用戶而言，iPhone X 的劉海多是讓人又愛又恨的設計。html

1、設計尺寸

發佈的iPhone 8屬於常規升級，屏幕與以往的iPhone六、6S、7系列相同。在發佈的新機中，只有iPhone X的分辨率發生了變化，但變化僅限於物理像素層面。在真正決定屏幕內容的邏輯像素層面，新版的iPhone X與過去咱們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。通俗的說，iPhone X可看作是iPhone 4.7'' 的加長版ios

然而，事情並非設計圖加長這麼簡單。安全

2、交互設計

過去，咱們拿到的手機是方方正正的矩形，因此整個屏幕均可以看作是安全區域Safe Area，而現在因爲iPhone X屏幕上的「劉海」以及屏幕四周採用圓角的設計，對於開發者和設計師來講，這個劉海帶給他們的是更多的麻煩。Apple 更新了 Human Interface Guidelines來爲開發者提供適配 iPhone X 指南，從中能夠看出，Apple 但願開發者將這個劉海毫無遮掩地呈如今 iPhone X 的「腦殼上」。app

指南一：當爲 iPhone X 適配應用時，請確保佈局填充整個屏幕，同時不被設備的圓角、傳感器和下方的 Home 條所遮擋。iphone

在使用圖片時，請注意長寬比差別。iPhone X具備不一樣於其它iPhone的長寬比，所以，全屏其它iPhone圖片在iPhone X上全屏顯示時會出現裁剪。一樣，全屏iPhone X圖片在其它iPhone也會出現裁剪，因此請注意兩種設備適配。ide

指南二：不要嘗試去隱藏設備的圓角、劉海或 Home 條，好比故意在屏幕頂部和底部使用黑色素材。佈局

參考iOS 原生應用可看出 Apple 的意思：劉海上下不要聽任何內容。ui

大部分使用系統提供的標準UI元素（如導航欄）的APP會自動適應iPhone X！Navigation bar、tab bar和tool bar會擴展到屏幕頂部和底部弧形區域。若是app使用自定義控件或非標準佈局，要在iPhone X上運行良好須要一點修改。翻譯

蘋果給出的安全區域以下設計

頁面內容不能超出安全區域（Safe Area）

避免將觸發交互行爲的按鈕放在屏幕的底部，人們會在屏幕底端使用手勢進入主屏或切換應用。（底部橫條是Home鍵）

iPhone X 狀態欄高度更高，在電話和定位等後臺任務時，高度不會變化（就是打電話和導航時，原先頂部增長的彩色帶，如今變成時間信息底部的彩色氣泡，見下圖）

值得注意的是，iPhone X 底部操做欄目進行了細微的放大。除了常見的底部導航欄外，Safari底部操做欄也有放大講完豎屏，再說橫屏。和豎屏同樣，橫屏的內容也要放置在Safe Area中

避免將觸發交互行爲的按鈕放在屏幕的角落中。人們會在屏幕底端使用手勢進入主屏或切換應用。這些系統的全局操做優先於App的操做。若是把功能放在角落裏，用戶操做起來也很費勁，儘可能在用戶手指可及區域內設計功能

底部虛擬Home指示條

做爲去除實體Home按鍵後的衍生物，底部將出現一個虛擬的Home指示條，用以實現經常使用的交互功能，鎖屏狀態下向上滑動解鎖，應用內向上滑動回到主屏，向上滑動並中止片刻進入多任務切換窗口，虛擬Home指示條大多數狀況下將會存在於屏幕的下方，而這個虛擬Home指示條只有黑、白兩種顏色。在底部有導航欄的app中，將會造成屏幕內的雙下巴，部分應用若是具有從底部上滑的操做，爲了和底部上滑回到主屏相區分，蘋果提供了一個邊緣保護的方案，第一次上滑是喚醒Home指示條，第二次纔會激活原功能。而對於最受關注的全屏狀態，虛擬Home指示條則會自動隱藏，不過尷尬的是，若是這時候是橫屏狀態，虛擬Home指示條也會跟隨轉動，而安卓虛擬按鍵則會始終存在於屏幕下方。全屏狀態下點擊屏幕後，虛擬Home指示條纔會顯示。

最後說下最核心的問題，Safe Area 範圍有多大？比對了官網上全部與iPhone X相關的界面，能夠肯定，Safe Area區間以下：

對於習慣用750x1334做圖的設計師而言，iPhone X的到來並不會帶來太大影響，iPhone X與iPhone 4.7’’之間的差別甚至不及當年iPhone 4和iPhone 5之間的差別

iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point（134 px，@2x）

對於大多數採用瀑布流的頁面來講，僅僅是屏幕高度上的變化，能夠無視。但對於如：新手引導頁、音樂播放器等須要單屏顯示的界面就須要從新佈局。

因爲 iPhone X的屏幕比例發生變化，對於長期靠「等比縮放」完成適配的H5活動頁而言也有不小的影響，須要對頁面結構進行適當微調。若是應用程序須要隱藏狀態欄，請從新考慮iPhone X上的佈局。iPhone X的顯示高度相對於iPhone 4.7''提供了更多的內容高度，狀態欄和底部能夠帶來更多的空間。但須要就屏幕內容進行適當的調整。