面向微交互的動效設計才有未來！附6個超實用設計技巧
面向微交互的動效設計才有未來！附6個超實用設計技巧
發布日期：2019-10-10
瀏覽次數：2334
什么是微交互？簡單來說，微交互是聚焦于單個事件或單個任務的細節設計，它遍布于網頁、App的各個環節。優秀的微交互設計往往可以給用戶提供順暢、愉悅的瀏覽體驗，幫助他們對產品或品牌形成更加積極正面的認知，促進交互行為的產生。在扁平化盛行的今天，動效是微交互中最常見的元素之一。因此，小飛今天特地帶來了6個能有效提升交互體驗的動效設計技巧，快來一起看看吧！
讓內容隨tab滑動出現
- 左側：當用戶點擊跳轉時，內容淡入淡出；
- 右側：當用戶點擊跳轉時，內容隨tab滑動出現；
相比較而言，右側動效設計給用戶的感覺更加舒服，因為它考慮到了網站內容轉場的連續性。雖然只是一個簡單的滑動效果，卻能讓用戶的視線轉移更加自然，也更能讓用戶感受到操作過程的順暢。
連接卡片中的共享元素
- 左側：內容向上滑動，一個新屏幕出現；
- 右側：卡片內容擴大，填滿整個屏幕；
這個對比也突出了連續的內容轉場的重要性。盡管左側頁面使用了上滑來實現屏幕內容的過渡，但它的效果卻不如右側頁面。因為右側頁面意識到了兩屏內容之間的聯系（將要出現的屏幕內容與當前屏幕的部分內容重疊），并通過動效（卡片內容擴大填充屏幕）向用戶展示了這一點。
在內容上使用級聯效應
- 左側：用戶點擊按鈕，所有卡片內容同時淡入出現；
- 右側：用戶點擊按鈕，所有內容淡入出現，但每個區塊都有一個短暫的間隔；
但就左側動效而言，它沒有什么大問題，但就是不出彩。而右側動效通過短暫的延遲間隔營造出了類似瀑布流的效果，有利于吸引用戶持續在網站進行瀏覽。不過，在設計這類效果時，我們一定要保證多個區塊保持相同的間距和間隔時間，以讓它看上去是連續的。與此同時，間隔時間也不能太長，以免用戶等得不耐煩。
讓元素結合情境出現
- 左側：點擊按鈕，菜單元素從下方飛入；
- 右側：點擊按鈕，菜單元素從按鈕處擴展出現；
在這個栗子中，我們可以看到右側頁面將要出現的內容元素與點擊按鈕這個動作緊密聯系起來了（元素從按鈕處擴展出現）。這并不是非常顯著的設計，卻能很好地提升設計檔次。
用按鈕顯示不同狀態
- 左側：在按鈕旁，用文字標識不同狀態（Loading/Success）；
- 右側：按鈕容器本身承載動效、文本，顯示不同狀態（Loading/Success）；
通過文本給CTA按鈕標識不同狀態（操作成功/操作失敗），這是很常見的一種設計方式。而除此以外，按鈕容器本身也可以用來給予用戶視覺反饋，在上面這個栗子中，右側頁面就使用了一段動畫效果代替”Loading”字樣，并結合文本內容，幫助用戶更加高效地獲取反饋信息。
用微妙動效吸引用戶注意關鍵元素
- 左側：僅借助顏色和位置來突出元素；
- 右側：通過顏色、位置、微妙動效引起用戶注意；
在遇到需要重點突出的元素時，我們常會從顏色、尺寸或位置等方面著手。殊不知，微妙動效同樣十分適用。當然前提是，動效幅度不能太大，不能干擾用戶的正常瀏覽。這里還要注意，如果你在重要操作上（如CTA按鈕）上使用了某種微妙動效，那就不要將這種動效用在其他地方。這是因為用得越多，動效在吸引用戶注意方面的影響力就越小，另外太多的動效可能還會引起用戶的反感。
總的來說，微交互是以用戶關懷為出發點的。我們在做動效設計時，一定要站在用戶的角度，去考慮他們在使用過程中會遇到的各種問題。希望這些技巧能夠幫助大家做出更加友好、更利于微交互的動效。