譯文|iOS 10 人機(jī)界面指南(三)
iOS10發(fā)布了,蘋(píng)果遵循了一切從簡(jiǎn)但又增加了一些提升用戶(hù)體驗(yàn)的功能,比如向開(kāi)發(fā)者開(kāi)放了更多接口,設(shè)計(jì)者又如何跟隨iOS的步伐做好產(chǎn)品設(shè)計(jì)呢?
3. 特性(Features)
3.1 多任務(wù)處理(Multitasking)
多任務(wù)處理讓你能夠通過(guò)iOS設(shè)備上的多任務(wù)處理界面或是在iPad上使用四指手勢(shì),隨時(shí)且快速地從一個(gè)應(yīng)用切換至另一個(gè)。在iPad,多任務(wù)處理也能夠讓你在Slide Over,分屏視圖(Split View)或者畫(huà)中畫(huà)(Picture in Picture)模式下同時(shí)使用兩個(gè)app。從屏幕右側(cè)橫掃就能進(jìn)入Slide Over模式,它能讓你在不離開(kāi)當(dāng)前app的情況下暫時(shí)性地使用第二個(gè)app ,比如在你使用Safari瀏覽器的時(shí)候快速地查看你的郵箱。分屏視圖讓你同時(shí)地使用兩個(gè)并排的app,而畫(huà)中畫(huà)讓你在一個(gè)app工作時(shí)也能觀(guān)看視頻。
設(shè)計(jì)一個(gè)能在多任務(wù)處理環(huán)境下從容工作的app取決于你的app是否能夠和諧地于其它應(yīng)用在設(shè)備上共處。也就是說(shuō),你的app不應(yīng)該使用過(guò)多的CPU、存儲(chǔ)空間、屏幕空間或是其它系統(tǒng)資源。它應(yīng)該合理應(yīng)對(duì)來(lái)自其它app的突發(fā)干擾和聲音,快速流暢地隱去后臺(tái)或是從后臺(tái)中被呼出,并且即使在后臺(tái)也能可靠地運(yùn)行。
準(zhǔn)備好應(yīng)對(duì)中斷,并且準(zhǔn)備好隨時(shí)恢復(fù)。你的app在任何時(shí)候都可能被中斷。當(dāng)中斷發(fā)生時(shí),你的app應(yīng)該快速精準(zhǔn)地保存當(dāng)前的狀態(tài),這樣用戶(hù)返回app時(shí),就能完美無(wú)縫地從他們上次離開(kāi)的地方繼續(xù)使用。了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱App Programming Guide for iOS中的Preserving Your App’s Visual Appearance Across Launches部分。
確保你的界面能夠與雙倍高度的狀態(tài)欄(double-high status bar)共處。一些比如進(jìn)行中的通話(huà)、錄音和共享功能會(huì)在屏幕頂部展示額外的一個(gè)狀態(tài)欄。在對(duì)此無(wú)準(zhǔn)備的app中,這個(gè)增加的高度會(huì)遮擋其它的界面元素或是把它們擠下去,從而導(dǎo)致布局問(wèn)題。在你的app中測(cè)試這些情況以保證你的界面能夠應(yīng)對(duì)自如并且仍然看起來(lái)很棒。
暫停需要時(shí)時(shí)關(guān)注或是用戶(hù)參與的活動(dòng)。如果你的app是一個(gè)游戲或是觀(guān)看媒體文件,請(qǐng)保證用戶(hù)在切換至其它app時(shí)也不會(huì)錯(cuò)過(guò)任何內(nèi)容。當(dāng)他們切換回來(lái)時(shí),讓他們從上一次離開(kāi)的地方繼續(xù)就好像他們從未離開(kāi)過(guò)。
恰當(dāng)?shù)靥幚韥?lái)自應(yīng)用外的聲音。有時(shí)候,你的app的音頻可能會(huì)被來(lái)自其它app或是系統(tǒng)的聲音打斷。比如,來(lái)電鈴聲或是被Siri打開(kāi)的音樂(lè)播放列表會(huì)中斷你的app的音頻。當(dāng)這種情況發(fā)生時(shí),你的app應(yīng)該以符合用戶(hù)預(yù)期的方式處理。對(duì)于重要的音頻干擾,比如播放音樂(lè)、廣播或是有聲讀物,你的app應(yīng)該停止播放它自己的音頻。對(duì)于短暫的干擾,比如GPS導(dǎo)航通知,你的app應(yīng)該暫時(shí)地降低它的音頻音量或是先暫停音頻然后在干擾結(jié)束時(shí)繼續(xù)播放。了解更多指導(dǎo),請(qǐng)參閱Audio。
在后臺(tái)完成用戶(hù)發(fā)起的任務(wù)。當(dāng)用戶(hù)開(kāi)啟了一個(gè)任務(wù),即使離開(kāi)了app他們也希望任務(wù)能夠被完成。如果你的app正在執(zhí)行一個(gè)不需要額外用戶(hù)輸入的任務(wù),請(qǐng)?jiān)赼pp回到前臺(tái)前在后臺(tái)完成它。
節(jié)制地使用通知。無(wú)論你的app在前臺(tái)、后臺(tái)或是完全沒(méi)有被打開(kāi),它都能在特定的時(shí)間給用戶(hù)推送通知。使用通知來(lái)傳達(dá)重要訊息是可行的,但是避免讓用戶(hù)被過(guò)多通知煩擾。比如,當(dāng)你的app在后臺(tái)時(shí),不要每完成一個(gè)任務(wù)就給用戶(hù)展示一個(gè)通知。相反的,讓用戶(hù)通過(guò)返回你的app來(lái)查看任務(wù)的完成情況。了解更多指導(dǎo),請(qǐng)參閱Notifications。
了解關(guān)于iPad的開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Adopting Multitasking Enhancements on iPad。
3.2 通知(Notification)
無(wú)論設(shè)備被鎖屏還是在使用中,app都能隨時(shí)利用通知來(lái)提供及時(shí)和重要的信息。比如,通知可能會(huì)在以下幾種情況出現(xiàn):
- 當(dāng)新消息到來(lái)時(shí)
- 一個(gè)事件將要發(fā)生時(shí)
- 有新數(shù)據(jù)可獲取時(shí)或是某些狀態(tài)發(fā)生改變時(shí)
用戶(hù)在鎖屏上、在屏幕頂部(使用設(shè)備時(shí)),以及通知中心(通過(guò)從屏幕頂部邊緣下滑呼出)看到通知欄。每個(gè)通知都包含應(yīng)用名稱(chēng)、一個(gè)app圖標(biāo)以及一條消息。通知的到來(lái)也可能伴隨聲音提示,以及app圖標(biāo)上小紅點(diǎn)角標(biāo)的出現(xiàn)和更新。
每個(gè)app的通知行為都可以在設(shè)置里面被單獨(dú)管理。只要是支持通知功能的app,你有可以完全地打開(kāi)或關(guān)閉這個(gè)功能。你同樣可以設(shè)置通知是否在通知中心和鎖屏上可見(jiàn),是否在app圖標(biāo)上出現(xiàn)角標(biāo),以及選擇以下一種通知樣式:
- 橫幅:當(dāng)設(shè)備在使用時(shí)在屏幕上方出現(xiàn)幾秒,然后消失。
- 提醒框:當(dāng)設(shè)備在使用時(shí)在屏幕上方出現(xiàn),直到被手動(dòng)關(guān)閉。
在未鎖屏的設(shè)備上通過(guò)點(diǎn)擊通知、或是在鎖屏?xí)r右滑,來(lái)結(jié)束通知、把它從通知中心移除并打開(kāi)發(fā)送通知的應(yīng)用展示相關(guān)的內(nèi)容。比如,在未鎖屏的設(shè)備點(diǎn)擊一條新的郵件通知,就會(huì)打開(kāi)郵箱并且顯示新的信息。
在一個(gè)未鎖屏的設(shè)備,上滑通知或讓它消失能夠關(guān)閉通知,也可能將它從通知中心移除。
使用3D Touch 在一個(gè)通知上按壓,或時(shí)在未鎖屏?xí)r在通知上下滑,就能打開(kāi)拓展的詳情視圖。這個(gè)視圖支持自定義并且包含最多四個(gè)操作按鈕。比如,一個(gè)待辦事項(xiàng)app可以推送一個(gè)含有詳情視圖的任務(wù)通知,上面有可以推遲任務(wù)和標(biāo)記為已完成的按鈕。一個(gè)日歷事件的通知提供了“小睡”操作來(lái)推遲事件的鬧鈴。
Tips:
- 通知可以是本地或是遠(yuǎn)程的。本地通知由同一個(gè)設(shè)備發(fā)出和接收。一個(gè)待辦事項(xiàng)應(yīng)用就使用本地通知來(lái)提醒用戶(hù)一個(gè)將要到來(lái)的會(huì)議或是到期日。遠(yuǎn)程通知,也叫做推送通知,來(lái)自一個(gè)服務(wù)器。一個(gè)多玩家游戲就使用遠(yuǎn)程通知讓每個(gè)玩家知道什么時(shí)候輪到他們了。
- 用戶(hù)必須明確通過(guò)選擇來(lái)接收來(lái)自每個(gè)app的通知——他們?cè)诘谝淮问褂胊pp的時(shí)候都被要求這么做。如果有人選擇不接收通知,他們同樣也能通過(guò)訪(fǎng)問(wèn)設(shè)置來(lái)選擇接收。
提供有用的通知。用戶(hù)打開(kāi)通知是為了快速獲得最新消息,所以你的重點(diǎn)是提供有價(jià)值的信息。使用完整的句子,句首字母大寫(xiě),合適的標(biāo)點(diǎn)符號(hào),并且不要截短你的信息——必要時(shí)系統(tǒng)會(huì)自動(dòng)處理。避免在通知中引導(dǎo)用戶(hù)打開(kāi)你的app,進(jìn)入指定頁(yè)面然后點(diǎn)擊指定按鈕來(lái)完成一些任務(wù),因?yàn)楫?dāng)通知被關(guān)閉時(shí)用戶(hù)很難記住它們。
就算用戶(hù)沒(méi)有作出回應(yīng),也不要為同一件事情發(fā)送多個(gè)通知。用戶(hù)只有在方便時(shí)才會(huì)理會(huì)通知。如果你為同一件事發(fā)送了多個(gè)通知,并且填滿(mǎn)了通知中心,那么用戶(hù)就很可能關(guān)閉來(lái)自你app的通知。
不要包含你的app名字和圖標(biāo)。系統(tǒng)會(huì)自動(dòng)地在每條通知的頂部顯示這些信息。
角標(biāo)是用來(lái)補(bǔ)充說(shuō)明通知,而不能表示重要的信息。記住app的角標(biāo)可以被關(guān)閉。如果你的app依賴(lài)于通過(guò)角標(biāo)來(lái)傳達(dá)重要信息,就等于你在冒著用戶(hù)會(huì)錯(cuò)過(guò)這些信息的風(fēng)險(xiǎn)。
保持角標(biāo)實(shí)時(shí)更新。當(dāng)收到對(duì)應(yīng)的消息時(shí)立即更新你的app角標(biāo)數(shù)字。你也不想讓用戶(hù)猜測(cè)是否收到了新消息,他們只有在看到確切提示之后才會(huì)進(jìn)入你的app查看。請(qǐng)注意將角標(biāo)上的數(shù)字清零意味著同時(shí)在消息中心移除所有相關(guān)的通知欄。
提供聲音以輔助你的通知提醒。當(dāng)用戶(hù)沒(méi)有盯著屏幕時(shí),聲音是一個(gè)引起他們注意的絕佳方式。一個(gè)待辦事項(xiàng)app,在需執(zhí)行重要任務(wù)時(shí)可能就會(huì)播放一個(gè)提示音。你的app可以使用自定義聲音或是系統(tǒng)的提示音來(lái)達(dá)到效果。如果你使用自定義的聲音,請(qǐng)確保它是簡(jiǎn)短、與眾不同并且制作精良的。請(qǐng)參閱Local and Remote Notification Programming Guide中的Preparing Custom Alert Sounds部分。
請(qǐng)記住用戶(hù)可以隨時(shí)地關(guān)閉通知提示音。他們也可以開(kāi)啟伴隨著聲音的振動(dòng)——這只能被手動(dòng)開(kāi)啟,而不能通過(guò)你的app程序來(lái)關(guān)閉。
考慮提供一個(gè)詳情視圖。一個(gè)通知的詳情視圖提供了關(guān)于該消息的更多信息,并且允許他們?cè)诓浑x開(kāi)當(dāng)前環(huán)境的情況下去執(zhí)行快速的操作。這個(gè)視圖應(yīng)該包含有用、易識(shí)別的信息,讓人感覺(jué)就是一個(gè)你的app自帶的插件。它可以包含圖片、視頻以及其它內(nèi)容,它還能在顯示時(shí)動(dòng)態(tài)更新。比如,一個(gè)拼車(chē)app就能夠在該視圖展示一個(gè)地圖,并標(biāo)出正在朝著你的位置行駛的汽車(chē)位置。
提供直觀(guān)、有用的操作。一個(gè)通知的詳情視圖能最多包含四個(gè)操作按鈕。這些按鈕應(yīng)該用來(lái)執(zhí)行常用、省時(shí)的任務(wù),而不用通過(guò)打開(kāi)你的app。使用簡(jiǎn)短、首字母大小寫(xiě)的名稱(chēng),明確地描述操作的結(jié)果。一個(gè)通知的詳情視圖還能在屏幕上呼出一個(gè)鍵盤(pán)用來(lái)收集執(zhí)行操作需要的信息。比如,一個(gè)通訊app可以允許用戶(hù)直接在新消息通知上回復(fù)。
避免展示破壞性的操作。要在通知詳情視圖里展示破壞性操作之前請(qǐng)仔細(xì)考量。如果你必須展示它們,確保用戶(hù)擁有足夠的上下文信息,以避免出現(xiàn)意外后果。破壞性的操作應(yīng)該以紅字呈現(xiàn)。
了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Local and Remote Notification Programming Guide。
3.3 打?。≒rinting)
你的app能夠利用系統(tǒng)自帶的AirPrint技術(shù)來(lái)使用兼容的打印機(jī)實(shí)現(xiàn)圖片、PDF以及其它內(nèi)容的無(wú)線(xiàn)打印。當(dāng)用戶(hù)在有AirPrint功能的應(yīng)用內(nèi)瀏覽可打印的內(nèi)容時(shí),他們一般通過(guò)在導(dǎo)航欄或是工具欄點(diǎn)擊一個(gè)操作按鈕,然后再點(diǎn)擊打印按鈕來(lái)打開(kāi)打印視圖。 這個(gè)視圖提供了一個(gè)可用打印機(jī)的列表以及一些自定義選項(xiàng),比如打印的份數(shù)、頁(yè)面范圍,并且提供了一個(gè)開(kāi)始打印的的按鈕。
讓打印選項(xiàng)易于發(fā)現(xiàn)。如果你的app有一個(gè)工具欄或是導(dǎo)航欄,請(qǐng)使用系統(tǒng)提供的操作按鈕來(lái)打印。用戶(hù)對(duì)這個(gè)按鈕更加熟悉,并且在其它應(yīng)用中也是用它來(lái)打印。如果你的app沒(méi)有工具欄或是導(dǎo)航欄,那么設(shè)計(jì)一個(gè)自定義的打印按鈕來(lái)代替。
只在可以打印的情況下才允許打印。如果在你的屏幕上沒(méi)有任何內(nèi)容或是沒(méi)有可用的打印機(jī),那么不要在用戶(hù)點(diǎn)擊“操作”按鈕后顯示打印按鈕。如果你的app使用自定義的打印按鈕,在無(wú)法打印時(shí)讓其不可點(diǎn)擊或是隱藏。
提供有價(jià)值的打印選項(xiàng)。想想用戶(hù)在打印來(lái)你的內(nèi)容時(shí)會(huì)想要指定哪些選項(xiàng)??紤]可以選擇頁(yè)面范圍和打印份數(shù)的選項(xiàng)。啟用附加的選項(xiàng),比如雙面打印,如果這樣有意義并且打印機(jī)也支持的話(huà)。
了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Drawing and Printing Guide for iOS?和UIPrintInteractionController Class Reference。
3.4 快速查看(Quick Look)
在你的app中,快速查看讓用戶(hù)能夠預(yù)覽Keynote,、Numbers、Pages、PDF文檔、圖片以及其它類(lèi)型的文件(即使你的應(yīng)用并不支持這些文件格式)。郵件(Mail)使用Quick Look來(lái)查看附件。在下載附件之后,Mail在郵件信息內(nèi)顯示附件的圖標(biāo)和文件名。點(diǎn)擊圖標(biāo)就能預(yù)覽附件。
在當(dāng)前環(huán)境下合理地展現(xiàn)預(yù)覽視圖。在iPhone上,如果你的app有導(dǎo)航欄,讓預(yù)覽視圖下移留出位置給導(dǎo)航欄,就和你的app其它層級(jí)的視圖一樣。在iPad或是沒(méi)有導(dǎo)航欄的app內(nèi),在一個(gè)全屏的有導(dǎo)航欄的模態(tài)視圖中打開(kāi)預(yù)覽視圖。通過(guò)以上兩種方法,導(dǎo)航欄就能提供退出Quick Look的按鈕,以及預(yù)覽特有的一些按鈕,比如分享和標(biāo)記。如果你的app包含一個(gè)工具欄,那么預(yù)覽特有的按鈕就會(huì)在工具欄出現(xiàn)而不是導(dǎo)航欄。
了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Document Interaction Programming Topics for iOS和Quick Look Framework Reference for iOS。
3.5 ?Siri
你的app可以與Siri聯(lián)動(dòng)來(lái)執(zhí)行一些任務(wù)以應(yīng)對(duì)來(lái)自用戶(hù)的語(yǔ)音命令和問(wèn)題。
- 音頻和視頻通話(huà)應(yīng)用:撥打電話(huà)和查找通話(huà)記錄
- 消息應(yīng)用:發(fā)送消息和閱讀收到的消息
- 提供支付服務(wù)的應(yīng)用:發(fā)送和請(qǐng)求支付
- 管理圖片的應(yīng)用:查找和顯示圖片
- 提供交通服務(wù)的應(yīng)用:預(yù)定行程和提供行程狀態(tài)信息
- 提供健身活動(dòng)的應(yīng)用:開(kāi)始、暫停、恢復(fù)、結(jié)束和取消鍛煉
- 與CarPlay聯(lián)動(dòng)的車(chē)載軟件:更改車(chē)上的音頻源、溫控系統(tǒng)、除霜設(shè)置、座椅溫度和無(wú)線(xiàn)電臺(tái)
Siri負(fù)責(zé)語(yǔ)言處理和語(yǔ)義分析來(lái)把語(yǔ)音請(qǐng)求轉(zhuǎn)換成你的app能夠處理的操作指令。你的app應(yīng)該負(fù)責(zé)定義它所支持的功能、驗(yàn)證收到的信息、為Siri提供它需展示的信息以及采取操作。
在驗(yàn)證信息的時(shí)候,如果某些信息丟失或是不明確,你的app可以指示Siri來(lái)展示選項(xiàng),向用戶(hù)請(qǐng)求確認(rèn),或是請(qǐng)求更多信息。按照Siri的邏輯,某些任務(wù)比如發(fā)送信息和支付,在app執(zhí)行任務(wù)之前首先需要用戶(hù)確認(rèn)。
來(lái)自你的app的回應(yīng)信息會(huì)由Siri說(shuō)出來(lái)并且呈現(xiàn)在Siri界面。合適的話(huà),你的app可以提供自定義的內(nèi)容讓Siri來(lái)展現(xiàn)。比如一個(gè)健身app,可能會(huì)提供自定義的鍛煉信息。
力求一個(gè)無(wú)需觸屏或注視屏幕的聲控體驗(yàn)。用戶(hù)在使用Siri時(shí)不會(huì)經(jīng)常盯著屏幕看。他們可能會(huì)通過(guò)耳機(jī)、汽車(chē)或是穿過(guò)房間來(lái)與Siri互動(dòng)。盡可能地,讓用戶(hù)在無(wú)需解鎖屏幕的情況下也能完成任務(wù)。
快速應(yīng)答并且減少交互操作。用戶(hù)使用Siri是為了方便,所以不要讓他們等待回應(yīng)。你的app應(yīng)該在收到請(qǐng)求之后盡快地驗(yàn)證信息以及采取操作。當(dāng)需要說(shuō)明和更多信息時(shí),呈現(xiàn)高效且集中的選項(xiàng)以降低需要額外提示的可能性。
將用戶(hù)直接帶到指定內(nèi)容。從Sir轉(zhuǎn)換你的app,應(yīng)該直接去往用戶(hù)期望的目的地。不要顯示中間畫(huà)面或是信息,阻礙轉(zhuǎn)換過(guò)程或是拖慢用戶(hù)。
保證是相關(guān)的、精確的以及合適的。你的app的回應(yīng)必須和當(dāng)前的請(qǐng)求相關(guān)而且必須精確地反映用戶(hù)期望。永遠(yuǎn)不要包含可能會(huì)被認(rèn)為是冒犯或是侮辱人格的內(nèi)容。
將最安全、價(jià)格最低的選項(xiàng)設(shè)為默認(rèn)值。一個(gè)應(yīng)答無(wú)論如何都不應(yīng)該騙人或歪曲信息,尤其是當(dāng)它會(huì)帶來(lái)經(jīng)濟(jì)上的影響時(shí)。對(duì)于一次涉及不同價(jià)位的購(gòu)買(mǎi),不要默認(rèn)選擇最貴的。當(dāng)用戶(hù)決定付錢(qián)時(shí),不要在不告知用戶(hù)的情況下收取額外的費(fèi)用。
提升自定義詞庫(kù)的準(zhǔn)確性。通過(guò)定義那些用戶(hù)可能會(huì)在請(qǐng)求時(shí)用到的特殊術(shù)語(yǔ),比如聯(lián)系人、照片標(biāo)簽、相冊(cè)名字、路線(xiàn)選擇和運(yùn)動(dòng)名稱(chēng),你的app能夠幫助Siri去了解更多與執(zhí)行你應(yīng)用操作有關(guān)的內(nèi)容。這些術(shù)語(yǔ)必須在你的app中是非一般的、特殊的,并且用戶(hù)可能會(huì)在發(fā)起請(qǐng)求時(shí)真正用到。這些你提供的詞匯不能包含其它應(yīng)用的名字、與其它app明顯相關(guān)的術(shù)語(yǔ)、不合適的語(yǔ)言或是被系統(tǒng)占用的短語(yǔ),比如“Hey Siri”。記住任何你定義的術(shù)語(yǔ)都會(huì)被Siri用來(lái)解決用戶(hù)請(qǐng)求,但是并不保證一定能夠被識(shí)別。
提供請(qǐng)求例句。為Siri提供例句,當(dāng)用戶(hù)點(diǎn)擊Siri界面的幫助按鈕時(shí)這些例句就會(huì)被展現(xiàn)在指南里。使用這些例句引導(dǎo)用戶(hù)如何以最簡(jiǎn)單高效的方式通過(guò)Siri來(lái)使用你的app。
確保你的自定義界面與Siri很好的融合。你可以使用app特有的顏色、象征性圖像或是其它設(shè)計(jì)元素來(lái)表達(dá)品牌風(fēng)格,但是任何自定義界面元素必須讓人感覺(jué)它們?nèi)匀贿m合于Siri界面。
不要在自定義界面包含你的app名字和圖標(biāo)。系統(tǒng)會(huì)自動(dòng)展示這些信息。
不要打廣告。屬于你應(yīng)用的Siri體驗(yàn)永遠(yuǎn)都不能包含廣告、營(yíng)銷(xiāo)或是app內(nèi)購(gòu)買(mǎi)的推銷(xiāo)。
不要試圖模仿或是操控Siri。你的應(yīng)用永遠(yuǎn)都不能模仿Siri,也不能試圖復(fù)制由Siri提供的功能,或是提供一個(gè)來(lái)自于Apple公司的應(yīng)答。
了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱SiriKit Programming Guide。
4. 視覺(jué)設(shè)計(jì)(Visual Design)
4.1 動(dòng)畫(huà)(Animation)
貫穿于iOS系統(tǒng)的優(yōu)美、精細(xì)的動(dòng)畫(huà)在用戶(hù)和屏幕屏幕內(nèi)容之間建立了一種視覺(jué)上的聯(lián)系。當(dāng)動(dòng)畫(huà)被合理利用時(shí),它能夠表達(dá)狀態(tài)、提供反饋、加強(qiáng)直接操縱感,并且視覺(jué)化呈現(xiàn)用戶(hù)的操作結(jié)果。
明智且審慎地使用動(dòng)畫(huà)和動(dòng)效。不要為了使用動(dòng)畫(huà)而使用動(dòng)畫(huà)。過(guò)度或是無(wú)理由的動(dòng)畫(huà)會(huì)讓用戶(hù)感到不連貫或是錯(cuò)亂,尤其是在那些不能提供沉浸式體驗(yàn)的app中。iOS經(jīng)常使用動(dòng)效,比如在主屏和其它地方使用了視差效果,來(lái)建立用戶(hù)對(duì)深度的認(rèn)知。這些效果有助于增強(qiáng)理解和提升愉悅感,但是濫用它們就會(huì)讓一個(gè)app變得令人困惑并且難以控制。如果你想使用動(dòng)效,一定要進(jìn)行用戶(hù)測(cè)試以保證它們真的能完成使命。
使用連貫的動(dòng)畫(huà)。一個(gè)熟悉并流暢的體驗(yàn)?zāi)芤恢弊層脩?hù)參與其中。用戶(hù)已經(jīng)習(xí)慣了貫穿于iOS系統(tǒng)的精細(xì)動(dòng)畫(huà),比如平穩(wěn)的過(guò)渡、橫豎屏之間的流暢轉(zhuǎn)換和基于物理現(xiàn)實(shí)的滾動(dòng)。 除非你在創(chuàng)造一個(gè)沉浸式體驗(yàn),比如游戲,不然自定義動(dòng)畫(huà)都應(yīng)該和系統(tǒng)自動(dòng)地動(dòng)畫(huà)相符。
力求真實(shí)性和可信性。用戶(hù)可以接受藝術(shù)創(chuàng)造,但是當(dāng)動(dòng)效沒(méi)有意義或是違背了物理定律時(shí),用戶(hù)就會(huì)感到混亂。打個(gè)比方,如果用戶(hù)通過(guò)在屏幕頂部下滑呼出一個(gè)視圖,那么他們應(yīng)該也能通過(guò)上滑將該視圖關(guān)閉。
4.2 品牌化(Branding)
成功的品牌化不僅是單純地在應(yīng)用中添加品牌元素。優(yōu)秀的app通過(guò)優(yōu)雅別致的文字、顏色和圖片來(lái)營(yíng)造獨(dú)特的品牌辨識(shí)度。提供足夠多的品牌元素讓用戶(hù)感覺(jué)是處在你的app中,但要因?yàn)榻o予太多而變成干擾。
融入精妙的、不唐突的品牌元素。用戶(hù)使用你的應(yīng)用是獲得娛樂(lè)、得到信息或是完成任務(wù),而不是為了觀(guān)看一個(gè)廣告。要想達(dá)到最好的體驗(yàn),請(qǐng)巧妙地將品牌融于應(yīng)用設(shè)計(jì)中。讓app圖標(biāo)的顏色貫穿于界面設(shè)計(jì)是一個(gè)在你的app中提供專(zhuān)屬環(huán)境的好辦法。
不要讓品牌化阻礙了優(yōu)秀的應(yīng)用設(shè)計(jì)。首先,讓你的app像是一個(gè)iOS app。保證它是直觀(guān)的、易于導(dǎo)航的、易用的并且以?xún)?nèi)容為中心的。當(dāng)你的app在其它平臺(tái)也適用,不要為了保持品牌的一致性而犧牲了設(shè)計(jì)的質(zhì)量。
內(nèi)容比品牌化更重要。在屏幕頂部一直放置一個(gè)除了展示品牌元素以外沒(méi)有任何用途的頭欄,就意味著犧牲了用來(lái)瀏覽內(nèi)容的空間。取而代之的,考慮采用低侵入性的方式來(lái)實(shí)現(xiàn)品牌化,比如使用自定義的配色方案和字體,或是巧妙地自定義背景。
抵制住想要在應(yīng)用中到處展示logo的誘惑。避免在app中到處展示logo,除非它是品牌化中是必不可少的一部分。這點(diǎn)在導(dǎo)航欄中尤其重要,因?yàn)樘峁┮粋€(gè)標(biāo)題比logo更加有用。
遵循Apple的商標(biāo)準(zhǔn)則。Apple的商標(biāo)不能在你的應(yīng)用名字或是圖像中出現(xiàn)。請(qǐng)參閱Apple Trademark List?和?Guidelines for Using Apple Trademarks。
Tips:
- App Store 為突出你的品牌提供了更多的機(jī)會(huì)。了解相關(guān)指導(dǎo),請(qǐng)參閱App Store Marketing Guidelines。
4.3 顏色(Color)
在iOS,顏色能夠暗示可交互性、增加活力以及提供視覺(jué)的連續(xù)性。在挑選app色調(diào)的顏色時(shí),請(qǐng)參考系統(tǒng)的色彩方案,以保證這些顏色無(wú)論是單獨(dú)還是組合、在淺色背景還是深色背景上都看起來(lái)很棒。
在app內(nèi)使用互補(bǔ)的顏色。你的app內(nèi)的顏色應(yīng)該和諧共處,不會(huì)互相沖突和干擾。如果你的app風(fēng)格的基礎(chǔ)色調(diào)是柔和的,那么使用一系列與之協(xié)調(diào)的柔和色調(diào)。
考慮在app中統(tǒng)一使用一種關(guān)鍵色來(lái)暗示交互性。在Note中,可交互的元素是黃色的。在Calendar中,可交互的元素是紅色的。如果你定義了一種關(guān)鍵色用于傳遞可交互性,那么你要保證其它顏色不會(huì)與之沖突。
一般來(lái)說(shuō),選擇與你的app logo相符的顏色數(shù)量有限的色板。巧妙地使用顏色是一個(gè)傳達(dá)品牌的好辦法。
避免給可交互和不可交互的元素使用相同的顏色。如果可交互和不可交互的元素是同一種顏色, 用戶(hù)就很難知道到底哪里是可點(diǎn)擊的??紤]半透明對(duì)顏色的影響。顏色在半透明元素之下和之上(比如工具欄)都會(huì)看起來(lái)很不一樣。
在多種光線(xiàn)條件下測(cè)試你的app的顏色方案。光線(xiàn)會(huì)在市內(nèi)和室外、房間氛圍、不同的時(shí)間、氣候等條件下明顯地變化。你的app在現(xiàn)實(shí)世界中使用時(shí)看到的顏色不會(huì)一直和你在電腦上看到的顏色相同。你應(yīng)該在不同的光線(xiàn)條件下預(yù)覽你的應(yīng)用來(lái)觀(guān)察顏色的真實(shí)表現(xiàn),比如在晴朗的戶(hù)外。必要時(shí),應(yīng)當(dāng)調(diào)整顏色以求在大多數(shù)的使用場(chǎng)景下提供最好的視覺(jué)體驗(yàn)。
考慮True Tone顯示屏對(duì)顏色的影響。True Tone顯示屏利用了環(huán)境光傳感器來(lái)自動(dòng)調(diào)整顯示屏的白點(diǎn),以適應(yīng)當(dāng)前環(huán)境下的光線(xiàn)情況。專(zhuān)注于閱讀、照片、視頻和游戲的應(yīng)用可以通過(guò)確定一種白點(diǎn)糾正模式來(lái)強(qiáng)化或弱化True Tone 的效果。了解更多開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Information Property List Key Reference。
關(guān)注色盲用戶(hù)以及不同文化對(duì)顏色的認(rèn)知差異。不同的用戶(hù)看見(jiàn)的顏色是不一樣的。比如,很多色盲用戶(hù)很難分辨紅色和綠色(以及任何灰色),或是藍(lán)色和橘色。避免把這些顏色組合作為區(qū)分兩種狀態(tài)或值的唯一方式。比如,用紅色方塊和綠色圓形來(lái)表示下線(xiàn)和上線(xiàn)狀態(tài),而不是用紅色和綠色的圓形。有些圖形編輯軟件含有能夠幫助你證明你是否是色盲的工具。同樣地,考慮你對(duì)顏色的app在其它國(guó)家和文化中會(huì)被如何看待。比如,在某些文化里,紅色用來(lái)表示危險(xiǎn);但在另一些文化里,紅色又有著積極的含義。請(qǐng)確保在你的app中的顏色傳達(dá)了合適的訊息。
使用足夠的顏色對(duì)比度。在app中,過(guò)低的對(duì)比度會(huì)讓內(nèi)容難以閱讀。比如,圖標(biāo)和文本可能會(huì)和背景相融合。在線(xiàn)的顏色對(duì)比度計(jì)算器能夠幫助你精確的分析應(yīng)用中的顏色對(duì)比度,以確保它符合最佳標(biāo)準(zhǔn)。請(qǐng)確保你的app對(duì)比度至少達(dá)到4.5:1,但是7:1更好,因?yàn)樗细訃?yán)格的輔助功能標(biāo)準(zhǔn)。
4.4 布局(Layout)
用戶(hù)總是希望能夠在他們所有的設(shè)備以及任何一種模式下使用他們最喜歡的app。在iOS,界面元素和布局能夠被配置以在不同的設(shè)備中、在iPad中多任務(wù)操作時(shí)、分屏模式時(shí)以及屏幕旋轉(zhuǎn)時(shí),自動(dòng)改變形狀和大小。因此,提前計(jì)劃并且設(shè)計(jì)一個(gè)在任何環(huán)境下都能提供非凡體驗(yàn)的app是十分重要的。
環(huán)境變化時(shí)保持當(dāng)前內(nèi)容的焦點(diǎn)不變。內(nèi)容是你的最高使命。讓焦點(diǎn)隨著環(huán)境變化而改變是令人迷惑又沮喪的,它會(huì)讓用戶(hù)感覺(jué)當(dāng)前的app失控了。
確保最重要的內(nèi)容在默認(rèn)大小下清晰可讀。除非用戶(hù)選擇調(diào)整大小,否則不應(yīng)該讓用戶(hù)橫向滑動(dòng)才能閱讀重要的文字信息,或是放大才能看清重要的圖片。
在app內(nèi)保持整體一致的視覺(jué)外觀(guān)。一般來(lái)說(shuō),具有相似功能的元素應(yīng)該看起來(lái)相似。
利用視覺(jué)權(quán)重和平衡來(lái)表示重要性。大的對(duì)象能夠抓住人的眼球,顯得比小的更加重要。大的對(duì)象也更易于點(diǎn)擊,當(dāng)app在容易分散注意力的環(huán)境中(比如廚房和健身房)被使用時(shí)這點(diǎn)尤其重要。一般來(lái)說(shuō),把首要的對(duì)象放在屏幕的上半部分并且放在偏左的位置——處于從左往右的閱讀環(huán)境時(shí)。
利用對(duì)齊來(lái)方便瀏覽,并且表達(dá)結(jié)構(gòu)和層級(jí)。對(duì)齊讓app看起來(lái)整齊有次序,當(dāng)頁(yè)面滑動(dòng)時(shí)有助用戶(hù)聚焦,更容易找到信息??s進(jìn)(indentation)和對(duì)齊還可以表明多組內(nèi)容之間的關(guān)系。
避免無(wú)緣由的布局變動(dòng)。即使用戶(hù)旋轉(zhuǎn)了設(shè)備,也不代表整體的布局需要變換。比如,如果你的app在豎屏模式展示了一網(wǎng)格的圖片,那么在橫屏模式你沒(méi)必要依次展示同樣的圖片。相反地,你只需要簡(jiǎn)單地調(diào)整網(wǎng)格的尺寸就行了。盡量在任何環(huán)境下都能維持相當(dāng)?shù)捏w驗(yàn)。
可能時(shí),同時(shí)支持豎屏和橫屏模式。用戶(hù)更喜歡在兩種模式下都能使用app,所以最好能夠滿(mǎn)足他們的期望。
如果你的app只支持一種模式,那么請(qǐng)支持該模式的兩種變量。如果你的app只能在一種模式下運(yùn)行,那么確保它能夠支持該模式的兩種方向變化是十分重要的。比如,如果你的app只在橫屏模式運(yùn)行,那么無(wú)論Home鍵在左邊還是右邊,應(yīng)用都該能正常使用。如果設(shè)備被旋轉(zhuǎn)180度,那么你的app內(nèi)容也該同時(shí)旋轉(zhuǎn)180度。反之,當(dāng)用戶(hù)拿錯(cuò)設(shè)備方向時(shí),你的app沒(méi)有自動(dòng)旋轉(zhuǎn),那么他們就會(huì)很自然地知道應(yīng)該旋轉(zhuǎn)設(shè)備。你無(wú)需告訴他們?cè)撊绾渭m正。
根據(jù)當(dāng)前使用內(nèi)容來(lái)定制應(yīng)用對(duì)旋轉(zhuǎn)的反應(yīng)。比如,一個(gè)需要用戶(hù)旋轉(zhuǎn)設(shè)備來(lái)控制角色移動(dòng)的游戲,就不會(huì)在游戲中根據(jù)設(shè)備的旋轉(zhuǎn)來(lái)改變模式。但是,它可以根據(jù)當(dāng)前設(shè)備的旋轉(zhuǎn)方向來(lái)展示菜單和引導(dǎo)步驟。
為可交互元素提供足夠的空間。盡量讓所有控件都有不小于44pt x 44pt的點(diǎn)擊區(qū)域。
準(zhǔn)備好應(yīng)對(duì)文本大小的改變。當(dāng)用戶(hù)在設(shè)置里選擇了不同的文本大小,他們總是希望大部分的app都能合理適配。為了適應(yīng)某些文本大小的改變,你可能需要調(diào)整布局。了解更多關(guān)于應(yīng)用內(nèi)文本使用的信息,請(qǐng)參閱Typography。
了解更多適應(yīng)性的開(kāi)發(fā)細(xì)節(jié),請(qǐng)參閱Auto Layout Guide。
4.5 字體(Typography)
iOS的系統(tǒng)字體是San Francisco。該字體有兩個(gè)變種:SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)。當(dāng)你在標(biāo)簽和其它界面元素應(yīng)用了系統(tǒng)字體時(shí),iOS系統(tǒng)會(huì)根據(jù)字號(hào)自動(dòng)選擇最合適的字體樣式。它還會(huì)根據(jù)需要自動(dòng)改變字體,以滿(mǎn)足輔助性功能的設(shè)置。請(qǐng)前往Resources下載San Francisco字體。
作為iOS的系統(tǒng)字體,San Francisco含有拉丁、希臘和西里爾字母,以及多種用于其它文字系統(tǒng)的字體。
強(qiáng)調(diào)重要信息。使用字體粗細(xì)、大小和顏色來(lái)強(qiáng)調(diào)app中最重要的信息。
如果可能的話(huà),使用單種字體。混合使用多種字體會(huì)讓你的app看起來(lái)零散和草率。考慮使用一種字體和幾種樣式和大小。
可能時(shí)使用內(nèi)置的文本樣式。內(nèi)置的文本樣式讓你能在視覺(jué)上清晰地表達(dá)內(nèi)容,同時(shí)保持最佳的可讀性。這些樣式建立在系統(tǒng)字體的基礎(chǔ)上并能讓你得益于關(guān)鍵的排版特性,比如動(dòng)態(tài)字體,能夠根據(jù)每種字號(hào)自動(dòng)調(diào)整字距和行間距。iOS含有以下文本樣式:
確保自定義字體清晰可辨。iOS支持自定義字體,但往往很難閱讀。除非你的app必須使用自定義字體,比如出于品牌目的或是為了營(yíng)造沉浸式的游戲體驗(yàn),否則的話(huà)請(qǐng)堅(jiān)決使用系統(tǒng)字體。如果你使用了自定義字體,請(qǐng)確保它是可讀的。
讓自定義字體實(shí)現(xiàn)輔助功能。系統(tǒng)字體能夠自動(dòng)對(duì)輔助性功能做出反應(yīng),比如當(dāng)需要加粗文本時(shí)。使用自定義字體的app,應(yīng)該通過(guò)檢查輔助功能是否啟用或是向系統(tǒng)注冊(cè)以收到設(shè)定更改的通知,來(lái)執(zhí)行同樣的行為。請(qǐng)參閱Accessibility。
(1)動(dòng)態(tài)字體大小
SF UI字體的兩個(gè)變種經(jīng)過(guò)精心的設(shè)計(jì),無(wú)論尺寸大小都十分清晰可讀。動(dòng)態(tài)字體通過(guò)讓閱讀者選擇喜歡字體大小,從而提供了額外的靈活度。
- 最小號(hào)
- 小號(hào)
根據(jù)內(nèi)容的優(yōu)先級(jí)來(lái)應(yīng)對(duì)字體大小的改變。不是所有的內(nèi)容都一樣重要。當(dāng)用戶(hù)選擇了一個(gè)更大的尺寸,他們只想讓自己關(guān)心的內(nèi)容更易于閱讀,而不是希望屏幕上的每一個(gè)文字都變得很大。
(2)字體使用和字距
在界面原型中使用正確的字體變種。當(dāng)字號(hào)不大于19點(diǎn)時(shí)使用SF UI Text。使用SF UI Display來(lái)展示20號(hào)及更大的文字。根據(jù)以下規(guī)則適當(dāng)調(diào)整字距:
相關(guān)閱讀:
譯文 | iOS 10 人機(jī)界面設(shè)計(jì)指南 (一)
原文地址: https://developer.apple.com/ios/human-interface-guidelines/features/multitasking/
譯者:喵大神經(jīng),交互新人
本文由 @喵大神經(jīng) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
點(diǎn)睡啊