6.1.1 界面设计资料文件与下载

随着数字传播领域的不断扩大，几乎所有优秀的系统设计和成功的多媒体产品都必定涉及到友好的交互界面。交互又称人机交互，交互界面又称用户界面，是人们通过互动获得信息的媒介与模式。简单、自然、友好、一致是友好界面的基本特征。

界面设计强调交互性过程。一方面是物的信息传达，另一方面是人的接受与反馈。

现代设计已经从功能主义逐步走向了多元化和人性化。今天的用户纷纷要求表现自我意识、个人风格，反映在界面上亦使界面越来越丰富。一方面要求界面信息齐全、高效；另一方面又要满足人们的审美和情感需要，实质是界面要求被赋予人的情感进行沟通交流。

界面提供人们一种信息暗示，不同的界面风格体现一定的内容特征，与内部信息形成内在的联系与呼应，在设计网站界面时，考虑网站的属性与个性，不同的界面传达了特定的信息。人性化的交互体现为交互过程中得自然舒适、获取信息直接有效。设计中注重对用户交互心里的研究分析，注意对重要信息部分进行形式、色彩以及排列方式的分析，使人们在打开界面的第一时间就能够自然地点击交互。

图5-1苹果的操作界面，自然的交互源自人性化的图标以及界面整体设计

  semillero的交互网页设计从一粒种子开始，点击它开始发芽生长，每到一定阶段会有一个标签掉落在枝条上，点击标签出现相应的文字信息和动画。枝条一直向上攀升，当攀升到一定阶段，枝条上结出粉色的手状花苞，此时点击标签，花朵盛开，有蜻蜓嗡嗡飞过，点击向上，枝条上结出红色的心脏果实，夜空变成深蓝色，有星星聚拢成文字在天空中闪闪发光。（见图5-2）

回顾历史我们会发现，早期的数字界面都是基于文本的。对用户来说，文本命令的掌握复杂而困难，文本界面既不美观也缺乏效率，如果将它们换成图形，就会直观很多，理解起来也轻松有趣。正因为如此，当昨天的文本界面演变成今天的图形界面时，数字技术才真正打破了交互的壁垒，成为日常生活中不可缺少的一部分。

无论操作软件还是浏览网站，用户都是为了获取或传播相应的信息。每天充斥着我们感官的大量资讯并不是信息，只是零散的数据，对沟通交流而言毫无用处。数据必须被组织转化并构建一种有意义的形式表达，才能达到为人理解为人所用的信息价值层面。图形界面的出现极大地提升了人机交互的效率，而界面上的图标发挥了至关重要的作用。图标是一种包含特定语意的图形符号，通常具有一定的指示性。在数字界面中，图标既可以代表某个功能，也可以代表某个数据。（见图5-）

图5-2 semillero交互网页设计，http://www.semillero.net/

图5-3 网站上下文广告图标 俄国turbomilk公司 http://turbomilk.com/

信息与数据的根本区别在于数据构筑的信息对用户是否产生意义。将数据转化为信息的过程就是在数据之间发现联系和模式的过程。因而，设计符号的创造过程就是将数据组织为有意义的结构或模式并以适合的图形形式表达出来，用户图形界面充分考虑信息、用户、以及所处的环境之间的关系，将界面转化为有意义的艺术符号，有效促进用户对信息的理解和记忆。

图5-4 google地图中的图标设计

通过与其他视觉元素一起构建出整个界面的视觉隐喻，图标极大地提升了人机交互的效率。原本在文本界面需要使用冗长的文字才能表达的信息，在图形界面只需要一个图标就可以代表。更重要的是，文本界面中指令式的操作逻辑可通过使用图标转化成某种视觉隐喻，从而可以被更多的人轻松地理解和使用。如垃圾桶的图标，不言自明，是放置不要的文件。

图5-5 图标

在用户操作图形界面时，隐喻的构建离不开图标自身视觉语意的表达。只有当用户正确理解了这些视觉语意之后，才能以正确的方式与系统互动。因此图标设计的优劣直接关系到人机互动的成败。好的图标设计必须满足两个层面：

一是识别层面，即图标的视觉设计是否符合传达的需要，是否清晰可见，是否美观；二是语意层面，即图标所表达的含义是否能够合理地表现视觉语意，用户能否正确地理解图标的含义。

数字界面既然需要通过屏幕显示，界面上图标的设计就不会简单等同于图形设计。除了一般的图形设计的要求外，图标的设计还必须考虑屏幕显示的特点。有时候为了丰富视觉效果，一些图标可能会采用一定的动画形式。在多媒体交互界面中，图标需要响应用户的操作，考虑用户操作前后图标状态的变化，如文件夹的打开和关闭。一个完整的图标一般具备三个状态，鼠标离开，鼠标经过，鼠标按下。同时需要为一个图标设计多个不同尺寸和颜色的版本，使之能应对显示设备分辨率的变化。一个应用程序的界面中可能会使用许多图标，从传达的角度来看，这些图标必须统一设计，并且形成统一的视觉风格。

图5-6 系统图标设计 俄国turbomilk公司 http://turbomilk.com/

图标作为界面上的视觉元素，如何被用户解读，是设计时必须仔细考虑的问题，人机交互时，错误的理解会引起错误的操作，甚至导致严重的后果。

在为图标构建语意时我们可以采用二种基本的方式：基于符号形式的相似性隐喻；基于符号意义的相似性隐喻。

基于符号形式的相似性隐喻是对现实世界中的一切物质和现象的直接指代，是指将所要表达的事物直接用图标描绘出来。一般说来，直接指代表达的关系比较简单直接，所以容易被用户理解，适应面较广。地球、山水、动物等，人工产物如垃圾桶、文件夹、光盘等。

图5-7 教育类网站图标设计http://turbomilk.com/  

基于符号意义的相似性隐喻是指从隐喻对象包含的意义指向出发，是指通过本体和喻体所指涉的功能意义的相似性，使用语言图形来对某个事物进行映射表达，其解读有赖于用户对约定事物的理解。比如：Photoshop软件界面中的剪切、拷贝以及粘贴图形，就像使用现实世界中的剪刀和胶水进行图文剪贴一般。

图5-8 经济类网站的图标设计http://turbomilk.com/

在设计图标时要注意，一旦使用了一个适合表达该功能的隐喻对象，不要轻易改变它。比如文件夹、文档等这些系统认可的隐喻，可以用多种手段来丰富文件夹的视觉表现，而没必要放弃这一喻体转而诉求别的喻体。因为当喻体一致时，用户凭借经验很容易推测其意义，比如：放大镜+白纸是打印预览；放大镜+文件盒对应的功能是“信息检索”。