阅读时长 12 分钟，深入了解 UI 组件 Form 原理与实践
如果自然界里有个表单，它是什么样的？是“对话”，表单仿佛一场电子界面上无声的访谈。表单设计，就像是一场访谈设计，要问哪些问题，怎么问，如何表达和引导，才能让用户放下戒备愿意回答这些问题。最理想的是一场优雅而高效的交流，用户相信做这些有利于自己、每一个问题都没超纲、不会耽误自己过多时间，欣然接受完“采访”；当然稍有不慎，用户回答了所有问题，但离开的时候还会带着疑惑和不满；更糟糕的情况是，在半途直接被劝退，愤而离场。本文主要围绕移动端表单展开，考虑到屏幕尺寸和用户手持操作习惯，需要尽量化繁为简，用最少且易理解的的操作完成：
表单组件可以分为以下三大类：填空/上传类、选择类、表达类。 “做选择题通常比填空题更容易”，因此能选则选。
' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)
large（48），多用于强调展示，单个使用 small（28），多用于密集的输入组
Q：搜索框是input组件吗？
A：从样式上它跟带着前后缀的输入框无异。区别在于，搜索框还需结合“提交”交互，所以一般倾向于叫它“搜索栏”。输入框的失焦可视为交互结束，但搜索框的交互终点在开启搜索。
对文本有字数限制，最长不宜超过15-20个字，不支持折行，展示侧应保证大多数屏宽能一行展示完全。样式与尺寸：为了适配不同的表单场合，组件库给到了线形和框型两种样式。由于框型Input时常需要在批量数量输入组、单输入弹窗内使用，因此给到了28、32、36、40、48五档高度可选。另外，所有输入框都支持加前后缀和报错高亮。数字类输入专用，是输入框和加减按钮组合，需搭配数字键盘交互。 Inputnumber加减梯度通常是±1，但在业务设计中，我们可以做更多拓展。比如下图是二手谷子转卖时的调价，商品单价较低，用±0.5的调价梯度更适合。此场景有意思的case是，对减号置灰校验取决于单价是否≥0，而Inputnumber本身可以出现负数。并且为了区分正负数值，设定了红蓝正负色。对应地，在需要倍数相乘的调数场景，也可选用Inputnumber实现占位框，最常见且醒目，对用户有较强的引导语义。支持图片、视频文件上传，回显支持小图预览按钮交互，不限文件类型。目前多用于文本文件上传、或弱引导的图片上传。选择类
拼单设置，选择器聚合表单
当选项数量大于5个时，或选项文本较长时，下拉交互使得对表单更简洁，同时单独的选择器可使候选集得到更充分的检索和曝光。
没默认选项，适于候选集数量较多，或者可自定义输入。这类标签回显后需支持删除。当目标内容有预期会折行展示时，需选用Textarea文本域组件。高度可根据最大字数限制设定，尽量避免外层页面滑动套文本域滑动。但不绝对，只需保证大多数情况下用户输入时所见即所得。默认有1-2行的高度，随着文本增多，可自动变高，优势能充分展示内容。如果出现在表单中部，需有预期随着文本域的高度变化而影响下方表单位置。注意，变高文本域并非无限高，通常需设置最大高度限制
How Friendly interactive feedback人与人对话时的友好感，能用表情、语气、肢体语言传递；而表单的结构化布局和为了追求高效的言简意赅，天然有了严肃冰冷的第一印象。在实际用户体验设计中，我们依然能够通过一些微交互来提升表单的易用性。类型：价格、数量类字段，只唤起数字键盘，优于文案类提示和后置报错；如果有梯度微调，用Inputnumber的加减（或倍数相乘）优于键盘输入长度：组件长度暗示了内容量要求。比如“填写详细描述”的文本框，默认原始高度应加大（即使有换行自动布局拉伸）；同理，精短的目标内容不应使用过大的输入域。不阻断键盘拼音字符输入，回车确认后自动截断超出部分。适用于短文本输入，用户可即时完成删改。跟另外一个case容易混淆——不支持继续输入任何字符，直接让键盘输入无效。这在纯字符输入时是可行的，但在需要拼写转化的场景下，这种交互会将用户拦截在拼音输入阶段。不阻断任何输入，用弱报错提示，适用于长文本输入。用户的感知是“我知道我超字数了，但先连贯地把这段话写完，然后再慢慢斟酌要删改哪些语句”因为长文本通常需要用户有连续思考和输出，就像写文章一样，先允许他写完一稿，最终删改的很可能是前面的内容，反而最后那些语句在弱报错提示下更加言简意赅。最典型的是必填项空态校验，若在填写过程中报错，满屏的的报错徒增压力，所以放在提交时全局校验，再高亮标出报错字段和原因，结合锚点定位，有利于用户快速修正/补充输入。但当用户输入后，此时需要实时校验解除警报。最典型的是必填项空态校验，若在填写过程中报错，满屏的的报错徒增压力，所以放在提交时全局校验，再高亮标出报错字段和原因，结合锚点定位，有利于用户快速修正/补充输入。但当用户输入后，此时需要实时校验解除警报。虽然要尽量避免在移动端进行复杂创编，但实际C端交易场景中，有时候免不了需要在移动端做批量出售相关的长表单，甚至会为了避免单页操作过于复杂而分多个步骤。此时应引入草稿态（本文暂不涉及自动云端保存）需在退出时做内容修改校验，确认保存后将在管理列表生成草稿态item。一个列表可同时存在多个草稿，此表单通常存在服务端，不会随着App删除/账号退出而消失。下图case：一个拼团内包含几十个商品，团长发布时需要同时导入这些商品批量设置，然后再对拼团本身添加标题、描述、购买设置等，是个典型的复杂创编表单。因此我们把商品批量设置和拼单设置分成了两步，各自可分步保存。在若第一步未保存退出，也做非空校验和二次确认，防止误操作。通常用于意外退出表单的场景，当下一次新建时，提示有未完成的草稿，允许用户继续编辑或直接创建新表单。一旦选择了创建新表单，原缓存的草稿即刻作废，不可找回。本地缓存更轻量，但顾名思义，一旦app卸载或更换设备，此草稿也找不回来了哦。下图case：拍品发布场景中，对非正常退出的非空表单，做本地缓存，下次进入时提示是否载入。无需缓存的正常退出包含2个操作：发布成功 或 手动确认退出发布本地缓存的载入提示
以上就是本期关于表单应用实践的浅浅描绘，希望我们一起做出令人愉悦的表单。
