新款的iphone明天就要發(fā)布了,我們來回顧一下iPhone X的人機(jī)界面設(shè)計(jì)規(guī)范。iPhone X的超大尺寸、高分辨率以及它的全面屏給我們帶來了以前從未有過的沉浸式體驗(yàn)和豐富的內(nèi)容展現(xiàn)。
屏幕尺寸
iPhoneX豎屏?xí)r的屏幕寬度與iPhone6、iPhone7和iPhone8的4.7英寸屏幕是一樣的。iPhone X的屏幕比4.7英寸屏幕高出145pt,所以內(nèi)容區(qū)域的垂直空間增加了20%。
在你的app中需要提供高分辨率的圖片。
iPhone X的高分辨率屏幕需要使用@3x的縮放比例。對于符號以及其它扁平的、矢量的設(shè)計(jì),最好提供具有獨(dú)立分辨率的PDFs。對于柵格化設(shè)計(jì),需要同時(shí)提供@3x和@2x版本的設(shè)計(jì)稿。點(diǎn)擊圖片尺寸及分辨率和自定義圖標(biāo)的查看更多相關(guān)內(nèi)容。
布局
在為iPhone X進(jìn)行設(shè)計(jì)時(shí),你需要確保布局充滿整個(gè)屏幕,但是不要被設(shè)備的圓角、傳感器以及進(jìn)入主屏幕的指示器(下文中簡稱指示器)遮擋。
很多app使用標(biāo)準(zhǔn)的、系統(tǒng)提供的UI元素,例如導(dǎo)航欄、表單和圖集,它們可以自適應(yīng)設(shè)備的新形式。背景素材延伸到了顯示屏的邊緣,UI元素也要在合適的地方放置。
對于一些自定義布局的app,尤其是用了自動布局并且遵守安全區(qū)域以及頁邊距布局規(guī)范的,支持iPhone X就會比較容易。
在iPhone X上預(yù)覽你的app。你可以在模擬器(包括Xcode)上預(yù)覽你的app,檢查是否有被剪切的地方和一些其它的布局問題。但有一些特性,例如廣色域圖像最好在實(shí)際的設(shè)備上預(yù)覽。
提供全面屏體驗(yàn)。確保背景延伸到顯示屏的邊緣,例如表單和圖集在垂直布局上也要一直延伸到底部。
放置基本內(nèi)容防止被剪切。一般來說,內(nèi)容應(yīng)該居中并且對稱的放置,這樣在任何方向看起來都不會有問題,而且不會被邊角或者設(shè)備的傳感器所剪切掉,也不會遮蓋到指示器。為了比較好的效果,可以使用標(biāo)準(zhǔn)的、系統(tǒng)提供的界面元素和自動布局來構(gòu)建你的界面。所有app都應(yīng)該遵循UIKit定義的安全區(qū)域和頁邊距布局規(guī)范,確保在設(shè)備和背景中放置合適的內(nèi)容。安全區(qū)域可以防止內(nèi)容從狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄中露出來。
注意狀態(tài)欄的高度。iPhone X的狀態(tài)欄比其它iPhone要高。如果你的app采用了固定的狀態(tài)欄高度,你必須為了更好的定位狀態(tài)欄下方的內(nèi)容位置而更新你的app。最好根據(jù)用戶的設(shè)備動態(tài)定位內(nèi)容位置。要注意的是,當(dāng)后臺任務(wù)正在運(yùn)行時(shí)(例如錄音和位置追蹤)iPhone X的狀態(tài)欄高度是不會改變的。
如果你的app目前是隱藏狀態(tài)欄的,在iPhone X上需要再考慮一下這個(gè)決定。iPhone X的顯示屏比其它iPhone高,為內(nèi)容提供了更多的垂直空間,但你的app可能無法充分利用狀態(tài)欄所占的屏幕空間。狀態(tài)欄也可以展示一些對用戶有用的信息。除非隱藏狀態(tài)欄可以帶來附加值,否則盡量不要隱藏。
復(fù)用現(xiàn)有的設(shè)計(jì)稿時(shí)要注意屏幕寬高比的不同。相對于4.7英寸的iPhone而言iPhone X具有不同的屏幕寬高比。因此,4.7英寸iPhone上的全屏設(shè)計(jì)稿在iPhone X上展現(xiàn)時(shí)會出現(xiàn)被剪切或按寬度適配的情況。同樣的,iPhone X上的全屏設(shè)計(jì)稿在4.7英寸iPhone上顯示時(shí)也會被剪切或出現(xiàn)左右黑邊。要確保重要的內(nèi)容在不同設(shè)備上顯示相同的尺寸。
避免將交互控件放在非常底部或角落里。用戶在顯示屏底部邊緣使用滑動手勢進(jìn)入主屏幕或切換應(yīng)用。這些手勢可能會替代此區(qū)域內(nèi)的自定義手勢。因此用戶很難與那些放在屏幕角落的功能進(jìn)行交互。
插入全寬按鈕。延伸到屏幕邊緣的按鈕可能看起來不像按鈕。尊重全寬按鈕兩側(cè)的標(biāo)準(zhǔn)UIKit邊距。當(dāng)屏幕底部出現(xiàn)圓角并與安全區(qū)域的底部對齊時(shí),屏幕底部出現(xiàn)的全寬按鈕效果最佳 - 這也確保它不會與Home指示燈沖突。
對于重要的顯示特性,不要隱藏也不要通過過度的設(shè)計(jì)來引起特別注意。不要試圖在屏幕頂部或底部放置黑色的條欄來隱藏設(shè)備的圓角、傳感器或指示器。不要在這些區(qū)域使用視覺的裝飾,例如括號、斜面、圖形或引導(dǎo)文字來引起特別注意。
可以謹(jǐn)慎的使用自動隱藏指示器的功能。當(dāng)用戶幾秒鐘沒有觸摸屏幕時(shí),指示器自動漸隱,當(dāng)用戶又觸摸屏幕時(shí),指示器再一次出現(xiàn)。這種體驗(yàn)只能被應(yīng)用于像播放視頻或幻燈片這種被動觀看的體驗(yàn)中。
點(diǎn)擊自適應(yīng)和布局查看更多相關(guān)內(nèi)容。
顏色
iPhone X的顯示屏支持顯示P3色彩空間,可以比sRGB產(chǎn)生更豐富、更飽和的顏色。
使用廣域色彩來提高視覺體驗(yàn)。照片和視頻使用廣域色彩將會更加栩栩如生,可視數(shù)據(jù)和狀態(tài)指示器則會呈現(xiàn)出更好的效果。點(diǎn)擊這里查看顏色管理的相關(guān)內(nèi)容。
視頻
系統(tǒng)提供的視頻播放器提供兩種查看模式:全屏(縱橫填充)和適合屏幕(縱橫比)。默認(rèn)情況下,系統(tǒng)根據(jù)視頻的寬高比選擇查看模式,用戶可以在播放期間切換模式。
手勢
iPhone X的顯示屏使用從屏幕邊緣進(jìn)行交互的手勢來進(jìn)入主屏幕、切換app、通知中心或控制中心。
避免與系統(tǒng)中的屏幕邊緣手勢沖突。用戶在每一個(gè)app中都使用這些手勢。只有在少數(shù)的案例中,例如沉浸式的游戲app需要自定義屏幕邊緣手勢,在滑動時(shí)調(diào)用app的手勢會優(yōu)先于調(diào)用系統(tǒng)的手勢。這種操作要謹(jǐn)慎使用,因?yàn)檫@會妨礙用戶進(jìn)入系統(tǒng)級的操作。點(diǎn)擊手勢查看更多相關(guān)內(nèi)容。
其它設(shè)計(jì)考慮
正確的參考認(rèn)證方法。iPhone X支持Face ID來進(jìn)行認(rèn)證。如果你的app整合了Apple Pay或其他系統(tǒng)認(rèn)證功能,不要在iPhone X上參考Touch ID來設(shè)計(jì)。同樣的,也要確保不要在支持Touch ID的設(shè)備上參考Face ID的設(shè)計(jì)規(guī)范。點(diǎn)擊認(rèn)證查看更多相關(guān)內(nèi)容。
不要重復(fù)提供系統(tǒng)鍵盤的功能。在iPhone X上,Emoji按鈕、鍵盤切換按鈕和聽寫按鈕會在鍵盤下方自動顯示,即使是使用自定義的鍵盤也是如此。你的應(yīng)用不能影響這些按鈕,所以不要讓這些按鈕重復(fù)地出現(xiàn)在你自定義的鍵盤中,這會給用戶造成困擾。在自定義鍵盤中查看更多相關(guān)內(nèi)容。
資源
下載iPhone X的UI設(shè)計(jì)模板,Photoshop和Sketch文件點(diǎn)擊資源下載。
全站高品質(zhì)素材免費(fèi)下載!