B端表单页面设计总结

1、表单界面设计原则

设计概览图

1.1常见四种表单分析

设计理念

合理传达信息含义，帮助用户快速完成表单也任务。

设计要点

1、基础表单

平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单。

什么时候用？

当需要完成一个简单快速的任务，例如输入少量信息即可完成创建。

原型设计

2、分布表单

什么时候用？

适用于每个组之间有逻辑先后顺序，利用步骤条告知用户完整流程和进度。

原型设计

3、锚点表单

什么时候用？

如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位。

原型设计

4、标签表单

什么时候用？

如果每个组既没有逻辑先后顺序，也没有关联性时，是相对独立的表单，那么推荐使用标签分组。

原型设计

1.2表单设计元素：选填与必填项

设计理念

合理运用必填标记，给原本枯燥的表单减轻视觉压力。

设计要点

1、表单一般用“*”标记为必填项

2、如果必填项多于选填项情况，则在选填项标记（选填），必填项不做标记

原型设计

1.3表单设计元素：对齐方式

设计要点

1、右对齐：标签与输入域有固定的距离，产生视觉关联性；减少了页面的垂直占用空间，而增加了横向占用空间。

适用场景：既要减少垂直空间，又要加快填写速度的场景。

2、左对齐：对齐方式中填表速度最慢的，便于浏览标签，节约垂直空间。

适用场景：表单中存在较多复杂或敏感信息，希望用户放慢速度、仔细思考。

3、顶对齐：上下结构拥有较强的信息浏览和填写效率，用户的视觉浏览路径相对左右结构来说较短。

适用场景：适用于一行需要放置多项录入项的情况，希望用户快速填写表单，完成任务；或标签名称较长的表单。

4、根据马泰奥·彭佐的对齐方式研究出的时间表总结：但从效率角度看，顶对齐＞右对齐＞左对齐，根据不同的业务场景，效率并不是唯一的考虑指标。

Ø 如果你希望用户放慢速度，仔细思考表单中的每个表单项，左对齐标签是个好选择；

Ø 顶对齐标签，会有更好的延展性；

Ø 右对齐标签虽然与表单域联系紧密，便于用户填写，但要考虑好标签的长短不齐如何解决，能否精简标签内容，以及确定好表单与界面的边距。

1.4 表单设计元素：输入域长度可调整

设计理念

合理的输入区宽度，不仅匹配填写的内容，也能够给用户的输入量提供心里预判。

设计要点

1、文本框：比如金额需要字段的没有编号那样长，则输入域不需要与编号一样长。

2、文字域：类似备注的字段需要多行文本区域，输入域可长些。

原型设计

1.5 表单设计元素：输入域长度定义

以目前业务产品中，对input梳理出其对应的不同长度，设定96px为原子级宽度尺寸刚好可以满足4个汉字的selection和9999.00的number input，通过倍数+间距叠加的方式从小到大一次推倒出更大的尺寸。最终得到5种长度尺寸。

原型设计

1.6 表单设计元素：提示信息

设计理念

反馈信息要精准

设计要点

1、校验出现错误时，不仅要给用户提示到哪个表单填写错误，还要给用户提示到该表单填写错误的原因以及如何快速改正错误。

2、内容项引导信息，可以用图标+气泡结合提示；也可以输入框聚焦提示。

1.7 表单设计元素：表单占位符

设计理念

一些特殊表单填写信息，输入域的占位符要提示字段格式，给用户填写预知性，减少错误输入。

1、例如电话、银行卡的占位符采用日常使用习惯提示（150 **** 8243/ 6222 **** **** 0000）。

2、备注类输入字段较多的文本框，给出输入限制提示（0/100）。

3、将一些输入框给出默认值。

原型设计

1.8 表单设计元素：文件上传

设计理念

可根据传输文件选择相应的上传方式。

设计要点

1、点击上传

原型设计

2、图片上传

原型设计

3、拖拽上传

原型设计

1.9表单设计元素：承载内容的容器

设计理念

按照信息承载量由少到多折叠展开、弹窗、抽屉、新页面。

设计要点

1、折叠展开：可以是详情，也可以是二级表格，无需打开新页面，直接查看附加信息，防止用户迷失；

适用于信息量较少的情况。

2、弹窗：中断用户操作，并指引用户对当前进行强制反馈；适用于轻量级任务，弹窗内可承载少量的录入项。

弹窗内的录入项平铺展示，一般不做页面内滚动。

原型设计

3、抽屉：抽屉相对于弹窗减少了隔离感，与原页面有较长的连贯性；适用于信息量较大，快速切换原页面的诉求。

建议条目表单数＞8项时使用

原型设计

4、新页面：适用于承载内容过多且相对操作复杂的页面