输入掩码(输入掩码的规则)

大家好，我是讯享网，很高兴认识大家。

表单是允许用户在表单中输入信息的元素，主要负责数据收集。

页面通常用于执行诸如登录、注册、预订、下订单、评论等任务。，这是产品中数据输入的基本页面模式。因此，舒适的表单设计可以引导用户高效地完成表单背后的工作流程。——蚂蚁设计

五个元素:标签、输入框、输入反馈、动作和帮助信息。

标签：告诉用户表单问题是什么，要填写什么类型的信息；占位符文本（Placeholder text）—提示文本，位于表单文本框内，一般用于提示用户填写，开始输入时自动消失；输入框：供给用户填写答案信息，收集用户输入的信息，每个字段包含着某一类型的信息（如姓名、性别等）；反馈：针对用户输入给出反馈；动作：点击一个按钮或链接，执行提交表单操作；帮助：为如何填写表单提供帮助。 关键：产品核心价值，最快得到所需结果：表单简短，精简问题为什么要简化表单 减少认知负荷；对使用屏幕阅读器的用户更友好；处理错误、更改细节更容易，降低用户放弃的可能性；页面加载更快；易于追踪行为和过程，为分析提供数据；滚动操作减少，甚至被消灭；用户对数据更有掌控力。如何设计表单

填写表格前:

给用户一个预期过程的清晰指示。表单的起始页提示用户做什么，比如身份证，驾照，护照，银行卡等。不要等到后期才发现必要的信息缺失，无法继续。

宏排序:

按逻辑排序，条理清晰组织字段区域，如按时间，首字母。由易至难，让用户适应提问的氛围，逐步融入再仔细思考较难问题。与当前情境最相关的问题优先，可选问题放在最后，减少侵略性，这些问题可能会得到更多照顾。一．标签Tips：

1.避免使用标签作为占位符。占位符不能替换字段标签。建议使用浮动标签。一般来说，占位符文本(提示文本)弊大于利。提示文字作为标签的占位文字，输入时自动消失，容易造成用户短期记忆的压力和错误；

NN的研究表明空字段比有文字的字段更能吸引用户的注意力，用户更容易跳过那些有提示文字的字段，因为扫描浏览很容易让人误以为框内已经输入了文字。

占位符文本可以比普通文本颜色浅一些，但是容易造成对比度与W3C Web内容的可访问性准则不一致(正常的文本比例是4.5:1)。此外，占位符文本不支持辅助残疾人(如屏幕阅读器)的设计，这将使这些用户很难填写表单。

2.标签的命名要便于用户阅读理解，避免模糊的描述迷惑用户；正确区分必填字段和可选字段；

3.选择合适的对齐方式；

带有右对齐标签的表单的浏览时间仅次于带有上对齐标签的表单。如果网页的高度有限，建议使用这种对齐方式。标签左对齐的表单在三者中浏览时间最长，但是可以减缓用户的阅读速度，让他们仔细思考。

二．输入框

小贴士:

1.将标签和输入框关联起来，给出具体的输入要求或特殊的格式规范；保持内容的长度与输入框的长度相对应，利用可用的提示填充方法为用户提供有意义的提示；更大的文本输入框和适中的空格空会让人更渴望填写。避免一些不必要的输入，减少用户对不必要问题的厌恶，提高用户满意度，降低操作的出错率。

输入掩码（Input Masks）掩码字段能在用户填写时自动编排输入的文本格式，将关注的重点放在填写信息和查错上，适用于手机号、卡号等；邮件地址字段中提供常见的域名，输入@的时，出现常见的域名。

输入字段触发相应的键盘类型，如手机号码、日期、邮政编码、卡号等。，并弹出数字键盘。

3.选择填充的表单格式(常规的文本框文本字段输入除外)可以提供具有搜索功能的下拉菜单，输入的内容可以立即进行筛选和智能关联。输入和点击相结合，快捷方便。

常规选择填充方式：下拉框（dropdown list）、单选框（radio button）、复选框（checkbox）；衍生填充方式：滑块（Range/slider）、微调步进器（Stepper）、开关钮（Toggle switch）、Tab选框、搜索框等。tips：

TAB选项可以一次性点击，效率高；如果选项少于6个，则可以呈现所有选项；当只有2-3个选择时，避免使用下拉框。建议使用单选样式。下拉框需要点击两次，但包含多选时保存空。

4.填充效率:自动填充>:选择填充>:自由填充

设计中可以考虑预填充:默认值、可选值、常用值、历史值和上次填充值。

tips： 自动填写，利用浏览器保存并列举用户以前填写过的值，以实现自动个性化默认填写，敏感数据除外；智能补充，根据地址得到邮编，根据身份证号码推测出生日；基于定位，自动获取地理位置信息，这种预填充方式要允许用户进行微调和修改；从更多的渠道搜集数据，第三方的帐号用户授权；自动更正输入的拼写错误，特殊字段除外；自动首字母大写，适用于填写姓名；

智能默认，设置符合大多数人需求的默认选项可以为用户节省时间，并提供参考意见，保证默认选项符合大多数用户的利益，比如默认用户同意条款。

三．动作 主动作：完成表单上最重要行为（完成表单）的动作。次动作：与完成表单这一目标相悖的动作，比如撤销、返回、重置、删除等，当用户无意误操作时容易造成不可挽回的负面影响。Tips： 表述清晰的行为动作按钮；主要操作（主动作）和次要操作（次动作）可使用差异化的设计来，当表单中不可避免出现次动作时，应该尽量弱化次动作的视觉表现，将潜在出错率降到最低，引导用户完成任务流；流程闭环，避免用户在中途跳出； 提供Tab快捷键跳转下一行；避免重置按钮和清空表单按钮，如果表单中含用户财务信息之类的敏感字段，可以提供一个“取消”按钮，让用户自行决定是否放弃表单填写。

四．帮助

功能:有效说服用户填表，排除负面干扰，消除用户疑问，获得对隐私或安全的信任。

Tips： 不要隐藏基本的帮助文本，保证帮助文字简单简洁；合理地拆分步骤减轻填写的心理压力，相关信息分组；自动即时帮助，在帮助信息最合适的时间和位置显示帮助信息；用户控制打开/关闭弹层，帮助文字区域体现相关性的同时不能遮盖其余的表单元素；适当的保留空间可视化图形作为引导，配合有趣的动画。

五．反馈Tips：

1.给予适当的输入限制，约束用户的行为(如预订机票时，返程时间不能选择出发时间之前的日期，出发城市不能与到达城市相同等。)，在明显区域标注填表规则，或者提供自动批改，防止出错；

2.用户填写后会立即检查，有效检查拼写。对于姓名和地址等特殊字段，此函数被忽略；指示的错误内容允许用户及时修改和补充缺失的信息，采用高亮准确的错误呈现形式，如粗边框、加粗文字提醒、下划线和斜体，不局限于颜色的元素；如果包含多个错误反馈，可以在顶部添加横幅，统一列出所有提示；

3.动作按钮、跳转过程、错误提示/完成状态提醒可以设计成集成的多态按钮，简洁实用。

表单内容设计后:

视觉角度Tips： 建立清晰的视觉线性流和完成路径，将所有字段如标签、输入框、主要动作按钮排成一个垂直单列，不要在表单中使用垂直分栏（列），多列布局会打断用户自上而下的阅读习惯；醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作；将有关联的标注和字段在视觉上进行分组，保障可浏览性，专注当前表单任务；填写表单的界面，应该减少噪音，强调文字和背景对比，避免背景广告干扰，减少其他任务路径，避免用户退出表单填写。

极端场景角度Tips：

保存表单进度。当表单过长时，一些特殊原因导致表单关闭，如网页崩溃、用户误操作等。提供保存表单进度的功能，再次访问表单时保留上次填写进度。

本文最初由@发布丠丠丠丠丠丠丠丠丠丠丠丠丠丠丠丠𰵀丠未经许可，禁止复制𰵀𰵀200000。

题目来自PEPEPELS，基于CC0协议。