前言

什么是微交互？

微交互是用戶在完成某個小任務(wù)時產(chǎn)生的交互體驗。例如，解鎖手機就是一個微交互，手機調(diào)成震動模式時會震一下也是一個微交互。

為什么稱為“微交互”呢？所謂的“微”其實就是指的產(chǎn)品的細節(jié)設(shè)計。微交互正在成為產(chǎn)品設(shè)計中越來越重要的部分。正如同Charles Eames 曾經(jīng)所說，“細節(jié)并不只是細節(jié)，它是構(gòu)建起整個設(shè)計的基本元素?！蹦愕腢I和交互設(shè)計中的每一個元素都是至關(guān)重要的，一個又一個細節(jié)設(shè)計讓你的產(chǎn)品最終脫穎而出，而真正讓人難忘的產(chǎn)品，靠的是這一個個精致到位的細節(jié)堆出來的。真正優(yōu)秀的設(shè)計，從功能到元素，從交互到過渡，都是可靠的。

案例分析

對比案例1

微信的點贊功能，當你手機沒有網(wǎng)絡(luò)或者網(wǎng)絡(luò)不好時，在朋友圈給好友點贊，會顯示點贊成功。但事實上雖然顯示已點贊，其實對方并沒有收到你的贊，當有了網(wǎng)絡(luò)后好友才能收到你的贊，這個過程用戶全然不知。這其實就是個優(yōu)秀的微交互設(shè)計，產(chǎn)品給用戶呈現(xiàn)出優(yōu)秀的執(zhí)行力。這個場景就像，領(lǐng)導(dǎo)給下屬下達命令，過程我不關(guān)心，我只要結(jié)果是一樣！

微信這種微交互體驗，充分的運用了，以用戶為中心的設(shè)計宗旨！

再看下圖，8只小豬app的達人圈，當用戶手機沒有網(wǎng)絡(luò)時，點贊是不會成功的，但是它提供即時反饋，“哎呀，網(wǎng)絡(luò)出問題了”。其實這種即時反饋機制是交符合良好體驗的，但是對比微信的洞察人性體驗還是差點意思。

還有一些產(chǎn)品當網(wǎng)絡(luò)不好時，點贊還會出現(xiàn)loading動畫！這樣就給會用戶留下卡頓的印象！

對比案例2

同樣的微信刪除好友對話，沒網(wǎng)絡(luò)時也會執(zhí)行，這樣就達到了，快速滿足用戶的需求，有些場景用戶需要快速刪掉聊天記錄時，就不會出現(xiàn)網(wǎng)絡(luò)不好刪不掉的問題了！

全民k歌app無網(wǎng)絡(luò)是不可以刪除對話的，同樣是一家公司的產(chǎn)品，差別怎么就這么大呢?。ó斎灰膊荒苷f這種交互是不可取錯誤的）

對比案例3

網(wǎng)易嚴選的tab導(dǎo)航切換，當選項超出一屏?xí)r，左滑動到一定數(shù)量，選中效果會停在最中間的位置，這樣左邊能看到剛瀏覽過的幾個選項，告訴用戶剛看過了什么內(nèi)容，同樣右邊能看到幾個選項告訴用戶即將要看到什么內(nèi)容。

當要返回到第一個選項，右滑動出現(xiàn)第一個選項“推薦”時，選中效果不再停留在中間位置，這樣就能告訴用戶已經(jīng)到頭了。這個流程有一個非常清晰易懂的規(guī)則。

在看下圖的一個反例，可以說并沒有一個規(guī)則。一直往后滑動，會停在倒數(shù)第二個，顯示的最后一個并沒有完全顯示出來，這樣就沒有給用戶清晰明了的提示下一個是什么選項。

返回時直接跑到左邊第一個，看不到接下來要返回選項！

案例4

好的產(chǎn)品懂得洞察人性，支付寶支付流程做到了這一點。

點擊“立即支付”在指紋識別彈窗出來之前，有個圓圈小動畫反饋給用戶支付正在進行中...  這其實還不夠，指紋識別成功后，立即出現(xiàn)一個正在付款小動畫，然后提示支付成功。

整個流程都在與用戶交流，注重人性化思考，動效簡潔流暢不會給用戶帶來繁瑣的感覺。

 其實很多微交互的設(shè)計未必都能讓用戶感知到，但如果沒有一個好的體驗，用戶真的能感知到。

假設(shè)支付寶支付流程，點擊“立即付款”咔嚓提示支付成功。你會不會覺得錢怎么這么快就出去了，似乎丟失了什么一樣，一種失落感涌上心頭！

案例5

這種列表頁面很多都是有數(shù)量限制的，滑動到最后在往上滑動，會有一個彈性的效果，感覺就會很舒服，用戶也得到了一個清晰的反饋。但若是滑動到最后，再往上滑不動了，沒有任何反饋，用戶就會有是不是卡住的疑惑，最后用戶才察覺到原來是見底了。

如今的app已經(jīng)很少會出現(xiàn)這么初級的體驗問題了。從0到1的產(chǎn)品可能還是要考慮到這個體驗問題！

案例6

下拉刷新告訴用戶你關(guān)注的人更新了幾條微博。這里要多說一下，微交互設(shè)計要結(jié)合產(chǎn)品的結(jié)構(gòu)模式，能洞察用戶的心理，給出正確的引導(dǎo)。例如這個更新條數(shù)提示也適合新聞類app，因為新聞具有時效性，不適合類似微博榜單的頁面，因為它不具備時效性，榜單的微博會長時間不改變！

總結(jié)：設(shè)計微交互的幾個重要的要素！

觸發(fā)：設(shè)計中要有清晰的交互感知，這樣用戶才會直觀的感受到可以觸發(fā)交互的，例如一個愛心icon，讓用戶清晰的知道這里是可以點擊的。

反饋：當點擊愛心icon，能瞬間得到感官上的反饋，這樣就讓用戶有繼續(xù)操作下去的欲望。一個好的微交互反饋能引起了用戶總是想了解更多信息的原始欲望。

KISS原則：KISS 原則是用戶體驗的高層境界，簡單的解釋就是：再笨的人也會用。微交互講究，簡單高效、動效流暢、要避免過度設(shè)計成為重交互。

最重要是：微交互要結(jié)合產(chǎn)品性質(zhì)、結(jié)構(gòu)模式了解你的用戶和使用場景來設(shè)計，這樣設(shè)計的微交互才會更加精準有效。

趣味性的微交互案例 

案例1

facebook的點贊功能，長按小手會越來越大，聊天中就增加它的趣味性，給你一個大大的贊！

案例2

新浪微博的點贊，彈出一個小動畫，讓用戶愛上點贊！

案例3

趣味性的對商品選擇喜歡還是無感，這種微交互就會給用戶留下很好的印象！

案例4

手指畫一個心，形成一個點贊，是不是很有創(chuàng)意很有趣！

總結(jié)：趣味性的微交互思考

微交互必須滿足長期使用原則，一些起初看起來有趣的微交互也許時間久了反而會使用戶討厭。例如手指畫心點贊功能，初次使用，你會覺得很有趣，但是當你用過100次后會不會覺得點個贊好麻煩呢？

最后

為什么說UI設(shè)計師最該考慮微交互的設(shè)計？因為微交互常常伴隨著動效設(shè)計，現(xiàn)如今動效設(shè)計幾乎是UI設(shè)計師必備的技能。

UI設(shè)計師相對于PM需求、交互設(shè)計師原型圖、UI界面的產(chǎn)出是最接近落地時候，微交互也常常與視覺相結(jié)合，這是交互設(shè)計師可能考慮不到的地方。

但是身為UI設(shè)計師我們一定要始終在團隊中，多與PM、交互設(shè)計師溝通，因為他們可能比你更了解產(chǎn)品的框架結(jié)構(gòu)，運營模式。

所以不要盲目設(shè)計，只有團隊才能從多個維度考慮問題。

多溝通！多溝通！多溝通！

優(yōu)秀微交互并且能夠給用戶留下深刻印象，讓產(chǎn)品更加富有生命力。設(shè)計師不得不重視起來。

看到文章最后的你，肯定是個很厲害的人，文章對你有幫助就點個贊吧！