本书基于软件Potoshop、Illustrator、After Effects来进行移动端UI设计解析，内容从基础的图标设计开始再到移动端界面设计，从无到有的过程解析及终的动效设计。分析目前年轻设计师感兴趣的像素风、MBE、正交透视（2.5D图标）图标制作及手机主题图标的创作思路。界面设计部分根据分类，对应版式、色彩、设计规范等进行展开，同时分析了移动端产品综合案列。动效设计部分承接界面视觉设计相关内容，选择AE软件来进行讲解。本书涵盖移动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