常见的表单设计背后藏着许多秘密，如何让用户快速准确的填写表单，是本文在思考解决的问题。本文偏理论和实践结果，实例较少，供大家参考和学习。
limeiseo（加v分享）
常见问题： 利美知识百科在设计表单时，你是否会有如下疑问或思考：谁会填写表单？为什么要填写？如果表单跨多个网页，需要告诉人们当前处在哪一页么？输入框标签应当顶对齐、右对齐还是左对齐？表单中如何使用智能默认选项？何时在表单中使用帮助文字？如何表示必填项？主动作和次动作有什么区别？（提交/保存/继续、取消/重置）一、表单设计原则尽量减少痛苦，填写过程尽量简洁容易；说明完整填写路径，清晰地告诉人们如何填写完成考虑情景，受众群体、应用、业务确保一致沟通，保证客户与公司只用一种声音说话二、表单的组织花时间评估表单中的问题，去除不必要的问题；表单所提问题（标签）应当尽量简洁，如果人们误解简洁标签，应当寻找使用自然语言澄清的机会；表单所提的问题可能来自不同的人或部门，确保表单统一口径；可以将表单内容组织成逻辑组，有助于浏览和完成填写；可以以对话的形式构建表单，主题自然间断；表单包含大量问题，若干主题，需要多个网页来组织表单；表单包含大量问题，一个主题，需要较长网页来组织表单；表单填写完成后提出可选问题，可能会获得更多答案；应当采用最少的必要视觉信息来区分内容组；如果表单需要较长时间或查询信息才能填写，可采用起始页说明（暂存）方式满足；由始至终采用清晰的浏线和有效视觉引导表单填写（清晰唯一路径）；如果表单分为多个已知有序网页，可以采用进程指示来传达范围、状态和位置等信息。三、标签对齐每个表单至少都有三个基本要素：标签、输入框和动作。 利美知识百科
标签负责提出问题，输入框供给人们填写信息，而动作允许人们提交答案，还有一类——无标签表单。1. 顶对齐标签顶对齐标签由于输入框和标签的位置非常近，处理起来毫不费力，所以填写整个表单很快很容易，是最能减少填写时间的方式。
本文利美网络（www.limeiseo.com）整理发布
但是，顶对齐标签也会占用额外的垂直空间，若可使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签。
顶对齐标签还应当采用合适的垂直间距。表单输入框之间的间距太少或太多都会阻碍移动。一般而言，最好使用输入框50%~75%的高度作为相邻输入框的间距。2. 右对齐标签右对齐标签同样有输入框与标签相邻的有点，因此也能快速填完且减少垂直屏幕空间的占用，但是速度没有顶对齐快。
copyright limeiseo
由于右对齐布局造成左侧参差不齐，会降低快速浏览表单问题的效率，还会产生灵活性问题，如果标签需要两行字，浏览表单会更加困难。
利美网络
利美网络
本文利美网络（www.limeiseo.com）整理发布
但是，完成时间较长也不是坏事，也有适用场景。如果希望人们速度放慢，并仔细思考表单中的每个输入框，特别是表单含有大量可选输入框、类似“使用偏好”或者高级设置陌生数据时。4. 输入框内的标签如果屏幕空间宝贵，应当将标签和输入框组合成单一的用户界面元素。光标放入输入框时，标签要迅速消失，以便用户能轻松填写。
填写输入框时，输入框内的标签会消失，因此答案情境也会消失；如果忘记了要回答什么问题或者检查答案时，体验也是不好的。
copyright limeiseo
因此，如果表单较长、甚至中等长度，输入框内标签并不是好的解决方案。输入框内标签更适合用于只有一个问题（例如，搜索框）或者几个输入框的表单或者问题非常熟悉的表单（例如，通讯录）四、输入框表单中何时使用文本框、复选框、单选按钮、下拉菜单、列表框呢？输入框的长度能提供有意义的暗示，帮助人们有效回答问题；若不需要暗示，输入框的长度应当尽量保持一致，为答案提供足够空间；尽量避免出现可选输入框；标明表单中的必填项；如果答案明显有多种格式，应当考虑使用弹性输入框；确保弹性输入框不会导致填写简单问题变得复杂。五、动作标签列出表单要求人们回答的问题，输入框让人们填写答案，完成表单的单一职责属于动作。绿色标识主动作（成功），红色标识次动作（未成功）；尽量避免表单中出现次动作，应当提供完成表单的单一路径；如果需要使用次动作，应当确保主动作和次动作视觉差异清晰；如果表单所提问题分布在多个网页，主动作应当让人们更接近完成表单，而次动作应当允许人们返回；主动作与输入框对齐，能提供明确路径完成表单；如果需要采用具有破坏性的次动作（重置或清除），应当提供简便的撤销方法；处理表单时，应当明确表达，避免重复提交；不要依赖帮助文字来提醒人们不要两次点击主动作，而应当通过禁用主动作按钮来阻止；思考组合服务条款和主动作的机会，以确保法律要求合理化。六、帮助文字常见帮助文字是在标签或输入框旁增加帮助文字，告诉应该如何回答问题。 limeiseo（加v分享）
本文标签：