AE教程：數碼電商介面動效設計

課前準備

在7月10日會帶著大家花2-3周做一套車機的設計 http://activity.ui.cn/lynk 從規範制定到動效然後包裝設計，歡迎關注！

———————————————————————————

活動時間

7月8號-7月15號下午5點

將會在5點把點評和下一期教程一起發出

有問題可以在群裡討論和交流，不懂也可以來要教程看看

高清播放視訊地址

介面設計（上）： https://www.bilibili.com/video/av26116050/

動效設計（下）： https://www.bilibili.com/video/av26344492/

必須下載的素材

本文所需要的素材和pdf 網盤下載

一、確定所需要的設計

這次我們設計一個數碼電商頁面，還有其動效

題目：數碼電商頁面

內容：首頁需要有logo，選單icon，圖片，標題和價格。詳情頁需要有產品圖片，標題，簡介，價格，顏色選項以及其按鈕。

提交：根據這次主題做出ui介面，然後將動效設計傳到UI中國後，將其連結放到群檔案中點評後選出最佳作品發放價值200元獎品，希望大家認真對待每次練習

二、簡單介紹下如何制定規範，根據制定的規範去做設計

1、規範只是作為參考，有些特殊情況可以不用遵照規範去做

2、在規範中設定顏色等可以去看看優秀的設計，提取他們的關鍵元素，「顏色，字型，字號，字間距，行間距，內容間距」都是可以提取的

3、還有些問題在視訊都有說明： https://www.bilibili.com/video/av26116050/

在這次設計我給你們找了一些參考，可以按照他們的排版參考後進行設計，可以下載pdf檔案放大看

三、AE製作動效

1、上滑首頁後消失banner

2、點選卡片後過渡到二級頁

3、二級頁的出現效果

很大一部分人都是匯入到ps中儲存gif，或者是用AE的外掛GIFGUN去轉換gif，其實AE內有自帶的一個渲染選項，只需要下載Adobe的一個軟體「Media Encoder CC 2018」 一定得2018cc 的版本， 可去百度或我網站進行下載

假如匯出Gif有殘影需要先匯出視訊檔案後在轉換成GIF，具體操作可見視訊最後的部分： https://www.bilibili.com/video/av26344492/

五、設計完成進行提交

努力的人運氣都不會差

最終效果

上週點評地址： http://www.ui.cn/detail/373493.html

希望大家能一起進步

版權申明：本文為我的原創文章，如有轉載請附上作者和連結哦~

也歡迎加入設計群，一起交流設計