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

表单在网页设计、app或者软件界面当中被广泛的使用,因而表单设计是个比较重要的工作。一个好的表单,不仅仅是界面设计上的体现,表单的交互和体验也尤为重要。本文总结了表单设计的八大技巧,希望对大家有所帮助。

1、表单标签需采用合适的展现形式

根据表单的运用场景,标签应采用对应的展现形式,常见的展现形式有以下三种:左标签、顶部标签、行内标签。

A. 左标签

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

B. 顶部标签
顶部标签指的是标签位于输入框上方,这种形式一般出现在一些移动端当中。顶部标签可以使输入框的宽度变大,用户在填写信息也可以比较得到完整的展示。但这种布局方式也有一个缺不好的点,就是这个表单可能需要滚屏,用户才可以看完。

C. 行内标签
行内标签常常出现在手机端的注册界面当中,这样的设计可以节省页面空间,所以大部分app的界面设计都采用这样的设计。当然,部分网站pc端的表单设计中也会用到这种设计。

2、英文标签避免全部大写

一些英文界面的表单设计,我们要避免标签的全大写。全部大写的标签容易造成阅读和浏览上的困难。

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

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

4、复选框排列需注意

在表单中常出现复选框的设计,这样的情况需要特殊处理。比如在注册的过程中,会有性别的选择,所以通常设计该表单的时候我们会将男女横排在一行。但是对于内容多的情况下,就建议采用竖排的排序方式。

5、主按钮和辅按钮需要明确的区分

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

6、提醒文本设计需要明确

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

7、必填项需用*号做好标示

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

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

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

一个好的表单设计,需考虑到用户的方方面面。而好的用户体验还要尽可能的简化操作步骤,全部手动输入的模式费时费力,对用户来说也不是一种友好的体验。所以表单的设计,需要满足界面上美感的同时还需要考虑到用户体验。

现在实际分析几个案例:

例一:蝉知注册界面

大家可以实际操作下,注册界面比较简洁,标签都采用居左标签的设计方式。是个比较不错的表单,但是个人觉得公司/组织那一项可以省略,毕竟不是必填项。

案例二:国外英文注册界面

这个网站的表单设计也比较简洁,但是有个严重的弊端,就是Account和Password标签的填写框内提示信息太长,以至于后面部分重要内容被隐藏了。这个其实不利于用户体验,刚好在三位数和六位数的位置隐藏掉,用户不能第一时间做出精准的判断。其实设计师大可以把填写框的宽度增长一些,或者把填写的提示内容精简下,这样可以事半功倍。

案例三:某设计官网(这个不附链接了)

因为这是一个反例,所以小编把相关信息模糊了。改网站的注册按钮进去之后,居然显示要加群才可以获得邀请码注册,于是小编加了群,进群要邀请码却没有答复的。整个过程体验下来不是特别舒服,之后那个网站小编再没有打开过。

表单虽然在整个网站或者app中占比不高,但是表达足可以体验交互的一些细节体验。一个不好的表达设计可能会让使用者放弃该站点,比如文中提到的案例三。本文提供的几点设计表单的技巧,希望可以帮助大家提升表单的用户体验和转化率。

时间: 2025-01-21 06:37:38

如何设计一个交互好转化率高的表单的相关文章

菜鸟 求解答-关于设计一个几张字段不同的表的视图

问题描述 关于设计一个几张字段不同的表的视图 各位大虾好,最近遇到一个问题,本人经验浅薄不知道怎么处理,就是我现在有三张表table1(name,mobile,center,depart,grade),table2(name,mobile,depart,style),table3(name,mobile,center,style),这几张表字段不同,但是我需要对这些数据汇总到一张表或者视图中,便于统一筛选查找数据, 现在假设有两张表如下:(类型这里不讨论,如果有注意的请大虾说明一下) T1(A,

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)_javascript技巧

效果图如下所示: 实现代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

表单交互设计:以用户视角出发的表单之旅

  用户使用发布表单,就像是一次旅行.旅行的目的是否能达到?过程是否让人满意?这些都决定了用户会否再来这里. 一.那么为什么要以用户的视角呢? 作为设计师,你是否遇到过这种情况: · 我们额外加一个填写项,用来收集用户信息吧; · 我们的表单之所以复杂,是因为我们希望用户多填写内容,这些内容都是有用是; · 我们的表单应该在这最重要的一步出现,这样就能让更多的用户看到它--. 作为用户填表单时,你是否这样想? · 我们填写表单只是为了达到我想要的目的,才不是为了你们收集信息; · 如果可以,我希

一个非常强大完整的web表单验证程序

web|表单验证|程序 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上. Validator是基于javascript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证.因为是伪静态类,所以在调用时不需要实例化,直接以"类名+.语法+属性或方法名&quo

一个ASP处理Ajax提交的表单的实例

ajax 昨天看见一位网友需要解决一些关于AJAX的FORM提交的问题,现在把一个实例贴出来,希望对广大爱好者有帮助. <!--注册模块-->default.asp <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

一个非常强大完整的web表单验证程序Validator v1.05_表单特效

表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上. Validator是基于JavaScript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证.因为是伪静态类,所以在调用时不需要实例化,直接以"类名+.语法+属性或方法名"来调用.此外,Val

如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量

变量|数据 可以使用以下函数来实现: function posttohost($url, $data) {$url = parse_url($url);if (!$url) return "couldn't parse url";if (!isset($url['port'])) { $url['port'] = ""; }if (!isset($url['query'])) { $url['query'] = ""; } $encoded =

二级连动的另一个不错的实现方法_表单特效

类别: ** 选择一级类别 **AB   ** 选择二级类别 ** [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

关于表单的两点交互体验改进技巧_表单特效

想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1.表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: Input English..[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]