一篇文章看懂交互中的細(xì)節(jié)-微交互

2021-9-27    lanlanwork

 

1 微交互的定義

微交互通常是指一些比較細(xì)節(jié)性的操作行為的反饋,通常是某單個(gè)事件或者交互行為。微交互可以是產(chǎn)品的部分功能或者就是產(chǎn)品本身,例如我們?nèi)粘I钍褂弥械恼ブ瓩C(jī),它提供一個(gè)功能,就是將我們放進(jìn)的水果榨成鮮榨果汁,或者我們上完洗手間,把手伸到水龍頭下面的時(shí)候,水會(huì)自動(dòng)的流出來,而不用按下任何的按鈕,這便是現(xiàn)實(shí)物理世界的一種微交互,因?yàn)樗脑O(shè)計(jì)是單個(gè)功能的動(dòng)作,使水從水龍頭中流出。

所以微交互通常是專注于某個(gè)事件或某個(gè)單個(gè)任務(wù),例如我們最常使用的點(diǎn)贊后的反饋就是一次微交互事件。

 

1.10 微交互誕生的背景

計(jì)算機(jī)科學(xué)家拉里·特斯勒(Larry Tesler)在為施樂Xerox電腦的文字處理軟件Gypsy設(shè)計(jì)程序時(shí),突發(fā)奇想,給軟件Gypsy加入了鼠標(biāo)操作和GUI圖形界面,這樣便大大的方便了Gypsy作為文字處理軟件的實(shí)用性與便捷性,于是在不斷體驗(yàn)與嘗試的過程中,于是拉里·特斯勒在改版的時(shí)候,給Gypsy加入了復(fù)制、粘貼功能鍵。這些概念隨后成為了文本編輯與計(jì)算機(jī)操作系統(tǒng)用戶界面的基石之一。

拉里·特斯勒其實(shí)當(dāng)初設(shè)計(jì)復(fù)制和粘貼的思路便是減少用戶操作的阻力,讓用戶在使用過程中不會(huì)被其他的事物所打斷,往后的數(shù)十年,拉里都為了這個(gè)目標(biāo)在奮斗,所以“復(fù)制”和“粘貼”便是精心設(shè)計(jì)過的微交互,沒有任何提示和阻力,一氣呵成的便捷交互。

交互設(shè)計(jì)以及人機(jī)交互在不斷的發(fā)展的歷史,實(shí)際上就是微交互的歷史。今天,我們在桌面和筆記本電腦中、在移動(dòng)設(shè)備中習(xí)以為常的那些交互方式, 都曾引發(fā)過微交互設(shè)計(jì)的革命。無論是保存文檔,還是把文件拖放文件夾,還是連接到Wi-Fi網(wǎng)絡(luò),都曾經(jīng)是精心設(shè)計(jì)的微交互。就連滾動(dòng)和打開多個(gè)窗口這么“基本的”交互方式,也都要經(jīng)過設(shè)計(jì)。技術(shù)在快速發(fā)展,不斷對微交互提出創(chuàng)新的要求。用戶習(xí)慣了拿來就用,他們只會(huì)關(guān)注更好的交互方式,或者是那些由于技術(shù)發(fā)展催生的、或強(qiáng)制必須使用的微交互方式。

所以,好的微交互就像“Ctrl+C””Ctrl+v”那樣方便,會(huì)改善我們的使用體驗(yàn)。

 

1.20 移動(dòng)端微交互應(yīng)用場景的發(fā)展歷程

還是“復(fù)制”“粘貼”的例子,我們在功能機(jī)的時(shí)代,我們想要把一段文字從一個(gè)軟件復(fù)制到另外一個(gè)軟件上,我們通常要在兩個(gè)軟件不停止的去切換,然后通過記憶內(nèi)容然后在來輸入,這樣的效率和精準(zhǔn)度都不是很高,而且要是需要復(fù)制的內(nèi)容過于龐大,想要完成便是一件讓人頭疼和心累的事情。

但是在進(jìn)入移動(dòng)智能機(jī)的時(shí)代,該功能的微交互便發(fā)生的天翻地覆的變化,第一步我們只需用長按需要復(fù)制的文字,調(diào)出復(fù)制按鈕,第二步,選中我們需要復(fù)制的文本內(nèi)容,第三步便是切換到需要粘貼文字的APP,第四步,長按調(diào)出粘貼按鈕,選擇粘貼文字,這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準(zhǔn)確度上都有了不小的飛躍。

但是隨著技術(shù)的革新和從業(yè)者對于用戶體驗(yàn)的理解更加深刻,我們的操作追求更高效,更精準(zhǔn),于是,該場景的交互又迎來的一次技術(shù)的變革,為了跟上時(shí)代的發(fā)展與用戶的訴求,在2016年10月19日的錘子手機(jī)發(fā)布會(huì)上,它推出了兩個(gè)功能:“Big Bang”和“One Step”?!癇ig Bang”的功能是長按一段文字,可以根據(jù)算法自動(dòng)將文字的內(nèi)容分割獨(dú)立的詞語按鈕,只需點(diǎn)擊這些分割的按鈕就可以選擇想要的內(nèi)容。而“一步”可以直接將所選內(nèi)容拖動(dòng)到其他目標(biāo)應(yīng)用程序中,而無需在應(yīng)用程序之間切換。這兩個(gè)功能的結(jié)合,將之前需要四個(gè)步驟的功能簡化為只有兩個(gè)步驟:第一步是按下選擇內(nèi)容;第二步,拖動(dòng)到目標(biāo)應(yīng)用程序。

在2021年6月8日凌晨,一年一度的蘋果WWDC大會(huì)在線上正式舉行,ios帶來了類似于“big bang”的功能:live text,也宣告著這個(gè)小小復(fù)制粘貼功能又完成了一次新的進(jìn)化,所以,無論是“l(fā)ive text”還是“Big Bang”,這兩個(gè)功能本質(zhì)其實(shí)就是微交互的進(jìn)化,只不過用了兩個(gè)不同的名字去代表而已。

 

1.30 為什么要重視微交互

微交互在的存在是為了讓用戶在體驗(yàn)過程中感覺舒適和流暢。因?yàn)槲⒔换ニ赡茉诋a(chǎn)品中出現(xiàn)頻次會(huì)比較多,以至于很多用戶會(huì)忽視甚至感覺不到它的存在。

相信很多男生的夢想都是擁有一輛法拉利的車吧,法拉利的無論是在車外觀造型上的設(shè)計(jì)還是發(fā)動(dòng)機(jī)的挑選,都是讓人心曠神怡,但是,無論這輛車多么優(yōu)秀,一個(gè)車胎漏氣的法拉利都會(huì)破壞整個(gè)良好體驗(yàn)中的氛圍。

所以在產(chǎn)品中的微交互絕大多數(shù)是微小且不會(huì)引起用戶的關(guān)注,但是它的存在確實(shí)讓產(chǎn)品有更加流暢且自然的用戶體驗(yàn)。

通常微交互完整的可以達(dá)到以下三點(diǎn)目的:1.提高用戶的留存      2.放大品牌價(jià)值      3.提升可用性。

 

1.31 提高用戶的留存

設(shè)計(jì)師對于每一次微交互的設(shè)計(jì),都是為了讓用戶自然且路徑清晰高效的完成任務(wù),用戶在潛意識(shí)要確認(rèn)對本次體驗(yàn)的滿意度時(shí),用戶自身會(huì)經(jīng)歷一種對“時(shí)間忽視”的現(xiàn)象,即會(huì)忘記本次體驗(yàn)所需要花費(fèi)的時(shí)間,而會(huì)專注于當(dāng)前的事情。

  • 峰終定律

無論是正向的還是負(fù)向的,開始時(shí)與結(jié)束時(shí)的感覺,這就是峰終定律(Peak-End Rule)。這條定律基于潛意識(shí)總結(jié)體驗(yàn)的特點(diǎn):對一項(xiàng)事物的體驗(yàn)之后,所能記住的就只是在峰與終時(shí)的體驗(yàn),而在過程中好與不好體驗(yàn)的比重、好與不好體驗(yàn)的時(shí)間長短,對記憶差不多沒有影響。

所以好的微交互應(yīng)該注重于用戶的“峰終定律”體驗(yàn),如果處理得當(dāng),微交互會(huì)持續(xù)的刺激用戶大腦中的多巴胺的釋放,從而創(chuàng)造出小小的愉悅時(shí)刻。

這些會(huì)有助于改善用戶的體驗(yàn)并提升用戶繼續(xù)使用我們的產(chǎn)品的可能性,有助于提升產(chǎn)品的留存率。

 

1.32 傳遞品牌記憶

微交互比較有價(jià)值的地方就是它有機(jī)會(huì)讓我們在用戶心智中建立品牌的影響,讓用戶對我們的品牌更有記憶力。

人們通常對品牌認(rèn)知記憶最基礎(chǔ)便是圖形,但是品牌的傳遞的記憶點(diǎn)除了圖像還可以一段標(biāo)志性的動(dòng)作或者是一段旋律。

通常微交互傳遞品牌記憶有兩點(diǎn):1.標(biāo)志動(dòng)作   2.標(biāo)志聲音。

 

  • (1)標(biāo)志動(dòng)作

我記得有次看綜藝節(jié)目,里面請到了一個(gè)選秀的出來的團(tuán)叫“R1SE”,在表演完一段唱跳后,在自我介紹后,他們表演了一段團(tuán)隊(duì)的“團(tuán)隊(duì)動(dòng)作”,這個(gè)在外人看來這無疑是“社死”尷尬瞬間,但是在品牌傳播的角度,這種標(biāo)志性的動(dòng)作確實(shí)有有助于傳播,例如邁克爾杰克遜的招牌動(dòng)作太空步是很經(jīng)典的一個(gè)但有兩種,一種是倒滑,另一種是側(cè)滑,還有傾斜45°,無論是誰在去模仿,都很容易容易讓人想起邁克爾杰克遜,另外一個(gè)就是諾基亞的開機(jī)畫面的“手牽手的動(dòng)作”,更是陪伴一代人的青春,所以無論是哪個(gè)說唱廠牌和選秀出來的團(tuán),都是設(shè)定自己的團(tuán)的固定的動(dòng)作,都是有助于讓自己的特點(diǎn)使粉絲產(chǎn)生記憶的聯(lián)想。

而在微交互的設(shè)計(jì)結(jié)構(gòu)中,也是包含動(dòng)作這一設(shè)定的。

 

  • (2)標(biāo)志聲音

我們在聽到“噔,等噔等噔”等時(shí)候,我們便會(huì)想起英特爾的廣告,所以每個(gè)手機(jī)品牌的都會(huì)給自己短信、系統(tǒng)通知和電話來電設(shè)計(jì)獨(dú)特的聲音,讓用戶在只在聽的階段,還沒掏出設(shè)備,便可以判斷是什么品牌手機(jī)。

在微交互的設(shè)計(jì)中,聲音也組成了微交互的一部分,所以合理的應(yīng)用微交互有助于用戶對品牌多維度的記憶。

 

1.33 提升可用性

微交互的設(shè)計(jì),包含了為用戶提供持續(xù)的反饋方式,當(dāng)用戶在迅雷和百度云盤在下載成功時(shí),除了提供的反饋,也會(huì)提供聲音的提示反饋,考慮的是一般下載大型文件的時(shí)候,我們不可能實(shí)時(shí)的等待在設(shè)備前面,我們只用通過聲音便可以知道是否下載完成了。大多數(shù)iPhone用戶遇到的一個(gè)常見的微觀交互是在鎖屏幕上輸入密碼。如果輸入了錯(cuò)誤的密碼,則屏幕在清除密碼時(shí)會(huì)震動(dòng)。在整個(gè)過程中,屏幕上不會(huì)出現(xiàn)任何文本來指示用戶出了什么問題,用戶也可以根據(jù)使用經(jīng)驗(yàn)來判斷當(dāng)前進(jìn)行到哪一步了,所以,因?yàn)檫@些細(xì)微的反饋細(xì)節(jié),整個(gè)用戶體驗(yàn)變得更加直觀和方便,讓用戶的可用性大大提升了。

 

1.40 微交互與動(dòng)效的關(guān)系

我們需要了解的是微交互與動(dòng)效還是有區(qū)別的。動(dòng)效囊括的范圍比較廣泛,它可以與多個(gè)功能和頁面進(jìn)行補(bǔ)充和解釋,而微交互則是只針對一個(gè)功能進(jìn)行優(yōu)化,所以針對一個(gè)功能的細(xì)小的動(dòng)效可以算作是一次微交互,它是輔助用戶更好的對本次功能的操作。

 

1.50 微交互與交互的區(qū)別

交互設(shè)計(jì)是串聯(lián)起產(chǎn)品各個(gè)頁面與功能反饋的工作,如果缺少了某個(gè)交互環(huán)節(jié)可能會(huì)導(dǎo)致產(chǎn)品的BUG或其他負(fù)面情況,交互設(shè)計(jì)簡單的來說就是滿足了產(chǎn)品的可用性。然而微交互的存在是為了給產(chǎn)品提升易用性與好用性,能起到錦上添花的作用。

例如我們常用的點(diǎn)贊功能,用戶在點(diǎn)擊過后,一個(gè)線性的點(diǎn)贊圖標(biāo)變?yōu)樘畛涞募t色圖標(biāo),這是完成了一次交互行為的閉環(huán),微交互則是讓本次點(diǎn)贊由線性變?yōu)樘畛涞倪^程怎么更有趣,更有意思,更加讓用戶在本次點(diǎn)贊中得到滿足感。

 

1.60 微交互的應(yīng)用場景

微交互的在產(chǎn)品中的應(yīng)用場景也是比較廣泛,那些小的細(xì)節(jié)都可以提升用戶體驗(yàn),通常在不同的場景下也能體現(xiàn)出不同的細(xì)節(jié)。

微交互不是刻意的,而是被動(dòng)發(fā)現(xiàn)問題的優(yōu)化過程,當(dāng)靜態(tài)設(shè)計(jì)不能滿足的時(shí)候,可以考慮動(dòng)態(tài)的微交互設(shè)計(jì),

所以,我們需要考慮如何滿足用戶的操作體驗(yàn),微交互是否幫產(chǎn)品的數(shù)據(jù)上有提升,設(shè)計(jì)角度上微交互是否有創(chuàng)意。

 

1.61 系統(tǒng)可見性

用戶只有知道當(dāng)前系統(tǒng)狀態(tài)是怎樣的,用戶才能做出更改,也就是說消除評(píng)估和執(zhí)行之間的鴻溝并弄清楚下一步需要做什么才能更好的完成任務(wù)。系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)通過適當(dāng)?shù)姆答佔(zhàn)層脩羟宄私庹诎l(fā)生的情況和目前的狀態(tài),例如,開車時(shí)儀表盤的速度指示駕駛者減速還是加速,信息獲取的缺失一般代表著控制的缺失。

 

  • (1)明確位置

無論是在現(xiàn)實(shí)還是在產(chǎn)品的使用狀態(tài),對于迷失方向感都是一件讓人沒有安全感的事情,也對接下來的操作造成比較大的影響,所以我們可以通過微交互吸引用戶的注意力,讓用戶能合理的明確自己現(xiàn)在所在的位置。

 

  • (2)反饋進(jìn)度

每當(dāng)用戶與系統(tǒng)交互時(shí),他們都需要知道交互是否成功,如果因?yàn)楦鞣N原因,系統(tǒng)無法及時(shí)反饋,我們應(yīng)該給與用戶進(jìn)度的反饋,或者是用戶在進(jìn)行某些任務(wù)的時(shí)候,我們應(yīng)該分步驟給用戶,并在執(zhí)行的過程中給與用戶當(dāng)前的進(jìn)度,來預(yù)估完成該任務(wù)還需要多久。

 

1.62 系統(tǒng)反饋

每當(dāng)用戶和系統(tǒng)發(fā)生交互時(shí),用戶需要知道操作是否成功。而這個(gè)反饋的過程適合的微交互可以增添用戶在使用過程中的趣味性,另外一種便是可以增強(qiáng)用戶在使用過程中的“確定性”,避免用戶在點(diǎn)擊后因?yàn)榉答伈惶黠@而誤以為沒有點(diǎn)擊的錯(cuò)覺。

  • (1)點(diǎn)擊后的反饋

按鈕是我們在使用APP中使用頻次最多的交互功能,根據(jù)場景的不同,我們需要反饋的樣式也是不一樣的,比如,我們的點(diǎn)贊后的反饋微交互應(yīng)該是積極正向的,當(dāng)這個(gè)按鈕的功能屬于功能形式的時(shí)候,我們的反饋應(yīng)該是給與用戶明確的反饋,例如我們開關(guān)按鈕,讓用戶能明確當(dāng)前按鈕的狀態(tài)。

 

  • (2)引導(dǎo)視線

按鈕的能給與用戶除了功能方面的微交互的反饋外,還有一種是點(diǎn)擊用途的反饋,例如,我們常常使用的美團(tuán)外賣,我們在選好我們想要的商品后,點(diǎn)擊后我們會(huì)看到商鋪成拋物線的進(jìn)了購物車,這樣微交互的就是非常明確的告訴用戶你先選擇的東西可以去哪里找到。

 

1.63.系統(tǒng)狀態(tài)

系統(tǒng)的狀態(tài)從本質(zhì)上講和溝通的透明度有關(guān),系統(tǒng)狀態(tài)的可見性是指系統(tǒng)狀態(tài)傳達(dá)給用戶的程度,理想的情況是,系統(tǒng)應(yīng)該始終在合理的時(shí)間內(nèi)通過適當(dāng)?shù)姆答伿褂脩袅私猱?dāng)前發(fā)生的情況。

  • (1)當(dāng)前的系統(tǒng)狀態(tài)

我們在生活中,要是當(dāng)前手上事情比較忙碌,無法幫助別人去處理一些事情或者無法回音別人的消息的時(shí)候,我們應(yīng)該告知對方,這是比較禮貌的一件事情。

所以當(dāng)我們的系統(tǒng)正在加載中、或者在執(zhí)行某項(xiàng)工作的時(shí)候,應(yīng)該通過微交互的方式告知用戶,讓用戶知道我們的產(chǎn)品并沒有宕機(jī),而是在工作中。加載時(shí)長在6-10秒的情況下,我們一般是通過這樣的微交互會(huì)采用循環(huán)加載的動(dòng)畫去呈現(xiàn),而需要等待10-15秒這樣的,或者更長的時(shí)間,循環(huán)加載的動(dòng)畫也會(huì)給人一種宕機(jī)的錯(cuò)覺,我們應(yīng)該適當(dāng)?shù)慕o與用戶一個(gè)進(jìn)度條,告知用戶當(dāng)前處理的進(jìn)度,可以使得用戶在焦慮不安中解放出來。

 

  • (2)內(nèi)容加載狀態(tài)

在蘋果手機(jī)發(fā)布的時(shí)期,因?yàn)榫W(wǎng)速比較慢,在點(diǎn)開APP的時(shí)候,APP的內(nèi)容都沒還加載好,所以喬布斯的解決方案是用啟動(dòng)頁去遮擋下這一不完美的問題。

我們在APP在頁面的跳轉(zhuǎn)中,肯定也會(huì)遇到這樣的問題,就是用戶在點(diǎn)擊后,內(nèi)容不能及時(shí)的加載出來,所以我們通用的解決方案是使用一種加載容器“界面骨架”來呈現(xiàn),這種臨時(shí)用來展示的容易不僅可以緩解用戶在等待過程中的焦慮,也可以通過“界面骨架”去提前了解頁面的大體的結(jié)構(gòu),構(gòu)建用戶的預(yù)期,讓用戶的視覺得到一個(gè)緩沖的時(shí)間。

 

1.64.觸發(fā)狀態(tài)

當(dāng)用戶主動(dòng)觸發(fā)的事件,我們的產(chǎn)品應(yīng)該及時(shí)的給與用戶反饋,就像我們遇到熟人打招呼,要是打完招呼對方不回復(fù),那也可以算是一件“社死”的時(shí)間了,所以觸發(fā)反饋事件中的微交互也是值得我們?nèi)タ剂康囊患虑椋梢蕴嵘脩魧Ξa(chǎn)品的友好度。

  • (1)提醒預(yù)通知

一般正常的消息通知都是為了提醒用戶有事情需要處理,所以,我們采用有趣味的微交互能有效的吸引用戶的視線和信息的傳遞,已達(dá)到通知的目的。

 

  • (2)預(yù)判用戶的輸入

在多數(shù)的APP 中,填寫表單信息的必不可少的步驟,比喻,比較常見的填寫注冊登陸的信息和一些比喻的資料的填寫,由于這些信息表單一般含的信息并不是很少,所以,我們需要在每一步的檢測用戶填寫的內(nèi)容是否有問題,及時(shí)的提醒用戶更正,不然等用戶全部填寫完了在提醒用戶的情緒可能會(huì)“蚌埠住了”,所以通知我們在填寫密碼的時(shí)候,要是密碼過于簡單,我們需要提醒用戶需要添加哪些內(nèi)容,郵箱的格式是不是正確的,等等。

 

2 微交互的構(gòu)成

那怎樣才能做好“微交互”呢?丹·賽弗在他的著作《微交互:細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品》中,提出了好的微交互應(yīng)該有的結(jié)構(gòu): 觸發(fā)器、規(guī)則、反饋、循環(huán)與模式 。我們一個(gè)個(gè)來講。

 

2.10 觸發(fā)器

觸發(fā)器,是啟動(dòng)微交互的“扳機(jī)”,是微交互啟動(dòng)的原點(diǎn)。要把識(shí)別“扳機(jī)”的成本,降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經(jīng)典臺(tái)詞一樣“你過來呀”,簡單且易于識(shí)別。

觸發(fā)器一般是分為兩種,就像平時(shí)打游戲一樣,有主動(dòng)技能和被動(dòng)技能,觸發(fā)器也被分為手動(dòng)觸發(fā),即用戶主動(dòng)去觸發(fā)的,被動(dòng)觸發(fā),即系統(tǒng)被動(dòng)觸發(fā)的。

 

2.11 手動(dòng)觸發(fā)器

手動(dòng)觸發(fā)器一般是用戶自主的去點(diǎn)擊,所以我們盡量要去保證觸發(fā)器的識(shí)別性,以及用戶在點(diǎn)擊前的一些心里預(yù)期的管控。手動(dòng)觸發(fā)器一般有三項(xiàng)設(shè)計(jì)原則:1.降低識(shí)別成本    2.對用戶的預(yù)期管控     3.考慮用戶的使用場景

 

  • (1)降低識(shí)別成本

觸發(fā)器是微交互啟動(dòng)的第一步,在使用場景下必須要讓用戶能識(shí)別出來,用戶才能去點(diǎn)擊,所以觸發(fā)器要足夠清晰明顯。

比如,我們在瀏覽和使用視頻屏網(wǎng)站或者視頻APP的時(shí)候,網(wǎng)頁或APP上的視頻中間都有個(gè)碩大的“播放”按鈕,比如,攝像機(jī)上的錄像鍵,總是最明顯的紅色;這些都是觸發(fā)器在提示用戶,應(yīng)該點(diǎn)它,且外觀樣式都是采用通俗易懂的外觀樣式。

 

  • (2)對用戶的預(yù)期管控

我們一般去一家陌生的商店的時(shí)候,有的商店會(huì)玻璃門,比較高級(jí)的是自動(dòng)的,一般的店鋪都會(huì)是手動(dòng)的,這時(shí)候,一般的手動(dòng)的玻璃在門上都會(huì)貼上這個(gè)門是用推的形式開還是用拉的形式去關(guān),這樣,我們便知道這樣去推或者拉門,是肯定可以把門打開的。

另外一種情況是要遵循用戶日常生活場景的認(rèn)知,比如,我曾經(jīng)使用過一款教育的產(chǎn)品,它有點(diǎn)類似與房子的home鍵是返回鍵,但是在絕大多數(shù)的APP里都是去首頁,所以,這項(xiàng)設(shè)計(jì)便是違反了用戶日常的認(rèn)知,沒有對用戶的預(yù)期管控。

所以我們的觸發(fā)器需要讓用戶知道我點(diǎn)了之后會(huì)去到哪里,在形式的設(shè)計(jì)上需要明確,比如我們的微信或郵件APP的一角會(huì)顯示未讀郵件的數(shù)量,提示用戶在點(diǎn)擊后肯定有未讀的郵件或消息。

 

  • (3)考慮用戶的使用場景

在我們平時(shí)工作和娛樂中使用的鍵盤,我們鍵盤的按鍵的大小都是根據(jù)用戶在日常使用場景的頻次和設(shè)計(jì)大小的,例如,用戶的最多的空格鍵,是最大的,其次是回車鍵,使用的最少的開關(guān)和其他的控制鍵是最小的,這都是考慮到我們生活中的使用場景去設(shè)計(jì)的。

我們在設(shè)計(jì)觸發(fā)器的時(shí)候也是一樣的,需要考慮到用戶在日常生活操作的具體情況來對觸發(fā)器的大小位置來進(jìn)行設(shè)計(jì)擺放,盡量讓用戶操作起來比較合適。

所以我們APP的按鈕會(huì)根據(jù)使用頻次來確定圖標(biāo)的大小的層級(jí),方便用戶憑借第一反應(yīng)力去點(diǎn)擊使用。

 

2.12 系統(tǒng)觸發(fā)器

系統(tǒng)觸發(fā)器的微交互一般需要用戶滿足了某些條件才會(huì)觸發(fā)的,例如我們平時(shí)在工作時(shí)間設(shè)置的起床鬧鐘,我們微信的朋友圈的更新提示,都是屬于系統(tǒng)觸發(fā)器,在滿足了某些系統(tǒng)設(shè)定的規(guī)則之后才會(huì)觸發(fā)的。

系統(tǒng)觸發(fā)器通常會(huì)讓用手動(dòng)設(shè)置何時(shí)觸發(fā),觸發(fā)的頻率狀況,比如,我最近想學(xué)習(xí),不想被朋友圈的信息影響,我可以選擇關(guān)閉朋友圈紅點(diǎn)提示,比如,我的鬧鐘設(shè)置的是周一到周五的工作時(shí)間去響鈴,我周三晚上加班太晚了,第二天中午十二點(diǎn)去上班,這個(gè)時(shí)候我就可以單獨(dú)的選擇周四這天鬧鐘不響。

 

2.20  規(guī)則

規(guī)則,用來規(guī)定微交互的過程,是整個(gè)微交互的核心。好的規(guī)則,應(yīng)該順乎人性、體貼方便。簡單的來說,規(guī)則就是要按套路出牌,不然就會(huì)讓用戶感覺到出其不意。

 

2.21  微交互的規(guī)則是什么

微交互的規(guī)則對于不是做程序員或者技術(shù)的用戶來說,是提示用戶,哪些能做哪些不能做,該怎么去做,且規(guī)則設(shè)定應(yīng)該讓用戶一眼就可以看懂,就是日常生活中開燈的開關(guān)和門的推拉一樣簡單。

比如,蘋果手機(jī)之前“滑動(dòng)解鎖屏幕”這便是微交互的規(guī)則,也是最基礎(chǔ)的規(guī)則。

所以,我們可以發(fā)現(xiàn),規(guī)定的設(shè)定需要滿足兩點(diǎn)條件,1.名詞(通過什么去調(diào)整)即滑動(dòng)條,2.動(dòng)詞(用戶該怎么去做)滑動(dòng)既可解鎖手機(jī)。

 

2.22  規(guī)則應(yīng)該符合用戶認(rèn)知

一般每個(gè)平臺(tái)的核心用戶都是不一樣的,使用的習(xí)慣也是不一樣,我們盡量了解用戶平時(shí)的習(xí)慣,去設(shè)定規(guī)則,我們都知道,像一般的電商都是有購物車的,都是為了方便用戶將選好的物品一起結(jié)算,而拼多多卻反其道而行之,它并沒有購物車,這便是針對用戶生活習(xí)性的不同而設(shè)定的。

拼多多的主要戰(zhàn)略是以農(nóng)村包圍城市,最開始的主要是還是流行在五環(huán)外的農(nóng)村用戶,這些用戶和淘寶或其它平臺(tái)也不是重合的,可能是從來沒有用過電商APP的用戶,而在一些偏遠(yuǎn)的地區(qū),他們的超市是沒有購物車,如果加上購物車會(huì)增加用戶的教育成本,其次,我們都知道拼單都是講究及時(shí)性的,所以,在考慮到平臺(tái)用戶的用戶背景和用戶的使用場景,就沒有增加購物車。

所以,我們在設(shè)定微交互規(guī)則的時(shí)候,依照現(xiàn)行平臺(tái)已收集到的使用者的資料來設(shè)計(jì),利用已知情境及行為來對現(xiàn)在的互動(dòng)進(jìn)行分析與調(diào)整。

 

2.23 給用戶提供選擇

在和異性聊天的時(shí)候,如果想和對象一直有話題的話,我們聊天盡量不要以陳述句結(jié)束,而是要給對象可以接的上的開放式的問題,讓對方能非常輕松的去接話。

所以,我們通過對用戶的了解和操作的場景,我們給用戶一個(gè)選項(xiàng),并提示給使用者,來串連整個(gè)流程。所以,通常用系統(tǒng)默認(rèn)項(xiàng)>按場景出現(xiàn)項(xiàng)

 

(1) 系統(tǒng)默認(rèn)選項(xiàng)

系統(tǒng)默認(rèn)項(xiàng)和考慮場景的選項(xiàng)是相互關(guān)聯(lián)的,正常的情況,在有限的選項(xiàng)中為用戶提供默認(rèn)項(xiàng)。而默認(rèn)項(xiàng)應(yīng)該是大部分用戶最常用的那個(gè)選項(xiàng)。

例如我們在退出或者刪除的時(shí)候需要二次確認(rèn),正常的會(huì)將確認(rèn)放在我們比較好操作的位置且會(huì)高亮放大展示,一般的電商平臺(tái)上的產(chǎn)品也是種類繁多,所以一般的電商平臺(tái)都會(huì)有分類區(qū),將不同的商品歸類為不同默認(rèn)的選項(xiàng),來供用戶選擇。

 

(2) 按場景出現(xiàn)的選項(xiàng)

按場景出現(xiàn)的選項(xiàng)我們將它分為兩種,一種是只在需要的時(shí)候出現(xiàn),另外一種是只提供需要的選項(xiàng)。

  • a. 在需要的時(shí)候出現(xiàn)

在日常的產(chǎn)品的設(shè)計(jì)中,有些功能不一定需要一直存在,所以我們需要考慮在用戶需要的時(shí)候在提供給用戶,或者是我們對的用戶在適當(dāng)?shù)臅r(shí)候在出現(xiàn)。

比如,我們在聽歌的時(shí)候,一般時(shí)候都會(huì)在手機(jī)放在一旁做別的時(shí)候或者閉上研究休息,只能只有覺得這個(gè)歌曲比較好聽以后想在KTV去唱的時(shí)候或者對歌曲有比較濃厚的興趣的時(shí)候,我們才會(huì)去查看歌曲,而網(wǎng)易云音樂也許是發(fā)現(xiàn)了這個(gè)洞察點(diǎn),在我們看一會(huì)歌詞,在歌詞下面的地方,會(huì)出現(xiàn)K歌的話筒,如果用戶想練習(xí)下自己唱這個(gè)歌是什么樣的,便可以點(diǎn)進(jìn)去直接唱,而不是默默的在屏幕上看著歌詞跟唱。

 

  • b. 只提供必要的選項(xiàng)

我們大部分在中午的時(shí)候,都糾結(jié)中午吃什么這個(gè)問題,主要是糾結(jié)的點(diǎn)是外賣的選擇的太多了,要是公司提供食堂的話,在食堂限定的菜譜內(nèi)去選擇,我想,大部分人中午也不會(huì)那么煩惱了。

所以在某些場景中,我們需要根據(jù)場景去給用戶提供選擇,提升用戶在使用中效率,比如,我們國內(nèi)的搜索百度,主界面上只有搜索框和百度一下,簡潔明了,讓用戶一看就知道產(chǎn)品的主要功能,比如,當(dāng)我們因?yàn)檐浖B接上車上的藍(lán)牙后,便進(jìn)去的車載的模式,因?yàn)殚_車的時(shí)候需要集中注意力去開車,所以車載模式下,很多不必要的功能便會(huì)被隱藏起來,只會(huì)提供必須的功能選項(xiàng)按鈕。

 

2.30 反饋

反饋,是向用戶說明規(guī)則。用戶并不知道你設(shè)計(jì)了什么規(guī)則,你要通過反饋友好地讓他知道。

你輸入字?jǐn)?shù)太少,它顯示:需要6個(gè)以上字符;你輸入簡單單詞,它顯示:密碼太好猜了;符合要求,它會(huì)按照密碼的強(qiáng)度,逐級(jí)顯示:弱,不錯(cuò),強(qiáng),很強(qiáng)!

其次是及時(shí)的反饋可以增加用戶的活躍度,蝦皮購物在前幾年時(shí)也用這個(gè)手法,讓用戶每天可以免費(fèi)轉(zhuǎn)兩次,之后要轉(zhuǎn)轉(zhuǎn)盤時(shí),需要付出「蝦幣」,我即使理性上知道這可能是蝦皮回收蝦幣的手法,而且游戲贏家絕對是蝦皮,還是付了幾枚蝦幣,為了多賭幾次「我就是那個(gè)幸運(yùn)兒」。只能說當(dāng)這些經(jīng)典的實(shí)體體驗(yàn)移到線上,其策略與目的還是能順利運(yùn)作,從中學(xué)到的是,現(xiàn)今的數(shù)位產(chǎn)品透過借鏡過去「已被驗(yàn)證成功的實(shí)體體驗(yàn)」,在數(shù)位產(chǎn)品上拷貝并實(shí)現(xiàn)其預(yù)期效果。

吃角子老虎機(jī)善用回饋機(jī)制來「強(qiáng)化行為」,提供的不可預(yù)測性是游戲的一環(huán)。

但一般來說,我們會(huì)希望在微互動(dòng)中提供一致的、對我們期望的行為的正向激勵(lì),因此回饋的應(yīng)該是「可預(yù)測」的。

同時(shí),回饋本身就要可以解釋規(guī)則,如:按下按鈕(觸動(dòng)觸發(fā)器)會(huì)發(fā)生什麼事(回饋),回饋需要告訴使用者可以對微互動(dòng)「做什麼」。

 

2.31 反饋給與用戶安全感

我們給與用戶的反饋要盡量與用戶本次的操作的相關(guān),比如,用戶下載文件,我們需要給與用戶的反饋信息是,已開始下載,下載的進(jìn)度和下載完成,如果反饋在細(xì)節(jié)點(diǎn),我們在下載的過程中可以提升用戶,”下載過程中會(huì)占用大量的帶寬,也許用影響您瀏覽網(wǎng)頁或者其他是上網(wǎng)操作”,反饋越是細(xì)節(jié),用戶在體驗(yàn)微交互的過程中的負(fù)面情緒就越少,提升用戶在使用過程中的確定性和安全感。

 

2.32 反饋具有主次性

微交互的反饋直觀也是比較重要的因素之一,可以讓用戶更好的理解規(guī)則,降低用戶的認(rèn)知成本,我們反饋給用戶的信息應(yīng)該都是準(zhǔn)確且重要的,例如我們的消息提醒,一般都是在有幾條就提醒幾條消息,消息的傳遞需要做到少即是多,信息越是重要,反饋的層級(jí)就要越高。

 

2.40 循環(huán)與模式

循環(huán)與模式,我們可以將它理解為是規(guī)則的分支。比如,鬧鐘是你每天接觸的第一個(gè)“微交互”了吧。眼睛還沒睜開,鬧鐘就響了。你重重拍下去,這時(shí)就啟動(dòng)了“再睡一會(huì)兒”這個(gè)分支的規(guī)則,也就是“模式”。如何設(shè)計(jì)這個(gè)分支,最合理呢?你可以讓它5分鐘后再響,如果再拍下去,就別叫醒他了。“你永遠(yuǎn)叫不醒一個(gè)裝睡的人”。這樣合理嗎?

也許不合理。更合理的做法是,拍第一次,5分鐘后再響,拍第二次,3分鐘后再響,拍第三次,縮短為1分鐘。然后就一直響。因?yàn)槟闩牡拇螖?shù)越多,越有可能因?yàn)樨澦`事。

循環(huán)與模式,就是一次性的或者循環(huán)的分支規(guī)則。

 

2.41 什么是模式

模式指的是:執(zhí)行一種不常用的展示形式(在某些情況下可能會(huì)影響到微交互主要要達(dá)成的目的)比如,我們的APP中都會(huì)有設(shè)置功能,我們在修改默認(rèn)的設(shè)置的時(shí)候,其實(shí)也是對APP的規(guī)則的一次修改,讓APP朝著我們想要的方向去展示。

我們都用過股票軟件去看股票行情,在行情頁面剛進(jìn)去的時(shí)候,我們是根據(jù)A股、港股、美股這樣的模式去瀏覽我們感興趣的企業(yè)股票,然后我們將我們看好的企業(yè)添加到自選里面的時(shí)候,我們下一次在打開軟件的時(shí)候,就可以在自選里看到我們感興趣的股票,這便執(zhí)行一次模式,模式便是在循環(huán)與循環(huán)不一樣的展示形式,可能是用戶自己設(shè)定的或者是軟件提供的選擇。

 

2.42 無限模式與一次性模式

正常的模式是指將一些規(guī)定好的操作單獨(dú)拿出來到另外的空間根據(jù)用戶的喜好去定義,但是我們在模式中也會(huì)分兩種情況,一直是無限模式與一次性模式。

(1)無限模式

無限模式是指用戶要在某段時(shí)間內(nèi)去使用一種狀態(tài)的時(shí)候才會(huì)選擇開始,例如,我們使用鍵盤打英文字母的時(shí)候,我們想要大寫和小寫都是可以去切換選擇的,只有我們的用戶在需要長時(shí)間的去使用大寫字母,才會(huì)按下鍵盤上的“Caps lock”去鎖定大寫狀態(tài),這種模式的好處是,用戶不會(huì)忘記自己正在一個(gè)特殊模式中。

(2)一次性模式

一次性模式是用戶自主開啟,且執(zhí)行一次便是結(jié)束,不再執(zhí)行,比如我們用siri去喊一句“siri,幫我定一個(gè)早上8.的鬧鐘”,這時(shí),sir會(huì)告訴我們定的是幾號(hào)上午還是下午的鬧鐘,這個(gè)鬧鐘在執(zhí)行一次便會(huì)失效。

 

2.43 什么是循環(huán)

循環(huán)決定了微交互的持續(xù)時(shí)間重復(fù)的頻率,這個(gè)也和我們的規(guī)則的設(shè)定相關(guān)。

 

2.44 循環(huán)的分類

(1) 計(jì)數(shù)循環(huán)

即我們在給用戶反饋前需要來回檢查規(guī)定好的次數(shù),發(fā)現(xiàn)了問題再給用戶反饋。例如,我們的微信在網(wǎng)絡(luò)不穩(wěn)定的情況時(shí),我們會(huì)看到微信會(huì)連續(xù)好幾次的出現(xiàn)刷新,然后才會(huì)給用戶網(wǎng)絡(luò)不好或者斷網(wǎng)的提示。

(2) 條件循環(huán)

即在滿足條件執(zhí)行后,可以進(jìn)行自行的內(nèi)部條件,比如,當(dāng)我們的房租在沒有到了交租的日子沒有交的時(shí)候,就會(huì)收到繳費(fèi)的提醒,過幾天在不交就會(huì)在提醒一次,要是按時(shí)繳費(fèi)了便不會(huì)在提醒。

(3)集合循環(huán)

即循環(huán)的核對數(shù)值,然后停止,和前面的計(jì)數(shù)循環(huán)有相似之處,例如我們短信系統(tǒng),會(huì)對收到的信息進(jìn)行系統(tǒng)的統(tǒng)計(jì),然后發(fā)現(xiàn)有未讀的信息,便會(huì)在角標(biāo)上記錄數(shù)值1.

(4)無窮循環(huán)

即循環(huán)開始后,除非人為的干預(yù)讓它停止或者系統(tǒng)出問題的時(shí)候才會(huì)停止,否則會(huì)一直的循環(huán)下去,就像永動(dòng)機(jī)一樣。無窮循環(huán)分為兩種一種是開放循環(huán),另外一種是封閉循環(huán)。

(5)開放循環(huán)和封閉循環(huán)

  • 1)開放循環(huán)

即在滿足條件后,執(zhí)行一次便結(jié)束,miui有個(gè)功能是可以設(shè)定手機(jī)每天早上什么開始,當(dāng)每次到達(dá)這個(gè)時(shí)間后,我們原本處于關(guān)機(jī)狀態(tài)的手機(jī)便會(huì)開機(jī),這個(gè)指令執(zhí)行一次便不會(huì)在執(zhí)行了。

  • 2)封閉循環(huán)

是根據(jù)一定的環(huán)境或者其他的反饋可以進(jìn)行自行的內(nèi)部調(diào)整,比如,當(dāng)我們手機(jī)開機(jī)后,我們的手機(jī)屏幕的亮點(diǎn)會(huì)根據(jù)環(huán)境光而去調(diào)節(jié)。

  • 3)長循環(huán)

長循環(huán)可以理解為是一種陪伴用戶在使用我們產(chǎn)品時(shí)候記錄的一種微交互,使用的時(shí)間越長,這種記錄就越多,比喻我們軟件的搜索記錄和瀏覽記錄便是一種長循環(huán)。

  • 4)漸進(jìn)揭示或漸進(jìn)減少

長循環(huán)的另外一種情況便是當(dāng)用戶長期使用后對軟件越來越熟悉后,我們可以對有經(jīng)驗(yàn)的用戶開放更加進(jìn)階的玩法比如一些快捷鍵,可以幫助用戶提升效率。

長循環(huán)的另外一種情況便是漸進(jìn)較少,即當(dāng)我們的用戶熟悉了我們的軟件后,有些界面上的說明解釋的提示可以適當(dāng)?shù)娜サ?,簡化界面,對用戶而言,干擾少了,也會(huì)提升使用的效率和交互的速度。

 

3 微交互的層次

微交互在產(chǎn)品中的應(yīng)用場景也是比較豐富的,一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗(yàn),其次深入后是功能交互層的體驗(yàn),最后是體驗(yàn)了一個(gè)容錯(cuò)性比較好的心理上的愉悅,也就是情感層。

視覺層主要給予用戶感官層面的體驗(yàn),交互層是給予使用上的效率體驗(yàn),情感層主要是讓用戶體驗(yàn)后心理上有滿足或者愉快的感受。

但是這些層面又不是絕對獨(dú)立的,每個(gè)微交互設(shè)計(jì)都能在上述三個(gè)層面中找到單獨(dú)或者組合,比如雙擊屏幕的反饋,就滿足了視覺層面、功能層面與情感層面的三層優(yōu)化。

 

3.10 微交互視覺層的應(yīng)用

在視覺層,考慮的轉(zhuǎn)場交互動(dòng)作是否足夠流暢,視覺是否美觀,反饋交互是否有創(chuàng)意,是否加深品牌印象。

 

3.11相同的元素串聯(lián)轉(zhuǎn)場

推拉搖移是攝像中的術(shù)語。推指把鏡頭變焦到長焦端,使景物更近,拉則相反,把鏡頭變焦到廣角端,使景物顯得更遠(yuǎn),搖指鏡頭跟隨運(yùn)動(dòng)的物體做同方向的轉(zhuǎn)動(dòng),移指鏡頭跟隨動(dòng)體做平行移動(dòng)。這些手法都是經(jīng)歷過前人的無數(shù)字的實(shí)踐所總結(jié)出來的道理。

我們在做交互轉(zhuǎn)場也是一樣,合適的轉(zhuǎn)場是讓產(chǎn)品添姿增色的重要手段之一,在iOS默認(rèn)的轉(zhuǎn)場效果就是頁面從左往右去進(jìn)場,但是想要在讓你交互轉(zhuǎn)場看起來比較舒服,就需要在細(xì)節(jié)上下功夫,其中比較常見的手法就是界面中有相同的元素的時(shí)候,讓他們將他們串聯(lián)起來,這樣的交互轉(zhuǎn)場會(huì)讓你產(chǎn)品看起來更舒適。

 

3.12 卡片推開周圍的元素

在安卓的Material Design提出Z軸的概念,在扁平化的界面上讓產(chǎn)品有三維的層次感(三維就是X軸(左右)、Y軸(上下)、Z軸(前后)組成的立體世界,而二維就是只有X和Y軸的平面世界。)我們知道手機(jī)的界面是一個(gè)平面和二維的空間,Material  Design通過一些二維的表現(xiàn)手段,比如投影和動(dòng)態(tài)效果,來構(gòu)建Z軸(前后)的概念。

在這個(gè)基礎(chǔ)上,我們可以在微交互上下功夫,例如當(dāng)界面中的卡片比較多的話,我們想讓產(chǎn)品的體驗(yàn)更具有層次感,我們可以通過卡片與周圍元素的變化產(chǎn)生關(guān)聯(lián),營造微交互中的產(chǎn)品層次感。

 

3.13 降低認(rèn)知難度

我們每個(gè)人在遇到自己不同的領(lǐng)域信息的時(shí)候,有些信息是用戶不易理解的,而我們所服務(wù)的產(chǎn)品可能是來自各個(gè)行業(yè)的,針對比較專業(yè)的知識(shí)的時(shí)候,我們應(yīng)該專門針對這種場景處單獨(dú)的處理,降低用戶的認(rèn)知難度。

比如,我們在早上上班經(jīng)常會(huì)用到美團(tuán)單車,因?yàn)槭枪蚕韱诬?,所以有的車部分零件?huì)出問題也是比較正常的,在騎行的用戶發(fā)現(xiàn)了車輛損壞的部位,卻無法辨認(rèn)報(bào)修的部位,所以美團(tuán)單車的處理是將整車拆解,將不同的部位標(biāo)注出來,哪里有問題可以點(diǎn)擊直接報(bào)修。

同樣的場景也會(huì)常常發(fā)生在醫(yī)療的產(chǎn)品中,比如,我們發(fā)現(xiàn)身體哪里不舒服的時(shí)候,比較快速的可以通過了解APP來快速問診,但是通常我們不是醫(yī)學(xué)專業(yè)的,所以往往無法準(zhǔn)確的說出自己身上哪來不舒服,或者往往只能模糊的說出,所以,我們可以通過將身體部分拆解劃分,方便用戶及時(shí)說出自己哪里不舒服。

 

3.14 專屬的元素動(dòng)畫樣式

我們?nèi)颂焐加泻闷嫘?,對新鮮的事物都有嘗試的心理,我們在微交互的設(shè)計(jì)中,也需要具有創(chuàng)新精神,讓用戶在視覺體驗(yàn)層有與其他產(chǎn)品有不一樣的觀感,這樣有利于樹立我們產(chǎn)品的品牌感知。

比如,我們在點(diǎn)擊TAP時(shí)候的特殊的動(dòng)畫呈現(xiàn),點(diǎn)贊時(shí)候獨(dú)特的反饋,都會(huì)在視覺層面給用戶留下比較深刻的印象。

3.14 強(qiáng)化操作過程中的趣味性

下拉刷新是我們在產(chǎn)品中日常會(huì)使用的交互,現(xiàn)在的產(chǎn)品一般都不會(huì)使用默認(rèn)的“菊花”的下拉刷新,一般會(huì)使用自己的IP或者更加有趣的MG動(dòng)畫,都是為了讓用戶在使用我們的產(chǎn)品時(shí)候在視覺層有新的體驗(yàn),與其他的產(chǎn)品去拉開差距。

 

3.15 循環(huán)動(dòng)畫強(qiáng)化產(chǎn)品氛圍

我們在酒吧857的時(shí)候,酒吧都會(huì)有氣氛組,來讓新來的客人比較快的融入到酒吧愉快的氛圍中,或者一般商業(yè)區(qū)就過節(jié)的時(shí)候,都會(huì)將街道和廣場裝扮與節(jié)日相符的燈光,都是為了讓客戶快速的融入到氣氛中。

我們在產(chǎn)品中也是,有到功能想吸引用戶的目光,或者想讓用戶快速的融入到某節(jié)日到氛圍中,都是可以通過循環(huán)都動(dòng)畫去引導(dǎo)用戶。

 

3.20 微交互交互層的應(yīng)用

通過控制轉(zhuǎn)場樣式,反饋樣式與反饋時(shí)間可提高交互效率,幫助用戶認(rèn)知,提升產(chǎn)品數(shù)據(jù)。

 

3.21 交互行為主動(dòng)聯(lián)動(dòng)性

我們都知道,我們手機(jī)的屏幕空間是有限的,有時(shí)候的功能布局方面可能不是那么的合理,這個(gè)時(shí)候,我們的微交互就可以起作用了,比喻,我們手機(jī)上滑當(dāng)時(shí)候,就可以將某些用戶比較常用的功能常駐在屏幕上方,當(dāng)用戶想去操作的時(shí)候,不用在滑回去在去操作,在體驗(yàn)上減少了用戶的操作步驟,提升了用戶在產(chǎn)品用戶過程中的舒適感。

 

3.22 合適的元素出現(xiàn)在適當(dāng)?shù)臅r(shí)機(jī)

我們經(jīng)歷過這樣的時(shí)候,當(dāng)陌生人來找我們做某些事情的時(shí)候,我們的第一反應(yīng)力都是比較抗拒的,但是熟人的話我們可能會(huì)因?yàn)楦鞣N原因不可以拒絕。

產(chǎn)品設(shè)計(jì)中也是一樣,如果我們想讓用戶去應(yīng)用商店去給我們的產(chǎn)品一個(gè)好評(píng),肯定是不能一上來就給用戶引導(dǎo)去評(píng)價(jià),這樣會(huì)極有可能會(huì)導(dǎo)致差評(píng)的,但是,我們可以利用用戶“啊哈時(shí)刻”去提升用戶的好評(píng)動(dòng)機(jī),例如,當(dāng)用戶覺得某內(nèi)容不錯(cuò)的時(shí)候點(diǎn)贊了,收藏了,我們這個(gè)時(shí)候讓用戶去好評(píng),這樣好評(píng)的幾率會(huì)大點(diǎn),起碼不會(huì)引起用戶的逆反心理。

所以,當(dāng)我們想要用戶去為我們做某些事情的時(shí)候,一定需要找準(zhǔn)時(shí)機(jī),結(jié)合微交互,提升用戶去完成某件事情的意愿。例如,當(dāng)用戶在瀏覽商品的時(shí)候,我們可以給用戶發(fā)放優(yōu)惠券,我們想讓用戶去分享我們的內(nèi)容的時(shí)候,可以在用戶在快看完的時(shí)候,出現(xiàn)分享按鈕,都是可以通過微交互去讓用戶幫我們?nèi)プ瞿承┦虑?,以達(dá)我們想要的結(jié)果。

我們的知道豆瓣是一個(gè)社區(qū)內(nèi)的產(chǎn)品,它是希望用戶在豆瓣來發(fā)表自己的想法的,所以,當(dāng)用戶看到評(píng)論區(qū)的時(shí)候,它用將評(píng)論區(qū)給展開放大,吸引用戶的注意力,從而加大用戶互動(dòng)的意愿。

 

3.23 提升用戶使用效率

一個(gè)產(chǎn)品能否讓用戶高效的操作和使用,是產(chǎn)品好不好的指標(biāo)之一,產(chǎn)品通過用戶在使用過程中的高效體驗(yàn),能讓用戶通過一些不經(jīng)意的小能有“哇”感覺,能讓用戶感受到產(chǎn)品團(tuán)隊(duì)的良苦用心和匠人精神。

 (1)方便用戶的操作

我們都在電商產(chǎn)品買東西的時(shí)候退過貨或者發(fā)過快遞,每次通過APP填寫的那一堆地址都很讓人頭疼,我們在別的APP上復(fù)制了地址,打開菜鳥裹裹APP,系統(tǒng)能自動(dòng)識(shí)別剪貼版上內(nèi)容,自動(dòng)跳轉(zhuǎn)頁面進(jìn)入寄件頁,將信息拆解為收件人姓名、電話、地址等默認(rèn)填入,可補(bǔ)全信息或直接提交寄件需求,無需手動(dòng)錄入或一欄一欄的填寫內(nèi)容。這是將用戶在進(jìn)入APP前的行為做保留解析,當(dāng)打開APP時(shí),為用戶預(yù)先多想一步,直接提供可能所需的功能,讓用戶減去層層點(diǎn)擊進(jìn)入功能頁面的步驟,高效完成目的性。

我們?nèi)ヒ粋€(gè)陌生的地方旅游也是一樣,每次找酒店住處都是一件讓人比較心累的時(shí)候,飛豬APP在在地圖找房的的基礎(chǔ)上,通手指在地圖上畫圈來定位,方便了用戶自定義找房的用戶訴求,給用戶體驗(yàn)上的新鮮感。

 

 (2)減少兩次操作

我們在日常工作和生活中,我們都不喜歡返工和重復(fù)的工作,所以,我們在設(shè)計(jì)軟件的交互過程中,也是盡量讓用戶不要做重復(fù)的工作,避免引起用戶焦慮的情緒,為用戶提升使用效率。

比如,我們在微信給別人聊天的時(shí)候,可以因?yàn)楦鞣N的場景和其他因素,我們可能會(huì)給朋友發(fā)消息的時(shí)候會(huì)發(fā)錯(cuò)消息,在輸入錯(cuò)后,我們可以針對單條的信息進(jìn)行撤回和修改,便可以再次再次發(fā)送,不需要再次全部重新輸入,因?yàn)榇蟛糠钟脩舸蝈e(cuò)字可能只是個(gè)別的字會(huì)錯(cuò),只需要單獨(dú)修改那幾個(gè)字就可以了。

另外還有一種情況是我們大部分的軟件都是采用信息流的布局,用戶在滑動(dòng)很遠(yuǎn)之后在想在回來的時(shí)候,也是一件讓用戶比較痛苦的事情,所以大部分的軟件會(huì)支持一鍵返回頂部,像微信的就是雙擊頂部就可以返回,大部分的軟件都是會(huì)用戶滑動(dòng)到第二屏的時(shí)候,會(huì)出現(xiàn)返回頂部的按鈕。

 

(3)為不方便而設(shè)計(jì)

因?yàn)楝F(xiàn)在的手機(jī)大部分都是觸摸屏,當(dāng)用戶輸入內(nèi)容出錯(cuò)的時(shí)候,需要修改的時(shí)候,手指無法精準(zhǔn)的操作光標(biāo)移動(dòng),所以我們可以在設(shè)計(jì)操作上幫助用戶去解決這個(gè)痛點(diǎn),盡量為用戶在操作中提供方便。

比如,夸克瀏覽器設(shè)計(jì)一個(gè)滑塊來解決這個(gè)痛點(diǎn),方便了用在文字輸入中需要精準(zhǔn)修改的問題,大部分的的文字輸入工具也是同樣的解決方案。

 

3.24 預(yù)判用戶的操作

我們在看港劇的時(shí)候,一般都會(huì)看到這樣的劇情,警察在行動(dòng)的時(shí)候,因?yàn)閳鼍氨容^特殊,一般是不能說話交流的,因?yàn)榕麓虿蒹@蛇。所以,一般在行動(dòng)的時(shí)候,行動(dòng)的隊(duì)員們只需要相互打打手勢,交流一下眼神,大家都都心領(lǐng)神會(huì)了。

所以,我們在產(chǎn)品設(shè)計(jì)的過程中,也需要了解用戶的心理活動(dòng),所以好的微交互不僅僅需要滿足用戶當(dāng)年的操作,更加需要能預(yù)測用戶的下一步的操作,這樣才可以更加高效的輔助用戶完成操作任務(wù)。

 

(1) 預(yù)防用戶的錯(cuò)誤操作

我們的交互無論做的多么滴水不漏,也無法可以避免用戶在操作的過程中發(fā)生各種失誤的情況,所以,我們應(yīng)該根據(jù)用戶最常會(huì)做出失誤的場景提前去糾正用戶的操作,為用戶去節(jié)省時(shí)間。

例如,我們在通常的使用中會(huì)有很多帶有自己習(xí)慣的操作,我們最常用支付寶給別人轉(zhuǎn)賬的時(shí)候,常常會(huì)將自己轉(zhuǎn)賬金額輸入到聊天框,所以每次當(dāng)支付寶檢測到用戶只是單獨(dú)輸入了數(shù)字的時(shí)候,會(huì)用小的提示框去提示用戶是不是要轉(zhuǎn)賬,將用戶的錯(cuò)誤提前告知。

 

(2) 根據(jù)使用歷史預(yù)判

其實(shí)用戶的操作使用歷史有很多用途,一種是方便我們對用戶的操作的習(xí)慣的了解,方便我們?nèi)ジ纳朴脩舻牟僮黧w驗(yàn),另外一種用戶就是我們通過儲(chǔ)存用戶平時(shí)操作和觀看歷史,方便給用戶推薦相關(guān)興趣愛好的信息。

因?yàn)楝F(xiàn)在互聯(lián)網(wǎng)的迅速發(fā)展,基本上每個(gè)不同類目都會(huì)有各自的APP,每個(gè)APP都會(huì)有自己的賬戶,為了方便用戶記憶和統(tǒng)一管理,所以大部分的APP都會(huì)接入第三方的登錄方式,但是第三方登錄的賬戶也是一般是兩種到三種,所以會(huì)導(dǎo)致用戶會(huì)忘記自己上次登錄的是哪個(gè)賬戶,所以我們軟件需要幫用戶記住上次的采用的是哪個(gè)登錄方式,通過微交互的形式來在用戶登錄的時(shí)候提示和告知用戶。

 

3.25 為用戶使用場景設(shè)計(jì)

產(chǎn)品在日常的使用的過程中,用戶會(huì)遇到各種各樣的使用場景,我們體驗(yàn)設(shè)計(jì)師需要針對用戶經(jīng)常在使用產(chǎn)品的過程中的不便去優(yōu)化,這些小的微交互在用戶使用過程中能增加生活的“小確幸”,讓我們的產(chǎn)品能給予用戶一絲絲溫暖。

 

(1)站在用戶的角度思考

在我們平時(shí)設(shè)計(jì)交互流程的時(shí)候,一般是保證了交互流程能夠跑通,一般不會(huì)出現(xiàn)什么大的問題,但是,我們還可以從另外的角度去思考,是不是能做的更好,更深的一層。

掃碼付款已經(jīng)深入我們?nèi)粘5纳睿ǔN覀冊诔匈I完東西讓收銀員去收款的時(shí)候,我們需要將手機(jī)轉(zhuǎn)過去讓收銀員去掃,這樣的使用場景在有時(shí)候拿的東西比較多的時(shí)候是極其不便的。支付寶在用戶打開付款碼的時(shí)候,只用輕輕將手機(jī)向下傾斜,二維碼和收款的字體也會(huì)隨之翻過去,方便對方去查看,因?yàn)槭湛詈透犊钤谥Ц秾毜氖褂眠^程中也是比較常用的,這一設(shè)計(jì)便是考慮了用戶在收付款中的不便的微交互設(shè)計(jì)。

 

(2)考慮場景提供選擇

我們用戶通常在做出某些操作,肯定會(huì)有下一步的操作的,我們應(yīng)該考慮到用戶某些場景的高頻操作,給用戶提供選擇,縮短用戶在使用過程的操作路徑。

我們平時(shí)在截圖的時(shí)候,一般除了發(fā)送給朋友去觀看,其次便是在使用過程中遇到問題需要咨詢,所以我們在用戶截圖后,可以為用戶展示分享或者咨詢的入口,為用戶高頻操作提供使用方便。

我們在日常截圖在再到微信準(zhǔn)備發(fā)送圖片的時(shí)候,微信會(huì)將最新的截圖以小窗的形式求提醒用戶是否要發(fā)送,這都是基于用戶的高頻操作后提供選擇的最好的例子。

 

3.25 進(jìn)場告知用戶隱藏的功能和操作

我們做設(shè)計(jì)的時(shí)候可能經(jīng)常會(huì)遇到一些無理的要求,例如,這個(gè)功能需要強(qiáng)化,但是又不能去干擾用戶,每次遇到這種需求,我們設(shè)計(jì)師往往都是比較痛苦的時(shí)候,例如當(dāng)用戶沒有開通會(huì)員的時(shí)候,我們想給用戶去展示會(huì)員的一些特權(quán)和首次開通的優(yōu)惠,但是,用戶要是沒有開通,我們是沒辦法很好的去展示的,這個(gè)時(shí)候,我們可以通過微交互,在進(jìn)場的時(shí)候,將隱藏的信息展開,然后過收起來,這樣用戶即看到信息,又不會(huì)影響接下來的操作。還有就是當(dāng)我們上新某些功能的時(shí)候,想讓用戶去快速的去了解這個(gè)功能,這個(gè)時(shí)候我們可以通過演示動(dòng)畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。

 

3.26 元素跟隨頁面的形態(tài)改變

我們的產(chǎn)品在操作的時(shí)候難免會(huì)出現(xiàn)各種狀態(tài),為了讓每個(gè)狀態(tài)出現(xiàn)的時(shí)候都比較符合用戶的操作的習(xí)慣,這個(gè)時(shí)候我們需要考慮用戶的場景來改變頁面的布局,例如快手它的戰(zhàn)略是一個(gè)內(nèi)容分享的社區(qū),它注重的是用戶與主播之間的溝通,所以,正常的軟件,當(dāng)視頻在播放的時(shí)候想看評(píng)論,這個(gè)時(shí)候的步驟都只能側(cè)中一個(gè),但是,快手它考慮到用戶的體驗(yàn),當(dāng)用戶在上滑的時(shí)候,為了不打斷用戶繼續(xù)觀看視頻,視頻內(nèi)容會(huì)慢慢變小,然后固定,這個(gè)時(shí)候用戶可以在看視頻的時(shí)候也可以查看評(píng)論,方便用戶與主播之間的溝通,強(qiáng)化了內(nèi)容社區(qū)的氛圍。

 

3.27 照顧邊緣場景

一個(gè)產(chǎn)品它的交互是否比較好,我們看的是它是不是能滿足用戶大部分的使用的場景,所以,有的時(shí)候,當(dāng)靜態(tài)的交互無法去滿足用戶的一些比較特殊的場景的時(shí)候, 我們這個(gè)時(shí)候就可以考慮微交互的設(shè)計(jì),讓產(chǎn)品的交互體驗(yàn)?zāi)芨采w的場景比較全面。

例如,當(dāng)我們在微信通訊錄想根據(jù)用戶的首字母去查找人的時(shí)候,一般左邊的字母都會(huì)做的比較小,無法精準(zhǔn)的查看到我們現(xiàn)在看到哪個(gè)字母,所以,當(dāng)我們的手去點(diǎn)的時(shí)候,到了某個(gè)字母的時(shí)候會(huì)放大。再比如,我們因?yàn)殚_會(huì)將手機(jī)調(diào)成靜音或者音量關(guān)了的時(shí)候,我們?nèi)ゲシ盼⑿诺恼Z音或者看視頻,這個(gè)時(shí)候,APP會(huì)提升我們音量未開之類的,這都是考慮到極端的場景,讓用戶的體驗(yàn)更加順暢。

 

3.30 微交互情感層的應(yīng)用

通過趣味幽默化的轉(zhuǎn)場與反饋動(dòng)畫可以降低產(chǎn)品的負(fù)面體驗(yàn)或者讓用戶產(chǎn)生愉悅感。

 

3.31 幽默拉近用戶

當(dāng)我們看到有趣的東西的時(shí)候總是想和身邊的人去分享我們的喜悅,這是比較底層的邏輯,我們的APP產(chǎn)品也是這樣的,當(dāng)我們想讓用戶持續(xù)去體驗(yàn)我們的產(chǎn)品或者想要用戶去主動(dòng)的分享我們的產(chǎn)品,那么,我們可以將產(chǎn)品做的有趣一點(diǎn)。

比如,轉(zhuǎn)轉(zhuǎn)在登陸的時(shí)候?yàn)榱宋脩舻淖⒁饬?,它?huì)在用戶登錄的時(shí)候做一個(gè)比較有趣的小動(dòng)畫,也消除用戶在多一步操作時(shí)候的負(fù)面的情緒。

 

3.32 同理心場景

用戶在使用產(chǎn)品的時(shí)候,總有會(huì)各種各樣的問題和情緒,我們需要通過視覺緩解用戶的情緒,通過設(shè)計(jì)喚起用戶同理心,解決用戶與平臺(tái)之間的矛盾。

我們美團(tuán)和餓了么點(diǎn)外賣的時(shí)候,訂單超時(shí)配送是最讓人心煩的事情,特別是遇到極端的情況,訂單超時(shí)也是常發(fā)生的,所以,設(shè)計(jì)時(shí)需要在視覺、內(nèi)容來換起用戶的共情心理,從而緩解用戶低谷的情緒,通過設(shè)計(jì)給用戶帶來溫暖,降低用戶的差評(píng)與投訴。

 

3.34 為特定場景增加儀式感

我們之所以喜歡去線下看演唱會(huì)和LIVE,一是可以和自己喜歡“愛豆”親密接觸,其次就是一種氛圍感覺,而一般在線上看直播缺少這種氛圍的儀式感,隨著全球的疫情加劇,我們很多線下的活動(dòng)和LIVE都不能開展,大部分都只能退而求其次在到線上去開展。所以,在大環(huán)境的趨勢下,我們線上活動(dòng)是越來越多了,我們需要將以前線上的思維轉(zhuǎn)換,為線上觀看體驗(yàn)增加儀式感和場景的氛圍。

愛奇藝的電視劇在播放到一些比較“甜”場景的時(shí)候,都會(huì)在交互上下一些功夫,例如,當(dāng)劇情放到有親親的情節(jié)的時(shí)候,會(huì)出現(xiàn)“心動(dòng)震動(dòng)”的彩蛋交互,提升用戶在沉浸體驗(yàn)過程中的儀式感,讓用戶能更加能貼心的感受到心動(dòng)時(shí)刻。

 

3.35 轉(zhuǎn)場加載占位符

我們在日常的APP使用中,總會(huì)遇到像信號(hào)不好的情況,這個(gè)時(shí)候,我們心里是比較著急的,特別是比較緊急的情況,負(fù)面的情緒是比較大的,我們需要將這點(diǎn)考慮進(jìn)去,為了避免用戶在等待時(shí)候的焦慮感和負(fù)面的情況,我們一般會(huì)使用加載的占位符和加載的進(jìn)度條,讓用戶知道我們的軟件是在工作中,而且是在賣力的工作中,這樣,可以緩解用戶的負(fù)面情緒。

 

3.36 產(chǎn)品的儀式感

對于我們來說,儀式感是很重要的,比如結(jié)婚紀(jì)念日要去慶祝一下,生日的時(shí)候一定要和朋友去high一下,這都是來自我們生活的中的儀式感。

儀式感在產(chǎn)品中也很重要,他可以提升我們用戶的幸福感,例如微信在給朋友發(fā)送生日快樂的時(shí)候,屏幕中會(huì)掉下蛋糕,在過年的時(shí)候發(fā)送新年快樂,屏幕中也會(huì)掉落紅包,微信將我們?nèi)粘I钪兴枰膬x式感搬到了產(chǎn)品中,通過微交互來提升我們?nèi)粘5男腋8小?

 

3.37 3D touch判斷用戶的情緒

我們?nèi)硕际歉星閯?dòng)物,讓微交互滿足人們的日常的情緒需求也是很不錯(cuò)的角度,例如facebook的點(diǎn)贊功能可以通過人點(diǎn)擊的力度大小去判斷人當(dāng)天的情緒,例如,點(diǎn)擊的力度越大,說明你的心情比較好,或者對那個(gè)觀點(diǎn)比較贊同,如果你點(diǎn)擊的比較輕,說明的你心情不怎么好。

 

4 微交互實(shí)際案例的思考

交互是保證這個(gè)功能的流程能走的通,用起來沒有問題,而微交互則是讓用戶用起來更順手,是解決了交互做不到的事情。

 

4.10 評(píng)價(jià)內(nèi)容增加流量曝光入口,信息層級(jí)優(yōu)化

例如我們的需求是要在看房的列表處新增精選房源的功能,提升我們房源列表的點(diǎn)擊率,讓用戶不用點(diǎn)進(jìn)去就可以預(yù)判大致的其他用戶對這個(gè)房源的評(píng)價(jià),但是,產(chǎn)品方可能會(huì)考慮的一個(gè)問題是如果只展示一條房源精選的評(píng)價(jià),可能會(huì)讓用戶以為我們是故意只放一條在上面,有故意哄騙用戶進(jìn)去的嫌疑。所以從產(chǎn)品的角度,會(huì)考慮多放幾條,讓用戶感覺產(chǎn)品是好評(píng)如潮,且展示的不是刻意挑選的。

所以我們在最初給的設(shè)計(jì)方案可能是在列表上可以展示多條評(píng)精選評(píng)論,但是這種情況會(huì)導(dǎo)致在靜態(tài)層面會(huì)出現(xiàn)一些視覺上的問題,有的列表有精選的評(píng)論,有的不夠三條的展示,會(huì)導(dǎo)致列表也看起來不是很整齊,用戶在閱讀上的體驗(yàn)就會(huì)非常的不好。

這個(gè)時(shí)候,在不改變產(chǎn)品經(jīng)理的需求的框架下,我們需要通過微交互的角度去思考,在經(jīng)歷過與產(chǎn)品和開發(fā)的反復(fù)碰撞下,我們發(fā)現(xiàn),在不改變列表的結(jié)構(gòu)下,我們需要通過微交互來解決列表不統(tǒng)一的情況。

首先,先要確定我們列表信息展示的位置,然后精選的評(píng)論信息在一個(gè)合適的位置上下去滾動(dòng),這樣不僅僅決解決了列表高度的不統(tǒng)一的視覺問題,也可以通過動(dòng)態(tài)元素提高產(chǎn)品的視覺層面的活躍度,吸引用戶的視覺注意力。

 

4.20 細(xì)化產(chǎn)品的分類,提升轉(zhuǎn)換率

在之前的版本中,頂部的TAP欄是可以切換房源、詳情的選項(xiàng),而在這次的新版本中加入了房源相關(guān)的功能,并把分小區(qū)和推薦功能一起放到首屏。這樣在首屏,便把房源拆分為安居房,人才房,普通房,年付四個(gè)tab?;巾撁娴诙粒患?jí)到tab房源,詳情,小區(qū)和推薦并慢慢的出來了,二級(jí)tab安居房,人才房,普通房,年付置于一級(jí)tab下方。

所以,這樣頁面就出現(xiàn)了比較影響體驗(yàn)的雙tab,且雙tab一直處于頂部,占用頁面的高度資源,影響用戶去瀏覽頁面。

 

設(shè)計(jì)切入點(diǎn)

雙tab的形式在靜態(tài)視覺層面已經(jīng)是無法在優(yōu)化了,因?yàn)榭紤]以微交互的形式去解決當(dāng)前的版本的所存在的視覺問題。

商品的tab作為當(dāng)前頁面的名稱是可以不需要一直顯示的,因此考慮將“安居房”,“人才房”,“普通房”,“年付”滑動(dòng)到屏幕頂部時(shí)合并收納進(jìn)“房源”的tab內(nèi),這樣處理即滿足了用戶需要發(fā)現(xiàn)改功能的需求,又滿足了不占用頁面過多空間的需求。

 

用戶無法感知tab間的收起

由于需要用戶滑動(dòng)至屏幕頂部時(shí)將雙tab合并,所以需要讓用戶100%的了解當(dāng)前消失的tab何去何從,方便下次使用該功能時(shí)能方便且快速的找到。然后問題是,當(dāng)用戶滑動(dòng)頁面比較快的時(shí)候,tab的收起很難引起用戶的注意力,這樣對用戶的體驗(yàn)是很差的。

 

方案:增加首屏雙TAB之間的差異化,增加合并動(dòng)畫

方案1:運(yùn)用「斗轉(zhuǎn)星移」法,在用戶滑動(dòng)頁面至二屏?xí)r,將“安居房”,“人才房”,“普通房”,“年付”作為關(guān)鍵聯(lián)動(dòng)元素,整體收攏至頂部Tab欄,并最后出現(xiàn)下拉小三角,告訴用戶,原先的四個(gè)類目已經(jīng)統(tǒng)一被收攏到一個(gè)類目中。這個(gè)收攏的動(dòng)作雖然在動(dòng)效表現(xiàn)層上,動(dòng)靜大了些,但是對新版本功能傳遞,避免用戶誤操作有良好的效果。

 

最終方案

最后我們在“安居房”,“人才房”,“普通房”,“年付”文字上部加入了圖標(biāo), 增加用戶對新功能Tab的感知,讓一級(jí)Tab與二級(jí)Tab差異更加顯性化。

 

實(shí)現(xiàn)價(jià)值

幫助產(chǎn)品強(qiáng)化新功能認(rèn)知,幫助用戶理清兩個(gè)層級(jí)間的關(guān)系,避免用戶誤操作、誤下單。

 

5 總結(jié)

成功產(chǎn)品的設(shè)計(jì)細(xì)節(jié)是必須在每個(gè)層面的體現(xiàn),細(xì)節(jié)不僅僅讓用戶更加堅(jiān)定的選擇了我們,也可以讓我們在競爭中脫穎而出,而微交互恰恰就是那個(gè)四兩撥千斤的設(shè)計(jì)亮點(diǎn)。

 

原文地址:站酷

作者: Endings

轉(zhuǎn)載請注明:學(xué)UI網(wǎng) ? 一篇文章看懂交互中的細(xì)節(jié)-微交互

分享本文至:

日歷

鏈接

個(gè)人資料

存檔