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

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

下面(mian)我(wo)們來看看2021年網(wang)站設計師們是如(ru)(ru)何(he)使用(yong)微交互(hu)的，并舉(ju)例說明這種設計技(ji)術是如(ru)(ru)何(he)發展起來的。

設計的功能

動畫+解(jie)釋

當(dang)你開始思考(kao)如何最好地設(she)計(ji)微交互時，讓這(zhe)個簡單的短(duan)語(yu)在你的腦海中循環。每(mei)一個微小(xiao)的網(wang)站(zhan)設(she)計(ji)都應該做這(zhe)些(xie)事情。

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

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

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

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

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

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

去訪問上面光明/黑暗模式切換的例子。開(kai)關的滑動(dong)(dong)和做的正是(shi)你所期望的，沒有太多(duo)的大驚(jing)小怪(guai)。它有一個簡單的動(dong)(dong)畫，解釋了如(ru)果(guo)你按下開(kai)關將(jiang)會(hui)發(fa)生什么。這是(shi)固體的微觀相互作用。

玩得開心(xin)

微互動應該(gai)是(shi)有趣的(de)(de)。它是(shi)引(yin)人注目的(de)(de)元素，可以(yi)幫(bang)助引(yin)導用戶通過(guo)設計與一些現(xian)代的(de)(de)，可能意想不(bu)到(dao)的(de)(de)觸摸。

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

展示個性

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

這(zhe)就是(shi)為(wei)什么這(zhe)個方法有效。當你點擊或(huo)按住每個小(xiao)表情(qing)(qing)符時，它們就會活(huo)過來，顯(xian)示(shi)出真實(shi)的(de)情(qing)(qing)感表情(qing)(qing)供你選(xuan)擇(ze)。這(zhe)比快速點擊經典(dian)的(de)、豎起藍(lan)色大(da)拇(mu)指的(de)圖標更(geng)個性化、更(geng)真實(shi)。

這些(xie)小元(yuan)素也有懸浮(fu)狀態，告訴你(ni)每(mei)個(ge)表(biao)情(qing)/圖(tu)標的(de)意思(si)。這些(xie)額外的(de)信(xin)息讓微互動(dong)變得更有用(yong)，并為用(yong)戶提(ti)供工具，讓他們在選擇對社交(jiao)媒體上(shang)的(de)帖子的(de)感覺時做(zuo)出正確的(de)選擇。

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

微(wei)妙的動畫效果可能(neng)很(hen)好

雖然有些微互動更具(ju)爆(bao)炸(zha)性(xing)，但許(xu)多(duo)細微的變(bian)化幾乎可以(yi)被(bei)忽視。

良(liang)好(hao)的(de)(de)微(wei)交互作用幾乎(hu)是不(bu)可見的(de)(de)。你不(bu)應該去想它(ta)，也(ye)不(bu)應該去問為什么它(ta)會在(zai)那里，或者如何與(yu)它(ta)互動。UX雜志(zhi)是這樣描(miao)述它(ta)的(de)(de)：“確保(bao)微(wei)動畫(hua)不(bu)會讓(rang)人感到尷尬(ga)或討厭。一般的(de)(de)和次要(yao)的(de)(de)行(xing)動需(xu)要(yao)適度的(de)(de)反(fan)應。偶(ou)爾(er)的(de)(de)重大(da)行(xing)動都需(xu)要(yao)有力的(de)(de)回(hui)應。”

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

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

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

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

每(mei)一(yi)個微(wei)互動都應該與(yu)伴(ban)隨的(de)內容和諧共存(cun)。

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

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

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

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

使用(yong)觸覺元(yuan)素

想想你日(ri)常使用的一些工具在與它們(men)互動時是(shi)如何發(fa)揮作(zuo)用的。

當(dang)你點擊一個(ge)按鈕(niu)時，你的(de)蘋果手(shou)表的(de)觸覺(jue)

你(ni)手機(ji)上的提示音

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

在你走(zou)或跑(pao)的(de)每一英(ying)里時，輕輕的(de)嗡(weng)嗡(weng)聲來標記

當你的耳塞連接到藍牙時的聲音

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

您可以(yi)使用(yong)：

感覺

聲音

進步

反彈

脈沖或嗡嗡聲

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

結論

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

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