前端设计师如何写一个交互好转化率高的表单

表单在网站、app或者软件界面当中被普遍的使用，于是表单设计是个比较重要的工做。前端设计师们要写好一个表单，不只仅是界面设计上的体现，表单的交互和体验也尤其重要。本文结合我给别人作的网站的经验，总结了表单设计的八大技巧，但愿对你们有所帮助。

一、表单标签需采用合适的展示形式

根据表单的运用场景，标签应采用对应的展示形式，常见的展示形式有如下三种：左标签、顶部标签、行内标签。

 

A. 左标签

在一些网页表单当中，标签局左是最多见的一种形式。左标签的展现形式给人一种秩序感，也便于用户在填写表单的过程当中快速的辨别标签内容。左标签的这种形式通常用于网页当中，不适合在手机端或者小屏下的移动端出现，由于小屏幕的尺寸有限，标签居左会占用较大的空间，输入框就会受限。

 

B. 顶部标签
顶部标签指的是标签位于输入框上方，这种形式通常出如今一些移动端当中。顶部标签可使输入框的宽度变大，用户在填写信息也能够比较获得完整的展现。但这种布局方式也有一个缺很差的点，就是这个表单可能须要滚屏，用户才能够看完。

 

C. 行内标签
行内标签经常出如今手机端的注册界面当中，这样的设计能够节省页面空间，因此大部分app的界面设计都采用这样的设计。固然，部分网站pc端的表单设计中也会用到这种设计。

二、英文标签避免所有大写

一些英文界面的表单设计，咱们要避免标签的全大写。所有大写的标签容易形成阅读和浏览上的困难。

三、特殊标签需使用合适的输入框长度

对于特定的标签，像验证码、邮编这样的标签，在设计的时候须要采用合适的输入框长度。毕竟这样的输入框是用户可预见的，因此输入框的长度能够不须要太长。

四、复选框排列需注意

在表单中常出现复选框的设计，这样的状况前端设计师们须要特殊处理。好比在注册的过程当中，会有性别的选择，因此一般设计该表单的时候咱们会将男女横排在一行。可是对于内容多的状况下，就建议采用竖排的排序方式。

五、主按钮和辅按钮须要明确的区分

在表单提交的时候，出现多个按钮的状况下，须要作明确的区分，这样有利于用户在操做过程当中方便辨别操做步骤。

六、提醒文本设计须要明确

用户在填写表单的过程当中，对于输入的错误信息须要有帮助的提醒文本，对于较为复杂的提示文本须要作一个隐藏图标。

七、必填项需用*号作好标示

有些表单内容较多，能够采用*号标注几个必填项来让用户缩短表单的填写时间。

八、特殊标签的可选项设计

对于出生年月日、地区等特殊标签，最好设计成可选项，减小用户的使用成本。

 

 

一个好的表单设计，需考虑到用户的方方面面。而好的用户体验还要尽量的简化操做步骤，所有手动输入的模式费时费力，对用户来讲也不是一种友好的体验。因此表单的设计，须要知足界面上美感的同时还须要考虑到用户体验。

 

 

表单虽然在整个网站或者app中占比不高，可是表达足能够体验交互的一些细节体验。一个很差的表达设计可能会让使用者放弃该站点。本文提供的几点设计表单的技巧，但愿能够帮助你们提高表单的用户体验和转化率。