【编辑推荐】
金蝶作为企业服务领域的老兵已经深耕B端市场25年，旗下云之家产品也已经在移动办公领域走过了8年时间。与C端产品不同，B端产品需要了解企业，要为客户提供*为专业的服务，在这一点上金蝶云之家团队有着丰富的经验。金蝶云之家用户体验部拥有20多名经验丰富的设计师，不仅年轻有创意，还致力于为客户打造专业的产品。
【内容简介】
《蝶变：移动用户体验设计之道》结合云之家移动办公产品的实际案例，分析了各类不同场景下产品的设计方法，详 细介绍了如何打造一款具备优秀用户体验的智能手机App，主要内容包括企业用户研究、To B 产品设计研究、交互和视觉设计技巧、平台建设和生态系统设计技巧和相关的案例及经验总 结。书中包含大量实际调研数据，对设计的迭代过程进行了充分展示，侧重实战经验，并非 空洞的设计思想和理论。 《蝶变：移动用户体验设计之道》适合用户体验设计领域的从业者、图形界面设计师、交互设计师、用户研究员、产 品设计规划人员、企业服务产品设计人员、移动办公产品行业相关人员阅读，也适合交互设 计、用户体验相关专业的学生阅读，还可作为相关专业培训机构的参考用书。
【作者简介】
邓俊杰 金蝶云之家用户体验部总监，首席用户体验架构师。曾就职于华为技术有限公司，任交互设计师、设计主管、高级产品经理等职位。在用户体验相关领域工作13年，著有设计发明专利文章20余篇。
【目录】
第 1 章 企业用户研究方法探讨
1.1 发掘用户真实的需求
1.2 如何设计问卷才能收集到高质量的数据
1.3 企业实地访谈启思录
1.4 企业用户访谈案例
1.5 可用性测试：任务评估模型与计量方式
1.6 论用户研究员的自我修养
第 2 章 To B 产品设计研究
2.1 关于用户故事地图的多种用法
2.2 用户画像烹饪课
2.3 产品设计需要考虑完整场景
2.4 基于场景进行的 To B 产品设计
2.5 如何做好 To B 产品需求
第 3 章 交互和视觉设计技巧篇
3.1 格式塔原则在移动办公设计中的运用
3.2 费茨定律在移动办公设计中的运用
3.3 表单设计技巧
3.4 重要的视觉设计原则——对比
3.5 黄金分割在界面设计中的应用
3.6 如何做好视觉设计走查
3.7 如何提高文本易读性
3.8 移动办公产品设计案例
第 4 章 平台建设和生态系统设计
4.1 为什么要构建平台控件库
4.2 设计规范和组件化
4.3 快速建立控件的方法
4.4 YunDesign 产品设计原则
4.5 职场社交在移动办公产品中的探索
第 5 章 设计案例精选
5.1 如何利用签到提高二次传播
5.2 智能审批设计探索
5.3 审批表单设计实践
5.4 To B 直播场景设计
5.5 CRM 产品设计总结
5.6 CRM 连接 ERP 项目
5.7 如何提升报表体验
第 6 章 设计能力提升篇
6.1 交互设计背后的心理学原理
6.2 设计用户的情绪
6.3 如何解决傻瓜式交互动画
6.4 产品设计师常常忽视哪些实际上很重要的事
6.5 如何开展竞品分析
6.6 如何创造体验、创造价值
6.7 设计师应该如何跟程序员合作
【前言】
2017年4月1日那天，我给云之家用户体验部创建了一个微信公众号（云之家用户体验部，ID ：UXD-Cloudhub），开始向部门成员约稿，很多设计师都积极贡献了高质量的原创文章。一个月后公众号拿到原创标识，同时受邀入驻“人人都是产品经理”社区，成为该社区的合作媒体。
这是一个个体崛起的时代，很多设计师已经不仅仅在公司做产品，还开始在各种平台上发表自己的观点、经验，建立自己的影响力。一点点的输出就意味着大量的输入，输出越多其实象征个人的输入更多，自然个人的成长也更快。输入的途径有很多，有平时工作项目上的经验积累，有通过各种书籍、文章、网站获取到的知识，还有跟同事、同行的交流等。
现代职场人有两个重要的基本能力，一个是公开演讲，一个是专业写作，其实这两个能力就是两种不同的输出方式。一个不懂得输出的设计师很难在内部和外部建立起自己的影响力，而一个懂得输出的设计师会以非常快的速度成长，大量的输入再变成自己的想法输出，就能形成一个正向的循环。
基于这样的原因，作为一名团队管理者，我会尽量创造一个个可以让团队成员输出的机会，例如让他们多写文章，多总结项目经验，多做公开的培训，因为想要把握住这些输出机会，就意味着他们自己要有大量的输入和自我思考，这对他们自我提升也是一种变相激励，同时也能从侧面反映出他们如何看待自己的工作和职业规划。
非常幸运的是，这次能够受到清华大学出版社的邀请出版一本关于To B类互联网产品体验设计的书籍。云之家在企业移动办公领域已经耕耘了近8年，据IDC报告显示，2015年和2016年连续两年在中大型企业中，金蝶云之家蝉联中国移动办公市场*名，很显然我们积累了大量关于企业级互联网产品的设计经验。这是一个开放的时代，作为云之家的设计师，我们很愿意把自己的一些宝贵经验和想法与业界同行交流，跟大家共同进步。
这本书能够顺利出版首先要感谢云之家用户体验部每一位设计师的积极贡献，不管读者对内容本身的评价如何，大家一起来出版一本专业书籍这件事本身就非常有意义和值得纪念。同时还要感谢其他同事、领导、同行的鼓励和支持。相信这本书不是完结篇，而是一个新的起点。
邓俊杰
【免费在线读】
第3章 交互和视觉设计技巧篇3.1 格式塔原则在移动办公设计中的运用作者：王梓铭1. 格式塔原则首先简单介绍一下格式塔原则，它分成五个部分：（1）相近（Proximity）：距离相近的各部分趋于组成整体；（2）相似（Similarity）：在某一方面相似的各部分趋于组成整体；（3）封闭（Closure）：彼此相属、构成封闭实体的各部分趋于组成整体；（4）连续（Continuity）：人们倾向于完整地连接一个图形，而不是观察残缺的线条或形状；（5）简单（Simplicity）：具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。2. 说明与举例1）相近（Proximity）人们通常把位置相对靠近的事物当成一个整体，下面用几幅图来说明一下。如图所示，同样都是16个圆形，左图你会把16个圆形当成一个整体；但是右边那幅图，上面8个圆形和下面8个圆形各自靠得更近，所以你会把上面8个圆形当成一个整体，把下面8个当成另外一个整体。 ▲ 相近示意图1 ▲ 相近示意图2这里需要注意的是，相近性作为*条原则，它的“权重”非常大，大到可以抵消其他原则，例如为上面的圆形添加颜色，甚至改变其形状，人们也会把相近的事物当成一个整体。那么相近性原则的实际应用，又有哪些呢？*常见的地方就是一些功能列表页面，例如设置，或者像微信的“发现”页面那样的功能列表。大家会把“扫一扫”和“摇一摇”当成一个整体，而把“购物”和“游戏”当成另一个整体，这样可以让界面显得更加清晰，同时还能突出重点。这个列表的两头实际上是*突出的，像“朋友圈”和“小程序”。如果没有使用格式塔的相近原则，界面就会显得非常杂乱了。
▲ 微信“发现”页面示意图iOS系统的设置，也通过位置亲疏关系来体现分组。
▲ iOS系统的设置支付宝首页的元素虽然很多，但是根据相似性可以清晰地分为几组。
▲ 支付宝首页2）相似（Similarity）人们会把那些明显具有共同特性（如形状、大小、运动趋势、方向、颜色等）的事物当成一个整体。例如下方*幅图，大家会把同行的正方形当成一个整体，把其他圆形当成另一个整体。第二幅图，人们就会把大正方形当成整体，把小正方形当成另一个整体。
▲ 相似示意图1而这里需要注意的是人们对形状、大小、共同运动、方向、颜色的“感受权重”是不一样的，在这里颜色属性会覆盖其他属性的影响。左边这幅图，大家会把同行的正方形当成一个整体，加了颜色后的右图，就变成竖列圆形和正方形是个整体了。
▲ 相似示意图2前面提到了一个叫作“运动趋势”的东西，这里以安卓的交互规范为例，说明共同运动趋势。安卓的悬浮按钮，就是一个用了相似性（共同运动趋势）的设计，点击某一个，从下往上会出现多个操作按钮，虽然它们的图标不是一样的，但是因为同样是从下往上移动，所以人们会把它们当成一个整体。（这里要强调一点，前面提到的形状、大小、运动趋势、方向、颜色等特性，是可以组合使用的。这个悬浮按钮实际上用了共同运动趋势、相同形状、同一颜色，从而达到相似性的目的。）
▲ 共同运动趋势3）封闭（Closure）人会将不完全封闭的东西当成一个统一的整体，所以有些时候完全闭合是没有必要的。例如世界自然基金会的logo，就是一个典型的用到封闭原则的设计。熊猫的头部和背部并没有明显的封闭界限，但是我们依然会把它当成一只完整的熊猫。
▲ 世界自然基金会logo那么封闭性原则又在哪里使用呢？这一原则其实很多地方都用到过，不过一般不叫其为“封闭性原则”，而是叫“截断式设计”。为了让用户感知到还有内容未显完全，一般会使用截断式设计。像微信的钱包页面，底部因为屏幕大小的关系被截掉了部分内容，但是用户可以通过残留的部分，“脑补”出下方仍然有完整的信息。
▲ 截断式设计下图是印象笔记PC与Mac端多选笔记的显示效果，会将后面的图形视为一个封闭卡片（代表着一个笔记）的一部分，而不是视为独立的非封闭图形。
▲ 印象笔记多选笔记的显示效果4）连续（Continuity）一般人们倾向于完整地连接一个图形，而不是观察残缺的线条或形状。首先请大家看看这幅图片。
▲ 测试图1大家觉得图里的是两个圆形，还是两个残缺圆和一个两圆相交的重合部分呢？按照格式塔原则，笔者猜大家看到的应该是下方图中左边的两个圆形吧！
▲ 测试图2这个法则一般在交互设计上会用得比较少，但是在视觉设计中会用得多一点，例如某些应用就喜欢把 App Store 上的应用详情做成连续的图片。
▲ 连续示意图例如，在IBM的logo设计中，人们并不把这些元素感知为独立的横线，而是感知为整体的字母。
▲ IBM logo交互上典型的例子是滑动条，如在 iOS 系统的亮度调节中，人们不会把图形控制点左右两边视为独立的横线，而是会在心中把它们连接起来，视为一个整体。
【书摘与插画】
