跳转到页面内容
圆点软件.YUANDIAN SOFTWARE

YUANDIAN / INSIGHTS & IDEAS

表单设计:字段取舍与分组的具体做法

表单的每一行都在向用户收取成本。从字段必要性、分组顺序到标签措辞,逐项做减法和判断,才能让填写过程顺畅。

专注软件开发 · 连接业务与可能产品与设计
表单设计:字段取舍与分组的具体做法

先做减法再看排版

表单设计的第一个动作不是排版,而是逐个字段问:没有它,业务能不能继续走。删掉不参与任何判断的字段,尤其是为了以后可能有用而加的备注、来源、自定义标签。

确实需要但当下不急的信息,往后放。常见做法是把选择类字段留在第一步,把需要翻资料才能填的内容放到后面,或允许先提交后补充。填写成本低的先做,用户才愿意继续。

字段总数超过十五个,或者预计填写时间超过三分钟时,优先考虑分步,而不是想办法让单页更紧凑。一步一步来比一屏塞满更容易让人坚持到底。

分组顺序按用户的理解走

分组要顺着用户的思考顺序,而不是数据库的表结构。下单流程通常是我要买什么、送到哪里、怎么付款,而不是商品表、地址表、支付表。字段被跨组分散,用户就要来回确认自己填过什么。组与组之间用间距和标题区分,别只靠一条细线。每一组尽量不超过七到八个字段,超过就在组内再分小标题,让页面有可扫读的节奏。

涉及多人协作的表单,按角色分段比按字段平铺更清楚。申请人填的部分和审批人填的部分分开呈现,各自只看到自己要负责的内容,减少互相猜测。

标签与控制件怎么选

标签写在输入框上方,比写在左侧更稳定,长标签不容易被挤压,在窄屏上也不会出现标签和输入框错位的情况。标签措辞用用户的说法,必须用内部术语时补一句说明。

控制件按内容本身决定。选项少于五个时用单选而不是下拉,因为下拉把选项藏起来了,用户没法一眼比较;日期选择、省份选择这类有固定范围的用选择器,减少手输出错;需要填写较长文本时给足行高,别让人在小方块里写一段话。选择器和输入框的切换也要有明确提示,用户需要知道自己还能自由填写,而不是被选项框死。

必填与选填的标注方式二选一,要么标必填,要么标选填,不要两种同时出现。多数字段都必填时,标出少数的选填项信息量更大,用户扫一眼就知道哪里可以跳过。

输入辅助与默认值

默认值是省力的手段,但只在把握很大时才给。根据历史记录预填上次的收货地址是合理的;预填一个用户不一定认同的选项,会导致他直接跳过而填错。

输入辅助包括合适的内容类型、合适的键盘、以及格式提示。手机号调起数字键盘、邮箱关掉自动大写、身份证号允许分段显示,这些都是低成本但直接影响完成率的细节。

能在后端补齐或校验的信息不要问用户。地址可以按邮编或关键词联想,公司名可以按名称匹配,发票信息可以按抬头带出。默认值还要考虑设备与身份的差异。同一个人在不同设备上的习惯可能完全不同,按历史记录给值比按固定规则给值更贴近实际使用。对高频填写的表单,提供暂存让用户下次继续。字段越多,中断后重填的代价越大,很多时候用户不是不愿意填,而是被打断之后就不想再回来。每省略一个字段,就少一次放弃的可能。

表单设计交互设计

LET’S BUILD TOGETHER

让思考,成为下一步行动。

把业务场景与初步想法告诉我们,一起找到合适的实现方式。