快好知 kuaihz

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

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

以下对国内外近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)  右侧干扰信息过明显

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:表单  表单词条  案例分析  案例分析词条  优秀  优秀词条  方法  方法词条  注册  注册词条  
设计

 Redesign——iphone...

很久以前看过一本书,讲的是一些设计师如何把已有产品、品牌进行重新设计,既保持原有特色,又焕然一新。工作中似乎充满着“再”设计,无论是网站改版,还是外面产品的复制...(展开)

设计

 平台数据API对接:产品推进4步...

笔者从平台数据对接出发,一步步梳理了产品推进的路线图:确认业务数据需求、确认关键技术方案、完善产品需求文档,展示了数据从获取到展示的流转过程。业务背景:平台A是...(展开)

设计

 优秀Android应用的旁门左道

上篇说到几大Android土鳖设计,这篇接下来说如何利用Android系统本身的一些旁门左道,打造优秀自然的应用。1.支持自动同步虽然iOS5已经在新版本中提供...(展开)