教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
視覺設計師必須知道的交互設計模式!

2018-09-20

一、為什麼學習交互設計模式?
在 dyj 時期有一句口号是:人有多大膽,地有多大産,形容的是人想法有多大,那地的産量就會多大。雖然這是一種錯誤的思想,但是我們可以換個角度理解:你腦中的知識和經驗越多,你就能在更多的場景中運用自如。所以我們需要積累我們腦中的知識池子——庫。當我們有了一定的思維方式之後,我們需要依靠腦中的知識、經驗來幫助我們做專業的事情。
 
如你想成為專業的木匠,那你一定要知道不同的手法和不同的工具能夠刻畫成千上萬種不同的紋路、物件,需要日積月累。
如果你要成為專業的倫敦「的哥」,那你要完全熟悉,市中心半徑2.5公裡範圍内,超過2500條街區的道路,能夠到達客戶想要去的任何一個在此範圍内的角落。
如果你要成為資深的設計師,那你就要知道非常多的模式和形式,一般我們稱交互模式,和視覺形式。隻有當你積累足夠多不同的案例經驗之後,你才能夠成為專業的行家。
二、什麼是交互設計模式
Alan Cooper 在 about face4 中是這麼解釋的:交互設計模式是捕捉有效設計方案,并将其應用于類似問題的方法,嘗試将設計理論形式化。強調的是設計問題的解決方法。
 
我們在日常使用産品的過程中經常會接觸到一些基礎的單元,我們稱之為交互單元,研究過開發者指南的朋友肯定知道,iOS 和安卓會一些樣式有區别,但是功能相同的交互單元,比如開關、選擇器、對話框等。
 
 
 
也有同樣的手勢操作規範:點擊、滑動、長按等,由這些交互單元組合成更大的交互單元。
 
 
 
比如點擊某個圖标,頁面底部滑出一個組件 Action Sheet(動作菜單/動作面闆/行動列表),按鈕是基本單元,而 Action Sheet 則是一個複合單元。這些許許多多的交互單元通過不同的形式和結構組成了更多不同的複合單元,以便于滿足不同的用戶、任務、需求、情境、操作以及反饋。
 
三、交互設計模式如何使用
在使用之前,我們先思考以下幾個問題:
 
我的設計背景是什麼,選擇那種交互設計模式适合當前場景、任務或者流程?
這個交互設計模式有幾種不同的形式,能承載哪些不同的内容?
該交互模式的局限性是什麼?
該交互模式是否在産品其他地方使用過?在什麼情境下?需要做相應調整嗎?
 
 
1、移動設備的屏幕可以說是寸土寸金,所以 action sheet 為了承載更多内容,并減少對用戶的幹擾,它呈現了與當前頁面相關的部分操作和内容。用戶能夠通過點擊按鈕喚出該控件。
一般選項較少時,我們選擇列表形式,選項較多時為了避免列表滾動造成的誤操作建議選擇宮格形式。要注意的是 action sheet 這個組件隻可支持點擊立即跳轉的交互,并不支持輸入,也不能用在表單中。
它能防止用戶誤操作。
其實安卓也有類似的控件,但是他沒有取消按鈕,因為安卓有物理返回按鈕,同時 iOS 有些應用在使用的過程中,也沒有将取消按鈕放在底部,甚至有些在右上角放置了一個關閉按鈕。
它經常被各種軟件進行自定義控件設計,但是該交互模式無法承載太多内容,因為本身就是為了讓用戶快速對當前頁面進行額外的操作,所賦予作用。
 
 
那麼為什麼要把那麼多信息都集成到一個入口,是因為如果信息在單個頁面承載過多會導緻許多問題:目标不明确,用戶決策成本高,頁面結構混亂等等。所以為了解決該問題,這裡應運而生的使用了該交互模式。
 
那麼問題又來了,這樣的交互模式針對的問題太寬泛,難道什麼東西都可以往裡塞嗎?我的集成入口隻能放在固定的位置嗎?為什麼有的有取消按鈕,有的卻沒有呢等等。
 
2、所以交互設計模式也會出現這些情況:
 
相同的功能圖标可能發生不同的交互行為和信息展示。
即便不同的功能圖标,承載的信息也可能是相似的。
圖标的位置、形式以及所觸發的内容是由目标所決定的。
根據内容的長度可以考慮隐藏一部分功能,例如取消,用戶心智已可以理解點擊空白取消。
交互模式需要在相應的場景或者情境中去,脫離情境的交互模式是不客觀的。你會發現我們常說産品有不同的性格和風格,那麼決定産品的性格基本上是由表現形式和交互模式來共同決定的,交互模式無法像樂高那樣固定的拼湊,而更像是橡皮泥,在一定的規則下能夠進行多樣的使用。
 
 
3、我們通常将左側的下拉表單叫做為「下拉菜單」,那麼我們所知道的是:
 
下拉菜單也是表單的一種。
單行表單可以進行拼接,成為一個列表。
單行表單可能會有幾種形式:隻有左側有文字;左側有文字右側有說明還有箭頭;左側有标題右側隻有箭頭 ;當然表單還可以放置 Picker、Segment Control、Radio Button 等控件,還可以有雙行表單等。
表單不僅僅在單個page上靜态存在,還可以通過交互行為動态存在。
這樣形式的單行表單不能夠支持左滑删除。
帶箭頭的表單可以進行頁面跳轉,但是不能展開此表單。
下拉菜單沒有箭頭,但我們明顯知道,當我進行點擊後,頁面即将執行對此條件進行篩選的結果展示。
如果是一個好友列表那麼安卓長按可以删除,iOS 左滑可以删除。
以上是簡單對上圖中的交互模式進行一個分析,兩個界面中的信息,在形式上非常接近,但是不同的信息組合和結構,産生了不同的産品行為和用戶預期,為了解決不同的問題而出現的不同的模式。如果我們對這些模式不夠了解,也就無法針對不同的目标作出相應的反饋。
 
我知道你生病了,但是我不知道你得了哪種病,我沒辦法醫治你。
 
我知道你得了哪種病,但是我不知道給你吃什麼藥能讓你康複。
 
總結
越來越多的交互設計模式應運而生,我們需要不斷的去收集,形成自己的經驗。在不同情境下對交互模式進行分類歸納,等需要使用的時候即使不能快速應對也能夠從中找到或者衍生出一些符合當前情境的交互設計模式。
文章來源于網絡

(0)