目錄 第1章　初識(shí)UI動(dòng)效設(shè)計(jì) 1.1　什么是UI動(dòng)效設(shè)計(jì)　011 1.1.1　先說(shuō)UI　011
1.1.2 再說(shuō)“動(dòng)效”　011
1.1.3 UI動(dòng)效的應(yīng)用領(lǐng)域　012
1.1.4 UI動(dòng)效喜迎5G時(shí)代　013 1.2　UI設(shè)計(jì)師常用的軟件　013 1.2.1　Photoshop\ Illustrator　013 1.2.2　After Effects　014 1.2.3　1.2.4 其他　014 1.3　UI色彩設(shè)計(jì)　015 1.3.1　認(rèn)識(shí)色彩　015
1.3.2 色彩基本知識(shí)　015
1.3.3 配色方式　016 1.4　UI常見(jiàn)組件　017 1.4.1　圖標(biāo)　017 1.4.2　按鈕　017 1.4.3　導(dǎo)航　018 1.4.4　欄　018 第2章　UI入門(mén)之Photoshop 2.1　軟件的基本操作　020 2.1.1　新建文件　020 2.1.2　打開(kāi)文件　020
2.1.3 置入文件　020
2.1.4 輔助工具　021 【練習(xí)　2-1】 使用標(biāo)尺　021 【練習(xí)　2-2】 使用參考線(xiàn)　022 2.1.5　圖像變換與變形　022 【練習(xí)　2-3】 旋轉(zhuǎn)與縮放　023 【練習(xí)　2-4】 傾斜與扭曲　024 2.2　Photoshop工具組　024 2.2.1　選區(qū)工具組　024 【練習(xí)　2-5】 使用矩形選框工具創(chuàng)建矩形選區(qū)　025 【練習(xí)　2-6】 使用單列選框工具創(chuàng)建選區(qū)　026 2.2.2　形狀工具組　026 【練習(xí)　2-7】 使用多邊形工具繪制星形圖標(biāo)　027 2.2.3　繪圖工具組　029 【練習(xí)　2-8】 使用畫(huà)筆工具繪制玩偶圖標(biāo)　029 【練習(xí)　2-9】 使用漸變工具繪制按鈕　030 【練習(xí)　2-10】 用油漆桶工具為圖標(biāo)填色　031 2.2.4　文字工具組　032 2.3　色調(diào)調(diào)整與濾鏡　032 2.3.1　色調(diào)調(diào)整　032 2.3.2　濾鏡　033 2.4　蒙版　034 2.4.1　矢量蒙版　034 【練習(xí)　2-11】 創(chuàng)建矢量蒙版　034 2.4.2　剪貼蒙版　035 【練習(xí)　2-12】 創(chuàng)建剪貼蒙版　035 2.4.3　圖層蒙版　036 【練習(xí)　2-13】 創(chuàng)建圖層蒙版　036 2.5　圖層混合模式與圖層樣式　037 2.5.1　圖層透明效果　037 2.5.2　圖層混合模式　037 2.5.3　圖層樣式　038 2.6　實(shí)戰(zhàn)：繪制太陽(yáng)天氣圖標(biāo)　040 2.7習(xí)題：制作手機(jī)App登錄界面　043
2.8習(xí)題：制作小程序游戲開(kāi)始菜單界面　044 第3章　UI入門(mén)之Illustrator 3.1　文檔的基本操作　046 3.1.1　新建文檔　046
3.1.2 打開(kāi)文檔　046 3.1.3　置入文檔　046 3.2　基本繪圖工具　047 3.2.1　簡(jiǎn)單繪圖工具　047 延伸講解：直線(xiàn)段的調(diào)整　047 【練習(xí)　3-1】 繪制無(wú)線(xiàn)網(wǎng)絡(luò)圖標(biāo)　048 3.2.2　幾何繪圖工具　048 【練習(xí)　3-2】 繪制保險(xiǎn)箱圖標(biāo)　048 【練習(xí)　3-3】 繪制分類(lèi)圖標(biāo)　049 【練習(xí)　3-4】 繪制笑臉表情　050 3.2.3　徒手繪圖工具　052 【練習(xí)　3-5】 繪制點(diǎn)贊圖標(biāo)　052 3.2.4　鋼筆工具繪圖　053 【練習(xí)　3-6】 繪制氣象圖標(biāo)　054 3.3　填色與文字　055 3.3.1　單色填充　055 3.3.2　漸變填充　056 3.3.3　漸變網(wǎng)格　056 【練習(xí)　3-7】 繪制漸變愛(ài)心圖標(biāo)　056 3.3.4　文字工具　057 【練習(xí)　3-8】 完善保護(hù)傘圖標(biāo)　057 3.4　編輯圖形對(duì)象　058 3.4.1　路徑編輯　058 3.4.2　變換對(duì)象　059 【練習(xí)　3-9】 繪制電量圖標(biāo)　061 3.5　不透明度和混合模式　062 3.5.1　“透明度”面板　062 3.5.2　混合模式　063 3.6　實(shí)戰(zhàn)：制作登錄界面　063 3.7　習(xí)題：繪制火龍果圖標(biāo)　066 3.8　習(xí)題：制作購(gòu)物車(chē)界面　067 第4章　UI動(dòng)效之After Effects 4.1　After Effects的基本操作　069 4.1.1　新建項(xiàng)目　069
4.1.2 新建合成　069
4.1.3 導(dǎo)入素材　069 4.2　圖層的基本操作　070 4.2.1　新建圖層　070 4.2.2　編輯圖層　070 4.2.3　圖層疊加模式　071 延伸講解：添加圖層樣式　071 【練習(xí)　4-1】 制作彈窗界面　071 4.2.4　常用圖層類(lèi)型　072 4.3　層基礎(chǔ)動(dòng)畫(huà)屬性　073 4.3.1　層列表　073 4.3.2　錨點(diǎn)　074 【練習(xí)　4-2】 改變圖標(biāo)錨點(diǎn)位置　075 4.3.3　位置　075 【練習(xí)　4-3】 制作移動(dòng)動(dòng)畫(huà)　075 4.3.4　縮放　076 4.3.5　旋轉(zhuǎn)　077 【練習(xí)　4-4】 制作圖標(biāo)旋轉(zhuǎn)動(dòng)畫(huà)　077 4.3.6　不透明度　078 【練習(xí)　4-5】 制作啟動(dòng)界面淡入動(dòng)畫(huà)　078 4.4　蒙版與遮罩　079 4.4.1　創(chuàng)建蒙版的工具　079 延伸講解：形狀與蒙版的切換　080 4.4.2　蒙版屬性的修改　080 【練習(xí)　4-6】 制作文字掃光效果　081 4.5　關(guān)鍵幀和表達(dá)式　082 4.5.1　添加關(guān)鍵幀　082 4.5.2　查看關(guān)鍵幀　083 延伸講解：調(diào)整時(shí)間導(dǎo)航器和工作區(qū)　083 4.5.3　編輯關(guān)鍵幀　083 【練習(xí)　4-7】 制作圖標(biāo)大小變化的動(dòng)畫(huà)　084 4.5.4　關(guān)鍵幀輔助　085 延伸講解：對(duì)素材進(jìn)行變速操作　086 4.5.5　圖表編輯器　086 【練習(xí)　4-8】 制作圖標(biāo)緩動(dòng)效果　086 4.5.6　基本表達(dá)式　087 延伸講解：設(shè)置關(guān)聯(lián)圖層　088 【練習(xí)　4-9】 齒輪轉(zhuǎn)動(dòng)效果　088 4.6　實(shí)戰(zhàn)：制作表情按鈕動(dòng)效　089 4.7　習(xí)題：制作加載動(dòng)效　093 4.8　習(xí)題：彈出按鈕動(dòng)畫(huà)　094 第5章　UI的設(shè)計(jì)規(guī)范 5.1　網(wǎng)頁(yè)界面設(shè)計(jì)　096 5.1.1　了解網(wǎng)頁(yè)界面　096
5.1.2 網(wǎng)頁(yè)界面的設(shè)計(jì)原則　096 5.1.3　網(wǎng)頁(yè)界面的構(gòu)成元素　098 5.2　iOS手機(jī)界面設(shè)計(jì)　099 5.2.1　iOS操作系統(tǒng)概述　099
5.2.2 iOS手機(jī)界面主要設(shè)計(jì)元素　099 5.2.3　iOS手機(jī)界面設(shè)計(jì)規(guī)范　101 5.3　Android手機(jī)界面設(shè)計(jì)　103 5.3.1　Android操作系統(tǒng)概述　103 5.3.2　Android手機(jī)界面設(shè)計(jì)元素　103
5.3.3 Android設(shè)計(jì)特色　104 5.4　智能手表界面設(shè)計(jì)　106 5.4.1　iOS智能手表設(shè)計(jì)特點(diǎn)　106 5.4.2　Android智能手表設(shè)計(jì)特點(diǎn)　108 第6章　網(wǎng)頁(yè)端的UI動(dòng)效設(shè)計(jì) 6.1　網(wǎng)頁(yè)切換動(dòng)效　110 6.1.1　設(shè)計(jì)分析　110
6.1.2 實(shí)戰(zhàn)：Illustrator繪制指針和按鈕　111 6.1.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)網(wǎng)頁(yè)切換界面　112 延伸講解：柵格化圖層　113 6.1.4　實(shí)戰(zhàn)：After Effects制作網(wǎng)頁(yè)切換動(dòng)效　114 6.2　網(wǎng)頁(yè)滑動(dòng)效果　126 6.2.1　設(shè)計(jì)分析　126 6.2.2　實(shí)戰(zhàn)：Illustrator繪制幾何圖形元素　126 延伸講解：調(diào)整圓角矩形半徑并指定大小　128 6.2.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)網(wǎng)頁(yè)滑動(dòng)界面　129 6.2.4　實(shí)戰(zhàn)：After Effects制作網(wǎng)頁(yè)滑動(dòng)效果　132 6.3　網(wǎng)絡(luò)錯(cuò)誤動(dòng)效　139 6.3.1　設(shè)計(jì)分析　139
6.3.2 實(shí)戰(zhàn)：Illustrator繪制場(chǎng)景元素　140 6.3.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)網(wǎng)絡(luò)錯(cuò)誤界面　142 6.3.4　實(shí)戰(zhàn)：After Effects制作網(wǎng)絡(luò)錯(cuò)誤動(dòng)效　145 6.4　習(xí)題：網(wǎng)頁(yè)404動(dòng)效　151 第7章　手機(jī)端的UI動(dòng)效設(shè)計(jì) 7.1App登錄動(dòng)效　153 7.1.1　設(shè)計(jì)分析　153 7.1.2實(shí)戰(zhàn)：Illustrator繪制App圖標(biāo)　154 延伸講解：調(diào)整錨點(diǎn)　154 7.1.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)App登錄界面　155 7.1.4　實(shí)戰(zhàn)：After Effects制作App登錄動(dòng)效　159 7.2　主菜單上滑動(dòng)效　167 7.2.1　設(shè)計(jì)分析　167 7.2.2　實(shí)戰(zhàn)：Illustrator繪制主菜單圖標(biāo)　168 延伸講解：使用“添加錨點(diǎn)工具”制作斷點(diǎn)　169 7.2.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)主菜單界面　172 延伸講解：將內(nèi)容轉(zhuǎn)換為光柵圖像　173 7.2.4實(shí)戰(zhàn)：After　Effects制作主菜單上滑動(dòng)效　175 延伸講解：調(diào)整時(shí)間刻度的顯示　176 延伸講解：蒙版的運(yùn)用　177 7.3　來(lái)電彈窗動(dòng)效　181 7.3.1　設(shè)計(jì)分析　181 7.3.2　實(shí)戰(zhàn)：Illustrator繪制來(lái)電圖標(biāo)　182 7.3.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)來(lái)電彈窗　184 7.3.4　實(shí)戰(zhàn)：After Effects制作來(lái)電彈窗動(dòng)效　186 7.4　習(xí)題：優(yōu)惠券動(dòng)效　194 第8章　智能手表的UI動(dòng)效設(shè)計(jì) 8.1　iOS智能手表動(dòng)效　196 8.1.1　設(shè)計(jì)分析　196
8.1.2 實(shí)戰(zhàn)：Illustrator繪制iOS智能手表圖標(biāo)　197
8.1.3實(shí)戰(zhàn)：Photoshop設(shè)計(jì)iOS智能手表界面　198 8.1.4　實(shí)戰(zhàn)：After Effects制作 iOS智能手表動(dòng)效　201 8.2　Android智能手表動(dòng)效　208 8.2.1　設(shè)計(jì)分析　208 8.2.2　實(shí)戰(zhàn)： Illustrator繪制Android智能手表圖標(biāo)　209 8.2.3　實(shí)戰(zhàn)：Photoshop設(shè)計(jì)Android智能手表界面　211 8.2.4　實(shí)戰(zhàn)：After Effects制作Android智能手表動(dòng)效　213 8.3　習(xí)題：計(jì)時(shí)動(dòng)效　216 附錄A　Photoshop 2020常用快捷鍵　217 附錄B　llustrator 2020常用快捷鍵　220 附錄C　After Effects 2020常用快捷鍵　222