iPhone X官方人機交互指南 - 尺寸分辨率布局等

蘋果十周年紀念款手機iPhone X已經發布,齊劉海成立當今的熱門話題,但是作為開發者必須對最新的iPhone X有一個更全面的了解。

蘋果官方地址

iPhone X

iPhone X包括一個大型,高分辨率,圓形的邊緣到邊緣的顯示器,提供了一個沉浸式,內容豐富的體驗,從未像以前那樣。

屏幕尺寸

在縱向方向上,iPhone X上的顯示屏的寬度與iPhone 6,iPhone 7和iPhone 8的4.7“顯示屏的寬度相匹配。然而,iPhone X上的顯示器比4.7”顯示器高145個,導致大約20%的內容垂直空間。

為您的應用程序中的所有圖稿提供高分辨率圖像。
iPhone X具有比例因子為@ 3x的高分辨率顯示。
對于字形和其他平面的矢量圖形,最好提供獨立于分辨率的PDF。
對于光柵化圖稿,您可以提供@ 3x和@ 2x版本的作品。

請參閱圖像大小和分辨率自定義圖標

關于屏幕尺寸的個人補充

iPhone X的尺寸是1125x2436像素,可以看出來1125是750的1.5倍,375的3倍,那么就可以適配@3X

iPhone機型對比

從上圖可知,iPhone X與Plus系列公用一套圖,設計稿尺寸選750x1334px,對應輸出@2X和@3X圖即可。

布局

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



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

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

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

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

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

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

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


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

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

不要掩蓋或特別注意關鍵顯示功能。請勿嘗試隱藏設備的圓角,傳感器外殼或通過在屏幕頂部和底部放置黑色條來訪問主屏幕的指示器。不要使用像括號,邊框,形狀或教學文字等視覺裝飾,也要特別注意這些區域。

允許自動隱藏指示燈,以便輕松訪問主屏幕。當啟用自動隱藏時,如果用戶沒有觸摸屏幕幾秒鐘,指示燈將熄滅。當用戶再次觸摸屏幕時,它會重新出現。這種行為應該只能用于被動觀看體驗,如播放視頻或照片幻燈片。

請參閱適應性和布局

顏色

iPhone X上的顯示器支持P3色彩空間,可以產生比sRGB更豐富,更飽和的顏色。

使用廣泛的顏色來增強視覺體驗。
使用寬顏色的照片和視頻更加逼真,使用寬色的視覺數據和狀態指示器更有影響力。
請參閱顏色管理

手勢

iPhone X上的顯示屏使用屏幕邊緣手勢來訪問主屏幕,應用程序切換器,通知中心和控制中心。

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

附加設計注意事項

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

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

資源

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 北京時間的9月13日凌晨,美國當地時間的9月12日上午,蘋果在發布會上發布了四款產品,本包括全新的Apple Wa...
    劉家小四閱讀 29,703評論 1 10
  • iPhone X iPhone X 擁有一個寬大的、高分辨率、圓角的、擴展到邊緣的屏幕,提供了以前從未有過的沉浸式...
    默默_David閱讀 831評論 0 0
  • iPhone X具有更大、更高大分辨率、圓形的、邊緣到邊緣的顯示器,它提供了前所未有的沉浸式、內容豐富的體驗。 屏...
    J_WongH閱讀 358評論 0 0
  • iPhone X具有更大、更高大分辨率、圓形的、邊緣到邊緣的顯示器,它提供了前所未有的沉浸式、內容豐富的體驗。 屏...
    Doria2016閱讀 4,204評論 9 23
  • 世間萬物皆由念組成。 一念起則萬物生;一念消則萬物止! 這就是為什么常說:心動就去行動的道理!你不知道自己猶豫退縮...
    萍空間閱讀 247評論 0 0