iOS 12 人機交互指南(一):主題與基本界面元素

                      產品小白專屬,10周線上特訓,測、練、實戰,22位導師全程帶班,11項求職服務,保障就業!了解詳情

                      要想發布一款能夠位于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等,來幫助你設計出一個強大的應用。

                       

                      本文由 @沸騰 翻譯發布于人人都是產品經理。未經許可,禁止轉載

                      題圖作者提供

                      給作者打賞,鼓勵TA抓緊創作!
                      6人打賞
                      評論
                      歡迎留言討論~!
                      1. 想問問一下有沒有完整的可下載的文檔,能提供一下嗎?網上沒找到,謝謝

                        回復
                        1. 沒有整理成可下載的,后面有時間再整理整理

                          回復
                      2. 有用,收藏了

                        回復
                      3. 本人正在做海外APP的交互 新產品從0-1 有些無從下手,流程架構 頁面布局 操作行為 權限等等與國內產品有什么需要注意的不同點,所以想請教一下您,如果可以微信:raincnos

                        回復
                        1. 海外大多是IOS 和安卓原生,只要遵循這兩個的設計規范基本不會有什么大問題,還有就是使用習慣問題,國內安卓基本是定制,國外基本原生,不用國內定制的交互方式去定義國外用戶的使用習慣即可,當然可以優化的地方還是可以做的,但是不要違背用戶使用習慣即可。至于登錄這塊,肯定郵箱、非死不可、推特登錄啥的,很少用手機號

                          回復
                        2. :!:

                          回復
                      圈子
                      關注微信公眾號
                      大家都在問
                      login博九彩票