从场景角度选取合适交互规则

  所有的方案都是以场景为依据进行决定的。

交互规则1：按钮的左右对齐

💡优先原则

按钮的对齐方式，取决于效率优先还是准确率优先

适合左按钮的场景：
以效率为主，例如表单填写，本身就是一个麻烦的过程。为了减轻用户的焦虑情绪。让按钮和内容保持近距离的连贯性，可以让用户迅速完成当前工作。

适合右按钮的场景：
以确认信息为主，例如弹窗，本身是需要用户对内容进行确定的场景。所以按钮远离内容区域，通过鼠标移动距离来延缓操作。达到确认的目的。

交互规则2：输入框标签文字位置

适合在左侧的场景：
表单标签文字少于6个字，且不用考虑国际化，则可以让标签文字靠左或靠右对齐：标签短内容少使用右对齐，标签和框距离较小，较短视觉动线，明确标签和框的关联性，可提高填写效率；标签内容少，且安全性高，使用左对齐，叫长视觉动线会减缓填写速度，有利于提高准确性。

（绿色引导线为视觉导向）

适合在顶部的场景：
表单标签文字超过8个字，或者需要考虑国际化的时候，标签文字内容会出现长短不一的情况，文字内容会有所差别。而文字在顶部就不会影响视觉，并能达到自上而下的预览，提高阅读效率的效果。

交互规则3：表单内容多

💡基本属性及建议

能点击尽量不要输入和打字。合适的步骤拆分可以降低输入压力。

适合隐藏的场景：
少量不重要的输入内容为选填项，可以直接折叠起来。此时可去除高频重复的星号必填，标记低频的非必填。使用户专注主要填写内容。

适合步骤的场景：
内容过多时，将密集复杂的表单项目，拆解归类，最多3个步骤，一步仅填写3～5个内容。减少一次抛给用户填写的输入压力。

交互规则4：表单容器

💡优先原则

场景选择根据打断感的强弱，内容量的多少，关联性的强弱区分。

气泡卡片场景：
内容少，关联性极强

弹窗使用场景：
内容少，关联性强

页面使用场景
内容多，关联性弱

交互规则5：内容层级多

关联性强的场景：
通过靠近的距离大小体现关联性。

关联性较强的场景：
通过添加标题分类，还可以通过锚点定位，快速找到需要填写的信息。

关联性较弱的场景：
可以使用面性卡片分割

关联性弱的场景：
有一定逻辑关系如状态、时间等可以使用页签/胶囊式选项卡，相对独立的则可以使用基础线条选项卡。

交互规则6：表格场景

固定列：
对重要列进行首位固定

自主配置：
让用户自定义显示或隐藏列信息

内收列：
对不必要的字段隐藏，放到详情中。建议操作列，不应操作四个按钮，编辑、删除、详情。多的进行折叠

交互规则7：提示的使用场景

1、补充提示
通过输入框长短提示内容体量，通过hover提示图标展示更多信息，或解释说明。

2、规则提示
通过后缀、计量单位等提示内容格式。通过框内占位符、或辅助信息提示填写规则，通过星号提示必填字段等。

3、限制提示
通过字符提示输入数量，通过禁用态提示不可操作。

4、统计提示
使用统计数目提示选中数量。

5、校验提示
使用各种样式提示校验结果

6、状态提示
通过加载动画/进度条提示当前状态

7、定位提示
通过走马灯、步骤条、时间轴、面包屑提示当前所在位置

8、通知提示
使用微标、卡片、对话框、通知栏等提示通知信息。

其它交互亮点推荐

导航自定义

搜索提供历史或推荐