3-key-words-ios-guideline-1

翻了下這幾年的iOS人機界面指南,開篇始終是遵從(Deference),清晰(Clarity),深度(Depth)這三個關鍵字,從iOS7到iOS9從未變過。在iOS>中UI作為內容的支撐,始終服務于內容,就像喬幫主說的“設計不只是看上去的樣子和感覺,設計的關鍵在于它如何發揮作用?!?/p>

一、遵從 (Deference)

設計為內容服務,UI作為內容的支撐,可以幫助用戶更好地理解內容并與之交互,且不會分散用戶對內容本身的注意力。以內容為中心被反復強調,而平時設計師卻常常會因為過度追求美感而忽視這一點。

如何使設計遵從內容,并突出內容:

  • 利用整個屏幕。
  • 減少視覺修飾與擬物化設計的使用。漸變和陰影有時會使UI變得厚重,影響用戶對內容的關注。
  • 使用半透明底板。半透明能使用戶看到更多的內容,起到短暫的提示作用。
  • 保證應用清晰度。

4wy20151211

二、清晰 (Clarity)

清晰在這里可以理解為:文字清晰易讀,圖標精確醒目,去除多余修飾,突出重點,以功能驅動設計。

如何提升應用清晰度:

  • 大量留白。留白使內容和功能醒目,并傳達出一種寧靜安詳的視覺感受,更好的讓用戶聚焦和高效交互。
  • 用顏色簡化UI。突出重點并暗示交互性。
  • 使用系統字體確保易讀性。
  • 使用無邊框的按鈕。在內容區域中無邊框按鈕用文案、顏色及操作指引標題來傳達按鈕功能,激活態時高亮;在默認狀態下所有bar上的按鈕都是無邊框的。

正確使用標準UI元素:

– 盡可能使用UIkit提供的標準UI元素,多使用標準元素而非自定義元素。

– 嚴格遵循每個UI元素的設計規范,當你應用中UI元素的外觀與功能都是用戶所熟悉的,他們可以很容易的根據先前的經驗使用它,進而更好的使用你的應用。

– 避免不同版本iOS里的UI元素混用。

– 避免創造自定義UI元素來表現標準交互行為。

– 避免用系統自帶的按鈕和元素傳達其他含義。

– 在沉浸式體驗的應用中,創造全新的自定義UI是合理的,比如H5頁面和各種游戲類APP。

使用戶集中注意在主要任務上:

-使用布局來溝通。用布局告訴用戶什么是最重要的 ,如何選擇,以及事物之間的關聯。

– 屏幕上半部分放置主要內容。遵循用戶從左到右的習慣,并從靠左側的屏幕開始。

– 使用視覺元素的大小和平衡向用戶展示相關屏顯的重要內容。大控件比小控件更容易在出現時被注意和點擊。使用對齊來讓閱讀更舒適,讓分組和層次之間更有秩序。對齊會讓應用整潔有序,也會讓用戶在專注屏幕時篩選重要信息。不同 信息組的縮進與對齊讓它們之間的關聯更清晰,也會讓用戶更容易的找到某個控件。

– 確保默認尺寸下重要內容的顯示。例如:用戶無需水平滾動就能看到重要的文本,或不用放大就可以看到主體圖像。

– 盡量避免UI上不一致的表現。有著相似功能的控件看起來應該相似,用戶認為他們看到的不同總是有原因的,而且他們傾向于花時間嘗試。

– 給每個互動元素留足空間,讓用戶輕松的操作。常用的點按類控件的大小是44X44。

3wy20151211

2wy20151211

三、深度 (Depth)

視覺的層次感和生動的交互動畫會讓UI看起來更有活力,有助于用戶更好地理解并提升用戶的愉悅感。

如何提升交互性和反饋體驗:

  • 用戶熟悉的標準手勢避免賦予不同的行為,除非是游戲。
  • 避免創建和標準手勢功能相似的手勢操作。
  • 用戶已經習慣標準手勢操作,沒有必要讓用戶學習達到同樣效果的不同操作。
  • 復雜手勢可以作為完成某項任務的快捷方式,但不是唯一的方式。
  • 用戶很懶,提供給用戶完成某操作的方式盡量簡單、直接,即使這種方法需要額外的動作。簡單地手勢會讓用戶集中于當前的體驗和內容,而不是操作本身。
  • 除非是游戲,否則避免定義新手勢
  • 在特定的環境中,可以考慮使用多指操作。雖然復雜的操作不一定適用于所有應用,但對用戶會花大量時間使用的應用來說可以豐富體驗,例如游戲。

使用有助于理解的反饋:

– 盡可能將狀態或其他的反饋信息整合到UI中。最好讓用戶在不進行操作或不跳出當前內容下,獲得需要的信息。例如,郵箱應用將當前的狀態顯示工具條上,這樣就不影響當前內容。

-避免顯示不必要的提醒對話框。對話框是一種很強的反饋機制,只能在傳遞非常重要也是理論上可行的信息時才需要使用它,如果用戶??吹胶芏嗖皇侵匾畔⒌膶υ捒?,他們很快就會忽略所有對話框提醒。

1wy20151211

參考:

  1. 《騰訊力作!超實用的IOS 9人機界面指南(1):UI設計基礎》
  2. 《騰訊力作!超實用的IOS 9人機界面指南(2):設計策略》
  3. 《騰訊力作!IOS 9人機界面指南(3):IOS 技術 (上)》

感謝閱讀 :)

【為了這8個指南也得存書簽!】

  1. 平面設計:《超贊!設計師完全自學指南》
  2. 交互設計:《交互設計師修煉指南!教你從零開始成為優秀交互設計師》
  3. UI設計:《超實用新手指南!零基礎如何自學UI設計?》
  4. 前端開發:《天貓高手來教你!零基礎如何系統地學習前端開發?》
  5. 摳圖技巧:《從菜鳥到高手!PHOTOSHOP摳圖全方位攻略》
  6. 配色方案:《色彩搭配速成!3個實用方法幫你全面搞定配色》
  7. DPI指南:《基礎知識學起來!為設計師量身打造的DPI指南》
  8. 交互設計自學路徑圖:《零基礎入門!給非科班生的自學路徑圖之交互設計篇》

作者:ME網易移動設計

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏