2012年5月21日 星期一

iOS UI設計27方針

來自 http://www.simonwhatley.co.uk/apples-27-guidelines-for-mobile-user-experience-design

The user experience of iOS-based devices revolves around streamlined interaction with content that people care about. Below are Apple’s 27 guidelines for mobile UX design:

我流翻譯開始
Focus on the Primary Task
(讓使用者)專注在主要工作上

Elevate the Content that People Care About
評估使用者真正想要的內容
這方針的問題在於通常我們都在評估老闆要的功能 :p

Think Top Down
從上到下思考(功能、UI設計)
其實我不是很懂這句(完全沒有前後文說明..),也可能是指content呈現上根據重要性從上到下排列

Give People a Logical Path to Follow
給予使用者一個有邏輯性的使用路徑
例如folder/catelog -> 內容或是start - edit -done 這樣的路徑,不要讓使用者一開始就在功能流程的中段而不知道從哪來、做什麼、往哪走

Make Usage Easy and Obvious
讓app的主要目標簡單且顯眼
別讓其他的次要目標和主要目標一樣顯眼,例如分享的icon..

Use User-Centric Terminology
用以使用者為中心的字彙
與其使用ID,不如使用account, 與其使用modify不如使用edit

Minimise the Effort Required for User Input
盡量減少使用者的輸入需求
包括建立合理的預設設定,想想看你開一份word結果要求你先輸入檔名、頁面、font, font size時你會多不爽

Downplay File-Handling Operations
盡量減低檔案處理動作在使用者眼中出現的次數(使用者需要的是處理內容而非處理檔案)
以照片編修軟體來說,別問要不要覆蓋,使用者存檔時就把照片存成新檔、建立不同版本或提示舊照片會不見

Enable Collaboration and Connectedness
提供協同合作和連接特性
app合適的話..而且這樣也能提高擴散可能性
不過這樣需付出的成本和單機app相比會提高很多..

De-emphasise Settings
盡量減少app設定的重要性
只有特別需要的東西才放到setting中
這和一般的想法有所相反:setting是放做得出來的功能但不確定最好選項的地方,例如頁面背景色之類 XD
其實這句話的基礎思維在於:別期望使用者會去使用setting, 把程式的預設選項做到最好,其他需要調整的東西盡量放在相關的頁面上,別放在那個和主要task完全搭不上邊的setting中

Brand Appropriately
使用合適的品牌/名稱(別用不相干的字眼或名稱作為app名稱或icon

Make Search Quick and Rewarding
搜尋功能應快速(使用、效率)且提供之前記錄
包括search功能應該隨時在畫面上
可以顯示之前的搜尋詞或結果
Entice and Inform with a Well-Written Description
通知/說明/placeholder/hint的說明要用心
包括簡潔、易懂、讓使用者知道這說明的目的,看完說明之後能了解要輸入什麼、做什麼、取得什麼結果

Be Succinct
簡潔
簡潔

Use UI Elements Consistently
UI元素要有一致性(風格)
這交給美術去傷腦筋 XD
PM只要記得問他們這些UI/版面的一致性在哪就可以了

Consider Adding Physicality and Realism
考慮加入物理/現實特性,讓使用者可以在其中找到和現實的關聯性
例如在書籤icon上使用現實中的書籤造型,edit使用紙筆icon

Delight People with Stunning Graphics
使用絢麗的圖像愉悅使用者(就是要炫…

Handle Orientation Changes
處理裝置轉向需求
就算只限定portrait也要開啟上下翻轉(何必呢…

Make Targets Fingertip-Size
別讓目標物件小於手指尺寸
apple建議44x44,不過他們自己的nab button就違反了 XD

Use Subtle Animation to Communicate
使用微動畫與使用者溝通
例如擺動圖標提醒使用者
這是因為人眼很容易受到移動的事物影響,就算不在主要視界中
不用開一個alert 視窗,一個小小搖動的icon或變色的icon就可以讓使用者注意到程式狀態的改變

Support Gestures Appropriately
適當的支援手勢功能
例如照片之類同樣性質但無法在同一頁顯示的內容就可以考慮加入手勢功能讓使用者直接切換
不過別為了手勢而手勢..(遙想當年..

Ask People to Save Only When Necessary
只在必要時請求使用者執行儲存
一般來說,使用者離開編輯畫面只有兩種情況,cancel與done
如果不是modal window,那可以考慮只出現cancel/reset按鈕,done由使用者離開當前編輯畫面事件觸發

Make Modal Tasks Occasional and Simple
減少modal window的出現,而且別讓modal window內的工作複雜
不要一直modal window! modal window中別讓使用者待超過30秒,走三層以上路徑

Start Instantly
立刻開始,別讓使用者等待
例如某些一定要等好幾秒的app logo畫面..

Always Be Prepared to Stop
在app的任何功能中都要考慮程式停止/離開時的處理
手機使用情況是隨時都有可能被關閉,確保程式在任何情況下離開都不會造成問題(以及可回復狀態

Don’t Quit Programmatically
別讓app無預警關閉(原文是別用程式處理app離開功能)
程式中任何會讓app關閉的按鈕都要讓使用者知道按下去後程式會關閉
以前看過的一個例子是遊戲過關後會顯示製作名單然後就離開遊戲
這種情況下,使用者就不知道是出問題或正常關閉

If Necessary, Display a License Agreement or Disclaimer
當有必要(使用者誤解導致被告可能性)時,顯示License Agreement 或 Disclaimer
明哲保身方針..反正大部分都只會按下確定 :p

沒有留言: