這個世界到處充滿了各式各樣的設計，而我們與任何物品產生互動的過程，微互動即被觸發，但我們可能沒有察覺，我們正在與某樣東西進行各種互動，網頁設計也是一樣，微互動同樣也發生在使用者使用某個網站上，好的微互動設計能夠大大提升網站的UI。

舉例來說google search在你每次打一個關鍵詞時，都會出現提示字，這是最簡單的微互動，已經無法再更簡單了，除非有一天人工智慧進步到能夠猜測你心裡面想什麼，直接將搜尋結果列出來。

換句話說，任何的網站，若沒有做到關鍵字提示，那麼這樣的微互動便可以再改善，而讓網站的易用性提高。

另一個微互動的小設計，大部分人都看過，那就是購物車裡的數量，會顯示在topbar上面的小icon，那也是一種好的設計，提示使用者已經放了多少樣東西在購物清單裡。

使用者回饋

當你要求使用者回饋時，第一條規則就是，不要疲勞的轟炸使用者。要問自己：「我需要多少回饋，才能傳達正在進行的事。」

上傳等待時的顯示

當使用者在上傳東西，或是在增加某篇文章時，讀取時間裡顯示loading bar 是必要的，這會清楚地告訴使用者，目前正在上傳，會正在新增/編輯等等。

另外，要盡量使用圖片替代文字，讀取時，就顯示讀取圖案，不要用“正在存取…”等類似的字樣，圖片顯示好多了。

少即是多

網頁設計要遵循，用最少的方式來傳遞最多的資訊。

時間提示的設計

許多網站的文章，都會顯示，這是xxx前的文章，當使用者將游標移到該時間上時，可以提示“2012-01-01 19:30:33”類似的字樣，這也是一種微互動好的設計。

動畫的特性

網站若有動畫，該符合快速、流暢、自然、簡單、有目的的原則。

錯誤訊息提示

進行網站設計時，表單都會進行驗證，若驗證錯誤，則表示使用者輸入錯誤，這時候會有提示訊息，提示訊息需切記，不讓使用者覺得你在指責它。例如“您的密碼輸入錯誤”比起“密碼錯誤”，看起來更像在指責使用者，這會讓使用者感到不舒服。

控制項的狀態

網頁上充滿各種控制項，但大致上如下：

1.預設(default)
2.作用中(active)
3.游標移到上方時（hover）
4.游標滑鼠經過時(rollover)
5.點擊/進行中(on click/tap/in process)
6.雙態（toggle）
7.設定（setting）

進行微互動設計時，這些狀態都需要考慮進去。

 

photo credit:FirmBee