视觉之外 全链路UI设计思维的培养与提升

　　互联网行业的发展使互联网企业中的设计岗位与产品经理岗位之间的界限越来越模糊，对从业人员综合能力的要求不断提高。《视觉之外 全链路UI设计思维的培养与提升》从设计师的角度，较为全面地介绍了互联网产品研发过程中会涉及的知识，包括产品需求、交互设计、UI视觉设计、产品研发和数据分析这几个关键阶段需要具备的思维能力，以帮助设计从业人员快速构建综合思维模型，成为“全链路设计师”。互联网进入“下半场”后，思维能力是设计师应具有的一项重要能力。《视觉之外 全链路UI设计思维的培养与提升》可以带领设计师快速了解与产品、交互、视觉、编程和数据分析相关的内容。《视觉之外 全链路UI设计思维的培养与提升》适合互联网设计师阅读，也适合互联网产品经理阅读参考，尤其适合新入行的交互和视觉设计师阅读。

　　黄方闻高级交互设计师，IXDC、UI中国等平台合作讲师，曾实现过多款产品的从0 到1，已出版著作《动静之美——Sketch 移动UI与交互动效设计详解》《Adobe XD功能解析与应用》。

第1章 设计师需要了解的产品知识
1．1 产品生命周期曲线 / 10
1．1．1 产品生命周期曲线概述 / 10
1．1．2 引入期的产品设计策略 / 12
1．1．3 成长期的产品设计策略 / 14
1．1．4 成熟期的产品设计策略 / 16
1．1．5 衰退期的产品设计策略 / 18
1．1．6 其他说明 / 19
1．2 敏捷开发下的产品设计 / 20
1．2．1 最小可行性产品设计 / 20
1．2．2 设计冲刺 / 23
1．2．3 最小可行性产品设计和设计冲刺的选择 / 26
1．3 产品价值和产品需求 / 27
1．3．1 产品价值 / 27
1．3．2 产品需求 / 33
1．4 做好竞品分析 / 37
1．4．1 找到合适的竞品 / 38
1．4．2 发现优秀产品的途径 / 39
1．4．3 竞品分析的流程 / 41
第2章 交互设计思维的入门与提升
2．1 交互设计的一些基本概念 / 50
2．1．1 交互设计是一个流程 / 50
2．1．2 区分交互设计和UI设计 / 53
2．1．3 交互设计师的视角 / 55
2．1．4 交互设计需关注的点 / 57
2．2 做好用户调研 / 61
2．2．1 用户调研的流程 / 61
2．2．2 用户画像 / 64
2．2．3 用户体验地图 / 68
2．3 信息架构 / 71
2．3．1 信息架构的概念 / 71
2．3．2 信息架构图的制作 / 73
2．3．3 信息架构的设计思维 / 75
2．3．4 信息架构的呈现 / 80
2．4 流程图的设计 / 81
2．4．1 流程图的基础知识 / 81
2．4．2 流程图的基本结构 / 83
2．4．3 流程图的绘制 / 84
2．4．4 设计流程图的注意事项 / 88
2．4．5 流程图与界面的关系 / 90
2．5 原型设计 / 92
2．5．1 原型设计的度 / 92
2．5．2 原型设计工具 / 93
2．5．3 原型设计前的准备工作 / 94
2．5．4 原型设计实例 / 97
2．6 交互设计的其他补充内容 / 106
2．6．1 用户行为与用户心理 / 106
2．6．2 尼尔森十大可用性原则 / 113
第3 章 带着思想去做好视觉设计
3．1 为当下做UI设计 / 120
3．1．1 UI设计风格的变化 / 120
3．1．2 大标题设计风格 / 122
3．1．3 卡片设计风格 / 123
3．1．4 三大核心设计理念 / 123
3．2 UI设计中的基础设计知识 / 132
3．2．1 颜色入门 / 133
3．2．2 文字设计 / 140
3．2．3 图标设计 / 145
3．2．4 排版设计 / 147
3．2．5 黑暗模式下的界面设计 / 151
3．3 多平台的UI设计概述 / 153
3．3．1 以iPhone X为代表的移动平台的UI设计 / 153
3．3．2 以iPad/iPad Pro为代表的平板电脑平台的UI设计 / 160
3．3．3 以Apple Watch为代表的穿戴式设备的UI设计 / 167
3．3．4 网页设计快速入门 / 169
3．4 设计规范 / 172
3．4．1 设计规范的意义 / 172
3．4．2 设计规范是否必要 / 174
3．4．3 设计规范的种类 / 175
3．4．4 设计规范的创建 / 176
第4章 设计师的编程思维
4．1 设计师与编程 / 182
4．1．1 设计师了解编程的意义 / 182
4．1．2 编程的几个基本概念 / 184
4．1．3 自学编程 / 187
4．1．4 Sublime的快速入门 / 187
4．2 认识HTML文档 / 190
4．2．1 HTML、CSS和JavaScript之间的关系 / 190
4．2．2 浏览器 / 191
4．2．3 HTML的定义 / 193
4．2．4 HTML的组成 / 194
4．2．5 HTML的标签 / 196
4．2．6 HTML的路径 / 202
4．2．7 超链接 / 203
4．2．8 深入学习HTML / 203
4．3 CSS的快速入门 / 204
4．3．1 CSS的概念 / 204
4．3．2 CSS的属性 / 206
4．3．3 CSS选择器 / 207
4．3．4 CSS的特性 / 212
4．4 用WordPress搭建个人网站 / 213
4．4．1 认识WordPress / 213
4．4．2 安装WordPress前的准备 / 214
4．4．3 安装WordPress / 216
4．4．4 WordPress的基本使用 / 219
4．4．5 WordPress主题的代码修改 / 221
4．4．6 域名的申请和绑定 / 224
4．5 设计师对性能的影响 / 227
4．5．1 图片的导出选项 / 227
4．5．2 利用工具进行图片压缩 / 232
4．5．3 CSS Sprite / 232
4．5．4 视觉元素优化 / 234
第5章 设计师也要读懂数据
5．1 看懂常见的数据指标 / 236
5．1．1 数据是怎么产生的 / 236
5．1．2 常见的数据指标 / 236
5．2 A/B测试与数据分析 / 243
5．2．1 A/B测试 / 243
5．2．2 数据分析 / 244
5．3 利用数据优化设计 / 245
5．3．1 利用数据为界面设计提供参考依据 / 246
5．3．2 利用数据为界面设计提供决策 / 247
后记 / 248