iOS Guideline 怎麼看?(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ,主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前,建議把 十大易用性原則 先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。

Design Strategies,設計原則

一致性和標準 Consistency and standard

指使用者不應該猜測不同的字彙、狀態、動作是不是代表同一件事。一致性並不侷限於文字上,包含所有的圖示設計、控制元件、風格等等,甚至改版前後的差異。

簡單的說,就是在同個 App 裡,不管在哪一個操作畫面都該讓使用者覺得是同一個 App。讓使用者有內部一致的體驗。

系統與真實世界的關聯性 Match between system and the real world

讓使用者直接操作螢幕上的目標、而不是使用額外的控制元件操作,這能讓使用者更直接了解他們的行為與產出結果。除了單下點擊外,使用者可以運用雙指直接擴大或縮小圖像或內容區域。

盡量讓使用者在介面上操作的方式和現實生活一樣,直接操控而非透過額外的控件。比如地圖放大縮小,兩指直接在地圖上打開或併攏會比點擊 + 或 - 按鈕更直覺。

系統狀態的能見度 Visibility of system status

軟體應該保持相同的模式,透過適當的反應,在合理的時間內通知使用者,讓使用者了解正在發生的事情。

讓使用者知道他的操作造成什麼反應,最基本的就是「點擊按鈕」。iOS 系統內建按鈕可以在點擊(Tap)時變黑色,稱「Highlighted」。表示可以偷懶少出一張切圖,但如果希望要漂亮一點的操作體驗,只要是可點擊的部份都要出 Normal、Highlighted 兩張圖給 RD。

除此之外,還有進度條、Hud 抬頭顯示器、動畫、震動、聲音 等等各種提示使用者的方法,但「聲音」不能成為唯一的反應機制,如果使用者設定靜音呢?

From Concept to Product,從概念到產品

用一句話定義你的產品目標!可以用下列方法找出 App 定義。

  1. 列出所有你覺得使用者可能喜歡的功能。
  2. 確定使用者族群。
  3. 篩選最主要的功能和重點族群。

當你考慮新增功能時,想想看這功能是否必備。當你考慮使用者介面的外觀與行為時,考慮該族群的習慣。當你想新增一個術語時,想想目標族群是否能夠理解。

為了完成某個任務

  1. 使用者可以透過APP完成什麼任務?
  2. 盡可能減少使用者的認知負擔。
  3. 想辦法達到與現實的一致性。
  4. 內容才是重點,不要讓其他元素干擾。
  5. 如果要自創控件,請再三思考是否會引起使用者誤解。
  6. 密切關注使用者測試。

可以製作 Prototype 幫助使用者測試。

Case Study: From Desktop to iOS ,案例:桌面程式轉換成 iOS App

這章節都在講十大易用性原則實行方式、控件簡化、流程簡化等等,提出數個範例介紹,讓閱者建立基本概念, 不是原封不動整套照搬就好,自己去官網看吧。

Running on iPhone 5 ,在 iPhone5 上運作


iPhone4 螢幕長度比 iPhone5 短,除非你要放生 iPhon4s 以前的機型,不然這段很重要。如果不針對iPhone4 的App 進行修改,那麼它在 iPhone5 時、系統會自動在上方和下方加上黑色區塊填充版面。有幾種方式可以使用:


列表類的可以在 iPhone5 顯示更多內容。


可以設定垂直延展某一視圖。


可以拉伸背景區域。


或是乾脆讓主要操作區塊置中。

盡量不要以「增加控件大小」的方式來處理 iOS 的 Responsive 問題,但可以增加控件和控件之間的距離。千萬不要在 iPhone5 多出來的位置塞入 iPhone4 看不到的元素、比如廣告之類。

BTW

以上是我照自己的想法解釋出來的 Guideline 重點,覺得「大家都應該要知道」和太細節的部份就跳過了。要抱怨一下 iOS7 的Guideline 寫得實在不清不楚,很多東西要回頭去看 iOS6 才會知道,甚至藏在給 RD 看的文件裡,還只有一句話輕飄飄帶過。2014 年的 WWDC 快開始了,我猜 iOS8 不太會有像 6>7 這樣子大改版的情況,應該會把 Guideline 定義得更詳細一點。

以上如有不爽請直接去看原文。看文件是每一位 UI 最基本要會的事,Guideline 都不看好意思跟人說你是專業人士?

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close