视觉对交互的帮助——提升可用性

作者:飞飞 来源:Taobao.com UI Team 时间:2008-10-16 13:16:00 

在整个产品设计的过程中,视觉设计与交互设计的“工序”非常紧密,两者关系也是相辅相成,互相影响。而视觉界面作为最直接与用户交流的层面,如何把交互设计以良好表现形态展现给用户,这里主要集中探讨视觉在提升交互的可用性方面的作用:

  1. 提升可浏览性

  2. 精确与高效地传递信息与任务

  3. 贴合用户的心智模型

  4. 让交互富有情感

1.提升可浏览性:

1)信息结构的良好表现

视觉设计在对交互的帮助中,首要满足对产品与交互信息结构的展现,展现信息的清晰可读性,然后才是品牌,情感的传达。视觉语言可以通过分层,分类,对比等语言手段对产品概念及信息进行处理。
例:


pic.01


pic.02

对上面两图进行对比,同样都是文章详情页面,相信没有多少用户在浏览pic01时能快速准确地知道网站想给他什么信息,或者让用户做什么。信息主次的分布,层级,色彩,均无做好有效分布,用户一边迷惑,一边迷路。而pic02对内容按主次程度来划分,最重要的文章详情信息一目了然,结构有序,条理清晰。

我们能感受到视觉语言的有效干预,能对信息结构的展现起到很大的帮助作用。

)增强信噪比

信噪比(Signal to Noise Ratio)又称为讯噪比,原义是电声学里输出信号的电压与同时输出的噪声电压的比。

一般来说,信噪比越大,说明混在信号里的噪声越小,否则相反。类比到界面设计中,有效的视觉元素就是信号,而其他干扰元素,就是噪音。

界面的噪音是由多余的干扰信息造成的,会分散用户注意力,使用户不能把注意力集中到直接表达产品功能和行为的元素上,导致给用户带来认知压力和妨碍导航的速度和精确度。不合适的字体,表义不明确的ICON,不必要的装饰等等,都是界面噪音。在视觉设计中如果保持最高的信噪比来展现信息,能增强界面的可浏览性。换句话说,如果去掉这些次要的或者干扰的设计元素,并没有使功能有所影响,那强烈建议缩小这些元素的应用比例,或者直接去掉!
例:


pic.03

图pic.03中原本需要表述的几个柱状数据信息,结果被埋藏在一堆花哨,文字信息堆杂的背景中,典型的信噪比过低。

标签:交互,设计,视觉,用户
0
投稿

猜你喜欢

  • SQL处理多级分类,查询结果呈树形结构

    2012-08-21 10:50:12
  • 用CSS实现柱状图(Bar Graph)的方法(四)—table实现复杂柱状图

    2008-05-28 12:55:00
  • 如何解决客户机页面刷新时连接不上数据库问题?

    2009-12-16 18:24:00
  • SQL Server 2000中生成XML的小技巧

    2009-02-13 17:12:00
  • Christopher Schmitt 谈学习CSS的益处

    2008-07-13 14:15:00
  • JavaScript程序编码规范[译]

    2009-07-20 17:54:00
  • ASP+Access数据库安全设置方法小结

    2011-04-02 11:09:00
  • sql语句返回主键SCOPE_IDENTITY()

    2011-09-30 11:28:45
  • 学以致用驳ASP低能论

    2007-08-22 14:47:00
  • 不用script仅用css编写无限级弹出菜单

    2008-04-24 14:03:00
  • 别开生面:纯CSS实现相册滑动浏览

    2008-06-26 13:24:00
  • XML入门精解之文件格式定义

    2008-02-25 13:57:00
  • 常用ASCII 码对照表

    2007-08-21 14:35:00
  • 擦亮自己的眼睛去看SQL Server之历史渊源

    2011-08-29 15:40:53
  • 如何编写一个只在Web服务关闭时执行的程序?

    2009-11-08 19:03:00
  • Response.Flush的使用心得

    2010-04-08 12:57:00
  • PHP使用laravel邮件服务发送邮件

    2023-05-25 03:48:23
  • IE6/7关于 Absolute Position 、relative 的一些意外

    2008-11-27 11:34:00
  • Oracle客户端 NLS_LANG 的设置方法

    2012-07-11 15:55:27
  • 网站设计做好超级链接的重要性

    2007-09-14 11:19:00
  • asp之家 网络编程 m.aspxhome.com