iOS 介面互動設計指南
要想釋出一款能夠位於App Store排行榜之首的產品,產品在質量和功能上的高標準表現是必不可少的,而為了達到這種高度,我們應該如何做呢?本文主要講述的是iOS介面互動設計指南,一起來看看~
主題(Themes)
1. iOS設計主題
作為一個app設計師(其實我是一隻產品狗),其實便意味著你將有機會去設計釋出一款能夠位於App Store排行榜之首的驚世駭俗之產品。而為了達到這個高度,你的產品在質量和功能上的高標準表現是必不可少的。(我理解的原文中app designer其實正是產品狗一職而非傳統意義上的UI設計師,正所謂成也蕭何敗也蕭何,固此文別稱《產品狗的iOS指南》也不枉為過)。
iOS平臺不同於其它平臺的三大基本原則:
- 清晰(Clarity): 縱觀整個iOS系統,清晰意味著,每種尺寸下的文字都應該是易讀的,所有圖示都應該是精確易懂的,每一個裝飾都應該是精心恰當的,而且應該本著功能驅動設計的原則。利用留白,顏色,字型,影象以及其它介面元素來共同巧妙的突出重點內容且表達其不同的可互動性。
- 遵從(Deference): 乾淨美觀的介面和清晰流暢的動態效果有助於使用者去理解介面內容並與之進行互動,從而避免給使用者帶來干擾。而如果當前的內容佔據了整個螢幕時,可以利用半透明以及模糊處理等方式來暗示使用者其更多內容的存在。儘可能少的使用邊框,漸變以及陰影可以讓介面更輕,從而突出更多的內容。
- 深度(Depth): 鮮明的視覺層級以及生動的動態效果可以對介面有更深層次的表達,賦予了介面活力也更有助於使用者去理解。易於發現且易於觸發的介面元素能夠提升使用者的體驗愉悅感,而使用者在成功觸發相應功能或獲得更多內容的同時,也掌握了當前所在位置的由始至終(可以理解為PC端的麵包屑)。因此當用戶在瀏覽內容的同時,流暢的過渡其實便體現出了一種縱深感。
2. 設計原則
為了最大化產品的影響力及達到以上目標,以下的原則更是需要你在產品定義及設計時牢記於心的:
(1)美學完整性(Aesthetic Integrity)
美學完整性代表了一款應用的視覺表現和互動行為與其功能整合的優良程度。例如:如果一款應用的目的是幫助使用者去完成一項非常重要的任務,那麼我們就應該使用不易察覺且不會太引人注目的圖形,或使用一些標準化的控制元件以及可預知的互動行為來保持使用者的專注性。
反而言之,對於一款沉浸式體驗應用(如遊戲),我們就需要利用更加吸引人的視覺表現,去鼓勵使用者深入探索的同時為其帶來無窮的樂趣和刺激。
(2)一致性(Consistency)
一致性代表了一款應用需要貫徹相同標準和規範的原則,使用系統提供的介面元素,風格統一的圖示,標準的字型樣式以及一致的措辭。同時應用所包含的特徵和互動行為,應該是符合使用者心理預期的。
(3)直接操作性(Direct Manipulation)
直接對螢幕上的物件(而非通過一堆控制元件)進行互動,有助於使用者理解從而提升使用者的參與度。這裡的直接操作指的是包括旋轉螢幕或手勢控制等操作,通過此類互動使用者的互動行為能夠得到及時可視的反饋。
(4)反饋性(Feedback)
反饋可以認證互動行為,呈現結果,通知使用者。iOS系統自帶的應該對使用者的每個行為都提供了明確的反饋,如:可互動的元素被點選時的臨時高亮,進度指示器(進度條、緩衝條等)顯示任務需要進展的時間及當前的進度,聲音和動態效果則更是加強了對行為結果的提示。
(5)隱喻性(Metaphors)
當一款應用的虛擬物件和互動行為能夠與使用者所熟悉的體驗相似時(無論這種體驗是來源於現實生活亦或是數字世界),使用者就更夠更快的學會使用這款應用。
隱喻能夠在iOS中起到作用的原因是使用者可以與螢幕進行物理上的互動,如:使用者可以通過將檢視引出螢幕來顯示下方的內容,通過拖拽(drag)、滑動(swipe)物件、撥動(toggle)開關、移動(move)滑塊、滾動(scroll)選擇器,甚至通過輕掃(flick)來翻閱書籍和雜誌。
(4)使用者控制性(User Control)
在iOS內部,應該是使用者(而非應用)在控制。應用可以對一系列的使用者行為提供建議,或對可能造成的嚴重後果的行為發出警告,但絕不應該替使用者做決定。而好的應用,會在使用者主導和避免不想要的結果中找到平衡。
為了讓使用者感覺到是他們在控制應用,應該使用使用者熟悉且可預知的互動元素,讓使用者二次確定其有破壞性的行為,並且允許即使在執行中的操作也能夠被輕易取消。
基本介面元素(Interface Essentials)
大部分的iOS應用使用UIKit中的部件來定義一個基本的介面元素框架,而這個框架不僅讓各個應用在保持視覺上的一致的同時,也給予了其高度化的個性定製空間。
UIKit部件是靈活的、常見的,可配置性極高的,它能夠支援你去設計一個能夠在任何iOS裝置中都表現出高水準的應用,而且能夠使其隨著系統釋出新版本的同時而自動更新。
以下便是UIKit中三大基本介面元素:
(1)欄(Bars)
欄可以告知使用者其當前所在應用中的具體位置,提供導航,還有可能包含按鈕或其他可以用來觸發功能或交流的元素。
(2)檢視(Views)
檢視包含了使用者所最關注的內容,如文字,動畫及一些互動元素。而檢視更是支援滾動,插入,刪除及排列等行為方式。
(3)控制元件(Controls)
控制元件用於觸發功能及傳遞資訊,像按鈕、開關、輸入框、進度條等便是極典型的控制元件。
為了進一步的定義iOS介面,UIKit定義了你的應用所能用到的功能。通過這個框架,你的應用可以對觸屏上的手勢操作做出響應,還可以包含一些,例如:繪畫、輔助、列印等功能。
UIKit同其它部件框架一樣緊密相連,如:Apple Pay、HealthKit、ResearchKit等,來幫助你設計出一個強大的應用。
本文由 @沸騰 翻譯釋出於人人都是產品經理。未經許可,禁止轉載
題圖作者提供