视觉对交互的帮助——提升可用性
作者：飞飞 来源：Taobao.com UI Team 发布时间：2008-10-16 13:16:00
在整个产品设计的过程中，视觉设计与交互设计的“工序”非常紧密，两者关系也是相辅相成，互相影响。而视觉界面作为最直接与用户交流的层面，如何把交互设计以良好表现形态展现给用户，这里主要集中探讨视觉在提升交互的可用性方面的作用：
提升可浏览性
精确与高效地传递信息与任务
贴合用户的心智模型
让交互富有情感
1.提升可浏览性：
1）信息结构的良好表现
视觉设计在对交互的帮助中，首要满足对产品与交互信息结构的展现，展现信息的清晰可读性，然后才是品牌，情感的传达。视觉语言可以通过分层，分类，对比等语言手段对产品概念及信息进行处理。
例：
pic.01
pic.02
对上面两图进行对比，同样都是文章详情页面，相信没有多少用户在浏览pic01时能快速准确地知道网站想给他什么信息，或者让用户做什么。信息主次的分布，层级，色彩，均无做好有效分布，用户一边迷惑，一边迷路。而pic02对内容按主次程度来划分，最重要的文章详情信息一目了然，结构有序，条理清晰。
我们能感受到视觉语言的有效干预，能对信息结构的展现起到很大的帮助作用。
）增强信噪比
信噪比（Signal to Noise Ratio）又称为讯噪比，原义是电声学里输出信号的电压与同时输出的噪声电压的比。
一般来说，信噪比越大，说明混在信号里的噪声越小，否则相反。类比到界面设计中，有效的视觉元素就是信号，而其他干扰元素，就是噪音。
界面的噪音是由多余的干扰信息造成的，会分散用户注意力，使用户不能把注意力集中到直接表达产品功能和行为的元素上，导致给用户带来认知压力和妨碍导航的速度和精确度。不合适的字体，表义不明确的ICON，不必要的装饰等等，都是界面噪音。在视觉设计中如果保持最高的信噪比来展现信息，能增强界面的可浏览性。换句话说，如果去掉这些次要的或者干扰的设计元素，并没有使功能有所影响，那强烈建议缩小这些元素的应用比例，或者直接去掉！
例：
pic.03
图pic.03中原本需要表述的几个柱状数据信息，结果被埋藏在一堆花哨，文字信息堆杂的背景中，典型的信噪比过低。
0
投稿猜你喜欢
- 迭代器模式迭代器模式（Iterator Pattern）是一种常用的设计模式，用于遍历集合中的元素，不暴露集合的内部结构。迭代器模式将集合和
- 1、前言 MySQL 是完全网络化的跨平台关系型数据库系统，同时是具有客户机/服务器体系结构的分布式数据库管理系统。它具有功能强、使用简便、
- <div id="d1"></div> <script > fu
- 晚上突然间看到大猫的头像在闪动，速度打开一看，发现他问，以前我写button标签的时候有没有写type属性，老实的我只有诚实地告诉他，我没写
- 一.权限表mysql数据库中的3个权限表：user 、db、 host权限表的存取过程是：1)先从user表中的host、 user、 pa
- 浏览网页的时候经常会碰到一些不认识的英文单词，或者想知道一些中文单词的翻译，这时候再去找翻译软件或者翻译网站就有些麻烦了。因此我做了一个“中
- 总结了部分所学、所听、所看、所问的一些CSS写作经验，书写高效的CSS - 漫谈CSS的渲染效率，它们与渲染效率及所占用
- '*****************************************************************
- 用IIS调试ASP程序时，有的页面可以显示出错行及出错原因，虽然原因不是很具体但足以引导调试程序，但有些时候就直接出现：HTTP 500 -
- 有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫
还是一个关于checkbox的一个普通的效果，就是根据你勾选的checkbox,列出你选择了哪些值演示代码：<!DOCTYPE htm- 使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。具体制作步骤如下：1、
- 在ASP的实际操作中，总会发生这样的情况，如在银行，从我的帐户往费文华的帐户划款，我的帐户显示已经划出，但因银行的系统出现故障，导致费文华帐
- 复制代码CREATE FUNCTION fGetStrBySplit ( @Source VARCHAR(max), @Index INT,
- 这个分页使用的是0游标，也就是Rs.Open Sql,Conn,0,1。但是感觉也快不了多少，10万条数据的分页时间300多豪秒之间。风格A
- 这周心血来潮，翻看了现在比较流行的几个JS脚本框架的底层代码，虽然是走马观花，但也受益良多，感叹先人们的伟大……感叹是为了缓解严肃的气氛并引
- 接下来我利用一点空余时间发一个函数里面包含和添加和删除功能。实验的架构可以使用IIS.5WEB服务器ACCESS数据库。这个我其实不用说的很
- 层的八条定律当然，这些并非真正的定律，而只是一些有益的忠告，使你免陷于使用层时可能的困顿中。原来有九条定律的，我们精简掉一条，还有下面的八条
- 对于注入而言，错误提示是极其重要。所谓错误提示是指和正确页面不同的结果反馈，高手是很重视这个一点的，这对于注入点的精准判断至关重要。本问讨论
- 有时候我不需要网络立即执行更改的数据。请问如何做到？ 用下列办法即可延时执行：<％@import&
