《网页表单设计模型注册表单(译)》由会员分享，可在线阅读，更多相关《网页表单设计模型注册表单(译)（31页珍藏版）》请在金锄头文库上搜索。
1、网页表单设计模型：注册表单（译 ）网站开发部 袁丁20080722*1P2前言前言n本文内容仅翻译了原文中译者认为重要的结论和数据。如需 了解详细内容请访问原文。n本文内容翻译自SmashingM。共两篇文章，翻 译内容也按原文顺序翻译。n本文首发于金蝶友商网用户体验与前端开发团队博客（ KDUED.com）。P3调查数据来源调查数据来源n原文作者共选择了100个大型网站。n网站列表地址：http:/88.198.60.17/images/web-form-design -patterns/urls.htmlP4网页表单设计模型：注册表单（网页表单设计模型：注册表单（1 1）n原文地址：nht
2、tp:/ design-patterns-sign-up-forms/P5用什么词来链接注册表单？用什么词来链接注册表单？nSign up（40%）nJoin（18%）nRegister（18%）nCreate account（17%）P6注册链接放在网站什么位置？注册链接放在网站什么位置？n头部（59%，这其中76%的将链接放在右上角）n主页上某突出位置（21%）n藏在登录页面的头部（9%）n侧边条（7%）n只有保存数据的时候才提示注册（4%）P7表单布局简单吗？表单布局简单吗？n简单（61%）n复杂（39%）n从用户点击“注册”链接那 一刻就表明用户打算注册 你提供的服务了。更重要 的是他
3、不会点击更多的导 航链接和闪烁的广告。n设计者都尽量去除那些不 必要的细节和不能帮助用 户完成注册的干扰信息。P8正面例子正面例子nYahoo注册表单，简单清晰P9反面例子反面例子nFlixster注册表单，有太多的导航链接干扰了注册n登录页竟然还有广告P10要提供额外的信息吗？要提供额外的信息吗？n提供了注册的好处（41%）(MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, B) n纯粹的注册表单（28%）(Pownce, DeviantArt, Dailymotion) n告诉用户注册需要多长时间（11%）(Thread
4、less, Newsvine, Wordpress) n提前告诉用户要填写哪些信息（6%）n提示接下来的步骤（8%）n警告和提示（6%）P11单页还是多页？单页还是多页？n单页表单（93%）nMeebo就用了6页的注册向导来指导用户完成注册和填写相关 资料。P12如何突出文字标签？如何突出文字标签？n加粗（62%）n使用颜色（20%）n正常字体（18%）n斜体（0%）P13文字标签的对齐方式文字标签的对齐方式n右对齐（41%） (YouTube, Facebook, Metacafe) n输入框上方（30%） (B, Wufoo, Tickspot, DZone) n左对齐（29%）(Digg
5、, Ning, Wykop.pl, 43things, StudiVZ)P14多少个必填项？多少个必填项？n0-2个（6%）n3-5个（48%）n6-8个（34%）n9个以上（12%）P15多少个选填项？多少个选填项？n98%的表单只有5个以 内的选填项，其中 62%的表单一个选项 也没有P16输入框竖排还是横排输入框竖排还是横排n竖排（86%）n横排（14%）n更多发现：n注册表单旁边有登录入口或链接（ 18%）n不用星号也不用其它方式标识必填项（ 78% ）n用进度指示器告诉用户当前在第几步，完成注册还有几步（ 9%）n不用分组框（线），尽量简化（85%）n用留白来对输入框进行分组和区分（
6、69%）n输入框使用边框（22%）n使用不同的背景色（9%）P17调查小结调查小结n60%的表单用“Sign up”作为注册链接文字，并且放在右上角 。n40%的表单拥有简洁的布局，从而减量减少视觉干扰。n93%的表单只有一页。n41%的表单为了吸引访客注册而阐述注册带来的好处。n62%的表单将文字标签加粗。n文字标签的对齐方式没有明显的趋势。n都倾向于尽量少的必填项。n都倾向于尽量少的选填项。n86%的表单采用竖排形式。P18网页表单设计模型：注册表单（网页表单设计模型：注册表单（2 2）n原文地址：nhttp:/ design-patterns-sign-up-forms-part-2/P
7、19是否使用悬停、激活、焦点样式效果？是否使用悬停、激活、焦点样式效果？n没有使用（84%）n适度使用了悬停效果（ 16%）n译者注：悬停（hover）、激活 （active）、焦点（focus）P20提示信息动态还是静态？提示信息动态还是静态？n静态提示（57%，一直显示在输入框旁边）n动态提示（10%，需要点击图标或者输入内容后才提示）n没有提示（33%）P21提示信息放在哪里？提示信息放在哪里？n输入框下方（57%）n输入框右侧（26%）n输入框上方（13%）n输入框左侧（4%）P22输入验证是静态还是输入验证是静态还是AjaxAjax？n只在表单最上面显示出错提 示（30%）n突出显示
8、输入框并且旁边有 相应的出错提示（29%）n以上两种方式同时使用（ 25%）n使用Ajax实时验证（22%）n使用Javascript的错误提示（ 14%）n使用系统的错误提示，并提 供返回的链接（1%）P23出错提示的设计出错提示的设计n通常用红色来表示出错，但也有例外，例如用黄色。（ Tickspot, M, Furl ）n97%的网站使用绿色来表示成功。P24确认确认EmailEmail是否有必要？是否有必要？n只有18%的网站要输入确认Email。（Odeo, Ning）P25确认密码是否有必要？确认密码是否有必要？n72%的网站必须输入确认 密码。n但很多网站都决定去掉“ 确认密码”
9、以此来减少必 填项的数量。例如 Facebook, Friendster, LinkedIn, Stumbleupon, Pownce, Twitter这些网站 都不需要输入确认密码。P26用不用验证码？用不用验证码？n52%的网站不使用验证码n39%的网站不能单独刷新验证码n我们无法确定用还是不用验证，但如果用验证码，一定要让 验证码能看清，并且能让用户重新加载验证码。n一些网站可以读出验证码，例如Digg, AOL, Slashdot, Google, Last.fm。P27用不用用不用“ “取消取消” ”按钮按钮n只有8%的网站使用了“取消” 按钮。其中一部分“取消”按 钮是跟在“条款协
10、议”的右边 ，如果不同意协议的话就可 以取消注册。n另一种情况是用户在购物的 时候选择了错误的支付方式 ，可以通过取消按钮返回上 一步选择其它的支付方式。n使用了“取消”按钮的网站中 有4%的“取消”按钮在“提交” 按钮的右侧。P28提交按钮的对齐方式提交按钮的对齐方式n左对齐（56%）n居中对齐（26%）n右对齐（17%），通 常这种情况下提交按 钮变为“继续”或“下一 步”，因为一般的桌 面程序的“下一步”按 钮都是右对齐的。P29感谢信息感谢信息n45%的网站让刚注册的用户进一步完善个人资料，或者查找 朋友并推荐网站给朋友（填写朋友的信息）。n33%的网站会介绍可以去的栏目或者用有吸引力
11、的语言介绍 功能。n4%的网站只提供了基本的感谢信息。n2%的网站重定向到主页。n更多发现：n99%的网站正确使用了tabindex。n24%的网站使用对话这样的非正式形式，例如“您贵姓？”等。n39%的网站仍然使用正式的形式，例如“姓名”等。n38%的网站使用计算机用语，例如“登录”等。P30调查小结调查小结n84%的注册表单没有任何悬停、焦点等样式效果。n57%的提示信息是静态的，33%是动态的。并且57%的提示 信息显示在输入框下方，26%在输入框右侧。n静态验证和Ajax验证一样流行，Ajax并没有更流行。n82%的网站不需要输入确认Email。n72%的网站需要输入确认密码。n验证码可用可不用（48% vs 52%）。n92%的网站没有“取消按钮”。n56%的“提交”按钮是左对齐的，还有26%的是居中对齐的。n45%的网站在感谢信息中引导用户去使用网站提供的服务。P31联系方式： 客服咨询热线：0755-26730315 友商网站：
