Web表单设计:表单结构
作者：zongbo.yuzb 来源：alibaba 发布时间：2011-04-22 12:32:00
你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助，让我有机会细心品味设计表单的乐趣。总体来说，Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品（Sell Your Item）表单售出；MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的；YouTube、Youku通过上传视频（Upload Your Video）表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会，Web表单常常是漫长旅途的最后一步，也是最重要的一步。
你会设计表单吗？
以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素，过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌，想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等，但表单却给用户带来了麻烦，妨碍了他们。
大多数表单是“由内而外”（Inside Out）而不是“由外而内”（Outside In）设计出来的。举个例子：如果谁想成为网站的会员，网站就会跳出表单要求用户提供用户名，密码，电子邮箱等。这就是“由内而外”的设计，多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时，“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计，目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在，但又能保证系统和用户都获得想要的东西。
在电子商务、社交互动、生产力网站里，我们发现表单阻碍着用户需求和商业目标，表现为：
人们从电子商务网站购买需要的商品，而结算表单阻碍着交易双方。
人们加入社交网站与朋友聊天或分享内容，从增加用户基数与活跃度方面说，阻碍双方的是注册表单和联系表单。
人们希望基于互联网的生产力工具，创造高效协同工作，当公司要增加网站内容，增加了用户的时间，表单再次阻碍了两者。
Web表单设计在支付和注册环节，会起到至关重要的中介作用。2004年人机交互（Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”，作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例，提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响，并成为评估和资助设计项目的范本。
0
投稿猜你喜欢
在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要- CSS 盒模型网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：如果是 Firebug 用户的话(基本和前端有关的
- InnoDB和MyISAM是在使用MySQL最常用的两个表类型，各有优缺点，视具体应用而定。下面是已知的两者之间的差别，仅供参考。1.Inn
- <script>alert(escape("人"));alert(encodeURI("人&quo
- 当你在浏览网页时，看到一个很漂亮的特效，你查看源代码时看到的是一队乱码，那多扫兴呀！根据本人的研究，总结出了三种解密方法，与大家分享！！方法
- 设计单个页面，一点一点做就行了，但处理的页面多了，每个页面都一点点的做下去是非常费时费力的，特别是当许
- 一个站点成功与否，不是在于所用的程序语言是PHP还是ASP，也不在于用BLOG建站或是CMS建站，内容和专业很重要。博客很好起步，CMS体系
- 在 Web 2.0 时代，开发人员和用户都对基于 Web 的应用程序的可用性和响应性抱有很高的期望。除非是在过去的两年内一直没有关注过这个领
- 本文主要介绍 SQLServerExpress2008不用第三方工具调试T-SQL语句，经过本文的介绍，用SQLSERVER2008 Man
- < ％ Response.CharSet="gb2312" tblna
- 传统的HTML页面中连动下拉框采用了两种方法：1）直接将下拉框中的内容hardcode于html的javascript中，调用javascr
- innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2
- 描述的意思是HTML为中心的前端开发也差不多是web标准的意思。1.HTML是基础2.CSS依靠选择符提供视觉；3.Javascript 依
- 二、XML的定义 XML是一个精简的SGML，它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能
- 还有种片面的观点认为，做网站设计与平面差不多，比如老罗发布的这则招聘中提到：年薪十万招擅长做下列网站设计风格的平面设计师一名。在专业角度，网
- 问：我想问一下我在重新装完系统以后装SQL Server2000时提示:以前某个程序安装已在计算机上创建挂起的文件操作,运行安装
- 本篇文章适合css新手学习，对于已经掌握了css的朋友们也可以通过本片文章来复习知识。作者通过实践，认为在有些情况下css的代码是可以更加简
- 在asp中调用sql server的存储过程可以加快程序运行速度，本文介绍了asp使用存储过程的方法。1.调用存储过程的一般方法 先假设在s
- Union 与 Union ALL 的作用都是合并 SELECT 的查询结果集，那么它们有什么不同呢？ Union 将查询到的结果集合并后进
- JavaScript游戏开发之键盘控制层的移动截图：<html> <head> <meta http-equi
