Zi 字媒體

作為一名UI設計師，懂動效是非常重要的，恰當的動效可以給學員帶來更好的用戶體驗，下面，開課吧UI講師就為大家介紹一下UI設計切換動效的六大要素。成功的切換動效設計包含以下6大要素：1、處處響應，及時反饋 (Responsive)視覺反饋在UI設計中極為重要，因為它給了用戶的自然期望以一個及時而符合邏輯的確認。比如，生活中，按一個按鈕，就可以點亮一盞燈;按門鈴，門鈴就會響……交互過程中，只要人做出了一個操作，系統就應當予以及時的反饋，這符合我們的習慣和對即將發生的事情的預期。用戶界面應當根據用戶的觸發的操作快速給予反饋，同時，應當表明新的界面和觸發它產生的UI元素之間的聯繫，讓人總是知道當前的操作將會帶來什麼變化。2、關聯性(Associative)觸發一個動作的UI控制項，與即將出現的新面板之間，必須有邏輯上的緊密聯繫。這樣才有助於用戶更好的理解這個操作。3、過渡流暢自然(Natural)避免出乎意料的交互動效。任何元素的移動應當遵循現實中的物體運動規律。在現實生活中，一個物體對象的加速或減速一般都受到外力的影響(重力、摩擦力等)，而且運動速度的變化是連續而非突變的，所以同樣的，在動效設計里，突然的/奇怪的運動模式都會顯得不自然，喪失愉悅的使用體驗。4、帶有目的性，而不是看心情(Intentional)動效在交互中對視覺體驗有著顯著的影響，界面中的靜態圖片或者文字內容的導向作用都沒有動效搶。因此，好的動效要正確恰當地指引用戶進行下一步操作。第一次使用某個應用的用戶一般並不能預測交互何時何地會怎麼發生，但是恰當的動效能幫助用戶專註當前的目標，而不被干擾，感覺到當前顯示對象的突然變化。Mac OS 的窗口最小化動效，將當前窗口如同紙片一樣收納到下方的工作應用台，告訴用戶點擊「最小化」按鈕的直接作用就是將當前的窗口隱藏到下方的工作台上，並且告知了用戶具體的位置，方便他隨時可以重新找到再次打開。這個過程也很流暢，用戶可以專註於他處理的事件，而不是被突然打斷，變得迷茫。5、快速靈敏(Quick)界面各個元素在發生位置或狀態改變時，變化的速度不能過慢，而導致過長時間的等待。同樣也不能太快，以致於用戶看不清、不能理解動效的邏輯含義。6、簡明清晰(Clear)在單次交互動效中，不宜發生太多樣、太多元素的動態變化。交互動效應當清晰、簡明、一致。「少即是多」的設計原理在此同樣適用。酷炫不是目的，幫助功能的實現，信息的展示，適用的便捷才是目的。結語開課吧UI設計講師表示，交互運動不應該隨機產生，我們在設計每一個交互的時候，要記住背後一定需要一個目的/理由來支撐。動效的關鍵在於引導用戶沿著正確的操作路徑快速高效的達到目標，在任務過程中不迷失，不被突然打斷。無論你的應用是有趣好玩、是嚴肅、還是簡單商務風格，好的動效設計確實可以為用戶提供一個清晰快速的操作體驗。注意每一個細節，做到一分不多，一分不少，恰如其分，一定可以創造出更卓越的交互體驗，更為人喜愛的產品。文章來源：學UI網