【附案例】UI交互設計不會作？設計大神帶你開啓動效靈感之路

隨着網絡技術的創新發展，現在UI交互設計應用愈來愈普遍，顯然已經成爲設計的主流及流行的必然趨勢。UI界面交互設計中的動效包括移動，滑塊，懸停效果，GIF動畫等。UI界面交互設計爲什麼愈來愈受到青睞？它有哪些優點呢？

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

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

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

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

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

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

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

除了關注Dribbble和Behance這類聚集許多優秀設計師的平臺外，你們也能夠關注一些優質文章及乾貨分享的專業設計類站點，增長本身的交互設計理論知識，好比像UI Movement，Smashing Magazine等，優秀設計師們會在這些平臺share本身的設計經驗以及他們作UI交互設計的一些案例參考，對提升本身對交互的理解及感知有很大的幫助。另外，推薦幾個優秀的設計團隊及設計師：Tubik，FANTASY，UI8，Aurélien Salomo（From Dribbble）

如下，是他們的一些做品賞析：

Tubik團隊

下拉刷新效果

Alt：下拉刷新交互

Alt：下拉刷新交互案例

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

啓動屏幕動效

Alt：啓動屏幕動畫效果

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

底部導航欄創新

Alt：底部導航欄

百科全書應用程序

Alt：百科全書交互界面

Alt：大象主題的交互界面

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

學習漢語的應用程序

Alt：漢語學習的交互界面

這是一款學習中文的app，主要是學習漢字和發音。卡片的一面向用戶展現中文，另外一面容許用戶看它的拼音和翻譯，而且點擊便可以播放。用戶能夠保存卡片，標記他們的學習狀態：已學習或未學習，有趣的UI交互設計使學習過程更加有趣，更具互動性。

FANTASY 團隊

電影點播應用程序

Alt：兒童點播界面

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

電商類應用

Alt：電商程序界面

一個界面簡潔舒服的電商應用程序，UI交互設計的很是棒，功能，顏色，價格一目瞭然，用戶可根據本身的喜愛來定製和購買椅子。

好啦，以上都是一些極具參考性的例子，其實這些界面交互設計的靈感都是潛移默化，看的多了，你就會不斷提高本身的審美。還有一些國內的設計師常常會在Dribbble上面找一些好的UI界面交互的例子來進行拆分和練習，能夠從中來吸收創新的靈感以及借鑑一些交互處理細節的方式。

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

先來看看效果演示吧

Alt：Mockplus懸浮球

Step 1：拖拽一箇中心組件Z，做爲控制鍵。

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

Step 3：用中心組件分別與其餘分散組件交互，設置座標和交互時長，這裏須要用到顯示/隱藏以及移動的交互。好比設置：

組件①設置顯示交互執行時長爲0，延時爲0，設置移動交互執行時長爲200，延時爲0

組件② 設置顯示交互執行時長爲0，延時爲100，設置移動交互執行時長爲200，延時爲100

以此類推。。。

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

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