在我们的生活中，只要你睁开眼睛就能看到各种各样的视觉。不同的视觉能给你不同的视觉暗示，同样能给你不同的心理感受。视觉这个话题太泛了，大自然中无所不在，我们接下来主要谈谈在软件设计中视觉表达的准确性。

一、找对你的感觉。
      视觉设计首先要考虑的就是整体的感觉，即视觉设计的风格。视觉设计的风格是否准确关系着设计的成败。一个大家闺秀你不能把她打扮的象个婊子，当然这是对人的感觉；那么一个产品的视觉设计也同样需要一个对的定位，最终以合适的视觉表现出来。我们不妨以几种聊天软件来做个的比较，从中窥视一点设计定位的视觉意味。看下面一组图：

（从左至右为图一、图二、图三）

图一： QQ的视觉定位是以青少年为主的，所以它的视觉设计才采用了比较明亮活泼的色彩。
图二、图三：msn和TM的视觉定位是以办公室工作人员为定位，所以它的视觉使用比较稳定和平静的色彩。

      令我感到失望的是，新版的TM2008给我的第一感觉象QQ,不知道这是否违背了原来的视觉定位？现在的TM2008让我感觉不如直接用QQ算了！我还是觉的原来TM更适合办公室使用，我不喜欢在办公室用QQ，所以我个人排斥了TM2008。TM2008如下图：

——图四
通过上面的图四我们可以看出，设计中竟然还有很多原本属于QQ的视觉元素，我个人不认为这是个成功的定位。

二、视觉结构和层级关系。
      页面表现的层级关系和结构是用视觉的形式表现出来的，比如包含关系及业务的先后顺序的表现。让用户通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。就地取材，让我们来看下面的两张图：

——图五
wordpress博客的后台管理界面，我们可以看到清晰的从属关系：管理–>文章–>文章内的修改区域。

——图六
图六中，vista系统的界面：三个区域的层级关系一目了然   ，“1”区域要高出“2”区域，“2”区域要比“3”区域的颜色深，这样整体的从属关系就很明显：

——图七

当然我只是说明层级关系需要视觉表达，其中有很多的细节因素就不再次赘述了。

二、是什么就是什么，图形达意尽量明确。
      视觉元素在软件中都代表着一定的含义，什么样子代表什么都有其特定的视觉暗示，如果不是游戏，我们应该尽量避免和用户捉迷藏。例如应该用页签来表现的从属关系，我们不应该简单的做几个链接，这样会表达不清楚各部分关系。除此类的布局因素之外，图标的表达是软件视觉中的一大块，好的图形表达可以帮助用户直观感受功能，缩短操作时间，提高效率；不过表达不好可就麻烦了，用户可能要歪着脑袋想半天！

——图八
在图八中，箭头所指之处为刷新图标，上面那个刷新图为原来图标，下面的刷新图标是我随便做的一个假设。对于一个新手，下面那张图的刷新图标和后退图标显得太象了，意思区别不是太明确，会造成误解。就准确性而言，上面那个刷新图标更让我容易接受。我承认我这样说有点扣小节，我的本意是为了说明图形表达准确性。

三、明确你的视觉状态
      在软件里，软件视觉的状态主要用来表现对用户的行为反馈，在计算机pc环境里的软件，主要针对鼠标和键盘操作，理想状态是：用户的每个操作行为都应该有相应的视觉反馈，比如有没有选中，操作有没有成功等。仅按鼠标操作的状态分就有默认、鼠标指向、鼠标按下、鼠标点击四种状态，准确的反馈可以让用户流畅的感觉自己的操作；关于鼠标和键盘的状态，大家在操作系统的时候注意一下，就可以看到各种操作的对应关系，而我们平时是不太注意的，因为它默默的达到了设计的目的。站在是否可用的角度分有：可用状态、不可用状态.

——图九，本图为两种不同状态的视觉比较，不可用状态的灰色让我不再去点击。
状态的准确性可以可以避免用户误用不可用的操作而产生麻烦和浪费时间，这种情况我们可以通过一个视觉反馈轨迹图来看看操作的情况。

——图十
图十是我在为一个产品做用户测试的时候，所得到的反馈图：在没有选择文件的时候，移动文件是不可用的，视觉处理的时候却是可以点击的，再加上视觉顺序的不合理，大多数的用户总是直接点击“移动文件”，犯下错误之后才去选择文件，途中的虚线部分表示犯错之后又才去选择文件，重新来过。

四、请用准确的视觉来辅助信息反馈
      信息反馈一般有一下五种情况：成功、失败、询问、警告、错误\异常，我们用来对应的视觉辅助图要力求表现每种情况的准确含义，比如我见过有的软件用一个惊讶的表情来表示警告，但往往被误以为是询问或者出现了异常。一般的视觉表现如下图：

——图十一
图十一是我们在做gui设计时做的，基本按照通用的符号。

      当然，为了增加趣味性，我们可以允许任意表现形式或表情的存在，前提是你的表达要准确，不要有歧义，否则使用者的第一反映可能不是你要表现的，由于理解的歧义所带来的损失和挫折感会让用户感到厌恶。通过搜索找到一些图，组合起来对比一下：

——图十二
图十二中的第一张是我搜索到的错误表现图，想必大家都见过，如果你犯错的时候出现了，你会想到什么？第三张图的淘气鬼脸图，我以为我成功了；第四张图的表现让我以为是在警告。只有第二张图让我意识到我失败了，并且有趣味性。可见趣味性和准确性并不矛盾，我们在设计趣味性的同时，别忽略设计的准确性。

不妨分几个场景讨论一下：

1、导航区域，潜意识我会去点击。即便有下划线也是个“古老形式”的摆设，所以一般没有下划线；好的设计不仅满足点击，还满足视觉的层级关系。

2、整页全是链接，下划线成了可有可无的表现。象新浪、搜狐首页都是可以点击的，所以下划线的有无意义也就不大，猫扑在首页设计中就去掉了可有可无的下划线。（下图自上而下依次为：新浪、搜狐、猫扑。）

3、可以点击吗？别让我去猜！看下面的设计抓图，只有Google和百度的设计我没有疑惑，其他两个的设计我要自己去猜。

4、在超链接和文本混排的情况下，下划线更容易让我们去点击。

5、独立超链接，不加下划线不足以“明示”。

6、需要特别突出显示的链接，必要的时候使用“伪按钮”；关于伪按钮的问题，臭鱼在其接受伪按钮已阐述的比较明确，在此不再赘述。

说明：大家根据具体的环境而定，目的是让超链接更容易被潜意识的点击，避免过多的尝试和思考而浪费浏览者更多的时间。

附：超链接的作用
罗嗦一下基本概念，所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
超链接的基本分类：

a、按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。
b、如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

一、同比心

同比心的意思为“将心比心，换位思考”，在这里的意思为站在用户的角度去思考。此处说起来简单，做起来却是一个即重要又费心思的工作，它需要与用户进行充分的沟通。“充分”此词的分量很重，不但要把自己放在用户的位置上，理解用户的行为，充分的分析用户的需求及操作习惯、文化等；更甚至，能与用户生活在一起会更好，与用户随时沟通，一起体验。

二、视觉层次、从属关系简洁清晰

此处主要是视觉引导及暗示，让用户能够按照你表达的意图浏览，通过视觉就能够直接的明白应该先看什么，后看什么，元素时间是什么关系等等。此部分要求GUI设计师首先就应该自己弄清楚界面要表达的意图，然后把这些元素用符合业务逻辑和用户使用习惯的视觉形式表现出来。

三、行为的可视化

行为的可视化，主要是说行为要让用户有实在的感知。

四、少即是多

少即是多，此处的含义主要是：越简洁、越容易操作的软件，用户越容易接受，使用的人也就越多。
用尽可能简洁的设计来满足用户的需求，不给呈现给对用户没有用处的元素，避免给用户造成操作时的混乱或者干扰用户的使用。
李智先生有一个“砍、砍、砍”原则：即没有必要的，或可要可不要的，坚决砍掉。

五、视觉元素的一致性

视觉元素的统一性是GUI的一大特点，一个元素代表一个含义，不能一个元素代表多个含义，否则会造成视觉表现上的混乱。
视觉风格也要一致，不同用户的产品界面有相应的视觉表现，但所有界面的表现都要遵循一个视觉风格。注意，风格的一致并不意味着僵化。

[/size]
鸣谢：此内容为经验之谈，感谢李智先生对我此部分的指点。