三步教你提升B端表单设计的用户体验（一）

　
　　三步教你提升B端表单设计的用户体验（一）：高效。
       通过合理的信息组织形式和表单组件的使用，使用户可以快速完成表单页任务。

　　1） 标签和输入框成组

　　使标签和输入框两两组合，用间隔的大小来形成组的概念，否则就会如左图所示，分不清楚那个标签和哪个输入框是匹配的，容易产生混淆，使用户感到困惑。

　　2） 选择合理的标签对齐方式

　　标签常见的对齐方式有：顶对齐、左对齐、右对齐，另外还有不常见的表单域内对齐。

　　有的时候我们希望用户尽可能快地填写表格，但有些场景下我们需要故意让用户慢下来，以便他们用心地留意并阅读标签。

　　不同的对齐方式适合不同的应用场景：

　　左对齐

　　优点：用户视觉动线左对齐，方便阅读，节约垂直空间。

　　缺点：填写速度慢，浪费横向空间，标签长度和输入框弹性小。

　　用户存留时间较长，所以左对齐标签一般用于购买类需要用户仔细看、谨慎选择。

　　右对齐

　　优点：节约垂直空间，表单标签和表单域距离近所以有利于用户高效填写。

　　缺点：可读性较弱，横向占用空间大，不利于狭长页面布局，标签长度和输入框弹性小。

　　右标签一般用于需要高效填写的表单，比如账号的基本信息。

　　顶对齐

　　优点：视觉舒适、用户浏览和填写表单的速度较快，节约横向空间。

　　缺点：占用垂直空间。

　　在移动端产品设计中，下拉的交互比左右滑动的交互更为便捷，所以采用顶部标签较常见。

　　顶部对齐可以让用户快速填写表单，完成任务的场景一般采用顶部标签，例如阿里云的创建应用分组。

　　表单域内对齐：

　　优点：最节省空间，多用于移动端和登陆页面。

　　缺点：输入时和输入后标签消失，令用户迷茫，字段多的表单不建议使用。

　　3） 任务拆解和编排

　　将大型、复杂任务拆解为多个部分，并按照相关性分组，减轻用户输入负担。

　　尽管每部分内容单独处理，但最终一起完成提交，适用于大型、复杂表单，通过适当的任务分割降低用户出错率。

　　4） 折叠不重要非必填信息

　　在能完整获取需要信息的前提下，输入项越少越好。

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

　　5） 智能默认值

　　使用智能默认使用户完成表单速度更快、更准确，能满足多数人需要的默认选择，从而帮助用户填写单据。

　　根据搜索、联想，自动显示匹配信息（如自动搜索、邮箱后缀联想、定位地址），如下图东航的搜索机票的表单，出发地和支付方式根据定位地址给了一个自动匹配，乘机人数量、出发及返程时间给了一个默认时间。

【免责声明】本文系转载，文章来源于公众号Clip设计夹 ，作者大Clip设计夹，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与联系我们，我们会予以更改或删除相关文章，以保证您的权益!