要想發布一款能夠位于App Store排行榜之首的産品,産品在質量和功能上的高标準表現是必不可少的,而為了達到這種高度,我們應該如何做呢?本文主要講述的是 iOS 12 界面交互設計指南,一起來看看~
主題(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等,來幫助你設計出一個強大的應用。
本文由 @沸騰 翻譯發布于人人都是産品經理。未經許可,禁止轉載
題圖作者提供
,