读《Web 表单设计》
我们每天都会上网,无论是电子商务网站,还是各种 SNS 网站,都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙,前者需要高额的订单金额和转化率,后者则是真的不愿多填写一个表单,我只想得到我真正需要的。而产品经理或者设计师处理表单时,这要精心雕琢这门墙的情境。
《Web 表单设计》就是这样处理这样情境的一本书,在总结以往表单设计失败案例基础上,将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来?是由前Yahoo设计师 Luke Wroblewski ,他的官网是:http://www.lukew.com/
这本书有以下三个部分:
1 表单结构
表单设计原则
表单的内容及组织方式(标签、输入框、内容组)是表单的核心要素,而不是视觉和交互设计。表单设计的开始工作是“先考虑人”,考虑用户的真正关切,然后“再考虑像素”,考虑如何设计。设计表单可以遵循以下四个策略:
2 表单元素
表单不只是表格,它是由标签、输入框、交互动作等元素构成。
1 )标签
一般讨论最多是标签该如何对齐,由顶对齐标签、左对齐标签和右对齐标签三种对齐方式,她们都有其存在的必要,具体则依赖于设计的目标。
顶对齐标签,标签和输入框自上而下的布局,是填写表单的最快捷实现方式,充分利用横向空间的各种组合,但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度
左对齐标签,标签一致左对齐,和输入框拉开间距,便于用户自上而下看标签,而不用急于填充输入框,比较适合高级设置的陌生或较难理解的数据。
右对齐标签,标签一致右对齐,标签和输入框横向间距最近,可以尽量减少垂直空间,用户填充速度居三者之中。
2 )输入框
输入框出现的目地是让用户可操作的组件,如文本框、单选按钮、下拉菜单等,如何使用各种不同的输入框,要看标签内容的问题,是什么(What)问题,是是否有无(Whether)问题,还是多选单选(How)问题。
3 )动作
动作有主动作和次动作,如提交、保存、继续等为主动做,还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的,如“提交和取消”这对组合,在设计上如果这两个按钮大小一致,颜色突出主动作是最佳的动作组合设计,用户完成时间最少。交互动作还有进行中的动作,一般出现于动作需要一定时间处理(如Gmail登录)或者动作的导向情况(如fanli.qq.com导向到其他电子商务网站)。
3 表单交互
1)尽量让用户少录入
复杂的表单填写任务总是让用户烦恼不已,这一点尤其是新用户碰上了新产品上,而输入框中默认值(如邮箱后缀、日期时间等)是往往是最好的导师,尽量让用户较少录入,只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移,可以隐藏,也可以以后再加。
2)即时验证
表单往往是多个元素混合组成的,用户在填写表单需要即时告知用户录入信息是否正确、完整,省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整,可以即时告知用户错在哪里并重新录入。
4 读书小结
Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”,不知是否翻译有误,感觉此书应该是奉献给“每一位不得不设计表的人”,是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分,表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛,让产品有品质上档次,让用户又能轻松跨域,则是我们日常工作要不断尝试、不断反思、不断优化的。
建议继续学习:
- Web表单设计之注册表单 (阅读:7684)
- 高性能web服务器-读书笔记 (阅读:6815)
- Unix高级环境编程系列笔记 (阅读:4468)
- 网页表单设计摘要 (阅读:4387)
- jquery.form.js,JQuery表单插件 (阅读:4184)
- Web表单设计:表单结构 (阅读:3855)
- MySQL 应用小笔记 (阅读:3434)
- JavaScript中级笔记 (阅读:3410)
- 10个超棒jQuery表单操作代码片段 (阅读:3365)
- 防止表单重复提交的几种策略 (阅读:3406)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:阿石的日志 来源: 阿石的日志
- 标签: Web表单设计 笔记 表单
- 发布时间:2011-02-27 22:51:12
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则