axure商城

iPhone X界面設計規范 iPhone X屏幕尺寸比例及布局

編者按:9月12日凌晨,蘋果更新了iPhone X 的人機交互指南。本文由UXren社區翻譯發布,現在將屏幕尺寸,布局等規范發布出來。供設計師在UI設計時做參考使用。原文地址:http://uxren.cn/?p=57388

譯者:阿嗚(UXRen翻譯組成員)

iPhone X的超大尺寸、高分辨率以及它的全面屏給我們帶來了以前從未有過的沉浸式體驗和豐富的內容展現。

1、屏幕尺寸

iPhoneX豎屏時的屏幕寬度與iPhone6、iPhone7和iPhone8的4.7英寸屏幕是一樣的。iPhone X的屏幕比4.7英寸屏幕高出145pt,所以內容區域的垂直空間增加了20%。

在你的app中需要提供高分辨率的圖片。

iPhone X的高分辨率屏幕需要使用@3x的縮放比例。對于符號以及其它扁平的、矢量的設計,最好提供具有獨立分辨率的PDFs。

對于柵格化設計,需要同時提供@3x和@2x版本的設計稿。

點擊圖片尺寸及分辨率自定義圖標的查看更多相關內容。

2、布局

在為iPhone X進行設計時,你需要確保布局充滿整個屏幕,但是不要被設備的圓角、傳感器以及進入主屏幕的指示器(下文中簡稱指示器)遮擋。

很多app使用標準的、系統提供的UI元素,例如導航欄、表單和圖集,它們可以自適應設備的新形式。背景素材延伸到了顯示屏的邊緣,UI元素也要在合適的地方放置。

對于一些自定義布局的app,尤其是用了自動布局并且遵守安全區域以及頁邊距布局規范的,支持iPhone X就會比較容易。

在iPhone X上預覽你的app。

你可以在模擬器(包括Xcode)上預覽你的app,檢查是否有被剪切的地方和一些其它的布局問題。但有一些特性,例如廣色域圖像最好在實際的設備上預覽。

提供全面屏體驗。

確保背景延伸到顯示屏的邊緣,例如表單和圖集在垂直布局上也要一直延伸到底部。

放置基本內容防止被剪切。

一般來說,內容應該居中并且對稱的放置,這樣在任何方向看起來都不會有問題,而且不會被邊角或者設備的傳感器所剪切掉,也不會遮蓋到指示器。

為了比較好的效果,可以使用標準的、系統提供的界面元素和自動布局來構建你的界面。

所有app都應該遵循UIKit定義的安全區域和頁邊距布局規范,確保在設備和背景中放置合適的內容。

安全區域可以防止內容從狀態欄、導航欄、工具欄和標簽欄中露出來。

注意狀態欄的高度。

iPhone X的狀態欄比其它iPhone要高。如果你的app采用了固定的狀態欄高度,你必須為了更好的定位狀態欄下方的內容位置而更新你的app。

最好根據用戶的設備動態定位內容位置。

要注意的是,當后臺任務正在運行時(例如錄音和位置追蹤)iPhone X的狀態欄高度是不會改變的。

如果你的app目前是隱藏狀態欄的,在iPhone X上需要再考慮一下這個決定。

iPhone X的顯示屏比其它iPhone高,為內容提供了更多的垂直空間,但你的app可能無法充分利用狀態欄所占的屏幕空間。

狀態欄也可以展示一些對用戶有用的信息。除非隱藏狀態欄可以帶來附加值,否則盡量不要隱藏。

復用現有的設計稿時要注意屏幕寬高比的不同。

相對于4.7英寸的iPhone而言iPhone X具有不同的屏幕寬高比。因此,4.7英寸iPhone上的全屏設計稿在iPhone X上展現時會出現被剪切或按寬度適配的情況。

同樣的,iPhone X上的全屏設計稿在4.7英寸iPhone上顯示時也會被剪切或出現左右黑邊。要確保重要的內容在不同設備上顯示相同的尺寸。

避免將交互控件放在非常底部或角落里。

用戶在顯示屏底部邊緣使用滑動手勢進入主屏幕或切換應用。這些手勢可能會替代此區域內的自定義手勢。因此用戶很難與那些放在屏幕角落的功能進行交互。

對于重要的顯示特性,不要隱藏也不要通過過度的設計來引起特別注意。

不要試圖在屏幕頂部或底部放置黑色的條欄來隱藏設備的圓角、傳感器或指示器。不要在這些區域使用視覺的裝飾,例如括號、斜面、圖形或引導文字來引起特別注意。

可以謹慎的使用自動隱藏指示器的功能。

當用戶幾秒鐘沒有觸摸屏幕時,指示器自動漸隱,當用戶又觸摸屏幕時,指示器再一次出現。這種體驗只能被應用于像播放視頻或幻燈片這種被動觀看的體驗中。

點擊自適應和布局查看更多相關內容

3、顏色

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

使用廣域色彩來提高視覺體驗。照片和視頻使用廣域色彩將會更加栩栩如生,可視數據和狀態指示器則會呈現出更好的效果。

點擊這里查看顏色管理的相關內容。

4、手勢

iPhone X的顯示屏使用從屏幕邊緣進行交互的手勢來進入主屏幕、切換app、通知中心或控制中心。

避免與系統中的屏幕邊緣手勢沖突。

用戶在每一個app中都使用這些手勢。只有在少數的案例中,例如沉浸式的游戲app需要自定義屏幕邊緣手勢,在滑動時調用app的手勢會優先于調用系統的手勢。這種操作要謹慎使用,因為這會妨礙用戶進入系統級的操作。點擊手勢查看更多相關內容。

5、額外的設計考慮

正確的參考認證方法。

iPhone X支持Face ID來進行認證。如果你的app整合了Apple Pay或其他系統認證功能,不要在iPhone X上參考Touch ID來設計。同樣的,也要確保不要在支持Touch ID的設備上參考Face ID的設計規范。

點擊認證查看更多相關內容。

不要重復提供系統鍵盤的功能。

在iPhone X上,Emoji按鈕、鍵盤切換按鈕和聽寫按鈕會在鍵盤下方自動顯示,即使是使用自定義的鍵盤也是如此。你的應用不能影響這些按鈕,所以不要讓這些按鈕重復地出現在你自定義的鍵盤中,這會給用戶造成困擾。

自定義鍵盤中查看更多相關內容。

6、資源

下載iPhone X的UI設計模板,Photoshop和Sketch文件點擊資源下載。

原文鏈接:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

給TA買糖
共{{data.count}}人
人已贊賞
產品經理

Axure RP 8即將到來 全新動畫和交互功能

2015-6-25 23:18:49

產品經理

總結文 | 產品方法論體系完整篇,給你更全面的指導

2018-10-15 9:16:45

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo