第1章 UI介绍
1.1 什么是UI 1
1.2 UI设计师就业前景 2
1.3 UI设计的思路/遵循原则 4
第2章图标设计基础
2.1 图标的概念 8
2.2 图标的分类 9
2.2.1 启动图标 9
2.2.2 功能图标 9
2.3 图标设计原则 10
2.3.1 识别性原则 10
2.3.2 统一性原则 11
2.3.3 差异性原则 12
2.3.4 原创图标 13
2.3.5 “潜规则” 14
2.4 常见图标设计风格 14
2.4.1 剪影图标 14
2.4.2 扁平图标 16
2.4.3 微扁平和轻写实图标 17
2.4.4 写实风格图标 17
2.5 图标网格系统 18
第3章图标设计进阶
3.1 启动图标 21
3.1.1 启动图标的灵感来源 22
3.1.2 常见的几种启动图标设计手法 24
3.2 功能图标的灵感来源 26
3.2.1 吉祥物 27
3.2.2 启动图标特征 28
3.2.3 VI色 29
3.2.4 直接引用 29
3.3 建立统一风格的图标 30
3.3.1 描边样式 30
3.3.2 色值 31
3.3.3 圆角半径 32
3.3.4 图标大小 32
3.3.5 使用相同的元素 32
3.3.6 其他细节 33
3.4 字体图标 33
3.4.1 什么是字体图标 33
3.4.2 如何绘制字体图标 34
3.5 评估图标的设计质量 39
3.5.1 识别性 39
3.5.2 统一性 40
3.5.3 吸引力 40
第4章图标设计实战
4.1 PS中的设置 41
4.1.1 工具设置 41
4.1.2 单位与标尺 42
4.1.3 对齐边缘 42
4.1.4 钢笔工具 43
4.1.5 网格和参考线 43
4.1.6 新建文档 44
4.2 布尔运算 45
4.2.1 新建图层 45
4.2.2 合并形状 45
4.2.3 减去顶层形状 46
4.2.4 与形状区域相交 46
4.2.5 排除重叠形状 46
4.2.6 合并形状组件 46
4.3 图标设计流程 47
4.3.1 设定需求，明确创作方向 47
4.3.2 头脑风暴，列举关键字 47
4.3.3 从关键字中联想造型，寻找灵感 47
4.3.4 手绘草图 48
4.3.5 软件绘制初稿 48
4.3.6 确定风格 48
4.3.7 视觉设计，完善细节 49
4.3.8 切图输出 50
4.4 剪影图标的绘制及设计思路 50
4.5 扁平图标的绘制及设计思路 51
4.6 微扁平图标/轻写实图标的绘制及设计思路 53
4.7 写实图标的绘制及设计思路 63
4.8 节日图标 87
4.9 关于创作 89
4.9.1 利用品牌视觉元素 89
4.9.2 “参考”和“模仿” 89
4.10 AI导入PS没有虚边 91
第5章 UI设计基础
5.1 产品思维导图 92
5.2 主流设计界面介绍 93
5.3 App页面类型 94
5.3.1 聚合类 94
5.3.2 列表类 95
5.3.3 内容类 95
5.3.4 功能类 96
5.4 App包含哪些界面 97
5.4.1 启动页 97
5.4.2 引导页 97
5.4.3 首页 99
5.4.4 登录/注册 100
5.4.5 无数据界面 100
5.4.6 出错界面 101
5.4.7 反馈界面 102
5.5 UI界面设计的布局 105
5.5.1 状态栏 106
5.5.2 导航栏 106
5.5.3 主体内容 106
5.5.4 标签栏 106
5.5.5 图标设计的规范 107
5.6 UI界面设计的字体 108
5.7 UI界面设计的间距 110
5.7.1 全局边距 110
5.7.2 卡片间距 111
5.7.3 内容间距 112
5.8 UI界面设计的颜色 113
5.8.1 通过各类App采集色彩 113
5.8.2 通过Dribbble等网站采集色彩 113
5.8.3 通过摄影作品采集色彩 113
5.8.4 从电影中采集色彩 115
5.8.5 提高审美，增强个人赏析力 116
5.9 从低保真到高保真 116
5.10 UI界面的逻辑关系 122
5.11 UI切图规则 124
5.11.1 马克鳗 124
5.11.2 Parker 124
5.11.3 CUTTERMAN—免费的PS切图插件 124
5.11.4 Design Mirror—最好用的设计稿手机预览工具 126
5.11.5 命名规则 127
5.11.6 Android切图 129
5.11.7 iOS切图 130
5.12 信息架构 130
5.12.1 减少目录级数 132
5.12.2 功能的排布要有逻辑，分类要清晰，命名要准确、易懂 132
5.12.3 减少操作次数、减少界面跳转层级 132
5.12.4 操作要顺畅，界面跳转符合用户心理预期 133
5.13 视觉层次 134
5.14 用户研究 137
5.14.1 用户画像 138
5.14.2 用户画像制作 138
5.14.3 用户讨论 139
5.14.4 前期调查 139
5.14.5 可行性测试 140
5.14.6 大数据分析和用户的反馈 140
5.14.7 使用场景 140
5.14.8 操作手势 140
5.14.9 格式塔心理学 142
5.14.10 情感化设计 144
5.15 UI交互八原则 145
第6章 UI设计进阶
6.1 开始做一个产品 149
6.2 和甲方斗智斗勇 150
6.3 UI设计的思路 151
6.3.1 颜色 152
6.3.2 字体（以下提到的是都在iPhone 5的尺寸下面设计的字号） 152
6.3.3 分割线 152
6.3.4 图标 152
6.3.5 排版 153
6.4 UI设计配色 153
6.4.1 UI色彩认知 153
6.4.2 配色原则 154
6.4.3 App配色欣赏 155
6.4.4 配色工具 155
6.4.5 颜色搭配6-3-1法则 156
6.4.6 推荐几款有用的颜色工具 157
6.5 和程序员沟通 158
6.6 什么是UX 159
6.7 物理尺寸与视觉尺寸 161
6.8 视觉对齐与形状 164
6.9 视觉圆角 167
第7章 UI设计实战
7.1 绘制思维导图 170
7.2 设计UI低保真界面 171
7.3 设计UI高保真界面 175
第8章 PS视频时间轴动画
8.1 帧的概念 180
8.2 视频时间轴面板介绍 181
8.2.1 播放控件 181
8.2.2 音频播放控制按钮 181
8.2.3 设置按钮 182
8.2.4 在播放头处拆分 183
8.2.5 过渡效果 183
8.2.6 当前时间指示器 184
8.2.7 时间标尺 185
8.2.8 工作区域指示器 185
8.2.9 面板选项卡 186
8.2.10 向轨道添加媒体 186
8.2.11 图层持续时间条 187
8.2.12 向轨道添加音频 187
8.2.13 时间轴视图缩放控件 187
8.2.14 帧速率 188
8.2.15 当前时间 189
8.2.16 渲染视频 189
8.2.17 转为帧动画 190
8.2.18 关键帧导航器 190
8.2.19 启用/移除关键帧 190
8.2.20 折叠/展开图层关键帧选项 191
8.3 为什么要做动画？ 191
8.4 小汽车动画（位移动画） 192
8.5 消失的飞碟（不透明度动画） 195
8.6 凹陷的掌印（图层样式动画） 198
8.7 loading加载（缩放动画） 202
8.8 找找找（蒙版动画） 204
8.9 镜头切换（过渡动画） 208
8.10 播放器动画（综合案例） 210
8.10.1 思路构想 210
8.10.2 软件实现 211
第9章 PS帧动画
9.1 面板介绍 218
9.2 “吐司小哥”表情包设计 219
9.2.1 思路构想 219
9.2.2 软件实现 220
第10章 UI设计也要小插画
10.1 插画的概念 226
10.2 插画灵感的获取 226
10.2.1 采集 227
10.2.2 重构 228
10.3 Adobe Illustrator简介 228
10.3.1 工作界面（本文中的AI版本为CC 2018） 229
10.3.2 文档新建和输出 229
10.3.3 钢笔工具 231
10.3.4 剪刀工具 232
10.3.5 形状工具 232
10.3.6 吸管工具 232
10.3.7 混合工具 233
10.3.8 渐变工具 234
10.3.9 对齐面板 238
10.3.10 变换面板 239
10.3.11 路径查找器 241
10.3.12 图像描摹 242
10.3.13 实时上色 245
10.4 信手拈来的素材—写生 246
10.5 宁波街景—重构在插画中的运用 259
10.6 办公室的爱恋—让小插画富有故事性 262
10.7 可爱的耳环—重构和写生的结合 264
10.8 如何让插画形成系列 272
10.8.1 《带你去旅行》 274
10.8.2 《小红帽的冰雪之旅》 275
10.8.3 《假如我是老板》 276
10.8.4 假面骑士Redesign（再设计） 280
10.9 对插画的补充 281
10.9.1 不可忽视的绘画能力 281
10.9.2 练习手绘的好处 282
10.9.3 透视 283
写在结尾的一些话 286
参考文献 288
鄂公网安备 42010302001612号 