隨著網絡技術的創(chuàng)新發(fā)展，如今UI交互設計應用越來越廣泛，顯然已經成為設計的主流及流行的必然趨勢。UI界面交互設計中的動效包括移動，滑塊，懸停效果，GIF動畫等。UI界面交互設計為何越來越受到青睞？它有哪些優(yōu)勢呢？

1. 增加可用性，改善用戶體驗

ui交互動效可清楚的顯示你產品的功能及界面，讓用戶更直觀的了解你產品的功能、用途。

2. 傳達品牌印象，展示產品功能

3. 吸引用戶，提升品牌形象，增強用戶粘度。

有趣的UI交互設計動效可幫助網站吸引用戶，用戶會一次又一次地訪問你的網站，從而可提升你網站的排名。

4. 增加趣味性，并增強用戶的互動性，從而拉進用戶和產品的距離。

簡單的屏幕彈跳就是UI交互動效嗎？遠非如此，UI交互設計帶來的效果超乎想象，甚至可以驅動整個用戶界面。既然交互動效那么重要，已經成為優(yōu)秀設計師必備技能之一。言歸正傳，接下來就給大家介紹一下博主經常去的一些專業(yè)的設計站點，比如Dribbble，Behance，Uplabs以及App Animations等。

除了關注Dribbble和Behance這類匯集許多優(yōu)秀設計師的平臺外，大家也可以關注一些優(yōu)質文章及干貨分享的專業(yè)設計類站點，增加自己的交互設計理論知識，比如像UI Movement，Smashing Magazine等，優(yōu)秀設計師們會在這些平臺share自己的設計經驗以及他們做UI交互設計的一些案例參考，對提高自己對交互的理解及感知有很大的幫助。另外，推薦幾個優(yōu)秀的設計團隊及設計師：Tubik，FANTASY，UI8，Aurélien Salomo（From Dribbble）

以下，是他們的一些作品賞析：

Tubik團隊

下拉刷新效果

簡約及有趣的UI交互設計效果：下拉刷新。圖一下拉動效，會出現品牌標志詞，加深品牌印象，同時也不會讓用戶的等待過程變得很枯燥。圖二是iPhone X狀態(tài)欄中顯示內容加載過程，充分利用了蘋果劉海的“缺口”，當用戶將其向下拖動時，界面將出現彩虹般的動畫效果，讓用戶會很享受這個刷新的過程。

啟動屏幕動效

UI交互設計中的啟動屏幕動效給公司的logo添加了交互動效，由啟動屏幕過渡到公司的服務選擇，打造了一個良好的品牌印象。

底部導航欄創(chuàng)新

百科全書應用程序

Tubik團隊提出的移動UI交互設計主題。技術發(fā)生了變化，但對知識的渴望永遠不會過時。這是一個百科全書應用程序，Nature Encyclopedia：為各種主題提供UI界面交互式信息圖表，并將用戶與慈善組織結合起來，圖是關于大象的百科信息。

學習漢語的應用程序

這是一款學習中文的app，主要是學習漢字和發(fā)音。卡片的一面向用戶展示中文，另一面允許用戶看它的拼音和翻譯，并且點擊即可以播放。用戶可以保存卡片，標記他們的學習狀態(tài)：已學習或未學習，有趣的UI交互設計使學習過程更加有趣，更具互動性。

FANTASY 團隊

電影點播應用程序

這個一個兒童點播主題的app應用程序，家長可設置兒童觀影時間，超過時間影片會立即停止，孩子如果想觀看更多影片，必須通過答題來賺取金幣即可解鎖更多的觀看時間。此應用程序也和家長的移動電話綁定，可通過app隨時控制界面屏幕狀態(tài)，也通過手機跟孩子取得聯系。此款應用根據小孩子的風格來創(chuàng)建的主題，UI交互設計趣味性十足。勞逸結合，讓小孩子在娛樂的同時也不忘學習。

電商類應用

一個界面簡潔舒服的電商應用程序，UI交互設計的非常棒，功能，顏色，價格一目了然，用戶可根據自己的喜好來定制和購買椅子。

好啦，以上都是一些極具參考性的例子，其實這些界面交互設計的靈感都是潛移默化，看的多了，你就會不斷提升自己的審美。還有一些國內的設計師經常會在Dribbble上面找一些好的UI界面交互的例子來進行拆分和練習，可以從中來吸取創(chuàng)新的靈感以及借鑒一些交互處理細節(jié)的方式。

UI交互動效其實沒有想象中的難，熟能生巧，多看多練，加上每天積累相信提升會很快；再者，一些簡單的界面交互設計效果用快速原型工具也可實現，比如我之前講過的利用原型工具Mockplus制作的下拉刷新，進度條，頂部導航欄設計效果等，幾分鐘即可實現想要的效果，高效快捷。今天小編就來教大家如何用Mockplus來設計一個常見的懸浮球推出與合并的交互效果。

先來看看效果演示吧

Step 1：拖拽一個中心組件Z，作為控制鍵。

Step 2：拖拽分散組件①、②、③、④、⑤、⑥、⑦，并將最終展示樣式布局好。

Step 3：用中心組件分別與其他分散組件交互，設置坐標和交互時長，這里需要用到顯示/隱藏以及移動的交互。比如設置：

組件①設置顯示交互執(zhí)行時長為0，延時為0，設置移動交互執(zhí)行時長為200，延時為0

組件② 設置顯示交互執(zhí)行時長為0，延時為100，設置移動交互執(zhí)行時長為200，延時為100

以此類推。。。

Step 4：將所有分散組件設置為不可見，放置到中心組件下層遮擋住。

終上所述，界面交互設計已經成為優(yōu)秀設計師的必備技能之一。UI交互設計并不是用戶界面上一些雜亂的裝飾品，UI交互動效的目的是提高人們使用的愉悅度和滿意度，并給用戶帶來良好的用戶體驗。