微交(jiao)互(hu)在用戶體驗設(she)計中(zhong)并不是一(yi)個新概念(nian)，但它們卻越來(lai)越令(ling)人印象深刻。我們在Design Shack討(tao)論(lun)微交(jiao)互(hu)已(yi)經有一(yi)段時間了(le)，因為它們對網站(zhan)設(she)計項目的整體成功至關重要。

微互動是(shi)指那些將普通用戶體驗變成更令(ling)人(ren)(ren)難忘和吸引人(ren)(ren)的微小細節。這些小事情會給你帶來驚喜和快(kuai)樂(le)，為你的應用或網站設計(ji)增(zeng)加一層令(ling)人(ren)(ren)愉快(kuai)的UX。

下面我們(men)來看(kan)看(kan)2021年網站設計(ji)師們(men)是如(ru)何(he)使(shi)用微交互的，并舉例說(shuo)明這(zhe)種設計(ji)技術是如(ru)何(he)發展(zhan)起來的。

設計的功能

動畫+解釋

當你(ni)(ni)開始思考如何最(zui)好地設計(ji)微(wei)交互時(shi)，讓(rang)這個簡單的短(duan)語在(zai)你(ni)(ni)的腦海中循環。每一個微(wei)小的網站(zhan)設計(ji)都應該做這些事情。

動(dong)畫是吸引用戶進入元素的(de)一個(ge)亮點。解釋幫助他們理解按鈕或(huo)撥動(dong)開關或(huo)圖標(biao)的(de)用途和如何使用它。

每個微(wei)交(jiao)互都以微(wei)秒的方式提供一系列(lie)信息：

觸發(fa)：微交互何時(shi)開(kai)始(shi)(shi)或為什么開(kai)始(shi)(shi)

規則：是什么讓動(dong)作(zuo)/互動(dong)起作(zuo)用(yong)，以(yi)及(ji)它是如何(he)起作(zuo)用(yong)的

反饋：您(nin)如(ru)何通過某種提示(shi)知道(dao)您(nin)對(dui)元素(su)的操作是(shi)否成功

循環(huan)和模式：交互持續到特(te)定用戶重置為止(zhi)的時間

去訪問上面光明(ming)/黑暗模式切換的(de)例子(zi)。開(kai)關(guan)的(de)滑動和做的(de)正是(shi)你所期望的(de)，沒(mei)有(you)太(tai)多的(de)大(da)驚(jing)小怪。它有(you)一個(ge)簡單的(de)動畫，解釋了如果你按(an)下開(kai)關(guan)將會發(fa)生什(shen)么。這(zhe)是(shi)固體的(de)微觀相互作用。

玩得開(kai)心(xin)

微互動應該(gai)是有(you)趣的(de)。它是引人注目的(de)元素(su)，可以幫助引導用(yong)戶(hu)通過設計與(yu)一些現代(dai)的(de)，可能意想不(bu)到的(de)觸摸。 

Aurelia Durand的(de)(de)(de)網站設(she)計充滿了令人驚奇的(de)(de)(de)微(wei)小互動(dong)。指(zhi)針是一個(ge)小的(de)(de)(de)手，它會移動(dong)以(yi)點(dian)擊(ji)適當的(de)(de)(de)區(qu)域，懸(xuan)停(ting)在菜(cai)單上，并獲(huo)得大量的(de)(de)(de)彩色(se)點(dian)來(lai)鼓(gu)勵行動(dong)，主要的(de)(de)(de)插圖(tu)變化和動(dong)畫也是懸(xuan)停(ting)狀態微(wei)交(jiao)互的(de)(de)(de)一部(bu)分。

展(zhan)示(shi)個性

你可(ke)能一直(zhi)接觸到的(de)最被(bei)低估(gu)的(de)微互動(dong)之一就(jiu)是Facebook react功(gong)能欄。（Facebook還不(bu)時在(zai)移動(dong)標識上添加一些有趣的(de)微互動(dong)。）

這就是為(wei)什么這個方法有效(xiao)。當(dang)你點擊(ji)或按住每個小表情符時，它們就會(hui)活過來，顯示出真(zhen)實的情感表情供(gong)你選擇。這比快速點擊(ji)經典的、豎(shu)起藍色大拇指的圖標更(geng)(geng)個性化、更(geng)(geng)真(zhen)實。

這(zhe)些小元素也(ye)有(you)(you)懸(xuan)浮狀態，告訴你每個表(biao)情/圖(tu)標(biao)的意思(si)。這(zhe)些額外的信息讓(rang)微互(hu)動變得更有(you)(you)用，并為(wei)用戶提供工具，讓(rang)他們(men)在選(xuan)擇對社交媒體(ti)上的帖子的感覺(jue)時做出(chu)正確的選(xuan)擇。

如(ru)果添加(jia)了新的(de)(de)表情符(fu)號或(huo)圖(tu)標，這一額外的(de)(de)信(xin)息(xi)層尤其重要，比如(ru)“關愛”擁(yong)抱，它在2020年年中成為功能欄的(de)(de)一部分。

微妙的(de)動(dong)畫效果可能很好

雖然有些微互動(dong)更具爆炸性(xing)，但許多細微的變化幾乎可以被忽視。

良好的(de)(de)(de)(de)微(wei)交(jiao)互作(zuo)用幾(ji)乎是不可見的(de)(de)(de)(de)。你不應(ying)(ying)(ying)該去想它(ta)，也(ye)不應(ying)(ying)(ying)該去問為什么它(ta)會在那里，或(huo)者如何與它(ta)互動。UX雜(za)志是這樣描述(shu)它(ta)的(de)(de)(de)(de)：“確保微(wei)動畫不會讓人感到尷尬(ga)或(huo)討(tao)厭。一般(ban)的(de)(de)(de)(de)和(he)次要的(de)(de)(de)(de)行(xing)(xing)動需要適度的(de)(de)(de)(de)反應(ying)(ying)(ying)。偶爾的(de)(de)(de)(de)重大(da)行(xing)(xing)動都需要有力的(de)(de)(de)(de)回應(ying)(ying)(ying)。”

這(zhe)方(fang)面(mian)的(de)一(yi)個(ge)典(dian)型例子便是伴隨著許多漢堡或彈(dan)出式(shi)菜單圖標(biao)的(de)微互(hu)動(dong)。

Lucid Reality Labs有一個(ge)雙行(xing)圖(tu)標，它(ta)(ta)會(hui)切換到(dao)單行(xing)，然(ran)后在(zai)菜單打開時顯(xian)示“X”。當“x”被點擊關閉時，它(ta)(ta)會(hui)動畫(hua)另一個(ge)。它(ta)(ta)太(tai)簡單了，你幾(ji)乎看不見它(ta)(ta)。

屏幕(mu)中(zhong)央的(de)立(li)方體(ti)也會發生二次交互(hu)。您可以通過單擊該(gai)示(shi)例查看(kan)這種微交互(hu)的(de)分(fen)層(ceng)是如(ru)何工作(zuo)的(de)。

內(nei)容和諧設計

每一個微互動都應該與伴隨的內容(rong)和諧共存。

你(ni)并(bing)不是在一(yi)個氣泡中進行(xing)設計(ji)，所以不要讓(rang)創(chuang)意(yi)或你(ni)創(chuang)造的(de)東(dong)西的(de)酷元(yuan)素凌(ling)駕于布局之上，并(bing)與整體設計(ji)保(bao)持同步。

上(shang)面的(de)“如何與(yu)白人孩子談(tan)論種族主義”的(de)timeline微交互很簡單，并且完全與(yu)設計的(de)其余(yu)部分整合在(zai)一(yi)起。他們(men)包含(han)了一(yi)定程度的(de)細節，使移動通過這本書的(de)數字版本令人愉(yu)快。

每(mei)個時間軸微(wei)交互都包含一(yi)個與(yu)頁面內(nei)容相匹配(pei)的(de)(de)圖標(biao)和(he)(he)內(nei)容的(de)(de)標(biao)題(ti)。它放大到(dao)(dao)一(yi)個大小，讓你(ni)可(ke)以得到(dao)(dao)一(yi)個藝術和(he)(he)簡(jian)單的(de)(de)運動是迷(mi)人的(de)(de)一(yi)瞥(pie)。

該設(she)計還包(bao)含了其(qi)他有(you)趣(qu)的(de)動畫，如翻頁(ye)（單頁(ye)和(he)翻頁(ye)），使(shi)整個設(she)計成為你想要深入研究的(de)東西。

使(shi)用觸覺元素

想想你日常(chang)使用的一些工(gong)具(ju)在與它們互動時是如何發揮作用的。

當你(ni)點擊(ji)一(yi)個按鈕時，你(ni)的蘋果手表的觸(chu)覺

你手機上的提示音

當你(ni)與Siri或其(qi)他設備交談時，這些監聽點就會出(chu)現(xian)

在你(ni)走或跑的每一英里時，輕輕的嗡嗡聲來標記

當你的(de)(de)耳塞連接(jie)到(dao)藍牙(ya)時的(de)(de)聲音

所有這些(xie)融合了數字和現(xian)實(shi)的(de)(de)元素都是將空間融合在一(yi)起的(de)(de)更偉大的(de)(de)觸覺體驗的(de)(de)一(yi)部分。微交(jiao)互是實(shi)現(xian)這一(yi)目標(biao)的(de)(de)好方法。

您可以(yi)使用：

感覺

聲音

進步

反彈

脈沖或嗡嗡聲

有很(hen)多方法可以做到這一點。它們的(de)(de)共(gong)同點是看起(qi)來和(he)感覺都很(hen)真(zhen)實。它們與(yu)其說是屏(ping)幕(mu)的(de)(de)一部分，不如說是你的(de)(de)物理世(shi)界的(de)(de)一部分（或者至少聲(sheng)稱(cheng)是）。

結論

2013年(nian)左右，當(dang)(dang)丹·薩弗（Dan Saffer）在他的書中(zhong)第(di)一次(ci)提到微互(hu)動時(shi)，微互(hu)動開始勢頭(tou)迅猛。他當(dang)(dang)時(shi)概述的四個部分仍然是這些小型網站互(hu)動的關鍵部分——觸發、規則(ze)、反(fan)饋、循環和模(mo)式。

如果你(ni)仔細觀察(cha)，你(ni)幾乎可以在每一個網(wang)站設(she)計(ji)中的微交互作用中看到這些共(gong)同元(yuan)素(su)。我們也希望看到更多(duo)精巧的微交互例(li)子。