設(shè)計(jì)的功能
動(dòng)畫(huà)+解釋
當(dāng)你開(kāi)始思考如何最好地設(shè)計(jì)微交互時(shí)，讓這個(gè)簡(jiǎn)單的短語(yǔ)在你的腦海中循環(huán)。每一個(gè)微小的網(wǎng)站設(shè)計(jì)都應(yīng)該做這些事情。
動(dòng)畫(huà)是吸引用戶進(jìn)入元素的一個(gè)亮點(diǎn)。解釋幫助他們理解按鈕或撥動(dòng)開(kāi)關(guān)或圖標(biāo)的用途和如何使用它。
每個(gè)微交互都以微秒的方式提供一系列信息：
觸發(fā)：微交互何時(shí)開(kāi)始或?yàn)槭裁撮_(kāi)始
規(guī)則：是什么讓動(dòng)作/互動(dòng)起作用，以及它是如何起作用的
反饋：您如何通過(guò)某種提示知道您對(duì)元素的操作是否成功
循環(huán)和模式：交互持續(xù)到特定用戶重置為止的時(shí)間
去訪問(wèn)上面光明/黑暗模式切換的例子。開(kāi)關(guān)的滑動(dòng)和做的正是你所期望的，沒(méi)有太多的大驚小怪。它有一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，解釋了如果你按下開(kāi)關(guān)
將會(huì)發(fā)生什么。這是固體的微觀相互作用。
玩得開(kāi)心
微互動(dòng)應(yīng)該是有趣的。它是引人注目的元素，可以幫助引導(dǎo)用戶通過(guò)設(shè)計(jì)與一些現(xiàn)代的，可能意想不到的觸摸。
Aurelia Durand的網(wǎng)站設(shè)計(jì)充滿了令人驚奇的微小互動(dòng)。指針是一個(gè)小的手，它會(huì)移動(dòng)以點(diǎn)擊適當(dāng)?shù)膮^(qū)域，懸停在菜單上，并獲得大量的彩色點(diǎn)來(lái)鼓勵(lì)行動(dòng)，主要的插圖變化和動(dòng)畫(huà)也是懸停狀態(tài)微交互的一部分。
展示個(gè)性
你可能一直接觸到的最被低估的微互動(dòng)之一就是Facebook react功能欄。（Facebook還不時(shí)在移動(dòng)標(biāo)識(shí)上添加一些有趣的微互動(dòng)。）
這就是為什么這個(gè)方法有效。當(dāng)你點(diǎn)擊或按住每個(gè)小表情符時(shí)，它們就會(huì)活過(guò)來(lái)，顯示出真實(shí)的情感表情供你選擇。這比快速點(diǎn)擊經(jīng)典的、豎起藍(lán)色大拇指的圖標(biāo)更個(gè)性化、更真實(shí)。
這些小元素也有懸浮狀態(tài)，告訴你每個(gè)表情/圖標(biāo)的意思。這些額外的信息讓微互動(dòng)變得更有用，并為用戶提供工具，讓他們?cè)谶x擇對(duì)社交媒體上的帖子的感覺(jué)時(shí)做出正確的選擇。如果添加了新的表情符號(hào)或圖標(biāo)，這一額外的信息層尤其重要，比如“關(guān)愛(ài)”擁抱，它在2020年年中成為功能欄的一部分。
微妙的動(dòng)畫(huà)效果可能很好
雖然有些微互動(dòng)更具爆炸性，但許多細(xì)微的變化幾乎可以被忽視。
良好的微交互作用幾乎是不可見(jiàn)的。你不應(yīng)該去想它，也不應(yīng)該去問(wèn)為什么它會(huì)在那里，或者如何與它互動(dòng)。UX雜志是這樣描述它的：“確保微動(dòng)畫(huà)不會(huì)讓人感到尷尬或討厭。一般的和次要的行動(dòng)需要適度的反應(yīng)。偶爾的重大行動(dòng)都需要有力的回應(yīng)。”
這方面的一個(gè)典型例子便是伴隨著許多漢堡或彈出式菜單圖標(biāo)的微互動(dòng)。Lucid Reality Labs有一個(gè)雙行圖標(biāo)，它會(huì)切換到單行，然后在菜單打開(kāi)時(shí)顯示“X”。當(dāng)“x”被點(diǎn)擊關(guān)閉時(shí)，它會(huì)動(dòng)畫(huà)另一個(gè)。它太簡(jiǎn)單了，你幾乎看不見(jiàn)它。屏幕中央的立方體也會(huì)發(fā)生二次交互。您可以通過(guò)單擊該示例查看這種微交互的分層是如何工作的。
內(nèi)容和諧設(shè)計(jì)
每一個(gè)微互動(dòng)都應(yīng)該與伴隨的內(nèi)容和諧共存。你并不是在一個(gè)氣泡中進(jìn)行設(shè)計(jì)，所以不要讓創(chuàng)意或你創(chuàng)造的東西的酷元素凌駕于布局之上，并與整體設(shè)計(jì)保持同步。
上面的“如何與白人孩子談?wù)摲N族主義”的timeline微交互很簡(jiǎn)單，并且完全與設(shè)計(jì)的其余部分整合在一起。他們包含了一定程度的細(xì)節(jié)，使移動(dòng)通過(guò)這本書(shū)的數(shù)字版本令人愉快。
每個(gè)時(shí)間軸微交互都包含一個(gè)與頁(yè)面內(nèi)容相匹配的圖標(biāo)和內(nèi)容的標(biāo)題。它放大到一個(gè)大小，讓你可以得到一個(gè)藝術(shù)和簡(jiǎn)單的運(yùn)動(dòng)是迷人的一瞥。該設(shè)計(jì)還包含了其他有趣的動(dòng)畫(huà)，如翻頁(yè)（單頁(yè)和翻頁(yè)），使整個(gè)設(shè)計(jì)成為你想要深入研究的東西。
使用觸覺(jué)元素
想想你日常使用的一些工具在與它們互動(dòng)時(shí)是如何發(fā)揮作用的。當(dāng)你點(diǎn)擊一個(gè)按鈕時(shí)，你的蘋(píng)果手表的觸覺(jué)，你手機(jī)上的提示音，當(dāng)你與Siri或其他設(shè)備交談時(shí)，這些監(jiān)聽(tīng)點(diǎn)就會(huì)出現(xiàn)。
在你走或跑的每一英里時(shí)，輕輕的嗡嗡聲來(lái)標(biāo)記，當(dāng)你的耳塞連接到藍(lán)牙時(shí)的聲音，所有這些融合了數(shù)字和現(xiàn)實(shí)的元素都是將空間融合在一起的更偉大的觸覺(jué)體驗(yàn)的一部分。微交互是實(shí)現(xiàn)這一目標(biāo)的好方法。
您可以使用：
感覺(jué)、聲音、進(jìn)步、反彈、脈沖或嗡嗡聲
有很多方法可以做到這一點(diǎn)。它們的共同點(diǎn)是看起來(lái)和感覺(jué)都很真實(shí)。它們與其說(shuō)是屏幕的一部分，不如說(shuō)是你的物理世界的一部分（或者至少聲稱(chēng)是）。
2013年左右，當(dāng)?shù)ぁに_弗（Dan Saffer）在他的書(shū)中第一次提到微互動(dòng)時(shí)，微互動(dòng)開(kāi)始勢(shì)頭迅猛。他當(dāng)時(shí)概述的四個(gè)部分仍然是這些小型網(wǎng)站互動(dòng)的關(guān)鍵部分——觸發(fā)、規(guī)則、反饋、循環(huán)和模式。如果你仔細(xì)觀察，你幾乎可以在每一個(gè)網(wǎng)站設(shè)計(jì)中的微交互作用中看到這些共同元素。我們也希望看到更多精巧的微交互例子。
