超全面！界面交互動效核心知識的分類與總結

Echo ?：這篇文章是基于我自己的理解對界面交互動效設計進行了分類整理和總結。

一. ?什么是界面交互動效？

界面交互動效是展現界面間的轉換和界面內元素變化的交互反饋。而效果就表現在觸發與結束的過程中，表現清晰的層級關系，自然的引出與結束。交互動效有著承上啟下的重要作用。

二. 界面交互動效是用來干什么的？

• 讓用戶清晰地感受到當前所處場景和層級關系。
• 多種UI元素之間的相互轉換。
• 給用戶制造驚喜感使用戶愉悅。

三. 界面交互動效五大注意點

• 避免動效過于花哨、酷炫、標新立。
• 在效率型應用中，過度、無意義的動畫只會阻塞任務流程。
• 動作動效不超過1秒。
• 用戶專注內容時，不要用吸引注意的動畫去打擾。
• 出現頻率高的操作動效，避免用戶反感，延遲操作時間。

四. 如何設置緩動曲線與時間讓動效更加自然，可以看下面的一些總結

• linear曲線（勻速運動）除了一些特殊場景如加載、很少被使用。
• easeIn（先緩后快）使用場景較少，主要在掉落、中使用。
• easeInOut（頭尾緩、中間快）通常在輪轉切換的動畫中使用，這類動畫的觸發對象與運動對象并不是同一個元素。
• easeOut（先快后緩）最常見的效果，其觸發對象與運動對象往往是同一個。主要用在展開、收起、出現、移動等動畫中。當不知道用哪個緩動曲線時，用這個一般不會錯。
• 曲度主要表現運動過程的力的大小，曲度越大，啟示力或阻力越大。
• 回彈則表現的是運動的劇烈程度及對象的質地。
• 運動時間一般都控制在0.3s-0.8s之間，過長的時間會讓人感覺拖沓，不自然。

五. 界面交互動效如果以動效的表現屬性來分可以分為兩種

第一種：為銜接類型動畫

主要針對不同界面直接的銜接，為帶來更流暢的操作觀感所做的設計，彌補兩個界面直接的差異所帶來的用戶感知落差。

第二種：特效類動畫

特效的核心目的是為了吸引用戶的注意力，提高信息敏感度，在游戲界面設計當中使用更為廣泛，能夠帶來更加絢麗的動態畫面。

六.界面交互動效如果以界面的維度來說可以分為以下兩類

第一類：界面內的交互動效

在一個界面內的交互動效特別多，例如點擊加號出現下拉菜單，出現浮層動畫提示，點擊舵式導航出現選擇類型和遮罩，點擊按鈕出現評論點贊，當前頁面的展開收起，加載等等。如下圖所示：

第二類：界面間的交互動效

幾個界面之間的的交互動效通常是平緩過渡到下一頁。常見的有以下幾類：

△?硬切到下一頁

△?下一頁從右往左推入（上一頁從左往右推出）

△ ?下一頁從下往上彈出

△ ?上一頁的元素過渡到下一頁

總結：

• 動效創意方面的創新要依據用戶的認知模型。單純很炫很酷的動效如果脫離了用戶的認知模型，那么這樣的交互動效對于整個產品來說是有害的。
• 做界面交互動效的目的是為了更好地落地。如何更好地高效地表現我們設計的動效。同時使得我們制作的動效可以很好的運用到實現落地中，這是很重要的，不然所有的一切都是海市蜃樓。

歡迎關注作者的微信公眾號：「UEDC」

「超實用新手指南！零基礎如何學習動效」

• 《新人手冊！動效設計幾乎都是這10個軟件做的（內附教程）》
• 《交互設計基礎！四個移動界面最常見的動效類型》
• 《超全面干貨！如何制作符合場景的交互動效？》
• 《用這4個超實用的方法，做出有價值的功能性動效！》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com