怎樣在iOS設計規范的框架下構造靈活的移動體驗?

0 評論 7121 瀏覽 5 收藏 16 分鐘

推薦理由:譯者@C7210 。HIG在給iOS應用一套普適的設計原則的同時,也制約了部分交互體驗的展示。而原文作者在文中從細節入手,分析了如何在設計規范下為用戶帶來靈活易學的移動設計產品。

 

如果你在iOS應用設計方面有過一段時間的工作經驗,那么多半會聽說過“HIG”,也就是人機界面設計規范(Huma Interface Guidelines)的簡寫。這份蘋果官方文檔的內容十分廣泛,為設計師與開發者提供了一系列打造iOS應用體驗的最佳實踐。

HIG所關注的是一套普遍適用的設計原則,其中絕大部分內容是關于iOS原生容器和控件的使用方式的,也就是你在iOS自帶的郵件、通訊錄、日歷、Safari瀏覽器等應用當中所見到的那些界面元素及交互模式;這些已經成為iOS應用體驗的一種官方標準。

HIG方面的話題通常可以在設計師群體中引發強烈的反應。其中一部分人會將HIG視為圣經,而另外一些人則認為官方的規范不夠靈活,比起其他一些移動平臺來說,在體驗模式等方面甚至有些過時。市面上的一些應用,譬如Clear,已經大規模的摒棄了iOS的標準控件和傳統交互模式,旨在為用戶帶來更加獨特和前沿的體驗模式。

無論怎樣,當你開始設計一款iPhone應用的時候,必須對一些可行的實踐模式有充分的認知。

全面背離(或超越)HIG的做法是你可以選擇的一種模式,畢竟目前App Store當中有很多這樣的應用都深受用戶的喜愛。但在另外一些情況下,你也許需要把產品體驗打造的更加符合標準的iPhone模式,從而使用戶更容易上手,減輕他們在使用應用解決特定問題過程中的認知負擔。

樂于貶低HIG的設計師們至少在一件事上是正確的:如果你沒有針對特定的產品做好周全的規劃,一味采用僵化的層級化信息結構,簡單的將每屏內容鏈在一起(就像最早的iPod當中的導航方式),那么最終的產品將很容易使用戶迷茫在深層信息當中,失去方向感。

01-a-rigid-application-hierarcy-ios-hig-design-guidelines

 

關注概念模型

在前期,要根據特定產品的實際情況考慮其邏輯呈現和信息組織的方式,而不是一上來就被HIG當中提供的既有模式限定住思路。在你對自己產品的概念模型有了充分的認知之后,才可以更加有效的判斷出HIG當中有哪些導航模式可以幫你打造更加符合用戶心智模型的體驗。

關于概念模型,試著問自己幾個問題:

  • 目標用戶在特定的情境下需要和怎樣的對象打交道?所謂“對象”,包括文檔、記事本、單頁、白板、食譜、店鋪、友人、訂單等等。
  • 站在用戶的角度看,這些對象之間有怎樣的關聯?譬如記事本包含單頁,訂單當中包含支付方式等。
  • 每個對象涉及到的動作有哪些?例如“提交”訂單,“創建”或“刪除”食譜等。

這類模型有可能隨著時間的推移而發生變化,所以你不需要(有時也無法)考慮的事無巨細,但必須為未來有可能發生的變化而預估出一部分彈性空間。試著使用OmniGraffle一類的工具將你整理好的概念模型進行可視化處理;落實到示意圖上之后,你會對自己產品當中的關鍵概念點以及他們之間的關聯產生更加清晰的認知,從而設計出更合理的信息架構,選定最合適的導航模式。

02-concept-model-diagram-ios-hig-design-guidelines

這步工作是很重要的,但是HIG及iOS開發工具包提供的原生導航控件很容易誤導設計師跳過這一步驟。只將注意力集中在原生導航模式的選用上,而忽視對自己產品概念模型和信息架構的分析,一方面有可能失去創新的機遇,另外也有可能基于錯誤的認知而使用了不恰當的原生模式。

 

不要陷入過多的層級當中

進入實際的流程與界面設計階段之后,如果你發現信息導航陷入了很長的“鏈條”當中,樹形結構的層級超過了5層,那么你也許需要重新考慮一下。

03-chain-ios-hig-design-guidelines

對于傳統的列表形式來說,雖然每個界面的切換都采用iOS原生的Navigation Controller控件所提供的左右滑動動畫效果,但是在層級過多的情況下,用戶產生迷失感的風險將變的非常大。相關的心理學研究表明,多數人的短期記憶只能支持5到7個單元的項目。

在某些情況下,可以試著將長鏈條中的信息按照不同的概念和邏輯進行分組。例如你可以將一個包含了5到6步的結算流程按照支付、物流等類別進行分組。這種方式可以使相同類型的信息都能被很快的單獨訪問到,用戶不必在一個維度上前行或后退很多節點。

接下來,可以考慮怎樣在這些概念分組當中實現非線型的導航方式,一個最簡單的方法就是使用模態化的界面。通常,模態界面是從屏幕底部向上滑入視圖的,完成操作后又會向下滑出(例如短信應用的創建新消息界面)。當然,iOS還提供了很多其他形式的動效,但每一種動效通常與特定的界面切換模式相關聯,在這里不如模態界面的切換效果更適用。

04-modal-view-ios-hig-design-guidelines

雖然在某些情況下適用,不過模態化界面的使用情境還是有一定局限的——既然是模態化,就必然導致當前流程的中斷,用戶需要關閉模態界面后才能繼續之前的操作;而且這樣的界面會覆蓋在之前的內容之上,很容易使用戶失去上下文的關聯感。

在很多時候,最有效的方式是將基于列表的樹形結構與其他全局化的的導航方式結合使用,譬如標簽欄(Tab Bar)或是分段選擇控件(Segmented Control)。

05-tab-bar-ios-hig-design-guidelines

06-segmented-control-ios-hig-design-guidelines

雖然iOS提供了標簽欄和分段選擇這類成熟的或者說有些陳舊的導航方式,但蘋果同樣認同你通過自己打造的控件來進行非線型的全局導航。在這方面,目前比較流行的是抽屜模式,用戶可以在任何界面通過向左或向右滑動的手勢來調出側邊欄進行導航。

07-Facebook-app-sidebar-ios-hig-design-guidelines

 

深入思考上下文工具

有些負面的聲音指責iPhone的HIG并沒有為針對當前界面內容的上下文工具操作提供足夠多的選項。確實,iOS沒有安卓系統當中的上下文菜單(context menu)或是動作欄菜單(action bar menu)等概念,不過現有的一系列原生控件同樣可以幫你為用戶提供足夠快捷的、與當前界面內容明確相關的操作。在設計界面視圖時,重點考慮以下這些原生控件:

詳情展開按鈕(Detail Disclosure Buttons)與信息按鈕(Info Buttons):詳情展開按鈕通常用來在列表視圖中顯示與某個單元相關的更多信息與功能(更多內容要展示在一個獨立界面中)。信息按鈕通常用于顯示應用的配置信息詳情,這些信息位于當前界面背后,通過翻轉效果切換。

08-detail-disclosure-button-ios-hig-design-guidelines09-info-button-ios-hig-design-guidelines

工具欄(Toolbar):這個控件是隨著第一代iPhone的郵件應用誕生的,看上去不怎么酷,卻可以為你提供一個固定位置,用來承載那些與當前上下文相關的命令工具。你要確保任何一個出現在工具欄中的按鈕圖標都是能夠被用戶正確理解的;可以首先看看HIG提供的標準圖標。

10-toolbar-ios-hig-design-guidelines

動作表單(Action Sheet):你可以把這個控件看做是彈出警告框的大哥。通常,用戶在工具欄上發起某種操作后,這個面板會從屏幕底部滑入視圖,其中包含用戶所期望的針對當前界面內容的功能按鈕。

11-actionsheet-hig-design-guidelines

活動視圖(Activity Views):與動作表單相似,不過更多的是在提供與上下文相關的“服務”,例如iOS原生集成的Twitter、Facebook、新浪微博等社交網站分享功能,以及收藏、打印等等,當然,你也可以將其他功能添加進去。根據HIG的規定,你應該使用系統提供的標準分享按鈕來觸發活動視圖的顯示,不過蘋果并沒有禁止你提供相關功能,使用戶可以將內容“分享”到應用內的其他地方。例如原生的Safari瀏覽器當中的活動視圖,就包含了“書簽”和“添加到閱讀列表”這兩個功能。

12-activity-view-hig-design-guidelines

編輯菜單(Edit Menu):標準的編輯菜單用于文本對象,通常包括選擇、復制、粘貼等功能,同時也可以進行擴展,你可以向其中添加訂制化的功能。不過要記住一點,編輯菜單只有在用戶執行了特定的編輯手勢之后才會呈現,所以這里涉及到可發現性(discoverability)方面的問題。

13-edit-menu-hig-design-guidelines

這些原生控件在iOS6當中都是可用的;如果你的產品仍會面向很多舊版本系統的目標用戶,那么在選用控件之前一定要檢查相關文檔,確保兼容性。

 

外部事件

檢驗產品體驗是否足夠靈活的方式之一,就是考量產品在外部事件作用于當前界面時的表現。我們在設計時總會不經意的假設用戶從手機首屏啟動應用,并一氣呵成的完成所有目標任務,但是在現實當中事情不總是這樣。試著問自己以下幾個問題:

  • 如果用戶是通過鎖屏界面的信息推送或是消息中心進入的應用,他們首先看到的應該是哪個界面?
  • 如果你的應用是由于其他應用發送了文件或URL請求而啟動的,用戶會看到怎樣的界面?
  • 你的應用當中是否會包含基于時間的或是并行的事件?如果用戶切換到其他應用,使你的應用進入了背景運行狀態,那么功能體驗是否會受到影響?你可以考慮這類事件,包括登錄或訂閱的過期,購物車里的商品不再可購買,存儲在云端的內容被其他設備修改,等等。
  • 當上面這條當中的各類情況發生時,如何讓用戶重新控制局面?能否讓他們在不需要走很多回頭路的情況下取消之前的行為,或是進入其他地方。

對于以上這些問題,如果你不能給出非常清晰直白的答案,那么你的產品在信息結構方面也許過于線型了,至少是不靈活的。假設你的應用當中有一長鏈的界面,如下圖所示,要進入鏈條中間的位置,或是從這里退出,你很難不產生迷失的感覺;而且這種局面對于實際編碼和測試來說也是不小的挑戰。

14-wedging-hig-design-guidelines

 

總結

靈活的產品體驗是由你設計出來的,HIG本身并不能真正帶來任何保證。無論你決定嚴格遵循HIG的框架,還是有突破性的打造令人驚嘆的體驗模式,通過真實的用戶測試和驗證你的想法都是非常必要的。不要心存僥幸,“看看能不能通過蘋果的審核吧,看看人們在App Store里給到的具體評價如何吧…”這類想法無助于優秀產品的打造。

最后,我還是想再次強調,去讀HIG,是的,我指HIG全文。蘋果一直在持續的更新這個文檔,即使你從前閱讀過,當新版本的iOS推出后,最好也再去看看更新的內容。HIG當中總是有可以不斷深入挖掘的東西,只要你能以正確的角度去發現和思考。

 

來源:早讀課

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!