IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

读《Web 表单设计》

阿石的日志 2011-02-27 22:51:12 累计浏览 3,302 次
本机暂存

     我们每天都会上网,无论是电子商务网站,还是各种 SNS 网站,都会碰到五花八门的表格要填写。表单是横亘在网站商业目标与用户需求的一睹门墙,前者需要高额的订单金额和转化率,后者则是真的不愿多填写一个表单,我只想得到我真正需要的。而产品经理或者设计师处理表单时,这要精心雕琢这门墙的情境。

    《Web 表单设计》就是这样处理这样情境的一本书,在总结以往表单设计失败案例基础上,将表单设计的指向”谁需要填写表单“、“用户为什么要填写表单”这样的问题本质上来?是由前Yahoo设计师 Luke Wroblewski ,他的官网是:http://www.lukew.com/

    这本书有以下三个部分:

  • 表单结构
  • 表单元素
  • 表单交互
  •     1 表单结构

        表单设计原则

  • 尽量减少痛苦――“不要让我思考”,“不要让我烦”,清晰流畅的浏览线,将注意力分散降到最低
  • 说明填写完成路径――让用户清楚如何实现目标,任务完成的进度提示
  • 考虑情境――表单填写的目标用户群,新注册用户,老用户?玩家?客户?还是智障用户?
  • 确保一致沟通――名词定义一致,如Tab键跳转等交互动作一致
  •     表单的内容及组织方式(标签、输入框、内容组)是表单的核心要素,而不是视觉和交互设计。表单设计的开始工作是“先考虑人”,考虑用户的真正关切,然后“再考虑像素”,考虑如何设计。设计表单可以遵循以下四个策略:

  • 保留――表单问题与用户期望给出大答案要一致。
  • 删减――不需要立即获取的用户答案信息可以去掉这个表单问题
  • 延迟――有些表单问题不需要马上就问,可以放到后续再问
  • 解释――比较棘手的表单问题可以向用户解释为神马,要让用户知道问的结果是给其带来好处
  •     2 表单元素

        表单不只是表格,它是由标签、输入框、交互动作等元素构成。

        1 )标签

        一般讨论最多是标签该如何对齐,由顶对齐标签、左对齐标签和右对齐标签三种对齐方式,她们都有其存在的必要,具体则依赖于设计的目标。

        顶对齐标签,标签和输入框自上而下的布局,是填写表单的最快捷实现方式,充分利用横向空间的各种组合,但其缺点是稍占用垂直空间。其中需要注意的是相邻输入框间距最好为其50%~70%输入框的高度

        左对齐标签,标签一致左对齐,和输入框拉开间距,便于用户自上而下看标签,而不用急于填充输入框,比较适合高级设置的陌生或较难理解的数据。

        右对齐标签,标签一致右对齐,标签和输入框横向间距最近,可以尽量减少垂直空间,用户填充速度居三者之中。

        2 )输入框

        输入框出现的目地是让用户可操作的组件,如文本框、单选按钮、下拉菜单等,如何使用各种不同的输入框,要看标签内容的问题,是什么(What)问题,是是否有无(Whether)问题,还是多选单选(How)问题。

        3 )动作

        动作有主动作和次动作,如提交、保存、继续等为主动做,还有如取消、返回、充值等为次动作。主动作和次动作往往是同时出现的,如“提交和取消”这对组合,在设计上如果这两个按钮大小一致,颜色突出主动作是最佳的动作组合设计,用户完成时间最少。交互动作还有进行中的动作,一般出现于动作需要一定时间处理(如Gmail登录)或者动作的导向情况(如fanli.qq.com导向到其他电子商务网站)。

        3 表单交互

        1)尽量让用户少录入

        复杂的表单填写任务总是让用户烦恼不已,这一点尤其是新用户碰上了新产品上,而输入框中默认值(如邮箱后缀、日期时间等)是往往是最好的导师,尽量让用户较少录入,只需动鼠标就完成表单填写任务。另外额外多余的问题标签可以后移,可以隐藏,也可以以后再加。

        2)即时验证

        表单往往是多个元素混合组成的,用户在填写表单需要即时告知用户录入信息是否正确、完整,省却用户时间并给用户带来循循善诱累积的成就感。一旦出错或不完整,可以即时告知用户错在哪里并重新录入。

        4 读书小结

         Luke 在本书在扉页上写着“ 谨以此书献给每一位不得不填表的人”,不知是否翻译有误,感觉此书应该是奉献给“每一位不得不设计表的人”,是写给产品经理、UI和交互设计师等行业工作者。表单是网页的重要组成部分,表单设计的重要性毋庸置疑。表单也是产品和用户中间的一条槛,让产品有品质上档次,让用户又能轻松跨域,则是我们日常工作要不断尝试、不断反思、不断优化的。原图已失效

    同分类推荐文章

    1. 如何写好设计文档? (2026-06-23 08:00:00)
    2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
    3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

    查看更多 设计 文章 →

    建议继续学习

    1. 120个优秀的水平导航设计 (累计阅读 75,626)
    2. 流程管理与用户研究 (累计阅读 17,053)
    3. 我的 Sublime Text 2 笔记 (累计阅读 16,729)
    4. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
    5. 看看各个网站的404错误处理 (累计阅读 10,208)
    6. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,199)
    7. 视觉注意力―解剖设计的根源 (累计阅读 6,970)
    8. 给想转行做产品经理的同学 (累计阅读 6,927)
    9. 可用性测试好助手——Morae软件的应用 (累计阅读 6,780)
    10. 在大公司和小公司做产品的区别 (累计阅读 6,075)