优秀注册表单设计方法及案例分析.pdf

优秀注册表单设计方法及案例分析 优秀注册表单设计方法及案例分析 以下对国内外近 20 个网站的注册表单进行的分析，并归类总结优秀表单的设计方法。文章最后对其 中三个案例进行优化对比。 1． 越少的填写项越好 Site inspire 优秀注册表单设计方法及案例分析 CSS web site award 优秀注册表单设计方法及案例分析 Tumblr DeviantArt 小tips ：将表格内容 title 写入格子内，在视觉上降低 要填很多项“ ”的感觉 优秀注册表单设计方法及案例分析 反例： Another Bookmark ，填写项太多，字号太小格子太密 优秀注册表单设计方法及案例分析 反例： Shutter Stock ，同上，填写项过多格子过密 优秀注册表单设计方法及案例分析 反例：点点印，当全是必填项时，可以不要 * 号，减小用户压力 优秀注册表单设计方法及案例分析 2 ． 无论填写项多还是少，使用宽大的格子，行与行之间留白重组。一个清爽的页面比被密密麻麻 小字儿充满的页面更容易诱使人注册。 Pictory 优秀注册表单设计方法及案例分析 糯米 优秀注册表单设计方法及案例分析 反例： sisTown （相比糯米只多了一项，却在视觉上感觉繁重很多） 优秀注册表单设计方法及案例分析 3． 即时的提示（该格子内填什么，当光标移入才提示），即时的反馈（填的对不对，当光标移出 再提示）。 twitter 优秀注册表单设计方法及案例分析 Last.fm 优秀注册表单设计方法及案例分析 Bangumi ( 注：此处提示信息相对有些过多 ) 优秀注册表单设计方法及案例分析 Hashable 优秀注册表单设计方法及案例分析 案例 案例一： Airbnb 优秀注册表单设计方法及案例分析 分析：页面左右轻重不统一，视觉上已聚焦左侧框和右侧框，无法视觉 focus 修改方法： 1） 将页面元素重新排列，让用户将注意力集中在 注册“ ”上 2 ） 页头横线拉长覆盖全部宽度，页尾文案放在一行 3 ） 将填写项 title 放入格子中，是页面整齐化又不感觉内容过多 案例二： UserInterface 优秀注册表单设计方法及案例分析 分析： 1） 只有四项需要填，但是过多无用的文案引导 2 ） 填写 title 及填写框没有任何对齐模式，界面较乱 3 ） UserInterface 的logo 没有突出，页面的没有 title 4 ） 注册按钮太不突出，不能诱导注册 优秀注册表单设计方法及案例分析 修改方法： 1） 把没用文案全部掉 2 ） 填写项 titel 与框左对齐 3 ） 修正 logo 及加入页面 title 4 ） 强化 注册“ ”按钮视觉效果 案例三： Visualize.us 优秀注册表单设计方法及案例分析 分析： 1） 框长度不一导致左侧不整齐 2 ） 右侧干扰信息过明显 修改方法： 1） 将填写框统一长度 2 ） 右侧突出是有 FB 或twitter 账号登陆，减轻干扰 来源： /s/blog_6d04fca50100r6bp.html 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台