產(chǎn)品設(shè)計(jì)必須知道的交互設(shè)計(jì)模式
很多人在這個(gè)信息爆炸的移動(dòng)時(shí)代,更想看到一些所謂的“干貨”,干貨到底是什么,可以直接拿來上手的是干貨嗎?還是需要你經(jīng)過判斷和思維轉(zhuǎn)化再處理得到的屬于自己的啟發(fā)?本篇交互模式大家可以更好的思考,歸納。
1. 為什么學(xué)習(xí)交互設(shè)計(jì)模式
在dyj時(shí)期有一句口號(hào)是:人有多大膽,地有多大產(chǎn),形容的是人想法有多大,那地的產(chǎn)量就會(huì)多大。這是雖然一種錯(cuò)誤的思想,但是我們可以換個(gè)角度理解:你腦中的知識(shí)和經(jīng)驗(yàn)越多,你就能在更多的場(chǎng)景中運(yùn)用自如。所以我們需要積累我們腦中的知識(shí)池子,庫。當(dāng)我們有了一定的思維方式之后,我們需要依靠腦中的知識(shí)、經(jīng)驗(yàn)來幫助我們做專業(yè)的事情。
如你想成為專業(yè)的木匠,那你一定要知道不同的手法和不同的工具能夠刻畫成千上萬種不同的紋路、物件,需要日積月累。
如果你要成為專業(yè)的倫敦”的哥”,那你要完全熟悉,市中心半徑2.5公里范圍內(nèi),超過2500條街區(qū)的道路,能夠到達(dá)客戶想要去的任何一個(gè)在此范圍內(nèi)的角落。
如果你要成為資深的設(shè)計(jì)師,那你就要知道非常多的模式和形式,一般我們稱交互模式,和視覺形式。只有當(dāng)你積累足夠多不同的案例經(jīng)驗(yàn)之后,你才能夠成為專業(yè)的行家。
2. 什么是交互設(shè)計(jì)模式
Alan Cooper在about face4中是這么解釋的:交互設(shè)計(jì)模式是捕捉有效設(shè)計(jì)方案,并將其應(yīng)用于類似問題的方法,嘗試將設(shè)計(jì)理論形式化。強(qiáng)調(diào)的是設(shè)計(jì)問題的解決方法。
我們?cè)谌粘J褂卯a(chǎn)品的過程中經(jīng)常會(huì)接觸到一些基礎(chǔ)的單元,我們稱之為交互單元,研究過開發(fā)者指南的朋友肯定知道,iOS和安卓會(huì)有一些樣式有區(qū)別但是功能相同的交互單元,比如開關(guān)、選擇器、對(duì)話框等。
也有同樣的手勢(shì)操作規(guī)范:點(diǎn)擊、滑動(dòng)、長(zhǎng)按等,由這些交互單元組合成更大的交互單元
比如點(diǎn)擊某個(gè)圖標(biāo),頁面底部滑出一個(gè)組件Action Sheet(動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表),按鈕是基本單元,而Action Sheet則是一個(gè)復(fù)合單元。這些許許多多的交互單元通過不同的形式和結(jié)構(gòu)組成了更多不同的復(fù)合單元,以便于滿足不同的用戶、任務(wù)、需求、情境、操作以及反饋。
3. 交互設(shè)計(jì)模式如何使用
在使用之前,我們先思考以下幾個(gè)問題:
- 我的設(shè)計(jì)背景是什么,選擇那種交互設(shè)計(jì)模式適合當(dāng)前場(chǎng)景、任務(wù)或者流程?
- 這個(gè)交互設(shè)計(jì)模式有幾種不同的形式,能承載哪些不同的內(nèi)容?
- 該交互模式的局限性是什么?
- 該交互模式是否在產(chǎn)品其他地方使用過?在什么情境下?需要做相應(yīng)調(diào)整嗎?
以下進(jìn)行三個(gè)案例進(jìn)行分析:
案例1:Action Sheet
(1)移動(dòng)設(shè)備的屏幕可以說是寸土寸金,所以action sheet為了承載更多內(nèi)容,并減少對(duì)用戶的干擾,他呈現(xiàn)了與當(dāng)前頁面相關(guān)的部分操作和內(nèi)容。用戶能夠通過點(diǎn)擊按鈕喚出該控件。
(2)一般選項(xiàng)較少時(shí),我們選擇列表形式,選項(xiàng)較多時(shí)為了避免列表滾動(dòng)造成的誤操作建議選擇宮格形式。要注意的是action sheet這個(gè)組件只可支持點(diǎn)擊立即跳轉(zhuǎn)的交互,并不支持輸入,也不能用在表單中。
(3)它能防止用戶誤操作
(4)其實(shí)安卓也有類似的控件,但是他沒有取消按鈕,因?yàn)榘沧坑形锢矸祷匕粹o,同時(shí)iOS有些應(yīng)用在使用的過程中,也沒有將取消按鈕放在底部,甚至有些在右上角放置了一個(gè)關(guān)閉按鈕。
(5)它經(jīng)常被各種軟件進(jìn)行自定義控件設(shè)計(jì),但是該交互模式無法承載太多內(nèi)容,因?yàn)楸旧砭褪菫榱俗層脩艨焖賹?duì)當(dāng)前頁面進(jìn)行額外的操作,所賦予作用。
案例2:圖標(biāo)按鈕
第一張和第二張界面長(zhǎng)的非常相似的控件,都是通過右上角一個(gè)功能圖標(biāo)通過點(diǎn)擊行為后觸發(fā)的。那么為什么要把那么多信息都集成到一個(gè)入口,是因?yàn)槿绻畔⒃趩蝹€(gè)頁面承載過多會(huì)導(dǎo)致許多問題:目標(biāo)不明確,用戶決策成本高,頁面結(jié)構(gòu)混亂等等。所以為了解決該問題,這里應(yīng)運(yùn)而生的使用了該交互模式。
那么問題又來了,這樣的交互模式針對(duì)的問題太寬泛,難道什么東西都可以往里塞嗎?我的集成入口只能放在固定的位置嗎?為什么有的有取消按鈕有的卻沒有呢等等
所以交互設(shè)計(jì)模式也會(huì)出現(xiàn)這些情況:
- 相同的功能圖標(biāo)可能發(fā)生不同的交互行為和信息展示;
- 即便不同的功能圖標(biāo),承載的信息也可能是相似的;
- 圖標(biāo)的位置、形式以及所觸發(fā)的內(nèi)容是由目標(biāo)所決定的;
- 根據(jù)內(nèi)容的長(zhǎng)度可以考慮隱藏一部分功能,例如取消,用戶心智已可以理解點(diǎn)擊空白取消。
交互模式需要在相應(yīng)的場(chǎng)景或者情境中去,脫離情境的交互模式是不客觀的。你會(huì)發(fā)現(xiàn)我們常說產(chǎn)品有不同的性格和風(fēng)格,那么決定產(chǎn)品的性格基本上是由表現(xiàn)形式和交互模式來共同決定的,交互模式無法像樂高那樣固定的拼湊,而更像是橡皮泥,在一定的規(guī)則下能夠進(jìn)行多樣的使用。
案例3:表單
我們通常將左側(cè)的下拉表單叫做為“下拉菜單”,那么我們所知道的是:
- 下拉菜單也是表單的一種
- 單行表單可以進(jìn)行拼接,成為一個(gè)列表
- 單行表單可能會(huì)有幾種形式:a.只有左側(cè)有文字 ?b.左側(cè)有文字右側(cè)有說明還有箭頭 ? c.左側(cè)有標(biāo)題右側(cè)只有箭頭 ?d.當(dāng)然表單還可以放置Picker、Segment Control、Radio Button等控件,還可以有雙行表單等
- 表單不僅僅在單個(gè)page上靜態(tài)存在,還可以通過交互行為動(dòng)態(tài)存在。
- 這樣形式的單行表單不能夠支持左滑刪除
- 帶箭頭的表單可以進(jìn)行頁面跳轉(zhuǎn),但是不能展開此表單
- 下拉菜單沒有箭頭,但我們明顯知道,當(dāng)我進(jìn)行點(diǎn)擊后,頁面即將執(zhí)行對(duì)此條件進(jìn)行篩選的結(jié)果展示
- 如果是一個(gè)好友列表那么安卓長(zhǎng)按可以刪除,iOS左滑可以刪除。
- ……
以上是簡(jiǎn)單對(duì)以上圖中的交互模式進(jìn)行一個(gè)分析,兩個(gè)界面中的信息,在形式上非常接近,但是不同的信息組合和結(jié)構(gòu),產(chǎn)生了不同的產(chǎn)品行為和用戶預(yù)期,為了解決不同的問題而出現(xiàn)的不同的模式。如果我們對(duì)這些模式不夠了解,也就無法針對(duì)不同的目標(biāo)作出相應(yīng)的反饋。
我知道你生病了,但是我不知道你得了哪種病,我沒辦法醫(yī)治你。
我知道你得了哪種病,但是我不知道給你吃什么藥能讓你康復(fù)。
總結(jié)
越來越多的交互設(shè)計(jì)模式應(yīng)運(yùn)而生,我們需要不斷的去收集,形成自己的經(jīng)驗(yàn)。在不同情境下對(duì)交互模式進(jìn)行分類歸納,等需要使用的時(shí)候即使不能快速應(yīng)對(duì)也能夠從中找到或者衍生出一些符合當(dāng)前情境的交互設(shè)計(jì)模式。
#專欄作家#
應(yīng)駿(Yjjj),人人都是產(chǎn)品經(jīng)理專欄作家,公眾號(hào):應(yīng)謀鬼計(jì)(shejishiyj)
本文由 @Yjjj 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Pexels,基于 CC0 協(xié)議
- 目前還沒評(píng)論,等你發(fā)揮!