快生活 - 生活常识大全

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


  以下对国内外近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)右侧干扰信息过明显
网站目录投稿:映云