很多人把微交互簡單的理解為做個(gè)動(dòng)效,實(shí)質(zhì)上,我們通常見到的那些動(dòng)效只是微交互構(gòu)成中的一部分,屬于反饋層面的視覺表達(dá)。
微交互既不是一個(gè)酷炫動(dòng)效也不是一個(gè)龐大產(chǎn)品功能,他是產(chǎn)品功能中通過一些微小的交互操作實(shí)現(xiàn)功能的細(xì)節(jié),這些細(xì)節(jié)帶給用戶的是方便和便捷,能更好的提升用戶體驗(yàn)。
總的來說,微交互給用戶帶來好的用戶體驗(yàn)主要是這幾方面:
——在用戶操作時(shí)清晰表達(dá)當(dāng)前狀態(tài)。
——給用戶提供愉悅輕松的反饋。
——用戶毫無察覺的情況下進(jìn)行了交互動(dòng)作完成了功能操作,實(shí)現(xiàn)了用戶目標(biāo)。
——操作結(jié)束后看到自己的操作結(jié)果。
接下來介紹構(gòu)成一個(gè)完整的微交互4個(gè)部分,以及如何在微交互4個(gè)構(gòu)成里設(shè)計(jì)好的用戶體驗(yàn)方案。
微交互的4個(gè)構(gòu)成部分
觸發(fā)器、規(guī)則、反饋、循環(huán)與模式這四個(gè)部分是設(shè)計(jì)和分解微交互的一種方式。觸發(fā)器啟動(dòng)微交互、規(guī)則規(guī)定微交互的工作過程、反饋向用戶說明規(guī)則、循環(huán)與模式是影響微交互的元規(guī)則。
1、什么是觸發(fā)器?
觸發(fā)器是啟動(dòng)微交互的物理控件,當(dāng)觸發(fā)控件后可以啟動(dòng)下一步交互操作。我們常見的觸發(fā)器是由用戶主動(dòng)去觸發(fā)的物理控件,比如控件、按鈕、任務(wù)欄、圖標(biāo)等。要讓人知道功能如何操作,微交互的觸發(fā)器就要設(shè)計(jì)得吸引人、讓人明白這個(gè)操作功能。在設(shè)計(jì)中也要理解用戶要干什么,讓觸發(fā)器的位置跟用戶需求相吻合。
除了用戶主動(dòng)觸發(fā)的物理控件外,還有一些是系統(tǒng)觸發(fā)的,無需用戶接入,只需要滿足條件就會(huì)自動(dòng)觸發(fā)。比如系統(tǒng)錯(cuò)誤、收到數(shù)據(jù)觸等。
2、什么是微交互規(guī)則?
每款游戲背后就是一套游戲玩法,同樣每個(gè)微交互也是一組被設(shè)計(jì)的規(guī)則。微交互中的規(guī)則是在任務(wù)過程中規(guī)定用戶什么可以做,什么可以不做,按照什么順序做。這個(gè)規(guī)則反映的是業(yè)務(wù)邏輯、用戶使用邏輯。
舉個(gè)電商購物例子:把一件商品加入購物車的微交互,最初規(guī)則就是單擊“購物車”圖標(biāo),商品就被添加到“購物車”中,購物車tabbar圖標(biāo)也相應(yīng)出現(xiàn)數(shù)字。但在設(shè)計(jì)規(guī)則中,要考慮用戶是否購買過,如果購買過商品旁邊購物車圖標(biāo)改為了“數(shù)字加減”,當(dāng)再次加入則業(yè)務(wù)邏輯限制出現(xiàn)提示。
3、什么是微交互反饋?
以最簡單的按鈕常見兩種反饋為例:
按鈕狀態(tài)變化—表明用戶干了什么(按了按鈕)
按了后發(fā)生什么(跳轉(zhuǎn)下一頁或者結(jié)果發(fā)生等等)
反饋的目的是為了幫助用戶理解微交互的操作,通過一些反饋的狀態(tài)告訴用戶剛才做了什么,到了什么階段,可以干什么,結(jié)束時(shí)什么不能干。反饋的方式也取決于微交互的規(guī)則設(shè)計(jì)、硬件設(shè)備、數(shù)據(jù)接收等。
例如下載文件,下載過程中有進(jìn)度條的顯示,顯示文件多大,當(dāng)前下載速度(數(shù)據(jù)顯示),剩余多久時(shí)間完成。
4、什么是循環(huán)與模式?
以iphone鬧鐘為例:用戶目標(biāo)是指定時(shí)間鬧鈴,那么鬧鈴什么時(shí)候會(huì)響,提示用戶設(shè)置鬧鈴是模式。循環(huán)就是多久再響一次,長循環(huán)就是用戶重復(fù)設(shè)置鬧鈴的提示。
模式是規(guī)則的一個(gè)分支,最主要目的就是執(zhí)行一種不常見的動(dòng)作。常見的模式就是設(shè)置,用戶可以在其中指定一些有關(guān)微交互的選項(xiàng)。循環(huán)的核心就是確定微交互的持續(xù)時(shí)間,也是擴(kuò)展微交互的生命周期,循環(huán)的參數(shù)是用戶體驗(yàn)的最佳方式,循環(huán)由規(guī)則指明。
如何設(shè)計(jì)微交互創(chuàng)建出色用戶體驗(yàn)方案
1、設(shè)計(jì)微交互之前的思考
明確用戶操作微交互的目標(biāo)
設(shè)計(jì)一個(gè)優(yōu)秀的微交互體驗(yàn)方案,首先要了解用戶,知道用戶要達(dá)到什么目的,經(jīng)歷哪些步驟,不同情況下的操作環(huán)境。比如用戶要給朋友轉(zhuǎn)賬,這是用戶的目標(biāo),轉(zhuǎn)賬數(shù)額是否充足、朋友賬號(hào)的顯示是否正確、轉(zhuǎn)賬成功與否屬于操作中的微交互的步驟與不同情況。
設(shè)計(jì)清晰的規(guī)則—微交互邏輯圖
在了解完用戶的目標(biāo)后,接下來就要分析用戶經(jīng)過多少步驟從初始達(dá)到目標(biāo),會(huì)有多少種情況。還是以微交互主要構(gòu)成部分拆分:
觸發(fā)器如何被觸發(fā)?
操作期間用戶可以進(jìn)行什么行為?
交互發(fā)生的順序和時(shí)間?
使用數(shù)據(jù)及來源?
簡潔的配置及參數(shù)?
什么反饋?
處于什么模式?
是否重復(fù),多久重復(fù)?
微交互結(jié)束發(fā)生什么?
約束條件:設(shè)計(jì)微交互規(guī)則中考慮業(yè)務(wù)、環(huán)境、技術(shù)的約束。例如電商中秒殺、滿減業(yè)務(wù)的邏輯,會(huì)導(dǎo)致微交互的狀態(tài)不一樣。
設(shè)計(jì)規(guī)則:規(guī)則隨著條件的的增加,操作越復(fù)雜,運(yùn)用邏輯關(guān)系圖會(huì)更清晰明了。
舉個(gè)例子:設(shè)想一個(gè)音頻播放器的例子,我們需要一個(gè)清晰可完成的目標(biāo):成功播放音頻內(nèi)容。在構(gòu)思中,做一個(gè)規(guī)則判斷:用戶來到頁面是否要繼續(xù)上次的音頻?就這么簡單,然后針對(duì)規(guī)則做出解決方案,最后的目標(biāo)是“用戶成功播放音頻內(nèi)容”。在下圖中的細(xì)化設(shè)計(jì),規(guī)則也變得越來越多,越來越復(fù)雜,這些設(shè)計(jì)會(huì)讓用戶越來越接近最終的目標(biāo)。
2、微交互其他構(gòu)成部分的設(shè)計(jì)
觸發(fā)器的設(shè)計(jì)
——觸發(fā)器的設(shè)計(jì)引人注目、明顯的位置、狀態(tài)的清晰、以較少的信息傳達(dá)。
——用戶心智:符合大多數(shù)用戶的操作習(xí)慣,降低用戶的理解成本。比如一個(gè)購物車圖標(biāo),一個(gè)標(biāo)簽?zāi)茏層脩糁苯用靼滓鈭D。
——展示數(shù)據(jù):在激活觸發(fā)器前,思考什么信息展示對(duì)用戶最有價(jià)值。比如未讀信息等、進(jìn)展數(shù)據(jù)等。
反饋的設(shè)計(jì)
——制造情感化的個(gè)性氛圍——比如“又忘記密碼啦,真衰”這些擬人化語氣,需要根據(jù)產(chǎn)品特性建立一套有性格特征的反饋個(gè)性。
——利用視覺、聽覺、觸覺或者它們的組合提升吸引力。
——視覺方法:利用趣味動(dòng)畫來吸引注意,有利于激發(fā)用戶交互的興趣。
——增加手勢、聲音、觸覺方法:強(qiáng)化用戶動(dòng)作,比如按壓、聲音、觸摸、震動(dòng)等
知乎APP“贊”功能點(diǎn)擊后手機(jī)震動(dòng)
——操作中反饋提升用戶掌控感
——讓用戶看到自己的操作結(jié)果:給予用戶的信息輸入進(jìn)行視覺化呈現(xiàn),并提供反饋。
——用戶預(yù)防錯(cuò)誤:例如錯(cuò)誤情況、限制數(shù)量等,幫助用戶將操作錯(cuò)誤率降到最低。
——讓用戶看到交互進(jìn)程:用戶使用產(chǎn)品時(shí),能看到進(jìn)程,及時(shí)獲得信息。
——Less is more,減少反饋信息復(fù)雜度,直接傳達(dá)操作:減少動(dòng)畫形式過度、信息的復(fù)雜度、重復(fù)性。
設(shè)計(jì)規(guī)則解決復(fù)雜性——化繁為簡
微交互的目標(biāo)正是幫助用戶從繁瑣的任務(wù)流中解脫出來,減少額外步驟,用最少步驟完成用戶目標(biāo)。
——解決最核心的復(fù)雜性
找到復(fù)雜性出現(xiàn)在什么地方,用戶在什么地方最容易出錯(cuò),用戶可以控制哪些內(nèi)容,用戶在什么時(shí)候可以去修改這些內(nèi)容。
——快速計(jì)算、多任務(wù)執(zhí)行、數(shù)據(jù)記憶等幫用戶節(jié)省操作
比如,登錄中最容易出錯(cuò)的地方是密碼忘記,用戶掌握著密碼的輸入權(quán)限修改權(quán)限,利用記錄密碼則是簡化登錄密碼的操作。
——較少的選項(xiàng)和默認(rèn)項(xiàng)
給用戶選擇越多,規(guī)則就越多,規(guī)則少微交互就越容易理解,因此給用戶少的選擇,幫用戶提供一些默認(rèn)項(xiàng)是一個(gè)聰明的辦法。
模式、循環(huán)的算法設(shè)計(jì)
順序:各個(gè)步驟的先后順序,哪個(gè)在前,哪個(gè)在后,有沒有條件。
決定:通常都是如果……就……的形式。
重復(fù):循環(huán)步驟。例如,搜索字段輸入時(shí),每輸入一個(gè)新字段就更新一次結(jié)果。
變量:變量是容器,是算法的巨大威力來源。搜索結(jié)果、經(jīng)過步驟都是變量,變量可以是數(shù)值字符或邏輯值。
小結(jié):細(xì)節(jié)成就卓越
總的來說,微交互雖然在操作過程中感知很微小,但在用戶體驗(yàn)過程中,微交互卻是不可缺少的重要環(huán)節(jié),這也是我經(jīng)常提到的細(xì)節(jié)成就卓越。微交互中最終還是為了幫助用戶輔助實(shí)現(xiàn)某些功能,以產(chǎn)品任務(wù)為單位,進(jìn)行的多個(gè)交互的組合,會(huì)涉及不同使用場景、規(guī)則、模式、數(shù)據(jù)算法等,最終只為讓用戶在毫無知覺的情況下完成交互操作,實(shí)現(xiàn)功能操作,完成用戶目標(biāo)。
不可被忽略的技術(shù)發(fā)展與更新
我們發(fā)現(xiàn),目前現(xiàn)在習(xí)以為常的交互方式都曾經(jīng)歷過一次次的迭代更新,隨著技術(shù)的快速發(fā)展不斷推進(jìn)微交互創(chuàng)新的發(fā)展,帶來的是更簡單便捷的操作。比如手機(jī)鎖屏解鎖操作:隨著手機(jī)觸屏技術(shù)、指紋、人臉識(shí)別先進(jìn)科技,解鎖屏幕越來越快捷,甚至沒有感覺就通過人臉識(shí)別解開了。隨著觸摸屏、傳感器、語音和手勢應(yīng)用,這些新興的技術(shù)與新的交互手段將進(jìn)一步觸發(fā)微交互的發(fā)展。
如今,隨著5G網(wǎng)絡(luò)的到來,將會(huì)推動(dòng)更多的創(chuàng)新微交互,而這些微交互創(chuàng)新體驗(yàn)涉及的控制、規(guī)則、模式遠(yuǎn)比開關(guān)燈抽象得多。
本文作者:詠舍
題圖:
全站高品質(zhì)素材免費(fèi)下載!