【附案例】UI互動設計不會做？設計大神帶你開啟動效靈感之路
【附案例】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互動動效的目的是提高人們使用的愉悅度和滿意度，並給使用者帶來良好的使用者體驗。