技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 设计思想 --> 读《Web 表单设计》

读《Web 表单设计》

浏览:2239次  出处信息

     我们每天都会上网,无论是电子商务网站,还是各种 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. Web表单设计之注册表单    (阅读:7684)
    2. 高性能web服务器-读书笔记    (阅读:6815)
    3. Unix高级环境编程系列笔记    (阅读:4468)
    4. 网页表单设计摘要    (阅读:4387)
    5. jquery.form.js,JQuery表单插件    (阅读:4184)
    6. Web表单设计:表单结构    (阅读:3855)
    7. MySQL 应用小笔记    (阅读:3434)
    8. JavaScript中级笔记    (阅读:3410)
    9. 10个超棒jQuery表单操作代码片段    (阅读:3365)
    10. 防止表单重复提交的几种策略    (阅读:3406)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1