|
表单是什么 表单是一个包含表单元素的区域，使用表单标签定义。 表单元素是允许用户在表单中输入信息的元素，主要负责数据采集功能。 表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程。——ANT Design 五大要素：标签，输入框，输入反馈，动作，帮助信息 标签：告诉用户表单问题是什么，要填写什么类型的信息;占位符文本(Placeholder text)—提示文本，位于表单文本框内，一般用于提示用户填写，开始输入时自动消失; 输入框：供给用户填写答案信息，收集用户输入的信息，每个字段包含着某一类型的信息(如姓名、性别等); 反馈：针对用户输入给出反馈; 动作：点击一个按钮或链接，执行提交表单操作; 帮助：为如何填写表单提供帮助。 关键：产品核心价值，最快得到所需 结果：表单简短，精简问题 为什么要简化表单 减少认知负荷; 对使用屏幕阅读器的用户更友好;处理错误、更改细节更容易，降低用户放弃的可能性; 页面加载更快; 易于追踪行为和过程，为分析提供数据; 滚动操作减少，甚至被消灭; 用户对数据更有掌控力。 如何设计表单 在填写表单之前： 给用户明确期望的进程提示，表单起始页提示用户要做什么准备，比如身份证、驾照、护照、银行卡等，不要等到后期发现缺失必要信息而无法继续。 宏观排序： 按逻辑排序，条理清晰组织字段区域，如按时间，首字母。 由易至难，让用户适应提问的氛围，逐步融入再仔细思考较难问题。 与当前情境最相关的问题优先，可选问题放在最后，减少侵略性，这些问题可能会得到更多照顾。 一.标签 Tips： 1. 避免将标签作为占位符，占位符不可替代字段标签，建议使用浮动(或自适应)标签floating labels，占位符文本(提示文本)一般来说它弊大于利。标签作为占位符文本，输入时提示文本自动消失，容易造成用户短期记忆的压力以及错误; NN Group的研究表明空字段对比有文字的字段更吸引用户注意，用户更可能跳过那些有提示文本的字段，因为扫描式的浏览很容易误会框内已经被输入了文字。 占位符文本可以使用比普通的文本更浅的颜色，但容易导致对比度不符合W3C Web内容的可访问性指南(正常文本比4.5:1)。此外，占位符文本不支持辅助残疾人的设计(如屏幕阅读器)，这会让这部分用户填写表单变得很困难。
|
