分享网页设计中WEB表单设计方法

2016-02-17 04:25 6 1 收藏

下面请跟着图老师小编一起来了解下分享网页设计中WEB表单设计方法,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - 平面设计 】

随着互联网的发展,人们开始越来越多使用WEB表单,虽然没有人愿意填写这东西,但却无法忽视其对于网站的重要性,特别是购物网站,随着网站类型的扩展,WEB表单的形式也变得越多越多,这也就成了今天讨论的主题,如何设计出令用户满意的WEB表单!随着文中一起来分享一下国外一些优秀的WEB表单是如何设计的。

随着网络的发展,人们通过各种方式使用它。今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等。事实上,只要能在线使用的应用基本上都已经有了。

虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤。不管是在线交易验证、评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

为什么是WEB表单?

在网页上,WEB表单把用户、信息、WEB产品或者服务连接了起来。它们能促进销售、捕捉用户行为、建立沟通与交流,以及更多。这些重要的交互不仅仅是为了保持业务正常运作,它们也让用户实现了想要达到的目标。那我们为什么不多关注一下WEB表单设计呢?

也许人们认为WEB表单就是可以出现在任何位置的向用户采集必要数据的一些输入框和提交按钮。也许他们没有意识到优化WEB表单能获得很多有意义的成果(比如年收入增加300万美元an additional 300 million)。更可能的,他们不过是为了他们自己使用而不是为用户去设计WEB表单。

它不是数据录入

没有人真的想去填写一个表单,他们想要的是别的东西:买一本书、注册投票、加入一个论坛。他们不是通过一个WEB表单来练习打字速度的苦工,他们有清晰的目标。不幸的是,许多WEB表单并没有针对用户的实际目标去设计。

看看在社交网站Brightkite上的这个简单表单。假如把保持和朋友联系、结识新朋友、寻找新去处作为宣传广告,他或她只需要注册一个新帐号(图一)。

分享网页设计中WEB表单设计方法,PS教程,图老师教程网

图一:Brightkite上的注册表单(2008年4月)

开始注册,用户必须选择一个符合以下条件的用户名:只能是英文字符或数字;3到15个字符长;可以包括下划线;不能有空格;不能是已经存在的用户名。那么这些要求是不是能让人们选择一个最能代表自己的用户名呢?没有,这些只是强制用户去应付网站的安全模块或后台数据结构的系统条件。

接下来的这组问题更不好开始。Brightkite需要你的Email地址以便发送确认信息。你需要一个至少3个字符长的密码并重复输入一次以防止你胡乱按几个字符给Brightkite。接着,你通过解答加密的验证码和同意网站隐私协议与服务条款证明了你是一个活生生的人。

与朋友保持联系、结识新朋友和寻找新去处这些功能去哪了?这些才是人们实际上想要的服务,但是这些目标在填写表单时却没有被提及。反而,整个体验过程被Brightkite自己要求的一些信息格式所代替了。

与Brightkite对照的是tookmark的注册表单(图二),tookmark的功能是给用户发送收藏站点的日常提醒邮件。所有的填写项目直接关联用户的目标:你想你的提醒邮件发送到哪(Email地址)?你想用的收藏夹名称是什么(可爱的昵称)?甚至提交按钮使用的语句都与任务紧密相关:马上去看看,点击以后立即跳转至一个虚拟邮箱教用户接下来该如何操作。

分享网页设计中WEB表单设计方法,PS教程,图老师教程网

图二: tookmark的注册表单(2008年12月)

填写tookmark的注册表单的整个过程让人感觉正在接近自己的目标,而不是让人感觉把自己的资料按要求交给了一个机构,这是一个重要的区别。当人们觉得他们得到了所想要的东西,他们才会继续下去,如果没有得到,他们就会放弃。

做出转变

此时,一些精明的读者会指出以上两个注册表单例子来自两个不同的应用,因此tookmark的这种方式不能套用在Brightkite上,他们会争论有些情况确实是需要收集足够的用户资料以便得到一个有效的帐号。

在这一点上,为用户设计的WEB表单可以开始做一些转变。与其考虑信息收集和数据库中的用户帐号,不如多想想什么样的信息能让人们用最小的成本和清晰的体验到达目标,这样,他们就不会再问:为什么要求我填写这些东西

不是所有WEB应用都像tookmark,每个应用都有一个目标就是如何跟用户交互。把注意力集中在核心目标能帮助挖掘WEB表单所需要的信息。当你在设计WEB表单时,考虑一下几点:

1、 这些信息是不是用户想要的(核心目标)?如果不是,用户很可能会对这些要求产生疑问。

2、 有没有更好的时机来收集这些资料?在用户正在尝试应用的时候向他们收集资料比在他们注册的时候收集更加容易成功。

3、 有没有一种方法能解释某些信息为什么是必需的?这些要收集的信息应该与用户目标相关联并让他们恢复信心继续后面的过程。

4、 是否有更好的方法收集所需的信息?当然,WEB表单不是在网上得到用户数据的唯一办法。

为实现效果,让我们来看看Brightkite重新设计后的用户体验(图三),与朋友保持联系这句话放在了页面正前方。体现在网站首页上的主要功能从注册新帐号变成了邀请用户联系他们在Facebook上的朋友。这种一键式流程抛弃了图一所示的笨重注册表单,给人们提供了已经存在的身份和朋友(来自Facebook)。

分享网页设计中WEB表单设计方法,PS教程,图老师教程网

图三: Brightkite的首页 (2009年11月)

尽管Brightkite和tookmark是不同的服务,他们都可以避免使用啰嗦的注册表单,通过一些简单的交互来表达他们的服务核心意图,并促使用户快速成功。

如果我们做的是对的,就几乎不会有任何形式的表单存在,这才是建立WEB表单的本质。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

来源:http://www.tulaoshi.com/n/20160217/1578471.html

延伸阅读
标签: Web开发
1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 textarea 中,一切就会变得简单多了,如:  以下为引用的内容: textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focu...
备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为"行动呼吁","行动号召",但是都觉得不理想....
通过PS我们可以设计出各种样子的表单,不过其中许多最后都需要转成HTML表单页面,在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用。因此网页设计师在设计表单时需要考虑的问题就是如何将其转化为HTML+CSS的页面形式。 虽然HTML无法制作出十分酷的表单,不过也能制作出许多出色的表单页面,本文中的表单都是HTML形式,可以参考这些...
标签: 软件教程
FineReport是一款报表软件,它的报表操作功能是报表软件中的佼佼者。下面小编就为大家进行介绍一下FineReport简单的一些表单设计功能,希望能帮到大家 新建表单点击文件>新建表单,如下图: 拖入组件 如上图所示的效果图,我们可以看到该表单需要有1个下拉框控件,一个文本控件,以及对应的2个标签控...
把表单设计得易于输入 你无法确知用户使用的是手机还是电脑在浏览你的网页,输入你的表单,但是它应该对于各种输入设备都足够友好才行。考虑到你的表单可能会是不同类型的键盘输入的,所以你应该根据表单字段属性和检测到的键盘类型,进行适配。 在桌面端,用户应该可以只借助键盘完成整个输入过程,而无需动用鼠标与触控板。完成一...

经验教程

383

收藏

52
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部