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

1. 增加可用性，改善用戶體驗(yàn)

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

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

3. 吸引用戶，提升品牌形象，增強(qiáng)用戶粘度。

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

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

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

?

下拉刷新效果

?

?

?

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

啟動(dòng)屏幕動(dòng)效

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

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

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

?

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

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

?

這是一款學(xué)習(xí)中文的app，主要是學(xué)習(xí)漢字和發(fā)音?？ㄆ囊幻嫦蛴脩粽故局形?，另一面允許用戶看它的拼音和翻譯，并且點(diǎn)擊即可以播放。用戶可以保存卡片，標(biāo)記他們的學(xué)習(xí)狀態(tài)：已學(xué)習(xí)或未學(xué)習(xí)，有趣的UI交互設(shè)計(jì)使學(xué)習(xí)過程更加有趣，更具互動(dòng)性。

FANTASY 團(tuán)隊(duì)

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

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

電商類應(yīng)用

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

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

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

先來看看效果演示吧

?

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

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

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

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

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

以此類推。

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

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

?