表单是交互设计中重要的设计类型，因为产品始终需要收集用户数据，通过数据来触发相应的动作和反馈，就像和人沟通一样，设计模式可以比作语法，由它构成了具有完整语义的句子，使得我们能够相互交流，了解大家到底在说什么，产品也是一样，只有采取了合适的设计模式及对应控件才能帮助用户理解它想要表达的意思，开始一段有效的对话。所以这一篇我会从表单的设计原则、基础控件类型和控件选择三个方面来聊聊我对表单设计的看法。

一、表单设计原则

  • 保持一致

    选用控件要符合用户的心理模型，尽量和同类产品的设计模式保持一致，使用统一的设计模式可以让用户快速搜索到目标信息、理解功能的操作方法，很好地降低了用户的学习成本。比如陈列式导航、轮播导航、卡片设计、滚筒控件等等设计模式的出现既有利于技术的封装与快速编写，也提高了设计效率，使得设计师在用户目标及需求的引导下能够快速产出科学合理的设计方案。

  • 及时通知

    当对输入有要求时，应告知用户相关的信息，及时通知表单的重要信息可以防止用户出错，提高操作效率，比如密码格式要求、字数限制、填写范围等等。事实上，表单组成中的标签与输入框中的占位符提示都可以看作产品的通知，帮助用户了解输入要求。

  • 有效反馈

    用户操作和结果都应有相应的反馈信息来帮助用户确认操作的正确性，反馈可以是多方面的，不只是文字反馈，还可以有声音或者震动反馈，让用户更快速地理解自己的操作情况和产品状态。

  • 预知需求

    提前猜测用户的操作意图并予以相关帮助可以提高用户的操作效率、提升体验。产品对用户需求的预知体现了其智能化的一面，能够增加用户的好感度，比如产品的自动补全、提供合理的默认项等功能的设计都是产品给予用户人性化关怀的体现。

  • 减轻记忆

    用户的工作记忆有限，在操作过程应显示必要信息来提醒用户，比如用户的历史输入记录、电话号码填写中自动分隔的结构化样式。

  • 防错容错

    产品应该使用通知反馈来防止用户犯错、并且可以容纳一定限度的用户错误、若用户的操作不符合要求也应该告知用户并提供纠错的方法和路径，比如输入过程中时时的格式校验，允许用户输入多种格式的同义数据，后台自动帮助用户转化为所需类型等。

  • 安全操作

    产品应该保护用户的敏感信息与隐私，比如密码输入时的隐藏显示、采集数据的详细说明等都体现了产品对用户的尊重。

二、基础控件类型（命令、选择、输入）

1. 命令

  • 开关按钮

    概念：有开关两种状态的按钮

    优点：能够直观显示功能的使用状态

    缺点：一般采用图标按钮，有可能表义不明；不适用于长文本按钮

  • 控制开关

    概念：一个控制功能开关的特定样式控件

    优点：方便对应较长描述的功能，用以控制功能开关；能直观显示功能的使用状态

    缺点：需要对应文本才能了解操作的功能，不如开关按钮直接

    image-20200201193743298

  • 多状态按钮

    概念：一个按钮具有多种状态，代表不同功能

    优点：可以节约空间；相关状态在一个按钮上的切换展示使用户注意力更聚焦

    缺点：同时需要表明当前状态和可使用的功能，会出现矛盾的情况，需要根据用户经验小心设计

  • 行为召唤按钮

    概念：一种号召用户点击的按钮

    优点：具有很强的可点击性，明显吸引用户注意

    缺点：过强的视觉引导可能分散用户对其他信息的关注，需要小心使用

2. 选择

选择控件的使用需要我们事先了解选择项范围及可供选择的项目数量，再根据控件的优缺点进行合理选择。

  • 单选框

    概念：一次只能选择一个选项的控件形式

    优点：直接展示选项，清晰可见

    缺点：当选项数量较多时会占用过多空间

  • 复选框

    概念：一次可以选择多个选项的控件形式

    优点：直接展示选项，清晰可见

    缺点：当选项数量较多时会占用过多空间

  • 下拉菜单

    概念：由可下拉选框和承载多个选项的悬浮菜单构成，点击下拉图标后出现菜单进行选择

    优点：占用较小空间，可以承载多个选项

    缺点：需要二次选择，操作效率较低；不能直接看到所有选项，只能展示选中项

    注意：下拉菜单同样可以复选，悬浮菜单中可展示复选框

  • 互斥图标切换按钮

    概念：多个选项以互斥的图标形式展示

    优点：直接展示选项，清晰可见；节约屏幕空间

    缺点：图标可能含义模糊，不能快速理解

  • 特定选择控件

    比如颜色选择器、日期选择控件等

3. 输入（有界输入/无界输入）

  • 文本框

    概念：支持输入文本的控件

    优点：可以自由输入文本

    缺点：全部人工输入，效率较低

  • 组合框

    概念：同时支持人工输入和选择的控件

    优点：特定选项通过选择录入，提高了输入效率

    缺点：选项有限，不一定符合用户需要

    image-20200201194050902

  • 微调框

    概念：可以使用步进器上下调整选项的输入控件

    优点：可以避免输入超范围和要求的信息，小范围直接通过按钮调整效率更高

    缺点：信息范围不可见；不方便录入较大范围的信息

  • 滑块（单滑块、双滑块）

    概念：由进度条和可拖移滑块构成的输入控件

    优点：可视化地选择输入范围，更直观

    缺点：占用较多的空间

    image-20200201193643747

三、控件选择要求

  • 确定可用的屏幕空间

    不同的平台、产品特性、功能类型对屏幕空间的要求都会不一样，我们应该根据限制的空间选择合理的控件，在符合用户目标和设计原则的情况下尽可能占用较小的屏幕资源，简约的界面展示可以促进用户对功能的聚焦和快速的操作。

  • 考虑主要用户的产品使用经验与领域经验

    不同的用户群体对产品的使用经验不同，未必能够理解和操作控件，但我们无法同时满足所有用户的需要，所以关键在于了解产品服务的主要用户的产品使用能力，除此之外，针对一些行业专业性比较强、门槛较高的产品，比如医疗、法律等等，我们也要注意用户的领域经验，小心采用一些专业术语。

  • 技术可行性

    技术的可行性是多方面的，不仅需要关注技术上能否实现，还需要综合考虑项目的投入资源，比如时间资源、人员投入情况等，可以针对统一功能输出多种可行的方案，和技术人员沟通选择开发效率较高的一种，保证项目能够如期完成。