数栈UI5.0体验升级背后的故事：可用性原则与交互升级

这原则的原版翻译是设计应始终在合理的时间内通过适当的反馈，让用户了解正在发生的事情，我们可以理解为包括用户在页面上的任何操作，系统需要给出相应的反馈，来确保用户在操作过程中的状态可见，变化可见，内容可见，从而帮助用户将交互引导到正确的方向，而不会浪费精力；

1、按钮交互状态的变化，响应用户的操作行为

2、提交任务之后给出的反馈提示，明确任务目的是否成功，减少不确定性

3、根据用户操作后导航的颜色状态区分，从而告知用户当前所处的模块

“Match between system and the real world”系统与现实世界之间的匹配。用户会习惯用现实世界中已有认知来看待问题，这个已有认知是用户根据自己掌握的经验、知识和想象所建立心智模型。就比如在色彩运用上，绿色代表成功，红色代表失败，黄色代表警示，当用户在看到这几种色彩时，会延续已有惯性的思维。再比如图标的设计，我们设计图标时会按照实际事物的来描绘图形，比如垃圾桶的图形表示删除。当我们在设计时如果遵循这种习惯，能够很大程度上去降低用户的认知成本。

可控是一种原则和框架，是指事物的发展在我们能够预期和把握的范围内。在非业务场景下，给用户更多的选择和控制的自由，能够增加用户对于这个产品的“安全感”，从而塑造良好的体验。

1、当操作不可逆时要给用户二次确认的机会，避免用户由于误操作造成的后果。

2、当用户在完成任务过程中，应该允许用户回溯所做的选择或退出流程。

⼀致性可以给⽤户统⼀的认知，帮助⽤户快速学习、记忆和熟悉产品的功能，从⽽建⽴⽤户稳定的⼼智模型。为了保障产品间的⽤ 户体验统⼀，通常都需要建⽴设计规范，来确保产品内部的⼀致性，这讲的⼀致性包括视觉⼀致性、⾏为⼀致性和感知⼀致性。在此次升级中建立了一套完整的数栈设计规范体系，通过这套规范可以解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题，同时它也能够促进设计与研发部门之间协作。

1、视觉的一致性包括字体，颜色，尺寸布局，图标等，统一视觉使页面井然有序。

2、行为一致性体现在各种页面控件布局、操作交互的一致性、页面的跳转逻辑的一致性

3、感知一致性是指位置一致性（确定、取消按钮、保存、类似模块的相同按钮位置相似）以及文本一致性（提示语、操作提示、功能按钮、编辑提示）

对于像数栈这类专业性强的产品来说，用户很难避免会出现错误操作，提前考虑到会影响用户犯错原因，提供正确的引导能够降低用户犯错概率，同时在用户操作错误时提供有效的解决措施来帮助用户完成任务，提升操作效率的同时，也能够给用户带来安全感。这就好比你走在一个十字路口，清晰的指示牌可以避免你走错路。

文字提示（tooltip）在数栈的产品也被广泛应用，主要用于适时的提醒解决用户的疑惑，而不打断用户的操作。

用户是不可能记住操作过程中过多的信息，在设计产品时就需要考虑到减少用户的记忆负担，如在用户重新编辑任务时记住用户之前的操作记录而不是清空；提供有效的提示信息帮助用户理解和记忆；可以的情况下，尽量让用户选择而不是输入,对用户侧而言，选择的操作成本肯定是比输入要低。

1、记住用户操作历史——“最近使用”按照项目打开时间由近至远排序，方便用户快速回到需要使用的项目。

2、选择而不是输入——由于业务需要，产品中会有大量表单内容需要用户来操作，用选择代替输入录可以减少用户的记忆负担，也能减少输入错误等问题，可以有效的提升操作效率。

关于这一点其实是在B端产品设计中比较容易忽视的一个原则，我们往往默认使用产品的业务人员是相对成熟的产品使用者，因为大部分用户在进入产品后都会经过最初的产品培训，从而成为中级用户。在《About Face 4：交互设计精髓》中有提到为中级用户优化设计，大多用户既非新手又非专家，而是属于中级用户。当然不是说这样就不需要在产品设计中考虑新手用户，反而更应该考虑如何在减少人力培训成本下，帮助新用户快速过度到中级用户。

视觉也是交互设计中至关重要的一点，对于体验本身，视觉的感知是最直观的呈现方式，人往往会对好的设计有更大的包容性。在页面的设计中视觉的层次可以有效的引导用户操作路径，良好的视觉层次结构可以提高相应页面的可用性。比如格式塔视觉理论中提到的接近性原则，位置紧密的元素看起来是相关的。当将某些元素放在一起时，我们就向用户提供了一个清晰的信号，说明对象是相关的。

1、视觉效果可以建立良好的第一印象，唐·诺曼说，“有吸引力的东西效果会更好。

2、视觉的层次可以有效的引导用户操作路径，根据信息的关联性布局，形成分组暗示

用户在产品使用中经常会遇到操作错误，那给予合理的错误提示可以帮助用户快速解决问题；

对于数栈这类业务性较强的产品来说，帮助文档是必不可少的，它能够帮助用户更加快速的了解产品。同时也需要在页面上提供信息提示来帮助用户完成任务。常见的如tooltip,较为轻量化的交互形式，需要用户主动去触发唤起，不打断用户操作流程。