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

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

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

2. 傳達(dá)品牌印象，展示產(chǎn)品功能

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

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

4. 增加趣味性，并增強用戶的互動性，從而拉進(jìn)用戶和產(chǎn)品的距離。

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

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

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

Tubik團(tuán)隊

下拉刷新效果

Alt：下拉刷新交互

Alt：下拉刷新交互案例

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

啟動屏幕動效

Alt：啟動屏幕動畫效果

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

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

Alt：底部導(dǎo)航欄

百科全書應(yīng)用程序

Alt：百科全書交互界面

Alt：大象主題的交互界面

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

學(xué)習(xí)漢語的應(yīng)用程序

Alt：漢語學(xué)習(xí)的交互界面

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

FANTASY?團(tuán)隊

電影點播應(yīng)用程序

Alt：兒童點播界面

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

電商類應(yīng)用

Alt：電商程序界面

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

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

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

先來看看效果演示吧

Alt：Mockplus懸浮球

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

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

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

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

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

以此類推。。。

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

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

總結(jié)

以上是生活随笔為你收集整理的【附案例】UI交互设计不会做？设计大神带你开启动效灵感之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。