微(wēi)交互在用(yòng)戶體(t∑‌ǐ)驗設計(jì)中并不(bù)是(shì)一(yī)個(g‍γεπè)新概念，但(dàn)它們卻越來(lái)越令人(rén)£←★☆印象深刻。我們在Design Shack討(tǎ§₹↕o)論微(wēi)交互已經有(yǒu)一(yī)段時(shí)間(jiā✔δ↔n)了(le)，因為(wèi)它們對(duì)網站(zhàn)設計(jì÷σ&")項目的(de)整體(tǐ)成功至關重要(yào)。

微(wēi)互動是(shì)指那(nà)些(♥φσxiē)将普通(tōng)用(yòng)戶體(tǐ)驗變€‍✔成更令人(rén)難忘和(hé)吸引人(rén→φ)的(de)微(wēi)小(xiǎo)細節。這(zh→♦$₩è)些(xiē)小(xiǎo)事(shì)情 ε↕會(huì)給你(nǐ)帶來(lái)驚喜和(hé)快(ku§¥‍♣ài)樂(yuè)，為(wèi)你(nǐ)的(de)應用(yòng)或☆ <網站(zhàn)設計(jì)增加一(yī)層令人(rén)愉快(kuài)的₽&(de)UX。

下(xià)面我們來(lái)看(kàn♠₹↕)看(kàn)2021年(nián)網站(z≈•φσhàn)設計(jì)師(shī)們是(shì)如(rú)何使用(yαε¥òng)微(wēi)交互的(de)，并舉例說(‍←shuō)明(míng)這(zhè)種設計(jì)技(j&★₹βì)術(shù)是(shì)如(rú)何發展起來(lái)的(de)‌φ≥。

設計(jì)的(de)功能(néng)

動畫(huà)+解釋

當你(nǐ)開(kāi)始思考如(rú)何‌₩&₩最好(hǎo)地(dì)設計(jì)微(•±§wēi)交互時(shí)，讓這(zhè)個 ÷↕γ(gè)簡單的(de)短(duǎn)語在你(nǐ)的(de)腦(nǎo)海(₩®hǎi)中循環。每一(yī)個(gè)微(<&♥wēi)小(xiǎo)的(de)網站(zhàn)設計(j ¥ì)都(dōu)應該做(zuò)這(zhè)些(xi₹πē)事(shì)情。

動畫(huà)是(shì)吸引用(yòng)戶進入元素的(de)一(yīπ§)個(gè)亮(liàng)點。解釋幫助他(tā)們理(lǐ)解按鈕或撥動λσ∏開(kāi)關或圖标的(de)用(yòng)途和(hé)如(rú)何使✘≠用(yòng)它。

每個(gè)微(wēi)交互都(dōu)以微(wēi)秒(miǎ←×o)的(de)方式提供一(yī)系列信息：

觸發：微(wēi)交互何時(shí)開(kāi)始或為(wèi)什(≥‍shén)麽開(kāi)始

規則：是(shì)什(shén)麽讓動作λ×σ®(zuò)/互動起作(zuò)用(yòng)，以及它是(shì)如(rú)何<∏↓↓起作(zuò)用(yòng)的(de)

反饋：您如(rú)何通(tōng)過某種提示知(zhī)道(dào)您σ$對(duì)元素的(de)操作(zuò)是(sh β'♠ì)否成功

循環和(hé)模式：交互持續到(dào)特定用(yòng)戶重置αλ為(wèi)止的(de)時(shí)間(jiān)

去(qù)訪問(wèn)上(shàng)面‍δ₽光(guāng)明(míng)/黑(hēi)π¥♦÷暗(àn)模式切換的(de)例子(zǐ)。開(kāi)關的(de)滑動和(✔✘≠hé)做(zuò)的(de)正是(shì)你(nǐ)所期望的(de)，沒有(yσ•ǒu)太多(duō)的(de)大(dà)驚λα>小(xiǎo)怪。它有(yǒu)一(yī)個(gè)簡單的(de)<αφ∏動畫(huà)，解釋了(le)如(rú)果你(nǐ)按下 ♣(xià)開(kāi)關将會(huì)發生(shēng)什(shén)麽。這(✘≤↔zhè)是(shì)固體(tǐ)的(de)微(wēi)♣ 觀相(xiàng)互作(zuò)用(yòng)。

玩(wán)得(de)開(kāi)心

微(wēi)互動應該是(shì)有(yǒu)"→趣的(de)。它是(shì)引人(rén)注目的(de)元素，可✘→(kě)以幫助引導用(yòng)戶通(tōng)過設計σ∏α(jì)與一(yī)些(xiē)現(xiàn)代的(de)，可(kě✔©)能(néng)意想不(bù)到(dào)的(de)觸摸。

Aurelia Durand的(de)網站(zhàn)設δ€計(jì)充滿了(le)令人(rén)驚奇的(de)微(wēi)小(xiǎo©"↓¶)互動。指針是(shì)一(yī)個(gè)小(xiǎo)的(de)手，×∞它會(huì)移動以點擊适當的(de)區(qū)域，≥γ♥'懸停在菜單上(shàng)，并獲得(de)大(≥≈✔dà)量的(de)彩色點來(lái)鼓勵行(xíngλ•)動，主要(yào)的(de)插圖變化(huà)和(hé)動畫(huà≈☆×)也(yě)是(shì)懸停狀态微(wēi)交互的(de)一(yī)部分←π(fēn)。

展示個(gè)性

你(nǐ)可(kě)能(néng)一(yī)直接觸到(dào₽γπ)的(de)最被低(dī)估的(de)微(wēi)‍ 互動之一(yī)就(jiù)是(shì)±✘Facebook react功能(nén★≤g)欄。（Facebook還(hái)不(bù)時∏ε$(shí)在移動标識上(shàng)添加一(yī)些(xiē)有(yǒu)↓$¶&趣的(de)微(wēi)互動。）

這(zhè)就(jiù)是(shì)為(wèi)什(shén)麽這(zhè)個γ×(gè)方法有(yǒu)效。當你(nǐ)點擊或按住每個(gè)小(xiǎ→©λo)表情符時(shí)，它們就(jiù)會(huì)活過來(lái™Ω≥)，顯示出真實的(de)情感表情供你(nǐ)'←★選擇。這(zhè)比快(kuài)速點擊經典π¥¥α的(de)、豎起藍(lán)色大(dà)拇指的(de)α≥圖标更個(gè)性化(huà)、更真實。

這(zhè)些(xiē)小(xiǎo)元素也(yě)有(y ∏ǒu)懸浮狀态，告訴你(nǐ)每個(gè)表情/圖÷♥"×标的(de)意思。這(zhè)些(xiē)額外(wài)的(de)信β∑✔÷息讓微(wēi)互動變得(de)更有(yǒu)用(yòng)，并為(wèi)γ$∏α用(yòng)戶提供工(gōng)具，讓他(tā)ε β₩們在選擇對(duì)社交媒體(tǐ)上(shàng)的(de)帖子(£★∑zǐ)的(de)感覺時(shí)做(zuò)出正确的(de)選擇。

如(rú)果添加了(le)新的(de)表情符号或♠‍‍圖标，這(zhè)一(yī)額外(wài)的(©≥de)信息層尤其重要(yào)，比如(rú)“關愛(ài)™©λ”擁抱，它在2020年(nián)年(nián)中成為(w×±èi)功能(néng)欄的(de)一(yī)部分(fēn)。

微(wēi)妙的(de)動畫(huà)效果可(kλΩ$ě)能(néng)很(hěn)好(hǎo)

雖然有(yǒu)些(xiē)微(wēi)互" 動更具爆炸性，但(dàn)許多(duō)細微(wēi)的(deπ )變化(huà)幾乎可(kě)以被忽視(₽≤↑shì)。

良好(hǎo)的(de)微(wēi)交互作(zuò)用(yòn≠¶g)幾乎是(shì)不(bù)可(kě)見(jiàn)的(de)。你(n↓®♠ǐ)不(bù)應該去(qù)想它，也(yě)不(bù)應該去(qù)問(wè<☆♠n)為(wèi)什(shén)麽它會(huì)在那(n₽←à)裡(lǐ)，或者如(rú)何與它互動。UX雜(zá)志(zh ★>ì)是(shì)這(zhè)樣描述它的(de)：“确保微(wēi)動畫(h£→✘'uà)不(bù)會(huì)讓人(rén)感到(dào)βπ尴尬或討(tǎo)厭(yàn)。一(yī)般的(de)和(hé)次要(yào)<&↑的(de)行(xíng)動需要(yào)§♣€§适度的(de)反應。偶爾的(de)重大(dà)行(xíng)動都(d¶Ω✘ōu)需要(yào)有(yǒu)力的(de)回應。”

這(zhè)方面的(de)一(yī)個(gè)典型例子(zǐ)便是(shì)伴★¶​↔随著(zhe)許多(duō)漢堡或彈出式菜單 ×σ圖标的(de)微(wēi)互動。

Lucid Reality Labs有(✔λ yǒu)一(yī)個(gè)雙行(xíng)圖标，它會(huì)切換到(dào€ λ)單行(xíng)，然後在菜單打開(kāi)時(shí)顯示“€​∑★X”。當“x”被點擊關閉時(shí)，它會( ε&huì)動畫(huà)另一(yī)個(gè)。它太簡 σ↓單了(le)，你(nǐ)幾乎看(kàn)不(bù)見(jiàn)它✔₩₽←。

屏幕中央的(de)立方體(tǐ)也(yě)會(huì)σ‍☆¥發生(shēng)二次交互。您可(kě)以通(∞∞tōng)過單擊該示例查看(kàn)這(zhè™σ)種微(wēi)交互的(de)分(fēn)層是(shì)如(rú)何工(gōn ÷g)作(zuò)的(de)。

內(nèi)容和(hé)諧設計(jì)

每一(yī)個(gè)微(wēi)互動都(β"↑♥dōu)應該與伴随的(de)內(nèi)容和(hé)諧共存。

你(nǐ)并不(bù)是(shì)在一(yī)個(÷σ£♣gè)氣泡中進行(xíng)設計(jì)，所以不(bù)要(yào)€δ↑ 讓創意或你(nǐ)創造的(de)東(dō÷÷ng)西(xī)的(de)酷元素淩駕于布局之上(shàng)，并與整♥↕體(tǐ)設計(jì)保持同步。

上(shàng)面的(de)“如(rú)何與白(bái)人(rén↑☆∏)孩子(zǐ)談論種族主義”的(de)timelin↑ ε↑e微(wēi)交互很(hěn)簡單，并且完全與設計(jì)的(de)其餘部分(☆≠'γfēn)整合在一(yī)起。他(tā)們包含了(le)一(yī)定程度的₩✘(de)細節，使移動通(tōng)過這(zhè)本書(shū)的(← πde)數(shù)字版本令人(rén)愉快(ku‌♥εài)。

每個(gè)時(shí)間(jiān)軸微(wēi∑ σ★)交互都(dōu)包含一(yī)個(gè)與頁面內(nèi)容相(xiδ$™àng)匹配的(de)圖标和(hé)內(nèi)容的(de)标題。它放(fàn​ '♦g)大(dà)到(dào)一(yī)個(gè)大(dà≠↔)小(xiǎo)，讓你(nǐ)可(kě)以得(de<‍<↔)到(dào)一(yī)個(gè)藝術(shù)和(hé)簡單的(de₹¥)運動是(shì)迷人(rén)的(de)一(y♦↓>¥ī)瞥。

該設計(jì)還(hái)包含了(le)其他(tā<α↑∏)有(yǒu)趣的(de)動畫(huà)，如(rú)翻頁（單→♥∑頁和(hé)翻頁），使整個(gè)設計(jì)☆♣‍成為(wèi)你(nǐ)想要(yào)深入研究的(de)東(dōng)西(xīσ≥)。

使用(yòng)觸覺元素

想想你(nǐ)日(rì)常使用(yòng)的(d≈₹e)一(yī)些(xiē)工(gōng)具在與它們互動時(shí)是(shì)♦&→ 如(rú)何發揮作(zuò)用(yòng)的(de)。

當你(nǐ)點擊一(yī)個(gè)按鈕時(shí)，你(nǐ)的(•÷de)蘋果手表的(de)觸覺

你(nǐ)手機(jī)上(shàng)的(de)提示音(yīn)≠☆₽

當你(nǐ)與Siri或其他(tā)設備交談時(shí)，這(zh☆εè)些(xiē)監聽(tīng)點就(jiù)會(huìβ&)出現(xiàn)

在你(nǐ)走或跑的(de)每一(yī)英裡(l£×←♦ǐ)時(shí)，輕輕的(de)嗡嗡聲來(lá→↔i)标記

當你(nǐ)的(de)耳塞連接到(dào)藍(lán)牙時(sh₹×✘í)的(de)聲音(yīn)

所有(yǒu)這(zhè)些(xiē)融合了(le)數(shù)字和(&£÷"hé)現(xiàn)實的(de)元素都(dōu)是(shì)将空(kōng)間≥σ∏(jiān)融合在一(yī)起的(de)更偉大(dà)的(de)←‍♦觸覺體(tǐ)驗的(de)一(yī)部分(fēn)。微(wēi)交互是(shì★¥↔∏)實現(xiàn)這(zhè)一(yī)目标的(de)好(₹γσ∑hǎo)方法。

您可(kě)以使用(yòng)：

感覺

聲音(yīn)

進步

反彈

脈沖或嗡嗡聲

有(yǒu)很(hěn)多(duō)方法可(kě)以做(zuò)到(dào​δ)這(zhè)一(yī)點。它們的(de)共同點是(shì)看(kàn""¶)起來(lái)和(hé)感覺都(dōu)很(hěn)真實。它們""'與其說(shuō)是(shì)屏幕的(de)一(yī)部分(fē₩≥∞n)，不(bù)如(rú)說(shuō)是(£ shì)你(nǐ)的(de)物(wù)理(lǐ)世界的(de)一(yī)部分( ±∏ fēn)（或者至少(shǎo)聲稱是(sγ☆hì)）。

結論

2013年(nián)左右，當丹·薩弗（Dan Saffer）在他(tā)的( §♦←de)書(shū)中第一(yī)次提到(dào)微(wēi)¶γ互動時(shí)，微(wēi)互動開(kāi)始勢頭迅猛。他(tā≠•☆₽)當時(shí)概述的(de)四個(gè)部分(fēn)仍然是(shì)這(≠$zhè)些(xiē)小(xiǎo)型網站(zhàn)互動的(‍<≥♠de)關鍵部分(fēn)——觸發、規則、反饋、循環和(hé¶≤☆™)模式。

如(rú)果你(nǐ)仔細觀察，你(nǐ)幾乎可(kě)以在每一(↕•₹yī)個(gè)網站(zhàn)設計(jì)中的(de)微(w↔'"ēi)交互作(zuò)用(yòng)中看(kàn)≠♠到(dào)這(zhè)些(xiē)共同元素。我們也(←¶yě)希望看(kàn)到(dào)更多(duō)精巧的(ε✔ de)微(wēi)交互例子(zǐ)。