/设计基础(7): 简约设计4原则在表单设计中的应用
最新文章2023-09-26

设计基础(7): 简约设计4原则在表单设计中的应用

▲点击“子牧UXD”关注，回复”设计圈“加入我们

 　2022年 原创总第 20 篇 　 

 　 距离年度目标 40 篇   还有 20 篇   
（全文3081字，预计阅读时间：６分钟）

上一篇文章讲了表单的基础知识《设计基础(６):表单基础知识解析》。

随着Ｂ端体验设计的发展，表单类页面已经形成了一定的设计模式，例如登录页面，场景比较明确、业务流程和设计模式都比较成熟了。

业务型表单设计与业务强相关。既需要考虑交互带来的用户体验，又要从业务角度出发满足用户的行为需求，相对比较复杂。不过也形成了一些固定的设计方法。今天我们先来看看「精简」策略。

本文主要内容：

  • 删除，实现表单轻量化
  • 组织，让表单更加有层次
  • 隐藏，让表单更加灵活
  • 转移，扩展表单的异步空间
表单是系统与用户进行沟通的语言，它应当符合双方的认知逻辑。因此表单设计时，需要解决「产品」和「用户」２个方面的问题：
  • 表单需要用户提供哪些信息，保证信息的正常流转和业务的完整

  • 用户如何理解这些信息，如何更好地帮助用户完成表单填写

尤其是面对复杂表单，需要从这两方面寻找到突破口。
  • 在业务层面，设计师需要探究用户的实际需求，反思表单项是否必要，从而减少不必要的选项，提高用户效率。
  • 同时在设计层面，还需要基于用户认知习惯，通过合理的信息组织、交互形式帮助用户完成表单任务。

复杂表单通常包含多种业务场景，并且与其他业务存在关联和嵌套，导致表单内容信息量较大。我们需要通过「删除」、「组织」、「隐藏」、「转移」４个交互设计原则，让表单页面更加简单、有效。

▎01　删除，实现表单轻量化
前几年，我们在银行或者移动营业厅开通一些新业务时，都会填写表单，通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2～3项，业务人员会特意勾选出来给客户，其余的都是非必填项，或者是业务人员填写的。
线上表单设计时，没有专门的业务人员指导，用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量，降低用户的认知负荷。
最近在做一个表单的优化，业务方要求增加“入参”、“出参”两个表格项，说是用户会看。与用户沟通后，反馈也说“会看一下”。但是在深度挖掘用户场景后，发现用户确实会查看这个信息，只不过不是在当前环节查看，而是在结果项中查看。
所以我们最终去掉了这两个信息量较大的表格内容，从而让整个表单的信息量得到了明显的下降。
因此面对复杂长表单，我们需要从需求入手，判断是否有必要让用户提供如此多的复杂信息。

▎02　组织，让表单更加有层次
当我们不得不面对复杂表单时，如果采用简单内容平铺，用户看到的是满屏的散点信息，造成信息识别困难，用户一时间难以找到填写思路，反而增加用户的心理负担。因此信息的层次性，对于复杂表单至关重要。
首先要从内容和视觉层面让复杂信息变得清晰、规整，更加符合用户的认知习惯。例如，可以利用分组标题、分割线、卡片，按照不同信息的类别、属性和相关性进行区块划分。
根据不同的布局和交互，主要有以下4种表单设计模式。

1、顺序表单
表单分组后，可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单，这种布局方式下，用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。
1）平铺表单

2）卡片表单

因此顺序表单更多地用在业务信息比较简单的场景中。
2、锚点表单
为了解决长表单的定位效率问题，可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局，可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说，锚点表单是顺序表单的优化版本。



3、标签表单
如果长表单内容没有依赖关系，还可以将表单拆分为几个相互独立的标签内容，这就是标签表单。

不过标签表单更强调内容的并列关系，常用于配置表单中，例如 MAC 或者 Windows 系统的配置弹窗。

标签表单在全新表单中应用较少。因为标签表单容易造成内容遗漏，并且无法告知用户哪些标签已经填写，哪些标签未填写，或者无法清晰地展示校验信息。来回切换标签查看信息，也会影响效率，因此主要用于用户有目的的配置行为中。
4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来，形成一个完整的业务闭环。例如阿里云的云服务器订单流程，或者一些开户流程等。

步骤表单有几个特点：
1）过程串联
理论上来说，步骤表单有明显的操作顺序，用户需要按照节点完成内容填写，因此不会产生信息遗漏。当然也可以根据实际的业务场景，设置选填节点。但是总得来说，步骤表单更强调的是顺序操作。
2）业务引导性

对于复杂业务，步骤表单可以将分散在不同页面中的独立业务串联起来，在一定程度上具备新人教学功能，帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转，从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3）逆向操作

由于步骤表单存在正向和逆向操作，因此设计时还需要考虑清楚逆向操作的设计逻辑。例如：
  • 当用户想要修改前面步骤信息时，除了逐步返回，是否可以步骤条直接跨节点修改？
  • 用户中途退出表单后，重启时是从第一步开始，还是直接从未填写的步骤开始呢？
  • 用户如果完成了步骤条表单填写，想要二次修改时，是用普通表单，还是仍然使用步骤表单形式呢？
4）节点的平衡性
步骤表单可以分拆信息，化整为零。但是信息节点也不能过多，否则同样会影响用户的操作效率。所以要减少不必要的流程节点。
最近在做设计时，发现步骤表单最后一步是内容预览。通过用户调研发现，部分用户会谨慎地预览前面４步填写的内容。而另一部分用户则认为，刚填写了内容不需要预览，强制预览的设计并不友好。该如何平衡设计呢？
最终我们选择了将预览节点取消，将预览功能调整到第４步，采用「预览」按钮的形式。既满足了部分用户预览的需要，另一部分用户也可以不做预览，直接提交申请。
所以步骤表单过程中的节点具有一定的强制性，需要谨慎对待，保证节点的合理有效。

▎03　隐藏，让表单更加灵活
1、模块隐藏
表单实际上是任务信息的集合，为了具有更高的适配性，内容通常是多种场景的集合。而场景有高频、低频区分，对于高频信息需要优先展示，便于提高用户的填写效率；对于低频场景，可以隐藏弱化展示，从而降低整个表单的复杂度。
例如我们常见的「高级配置」，通常在表单的底部默认收起展示。

2、信息隐藏
复杂表单中信息会出现多级信息共存的场景。这种场景下，复杂表单默认展示当前选项对应的子内容，隐藏其他选项的内容，从而提高信息的指向性。

3、合理的组件形式
比较典型的就是单选和下拉选择器如何选择。有人为了强调效率，一味地追求单选按钮平铺展示，认为单选更加直观，用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择，反而增加了整个页面的信息量。
所以单选框更多用在备选项较少的场景，如果备选项较多，建议优先采用下拉选择器，隐藏备选项。
▎04　转移，扩展表单的异步空间
1、信息转移
在表单设计时，可以将部分二级信息转移到弹窗、抽屉中，利用浮层空间拓展业务内容，根据用户操作逐级加载出来。从而减少表单的信息量。
例如下图中，没有将「所有配送区域及运费」直接展示出来供用户选择，而是放在了弹窗中，表单中只呈现最后的选择结果。既简化了表单的内容，又让选择结果更加突出，方便用户的查看和校验。

2、记忆转移
现在很多浏览器都增加了密码存储功能，减少用户记忆成本。
而在电商购物网站可以设定默认的收货地址。系统自动读取调用，从而减少用户的输入操作。
3、行为转移
现在越来越多的网站支持「手机短信验证码」免密注册登录方式，或者第三方登录方式，或者手机端扫码登录。将原有的表单填写转变为系统行为，从而降低用户的行为成本。

好了，以上就是我总结的表单设计的内容～

重复一遍：
  • 删除，实现表单轻量化
  • 组织，让表单更加有层次
  • 隐藏，让表单更加灵活
  • 转移，扩展表单的异步空间
— THE END —

🌈🌈🌈 粉丝福利：
 福利１ 
关注【子牧UXD】公众号，点个“在看”，可获得”读者大礼包“
回复数字【01】，获取100＋“行业报告”
回复数字【02】，获取“大厂设计规范”
回复数字【04】，获取“作品集包装攻略”
回复数字【06】，获取“笔试面试技巧”
回复数字【08】，获取“精选样机合集”
此外还可领取“大厂原型文件”、“设计师简历样本”、“App设计参考作品”等高价值资料
 福利２ 
我们组织了专业的产品／交互／UI设计交流群，群内有来自多位华为、阿里、百度、拼多多、腾讯、快手、美团等一线大厂的设计专家，欢迎入群一起交流成长。

扫描下方二维码添加小编微信，即可拉你进群。
与「12200＋」读者共同成长
阅读推荐>>
设计基础(6): 表单基础知识解析

设计基础(4)：B端中后台管理系统色彩体系

设计基础(5): 设计师需要了解什么是WCAG色彩对比度
6个降低B端产品的「认知负荷」的方法

本文来自微信公众号“子牧UXD”作者：子牧先生（ID：HelloDesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章