iOS 12 人機交互指南(二):App架構(Accessibility)

2 評論 20705 瀏覽 53 收藏 25 分鐘

要想發布一款能夠位于App Store排行榜之首的產品,產品在質量和功能上的高標準表現是必不可少的,而為了達到這種高度,我們應該如何做呢?本文主要講述的是 iOS 12 界面交互設計指南中的App架構部分,一起來看看~

一、輔助功能(Accessibility)

iOS 提供了大量的輔助功能來幫助失明、失聰以及其他殘疾群體。大部分以UIKit為基礎的應用能夠輕易地具有輔助性,讓更多的用戶來使用你的應用,此舉可謂互聯網行業對眾生平等所盡微薄之力。

(1)降低透明度

通過降低透明的的方式來提高殘障人士的認知度。

(2)提示音

通過提示音的方式來輔助失聰認識進行交互認知。

(3)按鈕形狀化

通過形狀化按鈕的方式提高按鈕的可識別程度。

(4)為圖片、圖標和界面元素提供可選擇的文字標簽

可選擇的文字標簽在屏幕上是不可見的,但是他們讓VoiceOver能夠通過聲音描述屏幕上有什么,讓失明用戶能夠輕易地使用導航。

(5)相應輔助功能的偏好設置

如果你的應用使用UIKit來實現用戶界面,文字、界面元素就會自動調整至相應輔助功能的偏好設置,譬如:加粗并且更大的文字。你的應用也應當在適當的時候檢查并相應輔助功能的偏好設置,譬如:當減弱動態效果(reduce motion)的開關被打開時。采用自定義字體的應用應該力圖和系統字體的輔助特性保持一致。

(6)測試應用的輔助功能

除了文字和動態效果的變化,輔助功能選項還能改變對比度,反轉顏色,降低透明度以及更多。為那些需要這些功能的用戶啟用設置并觀察你的應用將會變成什么樣并且如何運作。

(7)包含隱藏式字幕和口述影像

隱藏式字母幫助失聰以及重聽用戶明白視頻中的對話和其它音頻內容,口述影像為視覺受損的用戶提供了關鍵視頻內容的口頭解說。

二、加載(Loading)

當某些內容正在加載時,一個空白或者靜止屏幕會使你的應用看上去像卡死了,那么用戶便自然的會感到困惑以及沮喪,最終的結果也就將導致用戶離開你的應用。

(1)更清晰的去表現加載狀態

至少,你需要在應用加載時去展示一個動態的加載器。如果想做得更好,那么你可以去展示當前任務明確的進度用以告知用戶他們預計需要等待的時長。

(2)引導或者是娛樂用戶用以填充加載時間

可以考慮展示一些游戲攻略,有趣的視頻或者是一些有趣的圖像。

(3)自定義加載頁面

盡管標準的系統應用加載器一般來說還是不錯的,但是其有時也會與應用上下文有所脫離。所以你可以考慮設計一個更符合你的游戲或者應用的自定義動畫或其它元素,用以完整一個更沉浸式的用戶體驗。

(4)盡可能快的顯示內容

不要使用戶在看到他們所期望看到的屏幕內容前,就直接去等待內容的加載。立要即顯示屏幕,同時用一些像文本、圖像或者動畫等來告訴用戶當前內容還沒有準備完成。并且在內容加載完成后立即取代前面所述占位元素。

如果可能的話,在后臺事先加載接下來將要在屏幕出現的內容,例如:當前正在播放某個動畫或者用戶正在操作導航欄的某一層級或者菜單時。

三、特殊情景狀態(Modality)

特殊情景狀態通過創造一個焦點,來防止用戶在完成一個任務或者關閉信息/視圖之前去做其它的操作。比如:活動列表、警告框、活動視圖等均存在這種特殊的情景狀態。具體為當一個情景狀態視圖出現后,用戶必須通過主動的點擊按鈕來進行選擇(除非用戶直接退出當前狀態)。

有些應用即存在這類應用場景,如:正在編輯狀態的日歷應用或者正在添加書簽的Safari應用。一個特殊場景狀態視圖是可以占據整個屏幕或者說上層視圖的,如:浮層或者彈出框。

一個特殊場景狀態視圖通常包含一個“完成”按鈕和一個用來退出當前狀態的“退出”按鈕。

警告框

狀態視圖

(1)盡可能少的使用特殊情景狀態

一般來說,用戶更喜歡沒有太多限制的與應用進行交互。盡可能只有在非常緊急的需要引起用戶注意,或當一個任務必須被完成或舍棄才能繼續使用應用,或保持一些重要數據的時候再去考慮創造一個特殊情景狀態。

(2)提供一個明顯且安全的退出機制

確保用戶了解到他們關閉或取消特殊情景模式可能會帶來的后果。

(3)確保狀態簡短且高度集中

不要在你的應用中創建一另一個應用。如果一個模態任務太過復雜,用戶在進入模態視圖時就會看不到視他們本想執行的任務。當創建一個包含多層級視圖的模態任務時請格外謹慎,因為用戶可能會在多個視圖中迷失并不知道如何返回。如果一個模態任務必須含有次視圖,那么請提供單級的跳轉路徑以及清楚的完成路徑,除非完成任務否則不要使用標有“完成”的按鈕。

(4)恰當的時候為模式定義并設置一個標題

你也可能在視圖的其它部分,提供詳細描述任務的文字或是提供指導。

(5)只在需要傳達關鍵必要信息的時候再去使用警告框

警告框干擾體驗,并且需要單擊才能關閉,所以必須要讓用戶認為這個打斷是有理由的。

(6)尊重用戶的通知偏好設置

在設置里,用戶明確規定了他們想要如何地接受來自你應用的通知。遵循這些個人偏好,這樣他們就不會想要完全地關閉來自你應用的通知推送。

(7)不要讓特殊情景狀態視圖出現在浮層上

除了警告框,任何元素都不應該覆蓋在浮出層之上。在極少數情況下,你需要讓模態視圖在用戶完成浮出層內的任務之后彈出,那么請先關閉浮出層再展示模態視圖。

(8)統一特殊情景視圖與應用的視覺風格

一個模態視圖可能包含一個導航欄。在這種情況下,請使用與你應用內的導航欄一樣的視覺風格。

(9)選擇合適的特殊情景狀態視圖樣式

你可以使用到以下任何一種樣式:

全屏,覆蓋整個屏幕,通常用來進行比較復雜的特殊情景狀態視圖展示。

分屏,在大屏幕設備或設備橫屏時遮蓋下層其中一部分內容,對于未被遮蓋的區域進行模糊處理避免用戶與之進行交互,在小屏幕設備或豎屏時遮蓋整個屏幕。

分塊,通常在屏幕中心展示,鍵盤彈出時位置可能會有所改變。所有未被遮蓋的區域進行模糊處理避免用戶與之進行交互,小屏幕設備中可能會直接這個整個屏幕。

等屏,與父級視圖大小一致,用以在分塊視圖,浮出層或其它非全屏視圖中進行特殊請教狀態的展示。

(10)選擇一個合適的顯示特殊情景狀態視圖的過渡方式

使用與應用風格相符的過渡方式,來加強用戶對當前內容轉變的認知。默認的過渡方式讓特殊情景狀態視圖垂直地從屏幕底部向上滑出,然后在被關閉時下滑。彈出樣式的過渡是指當前視圖水平滑出,顯示出特殊情景狀態視圖,看起來就好像特殊情景狀態視圖藏在當前視圖的背后。

當特殊情景狀態視圖被關閉時,原先的視圖便重新滑回來,在你的應用內容部使用統一的特殊情景狀態過渡方式。

四、導航(Navigation)

用戶通常更趨向于忽略應用的導航除非當某些操作沒有達到他們預期的時候,因此我們的工作也更趨向于在不被引起注意的前提下去設計一個結構清晰,目的明確的導航。導航應該要顯得自然以及熟悉,而且不應該搶走主頁面的風頭亦或是主導應用。

對于iOS來講,主要有三種風格的導航:

(1)層級導航

每一屏只做一個選擇,直到到達你想的位置。如果想到達另外的位置,你必須原路一級級返回并且從最開始的位置再次依次做出選擇。像系統原生的設置及郵件應用便是典型的層級導航模式。

(2)平級導航

在不同內容類別間進行切換。像音樂和APP Store便是典型的平級導航模式。

(3)內容驅動或體驗驅動導航

在應用的不同內容間切換,或者由應用本身來定義導航。像游戲,書籍或者其它沉浸式應用一般都使用這種導航模式。

有些應用會結合采用多種導航模式,如一個采用平級導航的應用,也可能同樣包含用于不同類別跳轉的層級導航。

a. 永遠提供一個清晰的路徑

用戶應該能隨時知道他們當前所處應用位置,并且知道如何能夠到達下一個目標位置。所以在考慮導航風格的同時,不同內容間合理的、可預期的、容易追溯的路徑也是非常必要的。

一般來說,對于每一屏幕內容給予其唯一入口。如果用戶需要在多種情景下看到一個屏幕內容,可以考慮使用操作列表,警告框,浮層或者特殊情景狀態等形式來展示這些內容。

b. 設計一個可以快速容易達到具體內容的信息結構

組織一個能夠通過最少點擊,滑動以及屏幕便可以訪問相應內容的信息結構。

c. 使用手勢操作提升應用的操作流暢度

讓用戶以最小的阻力輕松在你的應用界面間進行跳轉,如可以使用屏幕右滑操作去進行上一屏幕的返回。

d. 使用標準系統導航組件

盡可能的使用標準導航控件,如頁面控件、標簽欄、分段控件、表格控件、集合視圖以及拆分視圖等;用戶對于這類控件以及非常熟悉,這樣便能夠更輕松的使用你的應用。

e. 使用導航欄聯通層級數據

導航欄的標題通??梢哉故井斍拔恢茫祷匕粹o則可以使用戶可以很容易的返回上一位置。

f. 使用標簽欄來展示不同類別的內容或功能

標簽欄可以使用戶可以在當前位置進行不同類別內容等的快速切換,詳情請參考Tab Bars章節。

g. 同一類型頁面不同內容時可以使用頁面控件

頁面控件能夠清楚的展示總頁面數量以及當前頁面的位置。天氣應用通常使用頁面控件來展示不同地理位置的天氣情況。

小竅門:分段工具和工具欄并不具備導航功能,通常使用分段控件來組織將信息放入不同的類別,使用工具欄來為當前內容提供交互控件。

五、應用啟動體驗(Onboarding)

應用的啟動第一次與新用戶以及再一次與老用戶接觸的機會。所以請設計一個快速,有趣甚至是有教育意義的啟動頁。

(1)提供啟動畫面

啟動畫面在應用打開時出現,在加載應用初始內容的同時,讓人感覺你的應用的響應速度很快。因為這個畫面很快就會被應用的首屏替代,所以它應該盡量與首屏相似,除非出現可定位的文字和可交互的元素。了解更多,請參閱Launch Screen。

(2)選擇合適的方向啟動

如果你的應用同時支持豎屏和橫屏模式,那么應該以設備目前的方向啟動。如果你的應用只在一個方向運行,那它只能在相同方向啟動并在需要時允許用戶旋轉設備。除非有迫不得已的原因,否則處于橫屏模式的應用正確地選擇方向,無論Home鍵是在左側還是右側。了解更多信息,請參閱Layout。

(3)快速使用

盡量避免出現會使應用的啟動畫面、菜單和說明等延遲顯示的情況,也就是說應該允許用戶快速進入應用內。如果你的應用需要教學或是介紹步驟,為用戶提供一個跳過的選項并且不要對老用戶展示這些。

(4)提前設想用戶可能會需要的幫助

經常主動地考慮用戶何時會遇到麻煩,比如:一個游戲,能夠在暫停或是角色很難升級時提供一些訣竅。當用戶錯過啟動畫面的內容時,允許他們之后重新觀看教程。

(5)只在教程中展示最關鍵的內容

雖然為新用戶提供引導沒錯,但是教學不能成為優秀的應用設計的代替品。更重要的是,確保你的應用是直觀的。如果你的應用需要過多的引導,那么請重新審視你的設計。

(6)學習變得有趣而且易于學習

通過操作來學習比閱讀一長串說明來的更有趣和有效。 在上下文環境中,通過動畫和可交互性循序漸進地教導,避免展示看起來似乎可交互的屏幕截圖。

(7)避免在最開始要求用戶進行設置

用戶期待應用能夠馬上工作,為大多數人設計你的應用,然后讓余下少部分需要不同配置的人自己調整參數來滿足他們的需求。盡可能的,從設備設置和默認中獲取設置信息,或者通過同步服務,比如:iCloud。如果應用一定要求設置信息,那么可以最初在應用內提示用戶,但應該允許用戶稍后在應用設置中修改。

(8)避免展示應用內的接受許可協議和免責聲明

在你的應用被下載之前,直接在蘋果商店展示接受許可協議和免責聲明。如果你必須將這些東西放在你的應用里,那么以和諧融入它們,以避免干擾用戶體驗。

(9)在你的應用重新啟動時恢復之前的狀態

不要讓用戶重新操作來回到之前的應用定位,保存并且復原應用的狀態,這樣用戶就能從他們上次離開的位置繼續。

(10)不要太快或是太頻繁地要求用戶對你的應用評分

太快或是太頻繁地要求評分會讓用戶惱怒,并且減少最終收到的有用反饋的數量。為了鼓勵考慮周到的反饋,在要求評分之前,給用戶足夠的時間直到他們形成對應用的看法。總是提供跳出評分提示的選項,并且永遠都不要強迫用戶對你的應用評分。

(11)不要鼓勵重啟

重新啟動耗費時間并且讓你的應用看起來即不可靠又不可用,如果你的應用出現儲存或者其它問題,導致它無法運行只能系統重啟,那么你應該解決這些問題。

六、請求許可(Requesting Permission)

用戶必須對應用進行授權以期獲得用戶的個人信息,如:當前位置、日歷、聯系人信息、提醒以及照片等。盡管用戶可能會對于通過應用去獲取個人信息的行為感到很方便,但是其依然希望對于其私人數據進行自我管控。例如:用戶會很喜歡系統自動的對照片標注具體的地理位置或尋找附近的朋友,但是他們依然希望系統提供關閉這些功能的選項。

(1)只在應用真的需要時才向用戶請求獲得個人數據

用戶會質疑個人信息的請求是很自然的,尤其是他們發現當前的請求沒有明顯的必要時。確保允許請求只在用戶真的在使用某些需要個人數據的功能時才出現,比如:一個應用只有在激活一個位置跟蹤的功能時才請求獲得當前的位置。

(2)在不明確的時候,向用戶解釋為什么應用需要這些信息是非常必要的

你可以在系統提供的允許請求警告框上添加自定義的文本,,使用明確且有禮貌的文本,這樣用戶就不會感到有壓力。使用簡短文本,并且使用句子,沒有必要包含你的應用名字,系統已經替你在警告框上說明了應用的名字。

(3)僅在應用啟動時請求允許那些對運行你的應用至關重要的信息

如果用戶明確地知道你的應用只有獲得這些個人信息才能運行,那么他們就不會反感。

(4)不必要時不要請求位置信息

在獲得位置信息之前,檢查系統以查看位置服務是否已經被打開。于此,可以延遲提醒,直到使用需要該信息的功能時才進行提醒,甚至可能完全避免提醒。

學習如何實現定位功能,請參閱Location and Maps Programming Guide。

七、設置(Settings)

有一部分的應用可能需要一開始就讓用戶決定設置或布局選項,但是大部分應用避免或是延遲這么做。成功的應用能夠一開始就讓用戶很好地使用,并且同時提供了一個便捷的途徑去調整體驗。當你的應用被設計成滿足大部分用戶的需求,你就可以減少他們對對設置的需要。

(1)推斷你可以從系統中得到什么

如果你需要關于用戶、設備或是環境的信息,那么盡可能地向系統請求而不是直接詢問用戶。比如:如果你想要知道用戶的郵編來提供本地的選項時,可以向用戶請求獲取他們的當前位置。

(2)在你的應用中對配置選項的優先排序深思熟慮

應用的主屏是一個放置關鍵或是常用選項的絕佳位置,次屏則適合放置只偶爾才更改的選項。

(3)適當時提供去設置的快捷路徑

如果你的應用包含引導用戶去設置的文本,比如:“去設置>我的應用>隱私>定位服務”,請提供一個能夠自動打開該界面的按鈕。了解如果實現這個行為,請參閱Settings Launch URL?中的?UIApplication。

(4)把不經常更改的配置選項放到系統設置里

系統的設置(Settings)應用是更改系統配置的核心地帶,但是用戶必須離開的應用才能到達那里,因此在你的應用中直接調節設置更加方便。

如果你的應用必須提供很少改動的設置選項,請參閱Preferences and Settings Programming Guide中的Implementing an iOS Settings Bundle部分。

相關閱讀

iOS 12 人機交互指南(一):主題與基本界面元素

 

本文由 @沸騰 翻譯發布于人人都是產品經理。未經許可,禁止轉載

題圖來源于網絡

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這翻譯的,挺醉

    來自上海 回復
  2. 本人正在做海外APP的交互 新產品從0-1 有些無從下手,流程架構 頁面布局 操作行為 權限等等與國內產品有什么需要注意的不同點,所以想請教一下您,如果可以微信:raincnos

    來自廣東 回復