一篮灼、微交互到底是什么？
微交互通常關(guān)注于單個(gè)事件或者單個(gè)任務(wù)羔砾，這些交互元素遍布于整個(gè) APP 的各個(gè)角落。這些微交互存在的目的是讓用戶感覺順暢、愉悅匣屡，設(shè)計(jì)師借此創(chuàng)造出吸引人或者令人高興的瞬間，或者說拇涤，讓用戶在這一刻感受到人性化捣作。
看看下面的交互吧：
△ Facebook Messenger ，拇指動(dòng)態(tài)表情
這個(gè)動(dòng)畫就是一個(gè)很典型的微交互案例鹅士，它實(shí)現(xiàn)了三個(gè)重要的功能：
呈現(xiàn)狀態(tài)并給予反饋券躁；
增強(qiáng)用戶的操控感；
幫用戶看到交互的結(jié)果掉盅。
二也拜、分解微交互
微交互通常是由四個(gè)部分組成的：
觸發(fā)：微交互的觸發(fā)可以是用戶觸發(fā)也可以是系統(tǒng)自動(dòng)啟動(dòng)的。用戶觸發(fā)的微交互通常需要發(fā)起一個(gè)動(dòng)作才能啟動(dòng)趾痘，而系統(tǒng)觸發(fā)的微交互通常是 APP 檢測(cè)到滿足某些條件才會(huì)觸發(fā)慢哈。
規(guī)則：規(guī)則決定了觸發(fā)之后會(huì)發(fā)生什么事情。
反饋：反饋?zhàn)層脩糁腊l(fā)生了什么永票。任何用戶在微交互發(fā)生的時(shí)候看到的卵贱，聽到的，感受到的都是反饋瓦侮。
循環(huán)和模式：循環(huán)和模式?jīng)Q定了什么狀況下微交互會(huì)再次出現(xiàn)艰赞，條件變化的時(shí)候，微交互會(huì)怎么隨之變化肚吏。
三方妖、微交互為何如此重要？
微交互確實(shí)是微小的設(shè)計(jì)元素罚攀，但是為何設(shè)計(jì)師會(huì)在這個(gè)上面投注如此之多的精力呢党觅？這個(gè)問題的答案很重要，對(duì)于設(shè)計(jì)師和開發(fā)者而言斋泄，都應(yīng)該知道：微交互讓用戶更容易理解功能杯瞻，它是在情感層面上的設(shè)計(jì)。
微交互對(duì)于產(chǎn)品的好處很多：
它們讓網(wǎng)站更加易于導(dǎo)航炫掐；
它們讓用戶更容易和網(wǎng)站進(jìn)行互動(dòng)魁莉；
它們?yōu)橛脩籼峁┝私换ブ蟮募磿r(shí)反饋；
它們給用戶以信息的提示；
它們告知用戶以元素相關(guān)的信息旗唁，比如控件是否是可交互的畦浓；
它們使得用戶體驗(yàn)更加有價(jià)值；
它們鼓勵(lì)用戶分享检疫、點(diǎn)贊和評(píng)論內(nèi)容讶请；
它們讓網(wǎng)站更加感性，更加人性化屎媳。
精心設(shè)計(jì)的微交互夺溢，是體諒用戶照顧用戶的標(biāo)志。這就是為什么微交互如此受重視烛谊，通過即時(shí)的反饋风响，用戶會(huì)明白他們?cè)撟鍪裁矗约八麄冏龅膶?duì)不對(duì)晒来。
設(shè)計(jì)恰當(dāng)?shù)奈⒔换コ睿層脩魧?duì)于產(chǎn)品和品牌有積極的影響郑现，甚至?xí)饔玫接脩舻男袨樯吓缺溃^大多數(shù)的人并不知道這是為什么。根據(jù)「霍洛效應(yīng)」接箫，如果用戶喜歡產(chǎn)品的某個(gè)方面攒读，可能會(huì)放大以至于對(duì)整個(gè)產(chǎn)品都有積極的態(tài)度，反之亦然辛友。如果能夠善用這一原理薄扁，在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候能夠事半功倍，通過適當(dāng)?shù)募?xì)節(jié)設(shè)計(jì)的控制废累，讓用戶更加滿意邓梅。
四、何時(shí)使用微交互更好邑滨？
通過案例來探討這個(gè)問題吧日缨。
在 UI/UX 設(shè)計(jì)的領(lǐng)域當(dāng)中，微交互被視作為和用戶之間溝通的重要手段掖看，以下是7種最常見的微交互和它們對(duì)于用戶體驗(yàn)的影響匣距。
1.?滑動(dòng)交互
滑動(dòng)交互是比起點(diǎn)擊更加直覺更加順暢的一種交互，它有助于用戶快速切換標(biāo)簽哎壳、界面并且獲得更多的信息毅待。作為最為常見的交互，它會(huì)在潛意識(shí)中引導(dǎo)用戶归榕，而用戶通常不需要去思考就會(huì)下意識(shí)執(zhí)行尸红。這種交互非常有趣，爽快，且令人上癮外里。
2.?數(shù)據(jù)輸入
我們都很清楚創(chuàng)建新帳號(hào)和修改密碼這類需要大量輸入的交互是多麻煩邑飒，經(jīng)常會(huì)讓用戶感到沮喪。諸如密碼強(qiáng)度的測(cè)試和輸入建議會(huì)讓用戶更好的推進(jìn)這個(gè)過程级乐，這個(gè)過程中疙咸，盡量借助細(xì)節(jié)和建議來提升整個(gè)輸入過程的體驗(yàn)和成功率，會(huì)讓用戶主觀感受更舒服风科。
3.?動(dòng)畫效果
動(dòng)畫常常作為微交互的一部分而存在撒轮，它讓微交互可行，并且給予提升贼穆。動(dòng)畫讓設(shè)計(jì)更加人格化题山，許多微妙的動(dòng)效在實(shí)際操作中并不會(huì)被直接注意到，但是如果缺少它故痊，會(huì)讓人明顯感受到缺失感顶瞳。動(dòng)效常常作為環(huán)節(jié)之間的粘合劑，讓交互和流程更加完整順滑愕秫。值得注意的是慨菱，動(dòng)畫的目的是吸引用戶，但是不能讓用戶分心戴甩，或者產(chǎn)生挫敗感符喝，過于新奇的風(fēng)格或者動(dòng)畫耗時(shí)太多，都會(huì)產(chǎn)生不良的效果甜孤，或者讓人混淆协饲。
4.?系統(tǒng)狀態(tài)
當(dāng)前的系統(tǒng)狀態(tài)是用戶始終應(yīng)該了解且需要了解的事情。如果用戶無法感知或者被通知到缴川，他們常常會(huì)因此感到惱火茉稠，因此會(huì)關(guān)閉網(wǎng)站或者 APP。通過微交互讓用戶確切地了解當(dāng)前的系統(tǒng)狀態(tài)把夸，多長時(shí)間能完成加載而线，或者是信息已經(jīng)被完全提交等等。哪怕是報(bào)錯(cuò)信息扎即，如果足夠幽默吞获，同樣能夠維持用戶對(duì)產(chǎn)品的信任。
5.?讓教程有趣
絕大多數(shù)人都在獲取信息谚鄙，獲取解決某個(gè)問題的辦法各拷。而教程常常是用戶獲得答案的重要載體。在微交互的加持之下闷营，教程常常能夠得到簡化烤黍，能夠更加有趣知市，易于理解，更好地指導(dǎo)用戶操作速蕊、解決問題嫂丙。
6.?行為召喚
實(shí)質(zhì)上，微交互和行為召喚元素的結(jié)合规哲，能夠更好地推動(dòng)用戶與 APP 交互跟啤，行為召喚的原理是通過行為指引、成就感灌輸和同理心唉锌，來吸引用戶的注意力隅肥，促使用戶執(zhí)行特定的交互。
7.?動(dòng)畫效果
動(dòng)態(tài)按鈕常嘲兰颍可以作為一個(gè)綜合性的信息傳達(dá)的工具來使用腥放，設(shè)計(jì)師需要關(guān)注它的顏色、形狀绿语、特效秃症、布局和紋理，確保用戶的無縫體驗(yàn)吕粹。
人類對(duì)于及時(shí)性的滿足有先天的追求种柑。在更大的愉悅面前，主觀上忽略細(xì)節(jié)是一種常見的傾向昂芜，但是這種「忽略」并非看不到而是更接近于不在意莹规，如果缺失了赔蒲，會(huì)感知到泌神。細(xì)節(jié)是魔鬼。正是有了這些細(xì)節(jié)上的用心設(shè)計(jì)舞虱，才造就了偉大的設(shè)計(jì)和強(qiáng)大的功能欢际，這也在強(qiáng)化用戶體驗(yàn)上作出巨大的貢獻(xiàn)。
五矾兜、如何設(shè)計(jì)微交互损趋？
設(shè)計(jì)微交互對(duì)于設(shè)計(jì)師而言，是一個(gè)非常令人振奮的事情椅寺，因?yàn)榭梢試L試新的解決方案浑槽，并且在探索中發(fā)掘出讓用戶感到驚艷的東西。為了做到這一點(diǎn)返帕，你需要做下面的事情：
站在用戶的角度看待問題桐玻，用盡辦法讓他們明白如何使用你的產(chǎn)品。
創(chuàng)造功能性的動(dòng)畫荆萤，不僅要有美感镊靴，而且能夠增強(qiáng)體驗(yàn)铣卡。
讓你的用戶開心，用戶使用時(shí)候的主觀感受偏竟，決定了他們是否要繼續(xù)使用下去煮落。如果用戶感到愉悅，他們會(huì)回來踊谋。
不要讓人覺得煩躁蝉仇，過多的動(dòng)效可能會(huì)讓人覺得頭疼，而這個(gè)會(huì)讓用戶離開你殖蚕。
使用正常的表述量淌，而不是技術(shù)術(shù)語來表達(dá)，因?yàn)楹笳吒菀鬃屓擞X得沮喪嫌褪。
六呀枢、設(shè)計(jì)微交互常用的工具
那么設(shè)計(jì)師應(yīng)該使用什么樣的工具來設(shè)計(jì)微交互呢？下面是我根據(jù)個(gè)人經(jīng)驗(yàn)列舉出來的工具：
移動(dòng)端：Xcode笼痛，Android studio
網(wǎng)頁端：Framer裙秋，CSS動(dòng)畫
如果你想設(shè)計(jì)界面之間的交互，可以使用 InVision 或者 Marbel
如果你想設(shè)計(jì)更詳細(xì)的交互可以使用 Principle缨伊，Adobe CC摘刑，Origami Studio，Protopie
如果你想設(shè)計(jì)細(xì)節(jié)交互和動(dòng)畫刻坊，可以使用 After Effects
下面是我所設(shè)計(jì)的一些微交互：
