所有的设计规则都应该是以场景为依据，进行判断的。

按钮的左右对齐

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

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

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


输入框标签文字位置

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

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


表单内容多

基本属性及建议：能点击尽量不要输入和打字。合适的步骤拆分可以降低输入压力。
  • 适合隐藏的场景
    少量不重要的输入内容为选填项，可以直接折叠起来。此时可去除高频重复的星号必填，标记低频的非必填。使用户专注主要填写内容。
  • 适合步骤的场景
    内容过多时，将密集复杂的表单项目，拆解归类，最多3个步骤，一步仅填写3～5个内容。减少一次抛给用户填写的输入压力。


表单容器

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

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

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

  • 抽屉使用场景
    内容多，关联性强

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


内容层级多

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

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

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

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


表格场景

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

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

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


提示的使用场景

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

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

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

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

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

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

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

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