簡單實用的微互動設計指南

產品的易用性來源於對細節的打磨，偉大的設計不僅僅在功能上滿足使用者的需求，還要在微互動的設計上打動人心。以下是小編分享的一份簡單實用的微互動設計指南，希望對您的學習所幫助!

好的產品往往做好了兩點：功能和細節設計。

功能吸引使用者使用你的產品，細節設計將你的使用者留下。優秀的細節設計能夠使你的產品在眾多競品中脫穎而出，優秀的微互動設計往往能夠讓使用者在初次使用產品時就能夠留下深刻的印象。作為一個互動設計師，在設計微互動方案的時候不僅要考慮視覺上的衝擊力，還要想辦法賦予其資訊傳遞的功能。

　　什麼是微互動?

微互動是產品中存在的某一個時刻，它完成了某一個小的任務。Dan Saffer在他的書中(Microinteractions)第一次描述了微互動的'概念，這些小細節專注於服務這些必要的功能：

1、交流回饋或者動作的結果回饋

2、完成某個單獨的任務

3、增強直接操作的感覺

幫助使用者在視覺上展示操作的結果，以及避免錯誤

　　一些明顯的微互動例子包括：

當你將iPhone設定成靜音時伴隨出現的的震動提醒、螢幕上的靜音icon。

介面動畫提示是否能夠點選(當滑鼠移到按鈕上方時按鈕的顏色改變)。

　　為什麼使用微互動?

微互動是在對使用者一些自然的需求/慾望的認知和反饋。使用者從微互動提供的視覺、觸覺等反饋中確認他們的行為被接受。微互動還可以引導使用者正確的使用系統/產品。

　　定義微互動的使用情景

微互動的一個特點是它可以被放置在很多的場景下，輔助不同的動作行為。總體來說，微互動的使用場景包括：

　　展示系統/產品的狀態

Jacob Nielsen在“可用性啟發原則”中指出：讓你的使用者時刻了解發生的事情，使用者期望對自己的行為立即得到反饋。但是有些情況下，app需要時間來等待行為處理完成後才能向用戶發出反饋。因此，產品介面需要向用戶指明此刻正在發生的事。

▲ 下載進度表

或者標明使用者所在的位置：

Tips：不要讓你的使用者感到無助，讓你的使用者瞭解實時的狀態並且向其展示進度(比如進度條能夠讓使用者瞭解進度，消除疑惑)

　　提示更新

我們有時需要向用戶推送通知來保證使用者瞭解到事態的更新。動畫可以做到這一點，動畫可以吸引使用者的注意力，避免使用者忽視掉重要的資訊。

Tips：微互動裡的動效應該遵循KISS原則(keep it simple, stupid),應該儘量簡單直接。

　　關聯上下文

使用動效來將使用者的注意力平滑的在導航頁面間切換，向用戶解釋頁面裡元素之間的關係，以及頁面跳轉的來龍去脈。這對於移動裝置非常有用，因為螢幕的尺寸限制，移動介面中每一頁的內容都很緊湊，使用動效來闡述內容之間的聯絡非常實用。

Tips：儘量讓每個頁面的導航簡潔，這樣可以有效避免使用者在頁面跳轉中迷失。兩個狀態之間的卻換應該清晰、平滑、快捷。在視覺上統一所有的互動形式，降低使用者的學習成本。

　　輸入視覺化

資料輸入是應用中非常重要的環節，微互動可以使用現有的元素來展示資料輸入的反饋，從而將這步操作變得更加高效。

Tips：微互動能夠幫助使用者理解資訊格式，來源，幫助使用者便捷輸入資訊。

　　引導互動

微互動可以鼓勵使用者、吸引使用者與產品互動。它可以在使用者體驗中產生同理心。但是需要謹慎使用微互動，保證其在感官上不會冒犯你的使用者。

時刻謹記：不要讓使用者感到厭煩，Keep it simple, stupid.

Tips：關注使用者的情感反饋，因為它在使用者體驗中起到很重要的作用。多做使用者研究和情景調研，設計能被使用者頻繁使用的微互動方案。

　　值得謹記的

微交互向使用者展示動作反饋，通知以及資訊框架結構

微互動應該通過轉移使用者的注意力、愉悅使用者等來達到加快/縮簡訊息資料的傳輸

瞭解你的使用者以及使用微互動的背景，能夠讓你的微互動方案更加的精準與高效

微互動必須能夠支援長時效的使用，在第一次使用時感到驚喜的方案，可能在第一百次使用時就變成了困擾。

微互動方案應該人性化一些，並且在視覺上保持和諧。使用者在使用的時候應該感到流暢，微互動的方案應該儘可能的從現實生活中獲得啟發，比如使用擬物化等手段，從而降低學習成本。