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

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

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

設計的功能

動畫+解(jie)釋(shi)

當你開(kai)始思考如何最(zui)好地設(she)計微交互時，讓這個(ge)簡單(dan)的短語在(zai)你的腦(nao)海(hai)中循環。每(mei)一個(ge)微小的網站設(she)計都(dou)應該做這些(xie)事情。

動畫(hua)是吸引用(yong)戶進(jin)入元(yuan)素的(de)一個亮點。解釋幫助他們(men)理解按鈕或撥動開(kai)關或圖標的(de)用(yong)途(tu)和(he)如(ru)何使(shi)用(yong)它(ta)。

每(mei)個(ge)微交互都以微秒的方式提(ti)供一系列信息：

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

規(gui)則：是什么(me)讓動(dong)作/互(hu)動(dong)起作用，以及它是如何(he)起作用的

反饋：您如何(he)通(tong)過某種(zhong)提示知道您對元素的操作是(shi)否(fou)成(cheng)功

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

去訪(fang)問上(shang)面光明/黑(hei)暗(an)模式切換的例子。開(kai)關(guan)的滑動(dong)和做的正(zheng)是你(ni)所期望(wang)的，沒(mei)有太多的大(da)驚(jing)小(xiao)怪。它有一個簡單的動(dong)畫(hua)，解釋了如果(guo)你(ni)按下開(kai)關(guan)將會發生(sheng)什(shen)么(me)。這是固體的微觀相互(hu)作用。

玩得開心

微互動(dong)應該是(shi)有趣(qu)的。它是(shi)引人注(zhu)目的元(yuan)素，可以(yi)幫助引導用戶通過設計與(yu)一些現代(dai)的，可能意想不到的觸摸。

Aurelia Durand的(de)網站設計充(chong)滿(man)了令人(ren)驚奇的(de)微小互動(dong)(dong)。指針(zhen)是(shi)一(yi)個小的(de)手(shou)，它會移動(dong)(dong)以點擊適當的(de)區(qu)域，懸停在(zai)菜單上(shang)，并獲得大量的(de)彩(cai)色點來鼓勵行動(dong)(dong)，主要的(de)插圖變化和動(dong)(dong)畫也是(shi)懸停狀態微交互的(de)一(yi)部分。

展示個(ge)性

你(ni)可能一(yi)(yi)直接觸(chu)到的(de)(de)最被低估的(de)(de)微互動之一(yi)(yi)就(jiu)是(shi)Facebook react功能欄。（Facebook還不時(shi)在移動標(biao)識(shi)上添加一(yi)(yi)些有趣的(de)(de)微互動。）

這就是為什么這個(ge)方法有效。當你點(dian)擊(ji)或按住(zhu)每個(ge)小表情符(fu)時，它們就會活過來，顯示出(chu)真實的(de)情感表情供你選擇。這比快速(su)點(dian)擊(ji)經典的(de)、豎起藍色大拇(mu)指的(de)圖標更個(ge)性化、更真實。

這(zhe)些小元(yuan)素也有(you)懸(xuan)浮狀態，告(gao)訴你每個表情/圖標的(de)意思。這(zhe)些額外的(de)信(xin)息讓微互動變得更有(you)用(yong)，并為用(yong)戶提供工具，讓他們在選擇(ze)對(dui)社交媒體上(shang)的(de)帖子的(de)感覺時做出正確(que)的(de)選擇(ze)。

如(ru)果(guo)添加了(le)新的表(biao)情符號(hao)或圖標，這(zhe)一(yi)(yi)額外的信息層(ceng)尤其重要，比(bi)如(ru)“關愛”擁(yong)抱，它在2020年年中成為功能(neng)欄(lan)的一(yi)(yi)部(bu)分。

微(wei)妙(miao)的動(dong)畫(hua)效果可能(neng)很好

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

良好的(de)微交互作用(yong)幾乎(hu)是(shi)不(bu)(bu)可見的(de)。你不(bu)(bu)應(ying)該(gai)去想(xiang)它(ta)，也不(bu)(bu)應(ying)該(gai)去問為(wei)什(shen)么它(ta)會在那里(li)，或者如何與它(ta)互動(dong)(dong)。UX雜志是(shi)這樣描述它(ta)的(de)：“確保微動(dong)(dong)畫不(bu)(bu)會讓(rang)人感(gan)到尷尬或討厭(yan)。一般的(de)和次要(yao)的(de)行動(dong)(dong)需要(yao)適度的(de)反應(ying)。偶爾的(de)重(zhong)大行動(dong)(dong)都需要(yao)有力的(de)回應(ying)。”

這方面(mian)的一個典(dian)型例子便是伴隨(sui)著許多漢堡或彈出式菜單圖標的微互動(dong)。

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

屏幕(mu)中央的(de)立(li)方體也會發生二次交互。您可以(yi)通(tong)過(guo)單(dan)擊該示例查(cha)看這種(zhong)微交互的(de)分層是如何工作的(de)。

內(nei)容(rong)和諧設計

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

你(ni)并(bing)不(bu)是在一個氣泡中(zhong)進行設計，所以不(bu)要(yao)讓創意或你(ni)創造的東西(xi)的酷元素凌駕于布局之上，并(bing)與整體設計保持(chi)同步。

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

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

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

使用觸覺(jue)元素

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

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

你手(shou)機(ji)上的提示(shi)音

當你與Siri或其他設備(bei)交(jiao)談(tan)時(shi)，這些監聽點就會出現

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

當你(ni)的耳(er)塞(sai)連(lian)接到藍牙(ya)時的聲音

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

您可(ke)以使用：

感覺

聲音

進步

反彈

脈沖或(huo)嗡(weng)嗡(weng)聲

有很(hen)(hen)多方法可以做到這(zhe)一(yi)(yi)點(dian)。它(ta)(ta)們(men)的共同點(dian)是(shi)(shi)(shi)看起(qi)來和感覺(jue)都很(hen)(hen)真實。它(ta)(ta)們(men)與其(qi)說是(shi)(shi)(shi)屏幕(mu)的一(yi)(yi)部分，不如說是(shi)(shi)(shi)你(ni)的物理世界的一(yi)(yi)部分（或者至少聲稱是(shi)(shi)(shi)）。

結(jie)論

2013年左右，當(dang)丹·薩(sa)弗（Dan Saffer）在(zai)他的書中第一次提(ti)到微互動(dong)時，微互動(dong)開始勢頭迅猛(meng)。他當(dang)時概述的四個部分(fen)仍然是這些小型(xing)網站互動(dong)的關鍵(jian)部分(fen)——觸發、規則(ze)、反饋、循環和(he)模式。

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