由于公司有项目在用 Ant Design，当得知 SEE Conf 要举办的时候，就很有兴趣去参加。一整天活动听下来，最大的收获是听到了《产品经理是条狗》的现场。同行的设计实践和经验。由于自己是设计师，下面针对几个设计主题的演讲简单总结。

蚂蚁体验科技设计团队的设计系统

适用于后台产品的用户体验模型

HEART 是 Google 试验并提出的用户体验模型，在业内比较成熟，分别代表 Happiness（愉悦感）、Engagement（参与度）、Adoption（接受度）、Retention（留存率）、Task Success（任务完成率）这几个指标。

但是对后台产品来说，HEART 模型不完全适用。比如留存，员工几乎无法选择他们能适用的产品，而且只要一个员工不离职，就不可能流失，所以留存指标不适用于后台产品。另外，后台产品有着跟 to C 产品很不一样的特点，比如功能很多、逻辑很复杂，且非常注重效率，这就对产品是否清晰、是否高效有着很高要求。

所以蚂蚁金服提出 TECH 模型，分别代表 Task Success（任务完成率）、Engagement（参与度）、Clarity（清晰度）、Happiness（愉悦感）。具体操作方法有：

1. 关注核心任务的完成时间、所需步骤/点击次数、中断/失败率。

2. 在项目前期就开始做用户体验地图。

3. 问卷调研满意度。

而且，对于不同阶段的产品，TECH 维度的侧重也不同。

Ant Design Pro 的试错经历

Ant Design Pro 刚开始是针对不同行业做垂直的模板，但上线后反响不好，总结出的三个错误是：

1. 过⼩，过于垂直

2. 把场景外的潜在⽤户挡在⻔外

3. 复⽤度低

于是转为做高复用度的通用化模板，再配合灵活的组件和尽可能多的样例。这很大程度上参考了 Atomic design。新的定位是为没有专职设计师和前端工程师的产品提供服务。

另外，对于后台产品用户少、数据少的、反馈少的问题，他们通过开源，把用户量提升了上去，并且有不同行业的真实使用场景，收到了大量有效反馈。

视觉设计背后的数学原理应用

UI Style Guide 里包括主字号、字阶、行距等等，往往是设计师主观的结果，Ant Design 3.0 从大自然隐藏的数学规律里找到启发，用数学原理和公式得出设计的答案。

举个例子，Ant Design 3.0 字阶和其对应的行距，参考了音阶和数学常数 e，得出一组数字。再考虑到 Ant 的开发习惯取偶数、考虑设计师的记忆和使用的方便，调整出最终的一组数字。比如，全部的行距都可以用「行距 = （字号 + 8）px」这个公式来推导。

但我个人不认同这种方式，原因是这些取整和根据执行难度的调整妥协，其实已经让数值偏移最开始的曲线很多。

看到网上对这个演讲的评论，有人觉得是玄学，有的工程师感叹原来设计师的设计也是有道理的。这样的方法论可能能让前端同事更信服、让设计师更有自信，但依然没有解决设计师和前端工程师沟通成本的问题。

---

拓展阅读：

官方回顾总结：https://zhuanlan.zhihu.com/p/32709149

Ant Design 3.0 官网：https://ant.design/index-cn

Ant Design Pro 官网：https://pro.ant.design/index-cn

SEE Conf 主页：https://seeconf.alipay.com/