乾貨首發!IPHONE X 官方人機交互指南中文版

人工智能 iPhone 人機交互 iOS 優秀網頁設計 優秀網頁設計 2017-09-15

編者按:昨天凌晨剛更新了iPhone X 的人機交互指南,中午優設就邀請了@平行煎餅 翻譯成中文版,最新鮮的設計乾貨,來優設準沒錯!

iPhone X有一塊大的、高分辨率、圓角的、無邊框的屏幕,為用戶提供了前所未有的沉浸式的、內容豐富的體驗。

乾貨首發!IPHONE X 官方人機交互指南中文版

屏幕尺寸

iPhone X的豎屏模式,寬度與iPhone6、iPhone7、iPhone8的4.7寸顯示屏寬度相同;iPhone X的高度比4.7寸的屏幕要高出145pt,增加大約20%的垂直顯示空間。

乾貨首發!IPHONE X 官方人機交互指南中文版

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

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

應用程序可以顯示高分辨率的圖像。iPhone X可以顯示高分辨率的@3x圖片。對於其他平面和矢量的圖形,最好提供獨立分辨率的PDF格式的圖片;對於其他柵格化的圖片,需要提供@3x和@2x的圖片。

佈局

在為iPhone X做設計時,您必須確保佈局覆蓋到整個屏幕,並且不會被設備屏幕上的圓角、傳感器和指示燈所遮蔽。

乾貨首發!IPHONE X 官方人機交互指南中文版

應用程序中大多數使用標準化的、系統提供的UI元素(如導航欄、表格等)會自動適配iPhone X。背景延伸到顯示器邊緣,並適當的插入UI元素。

乾貨首發!IPHONE X 官方人機交互指南中文版

對於自適應佈局的應用,支持iPhone X的適配應該也比較容易,特別是遵循安全區域和邊距佈局指南的自適應佈局應用。

在iPhone X上預覽應用程序

可以使用Simulator(Xcode自帶)來預覽應用程序並檢查佈局問題。不過,如果是豐富色彩的圖像,最好在實際的iPhone X設備上預覽。

提供全屏體驗

應該確保背景延伸到了顯示器的邊緣,並且是垂直可滾動的佈局,如表格和集合,會一直延續到底部。

乾貨首發!IPHONE X 官方人機交互指南中文版

防止重要的內容被剪切

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

注意狀態欄的高度,狀態欄在iPhone X上比其他iPhone要高

如果應用中有內容置於固定位置的狀態欄下方,必須要更新應用,使得內容可以在設備上動態位置顯示。注意,當背景任務(如錄音和定位)處於活動狀態時,iPhone X的狀態欄不會改變高度。

如果應用的狀態欄是隱藏的,請重新考慮在iPhone X上的顯示

iPhone X上的顯示高度比4.7寸的iPhone提供了更多的垂直內容空間,狀態欄不會佔據太多有用空間,而且還可以給用戶提供有用的信息。

乾貨首發!IPHONE X 官方人機交互指南中文版

在重複使用現有圖片時,請注意長寬比差異

iPhone x具有不同於4.7寸iPhone的長寬比,因此,4.7寸iPhone的全屏圖像在iPhone X上顯示時會出現剪裁或letterboxed(橫向有留白)。同樣,iPhone X上的全屏圖像在4.7寸的iPhone上顯示也會被剪裁或pillarboxed(縱向有留白)。請確保重要的視覺內容在兩種尺寸的設備中顯示。

避免將交互控件放在屏幕底部和角落

人們在屏幕底部使用滑動手勢顯示主屏幕和應用程序切換,這些手勢可能會取消之前在此區域中的自定義手勢。屏幕的兩個角落可能是人們難以舒適到達的區域。

對關鍵顯示功能不要掩蓋或者發起特別注意

請勿嘗試用黑色條欄在屏幕頂部和底部隱藏設備的圓角、傳感器、或者底部訪問條。不要使用像括號、邊框、形狀或指引性文字去引導用戶特別注意這些區域。

允許自動隱藏指示燈,以便輕鬆訪問主屏幕

當啟用自動隱藏指示燈功能時,如果用戶沒有觸碰到屏幕幾秒鐘,指示燈將熄滅。當用戶再次觸摸到屏幕時,指示燈重新出現。這種情況只能用於被動觀看的體驗中,如播放視頻和照片幻燈片。

顏色

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

乾貨首發!IPHONE X 官方人機交互指南中文版

使用廣泛的顏色來增強視覺體驗

使用色域廣的照片和視頻會顯示的更加逼真,使用色域寬的視覺數據和顯示器會給人更加強大的視覺衝擊力。

手勢

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

避免干擾系統範圍的屏幕邊緣手勢

人們依靠這些手勢在每個應用程序中工作。在極少數的情況下,像遊戲這樣的沉浸式的應用程序需要優先於系統操作手勢來自定義屏幕邊緣手勢,第一次滑動調用特定於應用的手勢,第二次滑動則會調用系統手勢。這種行為(成為邊緣保護)應該謹慎實施,因為會使用戶難以進行系統級的操作。

附加設計注意事項

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

不要重複提供系統的鍵盤功能:在iPhoneX上,即使使用自定義鍵盤。Emoji/Globe按鈕和聽寫按鈕也自動在鍵盤下方顯示。應用程序不能影響這些按鈕,避免在鍵盤中重複出現這些按鈕造成混亂。

「新鮮出爐!iOS 11 有哪些值得關注的亮點?」

------

商業轉載請聯繫作者獲得授權,非商業轉載請註明出處!

關注優設品牌號微信號:uisdcer & 內容號微信號:youshege;推送領域專業知識掌握優設新品動態和50萬設計師獲取新鮮知識

相關推薦

推薦中...