交互学习笔记-阿里巴巴Ant Design

本文是对Ant Design官方文档的缩写，请仔细阅读原文档。

1.原则

   1.1 亲密性

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

    纵向间距：在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。在这三种规格不适用的情况下，可以通过加减『基础间距』（8px）的倍数，或者增加元素（分割线等）来拉开信息层次。

    横向间距：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。

---

   1.2 对齐

    文案较短、较散时，应该设定统一的视觉起点。

    表单冒号右对齐方便用户不重不漏。

    数字最好小数点后位数统一，并右对齐。

---

   1.3 对比

    主次关系对比：突出更重要或更高频的操作。

    在需要用户慎重选择的场景，系统应保持中立。

    总分关系对比：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。

    状态对比：静态对比（颜色、文本区别）；动态对比（鼠标悬停、单击时效果）

---

   1.4 重复

    反复重复一些设计要素，保持设计风格统一，帮助用户理解层次关系。

---

   1.5 直截了当

    在需要编辑的地方尽量在上下文中完成，不要另开新页面。

    当易读性远比易编辑性重要时，用单击编辑。即可编辑文本与其他文本样式相似，在鼠标悬停时显示编辑相关提示，单击后进入编辑状态。

    当易编辑性比较重要时，在可编辑文本附近放置编辑按钮，即文字链/图标编辑。

---

    1.6 足不出户

    能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

     二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。建议用Message或  Popconfirm

     详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。

     输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。

     列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。

     标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。

     弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。

 

---

     1.7 简化交互

     

     根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。

费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体： 。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

      实时可见工具：如果某个操作非常重要，就应该把它放在界面中，并实时可见。

      悬停即现工具：如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。

      开关显示工具：如果某些操作只需要在特定模式时显示，可以通过开关来实现。

  

---

      1.8 提供邀请

       很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。

       

       邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。

意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》

可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》

     静态邀请：

            引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。

            漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。

     动态邀请：

             悬停邀请：在鼠标悬停期间提供邀请。

             推论邀请：用于交互期间，合理推断用户可能产生的需求。

             更多内容邀请：用于邀请用户查看更多内容。

---