网页表单设计模型：注册表单(译)

《网页表单设计模型：注册表单(译)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页表单设计模型：注册表单（译）网站开发部袁丁20080722前言本文内容仅翻译了原文中译者认为重要的结论和数据。如需了解详细内容请访问原文。本文内容翻译自SmashingMagazine.com。共两篇文章，翻译内容也按原文顺序翻译。本文首发于金蝶友商网用户体验与前端开发团队博客（KDUED.com）。调查数据来源原文作者共选择了100个大型网站。网站列表地址：http://88.198.60.17/images/web-form-design-patterns/urls.html网页表单设计模型：注册表单（1）原文地址：http://www.smashingmagazin

2、e.com/2008/07/04/web-form-design-patterns-sign-up-forms/用什么词来链接注册表单？Signup（40%）Join（18%）Register（18%）Createaccount（17%）注册链接放在网站什么位置？头部（59%，这其中76%的将链接放在右上角）主页上某突出位置（21%）藏在登录页面的头部（9%）侧边条（7%）只有保存数据的时候才提示注册（4%）表单布局简单吗？简单（61%）复杂（39%）从用户点击“注册”链接那一刻就表明用户打算注册你提供的服务了。更重要的是他不会点击更多的导航链接和闪烁的广告。设计者都尽量去除

3、那些不必要的细节和不能帮助用户完成注册的干扰信息。正面例子Yahoo注册表单，简单清晰反面例子Flixster注册表单，有太多的导航链接干扰了注册登录页竟然还有广告要提供额外的信息吗？提供了注册的好处（41%）(MySpace,Del.icio.us,Last.fm,LinkedIn,Digg,MisterWong,Break.com)纯粹的注册表单（28%）(Pownce,DeviantArt,Dailymotion)告诉用户注册需要多长时间（11%）(Threadless,Newsvine,Wordpress)提前告诉用户要填写哪些信息（6%）提示接下来的步骤（8%）警告

4、和提示（6%）单页还是多页？单页表单（93%）Meebo就用了6页的注册向导来指导用户完成注册和填写相关资料。如何突出文字标签？加粗（62%）使用颜色（20%）正常字体（18%）斜体（0%）文字标签的对齐方式右对齐（41%）(YouTube,Facebook,Metacafe)输入框上方（30%）(Behance.net,Wufoo,Tickspot,DZone)左对齐（29%）(Digg,Ning,Wykop.pl,43things,StudiVZ)多少个必填项？0-2个（6%）3-5个（48%）6-8个（34%）9个以上（12%）多少个选填项？98%的表单只有5个以内的选

5、填项，其中62%的表单一个选项也没有输入框竖排还是横排竖排（86%）横排（14%）更多发现：注册表单旁边有登录入口或链接（18%）不用星号也不用其它方式标识必填项（78%）用进度指示器告诉用户当前在第几步，完成注册还有几步（9%）不用分组框（线），尽量简化（85%）用留白来对输入框进行分组和区分（69%）输入框使用边框（22%）使用不同的背景色（9%）调查小结60%的表单用“Signup”作为注册链接文字，并且放在右上角。40%的表单拥有简洁的布局，从而减量减少视觉干扰。93%的表单只有一页。41%的表单为了吸引访客注册而阐述注册带来的好处。62%的表单将文字标签加粗。文字标

6、签的对齐方式没有明显的趋势。都倾向于尽量少的必填项。都倾向于尽量少的选填项。86%的表单采用竖排形式。网页表单设计模型：注册表单（2）原文地址：http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/是否使用悬停、激活、焦点样式效果？没有使用（84%）适度使用了悬停效果（16%）译者注：悬停（hover）、激活（active）、焦点（focus）提示信息动态还是静态？静态提示（57%，一直显示在输入框旁边）动态提示（10%，需要点击图标或者输入内容后才提示

7、）没有提示（33%）提示信息放在哪里？输入框下方（57%）输入框右侧（26%）输入框上方（13%）输入框左侧（4%）输入验证是静态还是Ajax？只在表单最上面显示出错提示（30%）突出显示输入框并且旁边有相应的出错提示（29%）以上两种方式同时使用（25%）使用Ajax实时验证（22%）使用Javascript的错误提示（14%）使用系统的错误提示，并提供返回的链接（1%）出错提示的设计通常用红色来表示出错，但也有例外，例如用黄色。（Tickspot,Mixx.com,Furl）97%的网站使用绿色来表