設計書單｜手殘也能做的動效設計，反正我只用了十分鐘……｜教程·UI設計
Moshi Moshi
Virual Popstar
GF Retro/Lil Weeb
00:00/02:44
動效設計可以讓界面變得更加生動和易於使用。儘管擁有很大的潛力，但動效設計可能是在設計領域中最不被人熟練掌握的技能，這可能是因為動效算是在 UI領域裡的一個新成員。視覺和交互在早期的 GUI中就已經被應用，但動效只有在硬體設備都跟上來後才會比較流暢的被使用。
現如今，動效設計對於品牌的傳達變得越來越重要，所以數藝君想儘可能多的去搜集動效相關的資料，跟大家一起，緊跟趨勢，把這塊的能力掌握好。
現在就跟著數藝君一起來學習吧！
對於動效設計來說，Adobe After Effects、Flash和Photoshop均可以做出來。我們接下來要學習的是基於Photoshop這一款軟體來做的。這是因為 Photoshop 在這3個軟體中最簡單，最好掌握。對於大多數 UI 需要的特效來說，Photoshop也足夠使用了。動效的關鍵在於思路和創意，前期不需要花太多時間在各種軟體的學習上，只要先學明白一個就好了。
逐幀動畫——小球彈跳
「小球彈跳」這一動效的幀數不多，大家要重點理解動畫中的節奏感以及Photoshop 中幀動畫的用法。
逐幀動畫——小球彈跳
動畫步驟拆解
1.創建幀動畫
首先我們單擊時間軸面板上「創建幀動畫」按鈕創建一個幀動畫，這個時候可以看到面板發生了變化。
幀動畫面板
2.創造動畫初始模板
在畫布上用路徑畫一個橫條來模擬地面，一個正圓形來模擬小球，然後將橫條的圖層命名為「地面」，小球的圖層命名為 01。
動畫初始模板
3.繪製其他動畫圖層
複製 01圖層，命名為 02，將 02 向下移動幾個像素，並將小球拉長，用相同的方式複製出其他的圖層進行調整。
在製作過程中，可以調整圖層透明度來對比查看小球的位置關係。小球在下墜過程中首先逐漸拉伸，然後會由於慣性和重力作用而形變，加速度將令小球下落速度逐漸變大，因此圖層之間小球的距離也變得越來越大。小球落地總共用了 6 個圖層來表現。
動畫圖層繪製
4.調整動畫
到這裡準備工作就做好了，可以開始進行動畫的調整。首先隱藏 02 到 06 圖層，然後單擊時間軸面板上的「複製所選幀」 按鈕，複製出一個新的幀，隱藏圖層 01，打開圖層02，確定當前選擇的是幀2，單擊「複製所選幀」 按鈕複製幀，然後隱藏圖層 02，打開圖層 03，以此類推。完成時，圖層面板和時間軸面板如下圖所示。
小球下落動畫
5.預覽小球下落過程動畫效果
到這裡，小球下落過程的動畫就完成了，可以單擊「播放」按鈕來預覽一下當前的動畫效果。
6.模擬小球回彈動作
首先複製第6幀，隱藏圖層06，打開圖層05，以此類推，完成小球觸底回升的動畫，完成之後總共是11幀。
7.調整動畫效果
預覽發現小球的動畫已經比較完整了，可以掉落和回彈，但是在空中的滯留時間短了一些，與實際情況不符，因此我們調整在空中懸停的第1幀時間為 0.1秒，如下圖所示。
修改懸停幀的停留時間
8.保存文件
這樣就完成了一個小球落地並彈起的可循環動效了。這時可以在菜單欄中執行「文件 > 存儲為 Web 所用格式」命令，將幀動畫保存為 GIF 格式即可。最終效果如圖所示。
想了解更多簡單實用的動效設計，數藝君強推《從零開始學UI 概念解析 實戰提高 突破規則》這本書哦。
本書深入淺出地介紹UI入門需要掌握的基礎知識，包括UI的基本概念、設計的基礎知識、UI設計的組成部分，並詳細指導讀者運用Photoshop軟體設計圖標、界面和簡單動效，幫助讀者建立起基本的學習體系。
配合實戰訓練，跟隨實例步驟進行學習，舉一反三，快速掌握UI設計技巧，並應用於實際工作中。
介紹UI設計的基本規則，以及如何打破規則進行設計，幫助讀者開拓思維，進行開放式設計。
好書推薦
更多內容可以購買《從零開始學UI 概念解析 實戰提高 突破規則》詳細閱讀哦！
Recommended book list
-
書單推薦
C4D和其他三維軟體最大的不同在於：入門簡單，操作方法與邏輯跟一般使用的平面軟體類似，而且單靠默認或網上免費的素材，就能輕鬆做出優質的視覺效果。
當你深入了解後，你會發現其不僅入門簡單，而且功能非常強大，令人愛不惜手。
更多內容可以購買《CINEMA 4D R17 完全學習手冊 第2版 渲染建模燈光動力學毛髮剛體圖教材書籍》詳細閱讀哦！
推薦一本2019年最美的日曆,
喜歡就點擊購買！
這裡有一批設計師需要你來包養哈！
※設計書單 | 如何才能更好的將東方元素融入到設計中呢？
※一本能讓你變得博識有趣的百科全書！賈平凹唯一推薦版本！
TAG:純粹設計 |