iOS 11人機(jī)交互指南概覽:iPhone X

1 評(píng)論 8993 瀏覽 50 收藏 10 分鐘

本文譯自Apple官方發(fā)布的人機(jī)交互指南,希望能夠?qū)δ阌兴鶐椭?/p>

iPhone X屏幕更大、分辨率更高、圓角以及屏幕邊緣可顯示的特性給我們帶來一種從未有過的沉浸式、內(nèi)容豐富化的體驗(yàn)。

屏幕大小

在垂直尺寸上,iPhone X屏幕的寬度和 iPhone 6、 iPhone 7、 iPhone 8一樣都是4.7吋。不同的是,iPhone X的高度比4.7吋的屏幕要高出145pt,這就給垂直方向上的內(nèi)容顯示多出大概20%的空間。

iPhone X支持高分辨率的app圖稿。iPhone X具有比例因子為@3x的高分辨率屏幕。對(duì)于字體和其他扁平風(fēng)格的矢量圖來說,最好提供高分辨率PDF格式的圖稿。對(duì)于光柵化圖稿,最好同時(shí)提供@3x和@2x版本的圖稿。具體可查看“大小、分辨率”和“自定義圖標(biāo)”章節(jié)。

布局

當(dāng)你設(shè)計(jì)iPhone X的app時(shí),請(qǐng)確保內(nèi)容填滿整個(gè)屏幕,同時(shí),還要保證設(shè)備的圓角、傳感器外殼、以及其它屏幕上的指示燈不會(huì)遮擋內(nèi)容。

如果app采用的是系統(tǒng)自帶的UI元素(比如導(dǎo)航欄、表格和集合等),這些元素會(huì)自動(dòng)適應(yīng)系統(tǒng)的新外形。擴(kuò)展到屏幕邊緣的背景素材和UI元素會(huì)自動(dòng)放置在正確的位置上。如下圖所示。

如果app使用的是自定義布局,那么兼容iPhone X也相對(duì)比較容易,尤其是對(duì)那么使用自定義布局且遵守安全區(qū)域和邊緣布局指南的app來說,就更容易了。

在iPhone X上預(yù)覽您的app。您可以使用Simulator(Xcode附帶的軟件)模擬app在iPhone X上的情形,并檢查尺寸以及其它的布局問題。一些功能,比如寬彩色圖像,最好在實(shí)際設(shè)備上預(yù)覽一下,以保證沒有問題。

提供全屏體驗(yàn)。確保背景是在屏幕的外邊、確保垂直滾動(dòng)的布局(比如表格和集合)依然可以滑動(dòng)到屏幕底部。

插入額外的內(nèi)容以避免內(nèi)容被裁剪。一般來說,內(nèi)容是居中對(duì)稱的,這樣會(huì)使得不管從哪個(gè)角度看,都不會(huì)覺得奇怪;而且還能保證內(nèi)容不會(huì)因?yàn)槠聊坏膱A角設(shè)計(jì)而裁剪、內(nèi)容不會(huì)被屏幕上的傳感器外殼和指示燈等遮擋。為了獲得最好的布局效果,請(qǐng)使用系統(tǒng)提供的標(biāo)準(zhǔn)的界面元素和自適應(yīng)布局方式去構(gòu)建你的app界面。所有的app都應(yīng)該遵守UIkit里定義的安全區(qū)域和布局邊界,這樣能保證設(shè)備和文字之間的合理填充效果。安全區(qū)還能保證內(nèi)容不會(huì)被狀態(tài)欄、導(dǎo)航欄、工具欄和標(biāo)簽欄遮擋。

注意狀態(tài)欄的高度。iPhone X上的狀態(tài)欄比其它iPhone上的狀態(tài)欄高一點(diǎn)。如果你的app認(rèn)為狀態(tài)欄的高度是固定的,從而把內(nèi)容放在了狀態(tài)欄的下方,那你必須要根據(jù)用戶的設(shè)備調(diào)整app的內(nèi)容的位置為自適應(yīng)。而且要注意當(dāng)后臺(tái)有錄音和位置跟蹤的任務(wù)正在進(jìn)行時(shí),iPhone X上的狀態(tài)欄的高度也是不變的。

如果你的app隱藏了狀態(tài)欄,現(xiàn)在你需要重新考慮一下方案了。相對(duì)于4.7吋的iPhone,iPhone X的屏幕為內(nèi)容提供了更多的垂直空間,而且iPhone X占用的屏幕的區(qū)域,你的app可能無法充分使用。狀態(tài)欄也能讓用戶找到有用的信息。狀態(tài)欄只能在換取附加值時(shí)隱藏。

在使用現(xiàn)有的圖片時(shí),注意屏幕長(zhǎng)寬比的差別。如上圖所示。iPhone X和4.7吋的iPhone的屏幕長(zhǎng)寬比不一樣,在4.7吋iPhone上全屏顯示的圖片在iPhone X全屏顯示時(shí)上會(huì)出現(xiàn)裁剪或信箱式(letterboxed)的顯示方式。同樣,在iPhone X全屏顯示的圖片在4.7吋iPhone上顯示時(shí),也會(huì)出現(xiàn)裁剪或信箱式(pillarboxed)的顯示方式。確保重要的內(nèi)容在兩個(gè)不同屏幕尺寸上顯示時(shí)不會(huì)丟失。

不要將交互控件放在屏幕的最底部或角落里。人們處于屏幕底部時(shí)會(huì)使用滑動(dòng)手勢(shì)以訪問主屏幕和其它app,這些手勢(shì)在這些區(qū)域不能實(shí)現(xiàn)交互效果。同時(shí),屏幕偏遠(yuǎn)角落的區(qū)域用戶很難輕松觸及。

不要掩蓋或特別關(guān)注屏幕的關(guān)鍵顯示功能。不要通過在屏幕的頂部和底部放置黑色條紋的方法來隱藏設(shè)備的圓角、傳感器外殼、或主屏幕上的指示器。不要使用像括號(hào)、邊框、形狀或指示性文字等視覺裝飾,不要特別關(guān)注這些區(qū)域。

允許自動(dòng)隱藏指示燈,以輕松訪問主屏幕。當(dāng)打開自動(dòng)隱藏指示燈時(shí),如果用戶在幾秒鐘之內(nèi)沒有觸摸屏幕,指示燈會(huì)隱藏。如果用戶再次觸摸屏幕,指示燈會(huì)在此亮起。這種行為只有在播放視頻或查看照片幻燈片等被動(dòng)觀看體驗(yàn)時(shí)才有效。

顏色

iPhone X上的顯示器支持P3色彩空間,這種色彩可以產(chǎn)生比sRGB更飽和的顏色。

使用更多的顏色以增強(qiáng)視覺體驗(yàn)。使用更多的顏色(wide color)會(huì)讓照片和視頻看起來更加逼真,也會(huì)讓視覺數(shù)據(jù)和狀態(tài)指示器更形象。

手勢(shì)

iPhone X屏幕使用屏幕邊緣手勢(shì)來訪問主屏幕,應(yīng)用程序切換器,通知中心和控制中心。

不要影響系統(tǒng)層的屏幕邊緣手勢(shì)。人們?cè)诿總€(gè)app上都會(huì)使用這些手勢(shì)。在極少數(shù)情況下,像游戲類的沉浸式app才需要自定義高于系統(tǒng)級(jí)的屏幕邊緣手勢(shì),比如第一次滑動(dòng)會(huì)喚起app特定的手勢(shì),第二次滑動(dòng)才會(huì)喚起系統(tǒng)級(jí)的手勢(shì)。這種行為(被稱為邊緣保護(hù))應(yīng)該謹(jǐn)慎使用,因?yàn)樗鼤?huì)導(dǎo)致用戶難以訪問系統(tǒng)級(jí)的操作。

其他的設(shè)計(jì)注意事項(xiàng)

設(shè)備認(rèn)證方式準(zhǔn)確。iPhone X支持Face ID認(rèn)證。如果你的app集成了Apple Pay 或其他系統(tǒng)認(rèn)證功能,請(qǐng)不要在iPhone X上飲用Touch ID。同樣,app也不要在支持Touch ID的設(shè)備上使用Face ID。

不要復(fù)制系統(tǒng)提供的鍵盤功能。在iPhone X上,Emoji / Globe按鈕和Dictation按鈕會(huì)自動(dòng)出現(xiàn)在鍵盤下方,即使使用的是自定義鍵盤。你的app不應(yīng)影響這些按鈕,因此避免在鍵盤中

不要重復(fù)系統(tǒng)提供的鍵盤功能。在iPhone X上,即使使用自定義鍵盤,Emoji / Globe按鈕和Dictation按鈕也自動(dòng)顯示在鍵盤的下方。您的應(yīng)用程序不能影響這些按鈕,因此避免在鍵盤中重復(fù)這些按鈕以引起混亂。

資源

點(diǎn)這里下載iPhone X的UI設(shè)計(jì)模版,支持Photoshop和Sketch。

本文譯自Apple官方發(fā)布的人機(jī)交互指南 Human Interface Guidelines(HIG),旨在幫助交互設(shè)計(jì)師和應(yīng)用開發(fā)者了解iOS應(yīng)用設(shè)計(jì)規(guī)范。

— end —

相關(guān)閱讀

iOS 11人機(jī)交互指南概覽:主題(Themes)

 

譯者:Q_misky

本文由 @Q_misky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖由作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!