项目1 概述............................................................................................ 001
1.1　UI 设计的概念和设计原则 ....................................................................... 001
1.2　UI 设计的流程 ......................................................................................... 003
1.3　UI 元素的分类 ......................................................................................... 007
1.4　UI 版面和字体设计 .................................................................................. 009
1.4.1 版面设计的思路 ......................................................................... 010
1.4.2 版面设计的步骤 ......................................................................... 015
1.4.3 字体设计在图标和弹出窗口中的运用 ......................................... 016
1.4.4 字体设计的方法和步骤 ............................................................... 017
1.5　UI 色彩和图形设计概述 .......................................................................... 019
1.5.1 UI 色彩运用法则......................................................................... 019
1.5.2 色彩规范的制作 ......................................................................... 021
1.5.3 图形设计在UI 中的运用 ............................................................. 022
1.5.4 图形设计的方法和步骤 ............................................................... 023
1.6　绘图软件Photoshop 界面工具和功能简述.............................................. 024
1.7　绘图软件Illustrator 界面工具和功能简述 ................................................ 027
1.8　动效软件After Effects 界面工具和功能简述 ........................................... 028
项目2 小学霸英语App 功能图标设计及绘制方法........................................... 030
2.1　功能图标的概念 ...................................................................................... 030
2.2　功能图标范例——已上线 ........................................................................ 030
2.3　功能图标的设计原则 ............................................................................... 032
2.4　功能图标的风格类型 ............................................................................... 035
2.5　功能图标的设计步骤 ............................................................................... 036
2.6　完整项目课堂演示+ 学生实操 小学霸英语App 底部标签栏图标设计及
绘制方法 ................................................................................................. 042
2.6.1 项目相关知识 ............................................................................. 042
2.6.2 项目准备与设计 ......................................................................... 042
2.6.3 项目实施 .................................................................................... 044
2.6.4 项目总结 .................................................................................... 055
2.7　拓展练习 ................................................................................................. 056
项目3 甜在心App 图标设计及绘制方法....................................................... 058
3.1　App 图标的概念 ...................................................................................... 058
3.2　App 图标范例——已上线 ........................................................................ 058
3.3　App 图标的设计原则 ............................................................................... 064
3.4　App 图标的设计步骤 ............................................................................... 064
3.5　完整项目课堂演示+ 学生实操 甜在心App 图标设计及绘制方法 ............ 070
3.5.1 项目相关知识 ............................................................................. 070
3.5.2 项目准备与设计 ......................................................................... 070
3.5.3 项目实施 .................................................................................... 072
3.5.4 项目总结 .................................................................................... 089
3.6　拓展练习 ................................................................................................. 091
项目4 桃兔社交通信App 图标和个人页设计及绘制方法.................................. 092
4.1　色彩的重要性 .......................................................................................... 092
4.2　什么是色彩 ............................................................................................. 092
4.3　色彩搭配方法 .......................................................................................... 096
4.4　优秀的图标和界面配色案例赏析 ............................................................. 099
4.5　使用绘图软件设置色彩 ........................................................................... 101
4.6　完整项目课堂演示+ 学生实操 桃兔社交通信App 图标和个人页设计及
绘制方法 ................................................................................................. 107
4.6.1 项目相关知识 ............................................................................. 107
4.6.2 项目准备与设计 ......................................................................... 108
4.6.3 项目实施 .................................................................................... 109
4.6.4 项目总结 .................................................................................... 124
4.7　拓展练习 ................................................................................................. 125
项目5 怪鱼旅行App 引导页设计及绘制方法..................................................126
5.1　引导页的概念 .......................................................................................... 126
5.2　引导页范例——已上线 ........................................................................... 126
5.3　引导页的设计原则................................................................................... 129
5.4　引导页的类别 .......................................................................................... 130
5.5　引导页的设计步骤................................................................................... 136
5.6　完整项目课堂演示+ 学生实操 怪鱼旅行App 引导页设计及绘制方法 ..... 139
5.6.1 项目相关知识 ............................................................................. 140
5.6.2 项目准备与设计 ......................................................................... 140
5.6.3 项目实施 .................................................................................... 142
5.6.4 项目总结 .................................................................................... 149
5.7　拓展练习 ................................................................................................. 150
项目6 “不期而遇”女装促销Banner 设计及绘制方法....................................152
6.1　Banner 的概念 ........................................................................................ 152
6.2　Banner 的设计原则 ................................................................................. 153
6.3　Banner 的设计步骤 ................................................................................. 155
6.4　完整项目课堂演示+ 学生实操 “不期而遇”女装促销Banner 设计及
绘制方法 ................................................................................................. 163
6.4.1 项目相关知识 ............................................................................. 164
6.4.2 项目准备与设计 ......................................................................... 164
6.4.3 项目实施 .................................................................................... 165
6.4.4 项目总结 .................................................................................... 170
6.5　拓展练习 ................................................................................................. 170
项目7 好又省家装详情页一屏和个人页一屏设计及绘制方法...............................172
7.1　详情页和个人页的概念 ........................................................................... 172
7.2　详情页和个人页范例——已上线 ............................................................. 173
7.3　详情页和个人页的设计原则 .................................................................... 180
7.4　详情页和个人页的设计步骤 .................................................................... 185
7.5　完整项目课堂演示+ 学生实操 好又省家装详情页一屏和个人页一屏设计
及绘制方法 ............................................................................................. 188
7.5.1 项目相关知识 ............................................................................. 188
7.5.2 项目准备与设计 ......................................................................... 188
7.5.3 项目实施 .................................................................................... 191
7.5.4 项目总结 .................................................................................... 194
7.6　拓展练习 ................................................................................................. 195
项目8 “Weather Icons”动态图标设计及绘制方法......................................196
8.1　动态图标的概念 ...................................................................................... 196
8.2　动态图标范例——已上线 ........................................................................ 197
8.3　动态图标的类型 ...................................................................................... 199
8.4　After Effects 操作入门 ............................................................................ 203
8.5　完整项目课堂演示+ 学生实操 “Weather Icons”动态图标设计及
绘制方法 ................................................................................................. 206
8.5.1 项目相关知识 ............................................................................. 208
8.5.2 项目准备与设计 ......................................................................... 208
8.5.3 项目实施 .................................................................................... 208
8.5.4 项目总结 .................................................................................... 215
8.6　拓展练习 ................................................................................................. 216
项目9 怪鱼旅行App 首页版式设计及绘制方法...............................................217
9.1　了解移动端界面版式设计 ........................................................................ 217
9.2　优秀的移动端App 首页版式范例——已上线 .......................................... 217
9.3　App 界面的布局构成 ............................................................................... 219
9.4　App 界面的设计原则 ............................................................................... 229
9.5　App 界面的设计规范 ............................................................................... 231
9.6　完整项目课堂演示+ 学生实操 怪鱼旅行App 首页版式设计及绘制方法 ... 232
9.6.1 项目相关知识 ............................................................................. 232
9.6.2 项目准备与设计 ......................................................................... 233
9.6.3 方案一项目实施 ......................................................................... 233
9.6.4 方案二项目实施 ......................................................................... 248
9.6.5 项目总结 .................................................................................... 249
9.7　拓展练习 ................................................................................................. 250
项目10 怦然乐动App 界面设计及绘制方法...................................................251
10.1　App 界面设计概述 ................................................................................ 251
10.2　项目启动 ............................................................................................... 251
10.3　项目调研与分析 .................................................................................... 252
10.4　系统设计 ............................................................................................... 260
10.5　视觉设计 ............................................................................................... 264
10.6　完整项目课堂演示+ 学生实操 怦然乐动App 界面 设计及绘制方法 ..... 268
10.6.1 项目相关知识 ........................................................................... 268
10.6.2 项目准备与设计 ....................................................................... 268
10.6.3 项目实施 .................................................................................. 268
10.6.4 项目总结 .................................................................................. 271
10.7　拓展练习 ............................................................................................... 272