在互联网产品的使用过程中，难以避免需要用户输入各种信息以完成相应的任务，如登录注册、设置个人信息，或者创建一个商品等等，此时就需要表单来获取用户的输入，提交给服务器，并向用户反馈提交的结果。
本文将从后台产品的角度对表单加以浅析，欢迎补充指正。
全文概览
一、基本内容
通常表单会有四个部分组成：标签、输入框、校验反馈、动作
图1 表单基本内容
1.1 标签
1.1.1 标签位置
a)左对齐/右对齐：这两种都是标签位于表单项左侧，可以节省界面多垂直空间，根据场景决定使用哪一种。如果希望用户放慢速度，仔细思考每个表单项时可使用左对齐。通常情况下推荐右对齐，以加快填写速度。
b) 顶对齐：这种排列方式有最快的信息浏览和处理速度，适合希望用户快速填写表单，完成任务时使用。缺点是这种排列方式比较占用垂直空间，不适合有较多表单项时使用。
图1.1.1 标签位置 从上至下依次为：左/右/顶对齐
1.1.2 标记必填项
大部分情况下，用户被要求输入文字都不是一件很有趣的事情。所以在设计表单时，应该将那些必填的表单项清晰的标记出来，使用户可快速完成必要信息的输入。
通常在必填项标签前加红色星号以示区分，或者将非必填项的占位符文本写为『选填』等。
图1.1.2 必填与选填的标注
1.1.3 语义语序统一
标签作为表单项的标题，应尽量精简清晰，并在语义、语序上保持统一，这样有助于用户可以快速理解，减少认知成本。
1.1.3 语义语序示例
1.2 输入框
1.2.1 输入框规格
a）宽度：输入框的宽度一般根据字段长度来定，有些固定长度的字段（如电话号码/身份证号码等），可能稍短一些会更符合用户的认知。整个表单要比例协调，不可凌乱无序。
b）高度：输入框高度这里指的是单行输入框和多行文本域的意思，当有些字段（如产品介绍）的长度较长时，就需要使用多行文本域。需要多高则也要看字段的限定字符数，设计师可在设计稿中输入足量的字符进行效果演示。也可以选用可适应文本高度的智能文本域。
图1.2.1 输入框规格
1.2.2 输入规则
a）字符类型：字符有汉字、全角标点、字母（含半角标点）、数字等不同类型，其中1个汉子或全角标点在程序上等于2个字符。一般情况下输入时不要限制输入的字符类型，给予用户充分的自主权，在输入框失焦或提交表单时校验是否合法。但有些比较特殊的字段，比如银行卡号、手机号等，肯定是由数字组成的，可以前端限制只能输入数字，同时也能减少校验的工作量，这种限定输入字符类型的情况，较适合有固定运营人员操作的后台。
b）字数阈值：每个字段在后台程序设计中，都会有一个最大的限定值，比如100、10000字符。所以用户在前台可能会输入超出限值的字符数，于是我们需要提前提醒用户。第一种方法是超出后即时报错并显示超出数，第二种比较简单粗暴，输入最大字符数后不允许继续输入。实际情况中可依据目标用户及业务场景进行选择。
图1.2.2 超出提示
1.2.3 输入提示
a）占位符 (输入提醒)：常态显示在输入框中的提示性文字，帮助用户了解相关的输入信息或规则。在输入内容后消失，清空内容后又重现，在视觉上会稍微淡化以免抢占视觉焦点。
b）输入提示 ：在输入框获取焦点后出现，帮助用户了解相关的输入信息或规则。一般位于该输入框的右侧，在输入框失去焦点后隐藏。相较于占位符，输入提示的特点是可以承载更多内容，视觉样式也可以有更多变化。
c）字数统计：常态显示在输入框的右侧或文本域的右下角，格式除了直接显示阈值外 (图1.2.2)，还有一种为已输入字符数/最大阈值 (如0/30 )，让用户了解当前的输入状态。
图1.2.3 从上至下依次为：占位符、输入提示、字数统计
1.3 校验反馈
1.3.1 校验时机
a）即时校验：在输入框失去焦点时就校验输入内容是否符合规则，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。如果需要后端（服务器）校验有较长延迟时除外。
b）提交表单时校验：除了输入框，表单中其他不是输入的控件，比如单选/多选框、选择器、开关等，它们需要在提交表单时进行统一校验。
图1.3.1 校验时机示例
1.3.2 报错提示
a）提示位置：后台表单设计中，报错提示一般统一放在每个表单项的下方，以说明错误原因及改进建议。而一些表单项较少的特殊表单(如登录)，也会将所有提示固定在一个位置显示，根据不同的错误情况出现相应的提示文案，可以使表单更整洁美观。
b）文案语气：我们应始终坚持程序为人服务的观念，在错误提示的用词及语气上，不应指责用户犯错，而应礼貌地进行提示。
图1.3.2 报错提示示例
1.3.3 容错格式
允许用户以多种格式和语法输入。例如用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
1.4 动作（主按钮）
1.4.1 禁用时机
a）默认禁用：只有1-2个表单项的表单中，用户一输入就会有反馈，主按钮的禁用规则很清晰。在必填项未填写的情况下禁用主按钮，可以减少一些误操作的产生。
b）始终可用：当表单项较多时（特别是夹杂了必填和选填），整个反馈链路比较冗长，禁用规则难以被识别，容易引起困惑。此时主按钮就要始终可以点击，并配合校验反馈来提示用户当前的输入状态。
图1.4.1 登录按钮默认禁用
提交按钮始终可用
1.4.2 操作反馈
a）全局提示 Message：用作成功、警告、失败等信息的反馈，顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
b）模态对话框 Modal：一般用于主流程中的子操作，可以在当前页面打开一个对话框，让用户可以不用跳转页面保持当前的工作流程。另外也常用于二次确认，防止用户误操作。对话框毕竟是全屏模态式的，会唐突地终止当前的工作流，所以不适用于一般常规的错误提示。
图1.4.2 全局提示Message
模态对话框 Modal
二、表单控件
后台表单通常会用到很多控件，如单选/多选框、选择器、开关、时间日期选择器等，帮助我们创建复杂的项目，收集更多信息。
2.1 单选框/多选框
单选框和多选框，适用于选项较少（少于5个）时使用，将备选项直接平铺展示，方便用户查看选择。缺点是比较占用界面空间。
2.2 选择器
当备选项较多且界面空间有限时，通常会提供一个下拉选择器，让用户通过点击下拉来进行选择，可以有效节约界面空间。缺点是有时用户难以发现，且增加了操作成本。
图2.1 从上至下依次为：单选框、多选框、选择器
2.3 其他表单控件
有些复杂的项目，还需要一些特殊的控件来辅助完成表单的创建，比如开关、上传等。有些控件则能使输入内容标准化、可视化，提高输入效率，比如数字输入框、日期选择器、滑动输入条等。在设计时应综合考虑输入效率与体验，来选择适合的表单控件。
图2.3 各种表单控件
三、智能输入
无论如何，填写表单都是产品需要用户完成某种任务，而不是一件有趣的事。所以我们应该尽可能的让填写变得更高效。
3.1 自动完成
有些字段有着固定的格式或尾缀，在输入时可以主动给用户提供几种选择，以快速完成输入。
图3.1 自动完成
3.2 良好的默认值
良好的默认值可以有效提高输入效率，使用户关注更重要的内容。只要合适，就在表单中预先为用户填写你认为他们想要的默认值。我们还可以使用智能化的默认值设定，比如可以基于用户的地理位置信息，预先为用户填充城市或国家。但是当问题的答案会很敏感或与政治相关时，提供默认值就不怎么明智了，例如密码、性别或公民身份。
图3.2 良好的默认值示例
总结：本文从基本内容、常用控件、智能输入三个方面对偏后台的表单设计进行了简单的分析，在设计的过程中我们应始终保持同理心，让整个输入的过程变得高效、有温度。同时提交成功后也要给予反馈，使整个流程的体验保持统一。
网友评论