交互设计实用指南系列(5) – 突出重点,一目了然(4)

作者:宗羲 来源:taobaoUED 时间:2010-01-11 21:05:00 

关注于用户的主要任务流

关注于用户想要的,而不要强迫用户查看、理解与操作无关的事情,是关于“突出重点、一目了然”的UCD方 * 的延伸。这个想法,解决了什么元素该被“突出重点”从而达到界面“一目了然”的问题。从用户角色到场景,到任务流,可以决定每个界面——也就是任务流上的节点最重要的元素是什么。加之融合商业目标,即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子: 这是个书籍的搜索结果页面。

我们能够发现,这个页面觉得凌乱不堪。各种大小,各种颜色,各种粗细的字体混杂在一起,眼花缭乱。就像《气球》这首歌唱的:

黑的白的红的黄的
紫的绿的蓝的灰的
你的我的他的她的
大的小的圆的扁的
好的坏的美的丑的
新的旧的各种款式各种花色任你选择

说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD(或者是其他方式)分析出,这个书籍的结果页,用户需要这些信息:

  1. 书籍内容。这本书标题是什么,是关于什么的?

  2. 书籍评价。这本书好吗?别人对它的评价如何,这些评论可信么?

根据这个目标,重新设计后的结果如下:

我们可以看到,这本书内容和评价都一目了然,信息结构利于扫描和比较。重要的信息大而具有色彩,次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结

本文描述了什么是“突出重点,一目了然”。如何测试页面是否“突出重点,一目了然”,以及如何达到“突出重点,一目了然”。 有句话我挺喜欢,作为结局吧。在《What’s Next in Web Design?》中说道的:

“Simplicity is when someone takes care of the details.”

“简单而不简陋!”(谢谢青云给出的翻译!)

我们所追求的界面或者功能做得简单,不是粗制滥造,而是需要把下在创造更多无用的功能的功夫转变到现有功能的细节上。做出来东西容易,但是把东西做好做精难啊!

标签:交互设计,指南,设计
0
投稿

猜你喜欢

  • 如何用变量实现群聊和悄悄话?

    2010-05-19 21:33:00
  • Dreamweaver虚拟在线试衣室

    2009-07-05 18:54:00
  • 修复 jQuery 中 isFunction 方法的 BUG

    2010-01-25 12:05:00
  • 10分钟学会Google Map API (二)

    2009-06-07 18:14:00
  • css教程–十步学会用css建站(全)[翻译]

    2008-06-05 18:35:00
  • 网站设计中的面包屑[译]

    2009-03-22 15:42:00
  • 2个asp防刷新程序代码

    2008-09-28 21:16:00
  • 从算法入手讲解SQL Server的典型示例

    2008-12-18 14:51:00
  • 使用SQL Server 2008管理非结构化数据

    2009-01-08 15:28:00
  • MySQL表设计优化与索引 (三)

    2010-10-25 20:05:00
  • Oracle 存储过程加密方法

    2009-10-23 18:02:00
  • 关于字体的一些思考

    2008-03-03 12:53:00
  • Dreamweaver2004 中文乱码解决方案

    2007-01-31 10:20:00
  • 在ASP中使用SQL语句之5:开始执行

    2007-08-11 12:36:00
  • 来看看如何防止采集

    2007-08-19 20:11:00
  • 关于Javascript的内存泄漏问题

    2008-04-15 07:46:00
  • 利用ajax制作在线翻译聊天室

    2007-12-28 21:44:00
  • 牢不可破的九宫格布局

    2009-07-24 12:40:00
  • 使用sp_xml_preparedocument处理XML文档的方法

    2011-09-30 11:56:15
  • 十几行的超简日历组件(兼容FF)js源码

    2010-08-08 08:49:00
  • asp之家 网络编程 m.aspxhome.com