典型页面拆解-表单页

什么是表单页

表单都是界面中最 常见、最 重要 的组件之一，属于 数据录入 板块。

表单是2B产品“管理”的第一步。软件/系统/平台本身是没有信息的，像是一个空的架子，表单是用户向系统输入信息的一种非常重要的手段，只有用户向系统添加了丰富的信息，系统才能实现其价值。

表单是信息添加、录入的通用形式；主要作用是负责数据采集，是最常用的信息录入工具，随着互联网兴起，特别是最近几年B端的兴起，表单的重要性显得越来越突出。

表单的设计原则

高效- 充分考虑用户填写表单的目的，区分必填项和非必填项，删减不必要的表单信息（例如：填写了身份证就无需再填写出生日期，因身份证信息内包含出生日期，系统自动识别即可），确定完表单内容。必要的时候对信息分组，表单项并非从上到下无序罗列，而是根据表单内容，按照一定的逻辑或者用户熟悉的模式顺序，对表单项进行排序和分组，才能让用户浏览和填写流畅且高效。

准确- 信息表达要准确无误，避免歧义，提示说明要合适，不要给正确的废话，例如：填写备注的提示用“请输入备注”没有意义，换成“不超过100字”更有助用户对表单的理解。

一致- 组件的规范和操作的规范同样重要。同一套系统同一个组件使用一个样式即可，这样才能保证页面的视觉统一。同一个功能按钮，在A页面点击给的弹窗，在B页面也同样要为弹窗。

易懂- 给予高质量的信息提示及反馈，如果需要输入某种特殊格式，请给出具体要求（例如：密码长度8-20位)；错误提示的时候要给用户错误的具体内容（例如：登录时不能单纯去提示“您输入的信息有误”，需准确提示是账号格式错误，还是密码长度错误）。

我们先看看表单主构成，表单主要由这5部分构成：

分组标题：表单项较多的情况下建议分组，分组标题有引导用户完成表单填写的作用。

表单标签：也就是填写或操作内容的标题。标签规范的方式时标题后带冒号，还是不带冒号呢？这个其实都可以，没有硬性的标准，自定义一个规范去执行就可以了。

表单域：表单是用来数据采集的容器，也可以视为一个对象。包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框、下拉选择框和文件上传等，用于采集用户的输入或选择的数据。

提示信息：分为说明性提示信息和操作反馈提示。提示信息可以放在表单域里边（例如：备注的提示“不超过100字”），也可以在表单域或后边，还可以收进“问号icon”里，鼠标hover后给气泡提示展示信息即可。

操作按钮：操作按钮为页面的全局操作，为满足用户随时对表单进行操作的需求，操作按钮会悬浮在页面底部。一般情况按钮最多只有一个主按钮，可以有多个次按钮。

(1) 分类

左标签：优势-节约纵向空间，信息表达明确，多用于web端；劣势-横向空间利用率不高，不适用移动端等狭窄空间。

顶标签：优势-视觉舒适，节约横向空间；劣势-纵向空间利用率不高。

行内标签：优势-最节省空间，多用于注册登录等字段少的表单；劣势-输入时和输入后标签消失，令用户迷茫（可优化为浮动标签，在光标键入时，标签展示输入框上），字段多的表单不建议使用行内标签及浮动标签。

(2) 对齐方式

左对齐：从左至右的阅读顺序，符合人们的阅读习惯，一般用于详情的陈列。

右对齐：也被称为“冒号对齐”，右对齐使得标签和输入之间的距离固定，有明确的视觉关联，操作效率高，非常适合表单录入。

表单域大致分为以下5个大类：输入、内容选择、日期时间选择、数值范围和上传。

选择适合的控件，不光能在视觉上做到统一规范，还能提高用户操作效率。

(1) 输入

文本框：选择适合的大小，它的大小应该向用户暗示所需输入内容的长度，以此减轻判断负担（注意：文章类超长文本不适用于长文本输入框，建议使用富文本编辑器）。

特定前/后缀：涉及到金额输入时，当用户输入的金额超过千时，出现千分位最数据进行分组，方便用户快速识别金额。

带icon或按钮：“日期选择”和“时间选择”一般都附带icon，便于用户快速识别。带按钮的表单项在“密码输入”用的最多，可做隐藏密码和显示密码的切换用，因为盲输及可能会出错。

(2) 选择

内容选择：含单选、多选、选择器（常用的有下拉单选/多选）、级联选择（多层级联动选择）、树选择、穿梭框、开关。

1、单选框、复选框：一般用于选项不多且相对固定的情况，选项控制在6个以内为宜，用户可以一眼看到所有内容。单选框只能是其中一个选项，多选框则可以选择其中一个或多个选项。

开关：使用开关控件的条件是选项的性质互斥（例如：是和否、打开和关闭、开启和禁用等）；

2、选择器：当选择项超6个，就需要考虑用到选择器了。下拉列表是网页中一种最省页面空间的选择方式，单击下拉按钮后能看到最多展示的8个选项，少于8个则显示实际个数自适应，多余8个则出现滚动条。下拉选择器根据屏幕位置决定向下展示或者向上展示。

选择器适用广泛，同类选项（例如：选择客户、商品名称、货物编号等）、增量选项（例如：年份选择）。

3、级联选择、树选择：二者都属层级选择，区别在于级联选好选项后框内显示的是含层级的内容选项，且只能选择需最子集选项（例如：江苏省/苏州市/工业园区，不能选择江苏省，因为前面的选项只为导航至最子集），而树选择框内展示的是单个选项的内容，不展示层级，但可以选择任何层级（例如下图：浙江省）

日期及时间选择：分为日期选择、时间选择、日期时间选择，可以是单个时间，也可以是时间区间；他们很特殊，只为日期和时间选项而生。

1、日期、时间选择：当用户需要一个时间/日期，可以点击标准输入框，弹出选择面板进行选择，或者输入时间后自动定位到该选项，无需手动选择。

2、日期时间选择：相当于将日期和时间这两个选择项集为一身，在同一个选择器里选择（年月日时分秒）；下例相当于两个下拉框切换使用，步骤1先弹出日期选择框选择年月日，选择好日期后点击“确定按钮”旁边的“选择时间”，则切换为步骤2的时间选择框。

数值范围：

1、滑动输入器：滑动型输入器，展示当前值和可选范围，通过拖动滑块在一个固定区间内进行选择。

2、步进器：也称为计数器，仅允许输入自定义范围内标准的数字值，当自定义标准数字值为整数时，输入小数点后回车，带小数点的数字只保留整数呈现。上下按钮也不是每点击一次数值±1，可以设置跳每点击一次±N，N可以为任何数字，也可以为小数。

 

 

(3) 上传

文件、图片上传：第一种情况是上传图片和文件合在一个上传控件里；第二种情况是区分了图片上传和除了图片之外的其他文件的上传，这种情况下的图片成功上传后是有缩略图的；根据需求选择其中一种即可。要注意的是上传有四种状态：上传前、上传中、上传后的成功状态、上传后的失败状态，UI都需要设计出来，一个都不能少。

(1) 占位符

占位符就是先占据一个固定的位置，等着用户往里面添加内容的符号或文字。在键入信息前，出现在输入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正确的废话”，因为给不到用户任何提示帮助，如果表单项没有制定规则，可用表单项编辑方式占位“请输入”/“请选择”，以新增商品为案例：

(2) 帮助信息

帮助信息和占位符类似，也是在输入编辑前给用户的提示信息。和占位符不同点在于“帮助信息”不占据输入编辑的位置，不会因为键入信息后消失，属于表单中的常驻信息。三种方式可以同时运用在一套系统内，视当前表单情况选定。

(3) 校验信息

校验信息是在输入后或者提交后，系统对编辑的信息进行的校验，分为前端校验和后端校验两种。

前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。

后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。

(1) 分布的位置

表单顶部、表单底部：用于放置全局按钮，两个位置的功能按钮是一样的，只是出现的条件不同。默认显示表单顶部按钮，当顶部按钮因为页面上滑被遮盖了，底部按钮才悬浮在窗口底部。目的在于用户无需上下滑动到固定位置才能对表单进行操作，省时增效。

跟随表单项：这种情况很少用到，一般是需要校验的情况下使用，或者可手动增减的表单项。

分组底部：一般是对于这个分组进行的操作按钮。

温馨提示：当操作按钮超三个时，可以将相对低频的操作按钮折叠收起，点击或鼠标hover“更多操作”时下拉展开显示所有按钮。

(2) 阅读顺序、按钮层级、对齐方式

其实这三者的规则都是一样的，当按钮右对齐页面的时候，阅读顺序自然是从右向左，而按钮层级也是从右向左递减，比如顶部的提交、保存、取消三个按钮；商品列表的“添加商品”和“删除全部商品”，左对齐页面，阅读顺序和层级自然也是从左至右。

表单页面主要的交互方式有四种：原位编辑、气泡卡片、弹窗/抽屉、页面跳转。表单页面在交互方式的选择取决于表单容量及表单亲密度。

原位编辑是轻量型信息采集表单，适用于表单编辑项较少（尽量低于5个编辑项），且属于主功能分支的场景。其优点在于操作便捷，随时启用与退出，能够保证用户对主要功能的操作流畅度。其存在的意义在于完善或者增强主功能的操作，而不是打断。

使用场景：常用于列表及卡片，详情内也可以使用原位编辑（例如：详情内只有A和B可以编辑，且需分别编辑，此时建议用原位编辑进行操作），需要注意的是，尽量不要用在长文本编辑。

激活方式：信息展示区域通过双击、单击、hover或点击“编辑”按钮即变为激活编辑状态。最常见的比如：微信/企业微信修改群名就是单击激活，列表、表格的点击“编辑”激活，相比之下hover去激活相对用的少。

与页面的亲密度：亲密度高，编辑内容即为展示内容，当编辑内容不止表格内展示的字段数量，且存在联动关系时，需慎重（例如：“部门”和“班次”属于上下级联动关系，列表内只显示“部门”，而“班次”在详情页面显示，则不适用原位编辑）。

使用场景：常用于条件筛选的设置，点击或hover后显示气泡卡片内容（建议不超过5个设置项）。触发生效机制可以是设置项点击即生效，也可以多个设置项选择后，触发操作按钮生效（操作按钮建议不超过2个），触发机制可以根据项目实际需求而定。

与页面的亲密度：亲密度高，所见即所得，编辑前/后都不遮挡列表，用户刚刚操做了什么，即在当前展示操作后的结果，让用户感受到一切都在掌握之中，不会出现断裂感，交互很友好；

(1) 弹窗

虽说设计上对弹窗的使用都是持谨慎态度的，但希望大家也不要谈弹窗就色变。弹窗的好处在于让用户更聚焦，且不用离开当前页面就能更快速更容易完成任务。

其实该使用弹窗的时候也是要用的，特别是在B端，如果弹窗能解决的问题，不建议频繁的跳页面去操作。如下例：下单录入涉及添加产品，而产品信息字段又很多，不是一个模糊搜索就能解决的，此时建议使用弹窗而不是跳页面去操作。来回跳页面频繁刷新，不如用弹窗选择操作更为简单，在当前页的弹窗选择产品，再将产品信息带入当前录入页面，此流程更符合用户操作时的心理预期。

使用场景：所有页面均可，3个以上的录入项即可使用弹窗；需要注意保持交互一致性（例如：在列表“新增会员”点击触发是弹窗，在其他页面也同样要是弹窗）；当然也有特殊情况，例如：快捷新增时只需录入一个名称，可以先使用快捷操作添加极少的信息，后续在编辑页面进行补充；

与页面的亲密度：可以有强关联，也可以没有关联。有强关联指的是，比如说：点击“新增会员”按钮弹出来的此弹窗，在其他也要用这个“新增会员”名称，避免用户迷茫（当然了，很多新增和编辑其实用的同一个弹窗，这个特殊情况除外）。没有关联是指，可以在列表页面使用“新增会员”弹窗，也可以在工作台或者其他有需求的页面去使用“新增会员”弹窗。

(2) 抽屉

抽屉弹窗也被称为侧弹窗，弹窗抽屉和弹窗很类似，使用场景和亲密度都是一样的。相比弹窗，抽屉的侧边弹出的交互方式，其操作成本和用户使用心理负担会小很多。

注意事项：如果系统大部分用的弹窗，就优先选用弹窗，如果表单内增加了更多字段，可以换成抽屉弹窗；

使用场景：超出了弹窗/抽屉的承载量，就要用到页面跳转了，一般一级模块的设置项也会用到页面跳转，因为会牵一发动全身。还有初始化入驻也需要跳转页面进行操作，不光因为需要提交大量信息，还因为各种认证审核需要一项一项进行，此时用抽屉和弹窗承载内容显然不合适，因为弹窗和抽屉，代表着快速完成。

与页面的亲密度：跳转了页面，不管是新开页面还是刷新原页面，与原页面的关联性已经没那么强了，只能说他们属于同一条路径下不同页面。

根据内容的多少及亲密程度来决定，我们设计时应选用哪种交互方式，或者可以直接根据内容承载量做判断也是可以的，从少到多依次此为：气泡卡片-原位编辑-弹窗-抽屉-页面跳转。

排版布局的方式有四种：平铺、分组、标签页、分步骤。根据内容项的多少及实际需求相应合理的布局。

输入信息的分类，是有效的减少用户操作疲劳度的方法。分类的维度有多种，根据表单输入内容的相关性、内容的所属类别，可以将同类型的数据统一输入，减少用户输入信息的跨度，提高输入效率。

使用场景：平铺顾名思义就是指表单项不做分组，全部平铺展开，很多注册和登录都是这种布局。适用于表单项少，或者多但表单项之间亲密性很强，就无需额外分组，直接将表单项平铺开展示，简单明了。

对于内容过多的表单输入页面，分组、分模块的排版方式让用户感觉更友好，不是密密麻麻一大片，让人喘不过气来，而是有条理的布局，张弛有度，疏密有致。用户可以在填写好一段内容后进行心理上停顿休息，减少视觉疲劳和心理压力。

(1) 标题分组

使用场景：超过了7个设置项，且较为复杂的表单，标题分组之间的关联性较弱，就可以去分类归纳表单信息，位的是降低用户的认知负担，提高用户体验。注意：分组内组内设置项要有强关联性，否则不能归为一组，不能因为字段多，为了分组去分组。

(2) 卡片分组

使用场景：7-15个设置项，用标题分组不足以给信息做层级区分，为了让用户在操作时更聚焦，也需要给用户更明确的操作引导，即可使用卡片分组。

卡片分组之间关联性更弱，分类更明确，多个设置项，多个分类。需要注意，一个表单项不要分过多的卡片分组，不能每两项做一个分组，这反而会造成用户视觉压力和操作负担。

使用场景：当标题分组和卡片分组都不足以对表单进行分组时，就可以考虑用tab切换了。每个设置都包含多个录入，且使用了标签。

注意事项：tab标签的填写没有先后顺序的规则，标签页彼此之间没有特定的关联性，可独立去设置。也就是说先填写tab1还是先填写tab2，对表单的其他tab项没有任何影响，不存在联动关系。

标签页对应的详情展示：一项一项上下铺出来，但如果表单详情信息过长，可以考虑将锚点定位，点击锚点定位的标题即可自动定位到该区域，方便用户快速定位浏览位置。

使用场景：对输入表单进行分步骤的处理，可以降低用户的操作频率，给与用户一定的休息空间，用户会有阶段性的成就感，同时分步骤的输入还有利于减少信息的错误率。如果输入表单的内容较多，同时输入内容有逻辑上的先后顺序，此时可以考虑将输入表单进行分步骤处理。

利用步骤条，将大型、复杂任务拆解为多个部分，并按照相关性分组，可以提高用户处理的专注度，降低页面的复杂性，减轻用户操作负担，降低用户出错率，提高用户体验。

根据内容关联性的强弱程度来决定，我们设计时应选用哪种布局方式，或者可以直接根据复杂程度做选择也是可以的，从弱到强依次此为：平铺-标题分组-卡片分组-标签页/分步骤转。

提高易用性的方式有以下四种分别为：视觉清晰、信息降噪、高效智能、准确易懂，每个表单，每个页面都要应用这四项准则，不光是在表单页面，所有页面都适用。

布局方式-单列布局：常见的表单布局为单列信息展示布局，比如：苹果、飞书、钉钉、有赞、微盟等首选使用单列布局进行页面排版。设计中尽量采用单列布局，是为保证用户的视觉动线流畅，不容易遗漏信息；

在输入项较多时，每次填写完一项都要鼠标选中下一个输入框，很容易让用户失去耐心，而单列布局恰好能解决这个问题并提高用户体验，输入完一项按enter键可快速切换至下一项，提高用户操作效率。

当然了按Tab键也是一样的效果，只是，一般情况下，大众都更习惯也更熟悉回车键的位置，需要注意的是，长文本输入框的属性里回车键是文本换行的意思，需要区别设置两者的操作机制。

布局方式-横向布局：横向布局也是单列布局，是它的发散版本。如果出于业务方复杂需求的考虑，必须在横向增加内容，那增加的表单项一定要和前表单项有关联，才可作为分组横向排列，还需注意不能出现Y轴平行竖向分组（如下图），避免用户迷茫或遗漏信。

(1) 合理设置必填项

正常情况下，我们标示“*”标就是为了提示用户此项必须要填写方能提交单据。

但当一个编辑页面的必填项非常多时，就可以无需标注必填，只标明哪些是非必填项就行。

当编辑页全部都是必填项时，可在大标题处用标示必填即可。

(2) 折叠不重要非必填信息

在能完整获取需要信息的前提下，输入项越少越好，当表单页很长，且有些信息非必填，或者说填写后的意义不大。这样的情况下可以考虑将非必要信息折叠收起，点击“展示更多”下拉展开全部表单项，让用户可以选择性录入不重要的信息。

(1) 智能填写

根据上下文信息可自动获取的，无需用户再次填写。如下例：通过客户名称数据库可自动匹配客户手机号，或者通过手机号匹配客户名称。填写邮寄信息的时候，只需选择省市区，邮政编码便自动填充，减少了用户查找邮政编码的繁琐（甚至可以提议“邮政编码”字段直接去掉）。而生日和性别都可以在身份证号内提取。

(2) 智能排序

默认高频：当选择器内容超过5个选则项时，可以对内容选项进行一定排序规则（首字母排序、数字排序或设置默认高频选项等），方面用户提前预知选项的大致位置，检索找到相应的选项。

(3) 智能联想

智能联想是给予用户键入字段的联想功能，用户少量输入后进行选择。录入方式由原来的输入变成半输入后选择，减少用户的输入成本，提高用户操作效率。

自动搜索：当下拉选项超过16个时，建议加入输入选择功能，用户可使用下拉选择，也可以输入关键字后智能匹配显示对应的选项。或者可以再加上信息排序，根据点击频次进行排序，高频选项前置。

后缀联想：一般用于邮箱信息的录入，当输入内容后，自动将默认高频的邮箱后缀作为补充数据填充在后方，减少用户的输入。

操作直观：去除冗余且无用的部件：切换“开关”操作后会立即生效展示结果，无需与操作按钮搭配使用，避免造成用户的误解，导致体验不友好。

准确的错误提示：反馈提示是页面系统对用户的输入的内容进行的校验，并对校验结果予以展示的提示形式。可分为前端校验和后端校验两种。

错误提示的时候要给用户错误的具体内容，而非简单粗暴的错误提示。例如：登录时不能单纯去提示“您输入的信息有误”，需准确提示是账号信息错误，还是密码校验错误。

前端校验：也被称为“即时校验”，一般是校验显现的数据内容，比如字符长度、格式（是否包含非法字符）、是否为空等。该方式的校验条件多在本地，无需实时向服务器发命令而得到反馈。

后端校验：包含“局部校验”和“全局校验”，局部校验：在注册账号时，输入完整用户名以后，提示用户名是否可用，则为局部校验反馈。全局校验反馈：多指在输入完成提交或者阶段性完成（分步骤跳转下一步）时，系统给出的校验反馈。在用户操作反馈动作按钮后，界面在相应位置（一般为单个输入框的下方或右侧）一次性给出对应的错误提示。

参考文献：

《CCtalk B端产品设计课》by 美芳

B端交互组件之表单篇

5个方面阐述：Web表单设计

2B产品设计套路一：表单设计