UI設計師最該考慮微互動的設計

前言 

什麼是微互動？

微互動是使用者在完成某個小任務時產生的互動體驗。例如，解鎖手機就是一個微互動，手機調成震動模式時會震一下也是一個微互動。

為什麼稱為「微互動」呢？所謂的「微」其實就是指的產品的細節設計。微互動正在成為產品設計中越來越重要的部分。正如同 Charles Eames 曾經所說， 「 細節並不只是細節，它是構建起整個設計的基本元素。 」 你的 UI 和互動設計中的每一個元素都是至關重要的，一個又一個細節設計讓你的產品最終脫穎而出，而真正讓人難忘的產品，靠的是這一個個精緻到位的細節堆出來的。真正優秀的設計，從功能到元素，從互動到過渡，都是可靠的。

能認真把這文章看到最後的都是很厲害的人

案例分析 

對比案例1

微信的點贊功能，當你手機沒有網路或者網路不好時，在朋友圈給好友點贊，會顯示點贊成功。但事實上雖然顯示已點贊，其實對方並沒有收到你的贊，當有了 網路 後好友才能收到你的贊，這個過程使用者全然不知。這其實就是個優秀的微互動設計，產品給使用者呈現出優秀的執行力。這個場景就像，領導給下屬下達命令，過程我不關心，我只要結果是一樣！

微信這種微互動體驗，充分的運用了，以使用者為中心的設計宗旨！

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

還有一些產品當網路不好時，點贊還會出現loading動畫！這樣就給會使用者留下卡頓的印象！

對比案例2

同樣的微信刪除好友對話，沒網路時也會執行，這樣就達到了，快速滿足使用者的需求，有些場景使用者需要快速刪掉聊天記錄時，就不會出現網路不好刪不掉的問題了！

全民k歌app無網路是不可以刪除對話的，同樣是一家公司的產品，差別怎麼就這麼大呢！

（當然也不能說這種互動是不可取錯誤的）

對比案例3

網易嚴選的tab導航切換，當選項超出一屏時，左滑動到一定數量，選中效果會停在最中間的位置，這樣左邊能看到剛瀏覽過的幾個選項，告訴使用者剛看過了什麼內容，同樣右邊能看到幾個選項告訴使用者即將要看到什麼內容。

當要返回到第一個選項，右滑動出現第一個選項「推薦」時，選中效果不再停留在中間位置，這樣就能告訴使用者已經到頭了。這個流程有一個非常清晰易懂的規則。

在看下圖的一個反例，可以說並沒有一個規則。一直往後滑動，會停在倒數第二個，顯示的最後一個並沒有完全顯示出來，這樣就沒有給使用者清晰明瞭的提示下一個是什麼選項。

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

案例4

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

點選「立即支付」在指紋識別彈窗出來之前，有個圓圈小動畫反饋給使用者支付正在進行中…  這其實還不夠，指紋識別成功後，立即出現一個正在付款小動畫，然後提示支付成功。

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

其實很多微互動的設計未必都能讓使用者感知到，但如果沒有一個好的體驗，使用者真的能感知到。

假設支付寶支付流程，點選「立即付款」咔嚓提示支付成功。你會不會覺得錢怎麼這麼快就出去了，似乎丟失了什麼一樣，一種失落感湧上心頭！

案例5

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

如今的app已經很少會出現這麼初級的體驗問題了。從0到1的產品可能還是要考慮到這個體驗問題！

案例6

下拉重新整理告訴使用者你關注的人更新了幾條微博。這裏要多說一下，微互動設計要結合產品的結構模式，能洞察使用者的心理，給出正確的引導。例如這個更新條數提示也適合新聞類app，因為新聞具有 時效性 ，不適合類似微博榜單的頁面，因為它不具備時效性，榜單的微博會長時間不改變！

總結：設計微互動的幾個重要的要素！

觸發： 設計中要有清晰的互動感知，這樣使用者纔會直觀的感受到可以觸發互動的，例如一個愛心icon，讓使用者清晰的知道這裏是可以點選的。

反饋： 當點選愛心icon，能瞬間得到感官上的反饋，這樣就讓使用者有繼續操作下去的慾望。一個好的微互動反饋能引起了使用者總是想了解更多資訊的原始慾望。

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

最重要是：微互動要結合產品性質、結構模式瞭解你的使用者和使用場景來設計，這樣設計的微互動纔會更加精準有效。

趣味性的微互動案例 

案例1

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

案例2

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

案例3

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

案例4

手指畫一個心，形成一個點贊，是不是很有創意很有趣！

總結：趣味性的微互動思考

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

最後

為什麼說UI設計師最該考慮微互動的設計？因為微互動常常伴隨著動效設計，現如今動效設計幾乎是UI設計師必備的技能。

UI設計師相對於PM需求、互動設計師原型圖、UI介面的產出是最接近落地時候，微互動也常常與視覺相結合，這是互動設計師可能考慮不到的地方。

但是身為UI設計師我們一定要始終在團隊中，多與PM、互動設計師溝通，因為他們可能比你更瞭解產品的框架結構，運營模式。

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

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

優秀微互動並且能夠給使用者留下深刻印象，讓產品更加富有生命力。設計師不得不重視起來。

看到文章最後的你，肯定是個很厲害的人，也希望這篇文章給你帶來一點點的幫助！