Ant-Design 设计原则及优缺点

参考文章：

什么是 Ant Design？

Ant Design 是一个服务于企业级产品的设计体系。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。

遵循 Ant Design 设计原则的意义

针对性解决产品反复出现的一些设计体验等问题
实现跨应用交互一致性的有效融合
依照原则设计界面，既减少了不必要的认知成本，又能够提升设计的效率
通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案

设计原则的内容大纲

- 设计层级清晰
  - 亲密原则
  - 对齐原则
  - 对比原则
  - 重复原则
- 交互操作高效
  - 直截了当
  - 足不出户
  - 简化交互
  - 即时反应
- 系统反馈及时
  - 巧用过渡
  - 简化交互
  - 即时反映
- 用户自由可控
  - 提供邀请
  - 足不出户
  - 即时反应

设计层级清晰

设计应该保证用户在交互前看到的内容结构是清晰明确的，一个层级混乱的界面，任何信息的传达都是无效的。保证清晰的排版布局是人机交互前的基础。

亲密原则

如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。

对齐原则

在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

对比原则

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

重复原则

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。

交互操作高效

要确保交互时，用户操作流畅、简单、用时短。设计时既要保证交互操作高效，也要思考用户能否理解流程如何操作。操作高效并不意味着要去解决实际时间的长短，我们应该同时考虑到用户的心理时间是否太长的问题。

减少打断

能在这个页面解决的问题，就不要去其它页面解决，任何页面刷新和跳转都会打断用户的使用，给用户带来不好的操作体验。因此要尽量避免频繁的页面刷新和跳转。

缩短步骤

设计应尽量符合“直接操作”的原理：「需要在哪里输出，就要允许在哪里输入」。例如：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『足不出户』的设计原则。

避免回忆

人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。因此在组件设计时，有时候保存和可视化历史操作，实现操作回溯等功能，可以优化用户交互体验。例如：添加搜索历史等。

信息降噪

如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。

简单来说，就是将优先级低的内容先隐藏，当产生某些交互时，再逐级展现相应的优先级。

- 列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。
- 标签页：标签也换可以将信息内容进行分类，让用户更易理解。
- 渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。
- 悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。

系统反馈及时

交互之后，应该立即给出反馈。用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

实时反馈

反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验差。为了增强用户体验，应当适当的加入一些反馈行为。

- 实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。
- 文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。

过渡反馈

人脑灰质会对动态的事物 (eg：移动、形变、色变等) 保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

等待动画：网络不好或者数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。
富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。
页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。
滑入与滑出：可以有效构建虚拟空间。 
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

结果反馈

用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。

用户自由可控

交互前，对下一步操作的预判；交互时，不论操作后的结果多严重都要允许用户自主决策；交互后，能否对自己的操作结果反悔。

未来预判

很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。这样人机交互的过程往往更加自然、顺畅。

一些不容易被发现，易误触发的操作，应当在触发前给予用户提示。

- 点击刷新：瀑布流卡片中，滑动和刷新操作往往被集成在了一起，如果在浏览时不小心刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致用户浏览的感受被打断。
- 未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。
- 悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。

自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。最常见的就是在删除重要文件时，提供繁杂操作确认的弹窗提示。

准许反悔

相对于自主决策来说，「准许反悔」对用户的操作没有那么强的阻断性。最常见的就是「删除撤销」：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

Ant Design 优缺点

优点

助初创团队快速产品快速上线

如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。
但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。
创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。
Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。
用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。

减少设计和开发的不确定性

用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。
Ant Design 提供的大量功能比较全面且 UI 风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。
这得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。
他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。
其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。

节省设计与开发的人力成本

缺点

无法根据业务场景定制组件，灵活度不够

产品自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能 100% 满足当前产品设计的需求。
另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。

组件细节深入度不够，只能“将就”使用

Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上。
规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。
而 Ant Design 只需要解决80%企业，80%的通用问题即可。

竞品同质化严重，视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。
为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。
大厂的成熟的组件库更应当视为一个字典，有不会的地方，可以去参考人家的成熟的解决方案，进而完善属于自己的规范。

jtwang7 / Project-Note