564      阿裏雲  技術社區[雲棲]

iOS11人機交互指南-01：iPhone X概覽

轉自：優閣視覺

iPhone X 的全麵屏具有更大尺寸和更高的分辨率，提供了前所未有的沉浸式體驗。為了適配這種前衛的設計，以至於在 iOS 11 人機交互指南中專門新增了 iPhone X 的部分。

一、屏幕尺寸

iPhone X 使用 5.8 寸的超視網膜屏幕，采用 2436px * 1125px 分辨率的三倍圖，轉換成對應的一倍圖是 375pt * 812pt，寬度與 4.7寸的 iPhone 6，iPhone 7 和 iPhone 8 相匹配（375pt * 667pt）。在高度方麵，iPhone X 上的屏幕比 4.7寸 iPhone 多 145pt，增加了 20％ 的內容垂直空間。

iPhone X 的屏幕是 @3x 高分辨率，矢量圖形最好提供獨立於分辨率的 PDF 文件。對於位圖，需要同時提供 @2x 和 @3x 的切圖文件。

二、布局

當為iPhone X設計時，必須確保布局填滿屏幕，而不被設備的圓角、傳感器外殼或訪問主屏幕的指示器所掩蓋。

大多數使用標準的、係統提供的UI元素（如導航欄、表格和集合）的應用程序可以自動適應設備的新形式。背景材料擴展到顯示的邊緣，並且適當地插入和定位UI元素。

對於自定義布局的應用程序，如果應用程序使用自動布局並遵循安全區域和邊緣布局指南的話支持 iPhone X 也應該相對容易。

2.1 預覽應用

可以使用模擬器（包括 Xcode 開發工具）預覽並檢查是否存在剪切和其他布局問題。一些功能，如顏色比較多的圖像，最好能在實機上預覽。

2.2 提供全屏體驗

確保背景延伸到屏幕邊緣，而垂直滾動的布局，如標簽和其他工具欄始終位於底部。

2.3 插入必要內容以防止被裁切

一般來說，內容應是居中對稱的，確保它在任何方向看起來都很好，而且不會被角落或設備外殼裁切。為了達到最佳效果，使用標準的、係統提供的控件元素和自動布局來設計界麵。所有的應用程序布局應遵循由 UIKit 間隔出來的安全區域，這些區域可以根據設備和上下文進行適當填充。安全區也可以防止內容改變狀態欄，導航欄，工具欄和標簽欄的位置。

2.4 注意狀態欄的高度

iPhone X 上的狀態欄比其他 iPhone 都高。如果應用固定狀態欄高度來定位內容，必須更新應用布局，基於用戶設備來動態定位內容。注意，當像錄音和位置跟蹤這樣的後台任務處於活動狀態時，iPhone X上的狀態欄不會改變高度。

2.5 隱藏狀態欄，請重新考慮

iPhone X 比 4.7寸 的 iPhone 能顯示更多的垂直空間，狀態欄可以填充程序無法充分利用的屏幕區域，告知用戶最有用的信息，隻有某些特殊目的才隱藏狀態欄。

2.6 注意重用界麵的長寬比差異

由於和 4.7寸 的設備長寬比不同，4.7寸設備界麵在 iPhone X 上會被左右裁切或是上下黑邊處理。同樣，iPhone X 界麵在 4.7寸設備會被上下裁切或是左右黑邊處理。所以，要確保在兩個顯示屏幕上都保留重要的視覺內容。

2.7 避免最底部和角落放置交互控件

iPhone X 的下邊緣使用滑動手勢來返回主屏幕或者進行應用切換，所以底部可能會影響應用的手勢操作。角落是不舒適區域，沒有交互控件最好。

2.8 不要掩蓋或特別注重異型區域

不要試圖通過在屏幕頂部和底部放置黑條來掩蓋設備圓角、傳感器外殼或返回主屏幕的指示器。不要使用像括號、邊框、形狀或教學文字等視覺裝飾讓用戶特別注重這些區域。

2.9 允許自動隱藏指示器

當啟用自動隱藏時，如果用戶幾秒鍾沒有觸摸屏幕，指示器就會淡出。再次觸摸屏幕時會顯示，給用戶沉浸式體驗。

三、顏色

在 iPhone X 支持 P3 色彩空間，比 sRGB 更豐富、更飽和，增強視覺體驗。讓照片、視頻有了更多細節。

四、手勢

iPhone X使用屏幕邊緣的手勢來返回主屏、應用切換、查看通知中心和控製中心。

4.1 返回主屏

從底部向上輕掃一下，即可返回主屏幕

點擊播放 GIF/1768K

4.2應用切換

向上輕掃並停頓一下，可顯示所有打開的 app

點擊播放 GIF/1635K

4.3控製中心

向下輕掃，就能打開可個性化設置的控製中心

點擊播放 GIF/1928K

避免幹擾係統屏幕邊緣手勢，人們依靠這些手勢完成係統級操作。在極少數情況下，像遊戲這樣的沉浸式應用可能需要自定義屏幕邊緣手勢，這些手勢優先於係統手勢。第一次滑動調用特定於應用手勢，第二次滑動調用係統手勢。這種行為（稱為邊緣保護）應該謹慎執行，因為它使用戶難以訪問係統級操作。

五、其他設計思考

5.1 身份驗證

iPhone X 支持人臉身份認證。如果應用與蘋果支付或其他係統認證功能相集成，不要在 iPhone X 上引用 Touch ID，同樣要確保應用不在支持 Touch ID 的設備上引用 Face ID。

5.2 不重複係統鍵盤功能

在 iPhone X 上，即使用自定義鍵盤，表情/世界按鈕和聽筒按鈕也會自動顯示在鍵盤下方。應用不能影響這些按鈕，因此避免在鍵盤中重複這些按鈕，以免混亂。

六、資源

相應的 UIkit 可以在我們的 uikit.me 下載，PS 和 Sketch 都有，當然也可以點擊原文下載喲～

點擊播放 GIF/104K

最後更新：2017-10-08 15:23:14

  上一篇： iphoneX都已經高調更新色彩 你還有什麼理由低調下去？

  下一篇： iPhone憑什麼賣到這麼貴？它第一個不服