iPhone X 交互設計官方指南

2 評論 17770 瀏覽 91 收藏 10 分鐘

就在今天凌晨,蘋果發布了帶劉海的 iPhone X,這個屏幕需要 iOS 開發者做新的適配,會后蘋果發布了 iPhone X 的適配指南,我們將它翻譯出來供大家參考。

iPhone X

iPhone X 擁有一個寬大的、高分辨率、圓角的、擴展到邊緣的屏幕,提供了以前從未有過的沉浸式、內容豐富的體驗。

屏幕尺寸

在縱向方向上,iPhone X 顯示屏的寬度與 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的顯示屏寬度相同。然而,iPhone X 上的屏幕比 4.7 英寸顯示屏高 145pt,導致多出了大約 20%的垂直高度。

  • 豎屏尺寸:1125px × 2436px(375pt × 812pt @3x)
  • 橫屏尺寸:2436px × 1125px(812pt × 375pt @3x)

為您的應用程序中的所有圖稿提供高分辨率圖像。iPhone X 具有比例因子為 @3x 的高分辨率。對于字形和其他平面的矢量圖形,最好提供與分辨率無關的 PDF 格式。對于光柵化圖稿,您可以提供 @3x 和 @2x 版本的作品。請參閱 圖像大小和分辨率 和 自定義圖標。

布局

在 iPhone X 中設計時,您必須確保布局填滿屏幕,并且不會被設備的圓角、傳感器外殼或用于訪問主屏幕的指示燈遮蔽。

大多數使用標準系統提供的 UI 元素(如導航欄、表格和集合)的應用程序會自動適應設備的新外形。背景材料延伸到屏幕的邊緣,并且 UI 元件被適當地插入和定位。

對于具有自定義布局的應用程序,支持 iPhone X 也應該比較容易,特別是如果您的應用程序使用 Auto Layout 并遵守安全區域和邊距布局指南。

在 iPhone X 上預覽您的應用程序。您可以使用 Simulator(附帶 Xcode)來預覽應用程序,并檢查剪輯和其他布局問題。如寬彩色圖像這樣的屬性,最好在設備上預覽。

提供全屏體驗。確保背景延伸到屏幕的邊緣,并且垂直可滾動的布局(如表格和集合)一直延續到底部。

插入必要內容以防止裁剪。一般來說,內容應該是居中對稱的,所以它在任何方向看起來都很棒,不會被角落或設備的傳感器外殼裁剪,或被訪問主屏幕的指示器遮擋。 為獲得最佳效果,請使用標準的系統提供的界面元素和 Auto Layout 構建您的界面。所有應用程序都應遵循 UIKit 定義的安全區域和布局邊距,這些區域可以根據設備和上下文進行適當的填充。安全區域還可以防止內容覆蓋狀態欄、導航欄、工具欄和標簽欄。

注意狀態欄的高度。狀態欄在 iPhone X 上比在其他 iPhone 上更高。如果您的應用程序的固定狀態欄高度在狀態欄的下方,則您必須更新您的應用程序,才能根據用戶的設備動態定位內容。請注意,當背景任務(如錄音和位置跟蹤)處于活動狀態時,iPhoneX 上的狀態欄不會改變高度。

如果您的應用程序目前隱藏狀態欄,請重新考慮 iPhone X 上的決定。iPhone 上的顯示高度為 4.7 英寸,iPhone 的顯示屏提供了更多的垂直空間內容,狀態欄占據了您應用程序本可能贏得的屏幕區域,狀態欄還顯示了人們發現的有用的信息,只有在交換附加值時候才能被隱藏。

在重復使用現有圖稿時,請注意長寬比差異。iPhone X 具有不同于 4.7 英寸 iPhone 的長寬比,因此,全屏 4.7 英寸 iPhone 圖形在 iPhone X 上全屏顯示時出現裁剪或 letterboxed。同樣,全屏 iPhone X 圖稿在顯示時被裁剪或被添加黑邊。 全屏顯示在 4.7 英寸 iPhone 上,確保重要的視覺內容保持在兩種顯示尺寸上。

避免將交互式控件放置在屏幕最底部和角落里。人們使用顯示屏底部的滑動手勢訪問主屏幕和應用程序切換器,這些手勢可能會取消您在此區域中實現的自定義手勢。屏幕的兩個角落很難讓人觸及。

不要遮擋或突出顯示關鍵的顯示特性。請勿嘗試隱藏設備的圓角、傳感器外殼或通過在屏幕頂部和底部放置黑色條來指示主屏幕的指示器。不要使用像括號、邊框、形狀或教學文字等視覺裝飾來讓人注意這些區域。

允許自動隱藏虛擬 Home 鍵,以便輕松訪問主屏幕。當啟用自動隱藏時,如果用戶沒有觸摸屏幕幾秒鐘,Home 鍵將自動隱藏。當用戶再次觸摸屏幕時,它會重新出現。這種行為應該只能用于被動觀看體驗,如播放視頻或幻燈片。請參閱 適應性和布局。

顏色

iPhone X 上的屏幕支持 P3 色彩空間,可以產生比 sRGB 更豐富,更飽和的顏色。使用多元的顏色來增強視覺體驗。 使用寬顏色的照片和視頻更加逼真,使用寬色的視覺數據和狀態指示器更有影響力。 請參閱顏色管理。

手勢

iPhone X 上的顯示屏使用屏幕邊緣手勢來訪問主屏幕、應用程序切換器、通知中心和控制中心。避免干擾系統范圍的屏幕邊緣手勢。人們依靠這些手勢在每個應用程序中工作。在極少數情況下,像游戲這樣的沉浸式應用程序可能需要自定義的屏幕邊緣手勢,優先于系統的手勢 – 第一個滑動會調用特定于應用的手勢,而第二次滑動則會調用系統手勢。這種行為(稱為邊緣保護)應該謹慎實施,因為它使得用戶難以訪問系統級的操作。 參閱手勢。

附加設計注意事項

準確的參考認證方法。iPhone X 支持 Face ID 進行身份驗證。 如果您的應用程序與 Apple Pay 或其他系統身份驗證功能集成,請勿在 iPhoneX 上引用 Touch ID。同樣,請確保您的應用程序在支持 Touch ID 的設備上未引用 Face ID。 請參閱 驗證。

在 iPhone X 上不要重復系統提供的鍵盤功能。即使用自定義鍵盤,Emoji/Globe 按鈕和 Dictation 按鈕也自動顯示在鍵盤的下方。您的應用程序不能影響這些按鈕,因此避免在鍵盤中重復這些按鈕造成混亂。 請參閱 自定義鍵盤。

資源

在 資源 中下載 Photoshop 和 Sketch 中的 iPhone X UI 設計模板:

https://developer.apple.com/design/resources/#ios-apps

 

譯者:覃云

來源:微信公眾號:移動開發前線(ID:bornmobile)

本文由 @移動開發前線 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學習!

    回復
  2. 只想說:牛逼。官方消息出來也才10h ??

    來自浙江 回復