正版 Photoshop+Illustrator+After Effects移动UI全效实战手册

第 1 章 图标设计/ 7
1.1 图标设计基础 / 8
1.1.1 图标的形式分类 / 8
1.1.2 图标的属性分类 / 9
1.1.3 图标设计的视觉规范 / 10
1.1.4 图标设计软件介绍 / 13
1.1.5 布尔运算 / 14
1.2 剪影图标/ 18
1.2.1 剪影图标简介/ 18
1.2.2 剪影图标案例 / 19
1.3 MBE 图标 / 25
1.3.1 MBE 图标简介 / 26
1.3.2 MBE 图标案例 / 27
1.4 扁平化图标/ 33
1.4.1 扁平化图标配色特点 / 33
1.4.2 扁平化图标风格/34
1.4.3 扁平化图标案例 / 35
1.5 等距视图（2.5D）图标 / 39
1.5.1 等距视图风格特点/ 39
1.5.2 等距视图图标案例/ 40
1.6 像素风图标/ 45
1.6.1 像素风图标特点 / 45
1.6.2 像素风图标案例 / 46
1.7 拟物化图标/ 50
1.7.1 拟物化图标特点/ 50
1.7.2 图层样式解析/ 51
1.7.3 拟物化图标案例/55
1.8 主题图标设计/82
1.8.1 主题图标赏析 / 82
1.8.2 主题图标案例 84
第 2 章 iOS 系统和Android 系统设计原则及规范 /90
2.1 iOS 系统设计原则及规范/ 91
2.1.1 界面尺寸/ 91
2.1.2 栏高度 /91
2.1.3 边距和间距 / 94
2.1.4 界面布局 / 96
2.1.5 图片比例 / 99
2.1.6 图标规范/100
2.1.7 版式规范 / 101
2.1.8 文字规范 / 102
2.1.9 设计适配/ 102
2.2 Android 系统的界面设计原则及规范/103
2.2.1 界面尺寸/104
2.2.2 iOS与Android系统的设计语言及界面结构差异对比 /105
2.2.3 栏高度 / 107
2.2.4 图标规范/ 108
2.2.5 文字与版式规范/ 110
2.2.6 设计适配/ 111
第3章 App界面设计 /113
3.1 格式塔原理在界面设计中的应用/114
3.1.1 接近性法则 / 114
3.1.2 相似性原理/ 114
3.2 控件/ 115
3.3 组件/ 117
3.4 闪屏页和启动页/ 119
3.4.1 闪屏页和启动页的特征/119
3.4.2 闪屏页分类 /119
3.4.3 闪屏页和启动页的功能与适配 度/121
3.5 引导页/ 122
3.5.1 引导页分类 / 122
3.5.2 引导页的功能与特征/ 123
3.6 空白页/ 出错页 / 124
3.7 首页/ 125
3.7.1 首页的功能与特征 /125
3.7.2 首页设计案例解析/126
3.8 个人中心页/129
3.9 详情页/131
3.9.1 详情页内容设置 / 131
3.9.2 详情页设计案例解析 / 132
3.10 登录页 / 135
3.10.1 登录页设置 / 135
3.10.2 登录页设计案例解析 /135
3.11 沉浸式页面 / 137
3.11.1 页面配色 / 137
3.11.2 沉浸式页面赏析/138
第4 章 页面标注与切图 /139
4.1 常用标注工具介绍/140
4.2 Parker使用说明/140
4.3 切图输出/ 142
第5 章 交互设计 /144
5.1 认识交互设计/145
5.1.1 交互设计与界面设计的区别 /145
5.1.2 交互设计的五要素/145
5.2 交互设计七大定律/146
5.2.1 席克定律 /146
5.2.2 菲茨定律 / 147
5.2.3 泰思勒定律 / 148
5.2.4 奥卡姆剃刀原理/ 148
5.2.5 新乡重夫防错原则/149
5.2.6 接近性法则 /149
5.2.7 神奇数字7±2 法则/149
5.3 交互设计辅助工具及应用 /150
5.3.1 思维导图/150
5.3.2 流程图/ 150
5.3.3 线框图/151
5.3.4 交互说明文档/152
第6 章 移动端产品界面设计解析/ 153
6.1 互联网公司团队架构/154
6.1.1 产品团队/ 154
6.1.2 研发团队/ 155
6.2 移动端产品开发流程/155
6.3 名绣App 界面设计案例解析/ 156
6.3.1 产品分析/ 156
6.3.2 品牌形象/ 157
6.3.3 界面配色/ 158
6.3.4 界面图标设计/158
6.3.5 界面版式设计/ 158
6.4 “MUSIC & COFFEE”音咖概念App界面设计案例解析/162
6.4.1 产品定位/162
6.4.2 用户研究/162
6.4.3 视觉规范/163
6.4.4 界面布局/165
6.4.5 界面视觉设计/166
第7 章 UI 中的动效设计/ 171
7.1 动效设计软件介绍/172
7.1.1 UI 常用动效设计软件/172
7.1.2 AE 界面结构与基本功能/172
7.1.3 AE 合成与变换/174
7.2 UI 动效设计案例详解/180
7.2.1 弹射玩具/180
7.2.2 动态进度条/185
7.2.3 充电显示/188
7.2.4 发光盒子/ 189
7.2.5 信息提示/192
7.2.6 飞行动画/195
7.2.7 渐变字体/198
7.2.8 炫彩图标/202
7.2.9 广告动效/206
7.2.10 传送动效/ 208
7.2.11 变色雪花/210

向桦，西南财经大学天府学院讲师，UXPA中国用户体验专业协会会员、中国用户体验联盟会员，主要从事和擅长界面视觉设计、交互设计教学研究。
孟琴，西南财经大学天府学院讲师。四川省工业设计协会会员，孟宇视觉工作室创始人、绵阳俊霖文化艺术广场有限公司文化创意产业项目经理、印客创学教育机构合伙人。个人设计作品多次获 级奖项，多次参与省部级课题及多个商业项目。
李扬，西南财经大学天府学院讲师。四川省工业设计协会会员，成都文清文化传播有限公司联合创始人、设计作品获“世界之星”、“中国之星”包装类希望之星一等奖、中国“包装之星”创意奖一等奖等设计大奖，并收录于《中国西南设计年鉴》，学术论文发表于《包装设计》等。参与未来中心、ACROSS.LAB跨界实验室、成都市艺术博览会等多个大型商业项目设计。
汪翔，曾服务于各类一线品牌设计,福建省教育资源库设计板块授权作者，搜狗签约设计师，UI中国 设计师。
余沁，四川美术学院视觉传达硕士，主要研究方向为品牌形象策划与创意设计。曾就职于宜宾电视台、重庆艺术工程职业学院、四川文化艺术学院，现就职于西南财经大学天府学院。学习及工作期间曾参与西南政法大学、黔江旅游局、重庆大足石刻、中钞油墨公司等多个相关项目设计，参研多项科研项目及学术活动，并多次获得 及省级设计奖项。

1.使用Potoshop、Illustrator、After Effects作为基础工具，兼顾iOS和Android系统设计原则，详细讲解图标设计和界面设计技巧；
2.赠送案例文件和效果文件，提供在线教学视频和配套教学PPT课件，让读者随学随练，及时解决相关问题，提高专业知识转化率；
3.按照“知识-解析-应用”的思路进行编排，具备科学完整的教学结构，书中设置有小贴士、设计方式等模块，帮助读者加深理解；
4.“UI中国 设计师”VIENTIANE参与本书实战案例设计，帮助读者结合软件进行操作，在实战中形成自己的设计思路。

本书基于软件Potoshop、Illustrator、After Effects来进行移动端UI设计解析，内容从最基础的图标设计开始再到移动端界面设计，从无到有的过程解析及最终的动效设计。分析目前年轻设计师感兴趣的像素风、MBE、正交透视(2.5D图标)图标制作及手机主题图标的创作思路。界面设计部分根据分类，对应版式、色彩、设计规范等进行展开，同时分析了移动端产品综合案列。动效设计部分承接界面视觉设计相关内容，选择AE软件来进行讲解。本书涵盖移动UI设计中多个主流软件，配合案例进行讲解，同时配书提供操作案例效果源文件和同步讲解视频，以供读者学习使用。

1.使用Potoshop、Illustrator、After Effects作为基础工具，兼顾iOS和Android系统设计原则，详细讲解图标设计和界面设计技巧；
2.赠送案例文件和效果文件，提供在线教学视频和配套教学PPT课件，让读者随学随练，及时解决相关问题，提高专业知识转化率；
3.按照“知识-解析-应用”的思路进行编排，具备科学完整的教学结构，书中设置有小贴士、设计方式等模块，帮助读者加深理解；
4.“UI中国推荐设计师”VIENTIANE参与本书实战案例设计，帮助读者结合软件进行操作，在实战中形成自己的设计思路。