WEB表单设计学习总结.docxVIP

WEB表单设计学习总结1 前言多数人不喜欢表单，因为填写表单是件麻烦的事。我们想做的是投票、申请或者购买打折的商品。表单是电子商务、社交互动和大多数基于生产力应用类型网站（例如银行）的关键。在我们的系统中，有着各式表单，我们的日常工作也和表单分不开……WEB表单对于关键互动（比如注册和支付）起着至关重要的中介作用。据统计，经过重新设计的表单，完成率往往能提高10%~40%。这意味着完成新销售或者获得新客户。eBay是个成功的案例，其用户体验和设计团队通过搜集可用性数据、客户支持记录、网站日志和网络习惯，重新设计了表单，产生了非常积极的影响，带来了巨大的效益。在一家大型电子商务网站，设计师只更改了一个按钮，便给公司带来了3亿美元的年收入。我们的系统虽然不可能出现用户因为无法忍受繁杂的表单而拒绝填写的情况，但如果将表单精心设计，会使用户更快的完成工作，减少出错率，并拥有良好的心情。可见表单还是值得学习研究一下的，于是我就从网上看了些资料，和大家分享下学习体会。2 输入框输入框是表单的关键元素之一，是系统获得用户信息的重要途径。2.1 输入框长度输入框的长度可以给用户进行暗示而不需要文字提示。图2.1 通过输入框长度暗示用户填写信息如果输入框长度不同，用户思考如何填写输入框时自然会考虑为什么会这样。如果长度合适，就可以避免使用文字说明填写要求。比如上例的工作证号比身份证号的输入框短，用户就会考虑“是不是工作证号要比身份证号的位数少？”当输入框很长时，用户的回答却很短，这时用户就会考虑是否自己误解了问题。如果输入框无法受益于暗示，就应当采用一致的长度。2.2 必填项标明必填项可以引导用户填写表单，特别是有很多输入框，但只有一部分是必填的时候。表明必须回答的问题有助于用户判断，减少出错的可能。图2.2 标明必填项但当必填项很多时，可以只标识可选项，因为标明主要情况会增加表单的信息量。图2.3 必填项相比选填项过多，可只标明选填项如果想通过视觉系统来标明必填项，应当考虑表单中的标识位置。标签旁的标识能指引用户迅速浏览表格，并判断出必填项。而标识与输入框对齐会导致难以判断。2.3 输入组当输入表单太多时或者较复杂，可以考虑将表单分组或分布到多个页面中。图2.4 将填写信息分为两部分采用这种方式，人们可以轻松浏览必填部分，了解需要提供哪些信息。如果把表单看成对话，适当地按主题分成若干个部分，这样的对话更容易让人接受。但是内容组之间不要设置大量的视觉差异（比如背景色、分割线、字体等），否则会造成过多视觉污染，阻碍浏览。2.4 输入状态当用户焦点落在输入框时，可以通过更改背景色、边框颜色的方式提示用户当前所填写的位置，当焦点失去时，回复样式。图2.5 用户输入焦点在“密码”一项中如上图，用户可以清楚识别自己正在填写“密码”一项，当因事中断填写表单时，不用担心无法确认目前的进度。而且用户可以确定当前是否处于输入状态。3 标签不同的表单对齐方式给用户带来的感觉是不一样的。大多数时候，可能希望人们尽快填完表单。但有时会希望降低人们的速度，使用户有时间进行深思熟虑。也可能会受到屏幕显示的限制。也可能由于本地化需要，表单要适应不同长度的多种语言。置于哪种对齐方式好，只能说依情况而定。马泰奥·彭佐在2006年进行的眼部研究发现，顶对齐方式注意力从标签移动到输入框只要50毫秒，比左对齐方式快了10倍，比右对齐方式快了两倍。3.1 顶对齐标签顶对齐方式可以加快浏览速度。由于标签和输入框的位置非常接近，浏览起来毫不费力。填写表单很快，因为用户的视线只需向下运动，向用户提供了清晰的完成路径。顶对齐方式提供了很大的横向空间，页面较窄时适合使用。而且对于需要多种语言时，也不会因为文本变长而影响了布局（法语、德语要比英语长两倍，英语又比中文长）。图3.1 顶对齐标签上面的表单由上到下一目了然，浏览速度较快。但是这种方式占用了较多的垂直空间。表单输入框之间的垂直空间太少或太多都会阻碍移动，一般使用输入框50%~75%的高度作为间距。3.2 左对齐标签如果人们不熟悉表单要收集的数据，左对齐表单会更合适。人们往往只是上上下下阅读标签栏，而不会被输入框打断（在我们的系统中，用户往往是熟悉表单的，不会特别注意文字，所以感觉左对齐方式不是非常适合使用）。图3.2 左对齐标签与顶对齐方式相比，左对齐较少地占用垂直空间。但是当文字过长时，用户水平移动视线，对齐输入框会花费更多的时间。3.3 右对齐标签右对齐方式同样具有输入框与标签相邻的优点，因此也能快速完成，但右对齐布局造成左侧不齐，会降低快速浏览表单问题的效率（人们习惯由左往右阅读）。图3.3 右对齐标签上面示例采用了右对齐方式，熟悉表单的用户和新手扫视右对齐标签和输入框的平均时间分别为170毫秒和240毫秒。但是