本节主要讨论图形在界面中的设计与应用，下一节主要讨论图像在界面中的设计与应用，虽然图形和图像都是图片，但在开始之前，我们先要明确一下图形和图像的概念以及区别（如表3-1所示）。

表3-1 图形与图像的区别

图形，即我们通常所讲的矢量图形，也称栅格图形。如Illustrator﹑Freehand﹑Corldraw等软件制作出来的都是矢量图形。矢量又叫向量，是一种基于数学方式的绘图方式，用矢量方法绘制出来的图形叫作矢量图形。用矢量方法绘制的图形每个对象具有各自的颜色﹑轮廓﹑大小以及形状等属性。其造型最基本的元素是点﹑线﹑面，由这些基本元素的有机结合而构成的具有几何意义的形，被称为“图形”。绘图软件用点连接曲线和直线，由线定义的空间可以是空的也可以填上颜色。因此矢量图形具有以下性质。

1.可无限编辑对象

当用户在绘图软件中创建对象时，可做任意多次改变，就像在文字处理文件中处理文本一样。印刷之前都可随时改变。

2.不降低图像质量

对位图图像做任何操作都可能降低图像质量。如果旋转或缩放图像，需要重建图像中的所有像素，这总要损失一些信息。用户可对图形进行以上所有操作，而不会损失质量。

3.可无限缩放对象

图形可任意缩放，但仍具有很高的显示和印刷质量，如图3-25所示。

4.以可能的最高分辨率印刷对象

在任何打印机上，图形都能以机器的最高分辨率打印输出。而基于像素的图像有固定的分辨率，打印输出的分辨率不能高于图形分辨率。

5.对象文件小

基于矢量的图形文件通常以KB度量。而基于像素的文件则须具有足够高的分辨率才能达到可印刷的质量，故以MB度量。

图3-25

(a)矢量图形；(b)位图图像

3.3.1 图形的特征性质

在界面设计中，图形主要具有以下特征性质：形象性﹑抽象性﹑符号性。

1.图形的形象性

这种图形最大的特点在于它可以直现自然形态的美或者具体的行为内容，令人产生直观﹑具体﹑清晰﹑活泼﹑亲切﹑生动和信任感。图形以反映事物的内涵和自身的艺术性去吸引和引导用户，使版面构成或者按键使用语义一目了然，深受女性﹑儿童﹑病患的广泛喜爱。这一点在软件图标的设计中体现得最为明显，如图3-26所示。

图3-26

2.图形的抽象性

抽象图形以简洁单纯而又鲜明的特征为主要特色。运用几何形的点﹑线﹑面及圆﹑方﹑三角，以及虚实渐变等来构成，是对规律的概括与提炼，给用户的想象力留有一定的空间。

3.图形的符号性

在界面设计中，尤其是软件界面设计中，符号图形最为常见。当一种信息﹑现象﹑行为总是以一定的形态形象出现时，这些形态形象反映在视觉上就成了一种符号，它使人们把图形与某种信息或事物相关联，产生相应的联想和判断。它包含两方面的内涵：象征性和指示性。

1）符号的象征性

运用感情﹑含蓄﹑隐喻的符号，暗示和启发人们产生联想，揭示信息或操作的内容或主题（如图3-27所示）。

图3-27

2）符号的指示性

顾名思义，这是一种命令﹑传达﹑指示性的符号。在界面设计中，经常采用这种形式，以此引领﹑引导读者的视线和操作行为（如图3-28所示）。

图3-28

3.3.2 基于矢量图形的构成

1.点

点是矢量图形的最小单位，点的X﹑Y坐标定义了对象的形状和大小。点不可见，但它确实存在，并控制全局。创建一个对象至少需要2个点。角点和曲线点是两种类型的点。在连接点和线时，就有点的类型问题，为了修改矢量图形软件中的图形部分，则必须选择点。如果未选点，则不会改变图形。这是一种控制图形的有力方法，因为用户一次可修改图形的一个点。

如图3-29所示，未被选取的点不可见，但仍存在并包含信息。图中有几十个被选取的点。另外，被选取的点是可见的，并可被编辑或修改。

图3-29

2.线段

连接两点的线称为线段。线段可为曲的或直的。线段中点的类型决定线段的曲直。在曲线中，至少有一个点为曲线（Bezier）控制点。直线没有Bezier控制，或者Bezier控制将线段设置成直线。在矢量图形软件中创建的形状是由直线和曲线定义的。

Bezier控制是由曲线控制点（Bezier Control Points）操作的。一个点具有两个扩展的Bezier控制，这些控制不但控制线的形状，而且决定两条线相交时的性质。

角点不需要Bezier控制。对具有Bezier控制的角点，控制行为也相互独立。对于平滑点，Bezier控制是相连的。

学习矢量图形软件的捷径是理解Bezier控制对与其相联系的线的影响方式。Bezier控制点与原点之间的距离决定它对线的影响程序，同时，Bezier控制点与原点的连线及通过该点的线角度也影响线。

由两个Bezier控制得到的线更圆滑，它是定义曲线的最佳方法，因为用户可最大限度地控制线，如图3-30所示。

图3-30

3.路径

路径是一个或多个连接线段，所有的连接元素都在同一路径上。路径可以是开环的，也可以是闭环的。在开环路径中，起点和终点是分开的。在闭环路径中，起点和终点重叠。一般来讲，用户总希望使用闭环路径，因为填充更可预见，如图3-31所示。

图3-31

4.填充

路径和曲线段都可填充。直线也具有标识填充，但用户看不到。填充需有可填充的区域。在开环路径中，起点与终点间有一条不可见的线。在闭环路径中，填充区域为封闭的区域。填充是沿着路径关闭的区域进行的。若使用闭环路径，则易于预见填充结果。填充可为原色﹑专色﹑梯尺﹑图案，或什么都没有，如图3-32所示。

图3-32

3.3.3 矢量图形的使用范围

Icon（图标）：在界面应用当中，图标的使用十分广泛。

Logos（标志）：Logos需具有可缩放性﹑可移植性和保持一致性。

Stylized Type（特种字）：一般绘图软件和创建字体使用的语言相同，这使它们在编辑和增强文字方面是理想的。

Scalable Artwork（缩放原图）：只需一次性创建原图。无论缩放为海报尺寸还是邮票尺寸，质量都保持不变。

Traced Images（追踪图像）：使用基于矢量的软件，用户可以描绘位图图像，将其转换成美观的图形格式的原图等诸多领域。可以讲，基于矢量的图形在其他应用方面同样能够达到要求，只是用其他方法的效率可能会更高。

Natural Image（真实的图像）：在位图图形中，像素可具有不同的颜色。分辨率高达几百个像素/英寸[1]的图形可再现实际存在的细微层次和阶调变化。对于基于矢量的图形，需用独立的区域定义不同颜色（除了提供有限级别的梯尺和图案外）。假设使用模板生成相片质量的图像，这可以做到，但会浪费许多模板，且做一些无用功。

Complex Images（复杂图像）：在基于矢量的图形软件中，所有部分都需按数学方法定义。这并不意味着用户不能创建复杂图像，只是会花费很长时间。

Drawing（绘画）：尽管把基于矢量的图形软件称为绘图软件，但它们对和绘图概念相联系的自由及自然艺术表现风格的贡献不大。许多艺术家打开Freehand和Illustrator，费力地试图完成与徒手画图同样的工作。

Page Layout（页面编排）：Freehand和Illustrator的所有新版本都会增加许多页面编排功能。现在，软件支持表格设置﹑拼写检查和许多与页面编排软件相联系的功能。建议不要使用基于矢量的软件作为页面编排软件，这不是它们的优势；页面编排软件提供了更多的功能，帮助用户容易﹑有效地创建页面。试图在绘图软件中做页面编排是不明智的。

3.3.4 图标设计

1.定义

在界面设计出现之前，图标设计并没有被单独提出来，图标出现在软件界面中还是不久之前的事情，但今天图标设计已经成为图形设计的主要内容之一，它通常被认为是诸如文档﹑存储介质﹑文件夹﹑应用程序以及垃圾桶等对象的图形替代物。

从某种角度来说，图标有点类似标志﹑徽标，因为无论是图标还是徽标，一旦出现，总是希望能够被观者识别并且记住。

图标与徽标的区别在于，图标更多采用直观的比喻，讲究一目了然（如图3-33所示）；而徽标更喜欢象征，追求图形的象征意味（如图3-34所示）。

图3-33

图3-34(www.daowen.com)

图标是一个极度限制中的设计。为了在桌面上排列整齐划一，图标通常都是正方形构图，同一位置的图标都有同样长宽的尺寸；尤为突出的是图标的尺寸都特别小，Windows最大的图标的像素不过64×64，Macintosh最大的图标的像素则为128×128；再就是根据所支持环境的不同，图标还会有l bit﹑4 bit﹑8 bit﹑16 bit﹑32 bit等不同的色彩深度。可这些也都不是在徽标设计中所必须面临的问题。

2.类型

图标有以下几种不同类型。

程序图标（Application Icons）指的是那些在桌面上能够单击﹑选择﹑任意移动，双击则执行命令的图标。

工具栏图标（Toolbar Icons）指的是那些位于工具栏，通过单击选择该工具，然后在画面可以进一步执行命令的图标。

按钮（Button）指的是那些位于面板上，形似现实生活中按钮，单击就可执行命令的图标。

当然还可以有其他不同的划分方式。以操作系统的不同，比如大致划分为Windows图标和Macintosh图标；就某一操作系统而言，又可分为系统图标和应用程序图标；等等。

3.图标设计要点

图表设计是界面设计中非常生动的部分，不少相关书籍和文章把太多的注意力投入设计过程﹑设计手段，而对其科学性的部分关注不够。纵观当今的图标设计，有以下常见问题：

●图标设计以美学为向导。设计师太多地关注图标的外观效果，而很少关注为何选择这个内容以及怎样选择内容。

●图标设计以设计师为向导。图标内容的选择以设计师自己的喜好为标准，较少关注用户感受。

●图标设计各自为政，属于单干行为，同一系统的图标之间缺乏关联性和相似性。

1）图标的识别性

图标不同于一般的图形，它要具备强烈的视觉识别功能，图标出现和存在的价值即为了让人们识别。所以图标设计中，形式美并不是关键的，能不能准确地被识别才是设计师的第一目标。好的图标要么是功能一目了然的；要么用户可以通过学习明白图标的意思，并且能够引领所有类似的工具都使用一样的绘图语言。

如下面的图标（图3-35～图3-38）都能被明确地识别为垃圾桶，因为其外形同所指代的功能在用户看来都是一致的；用户可以清楚地理解将文件拖拽至垃圾桶代表将文件删除，其中图3-35～图3-37表示垃圾桶为空，代表没有文件被删除；图3-38表示垃圾桶内有废纸屑，代表此时已存在部分被删除文件。

图3-35     

图3-36    

图3-37  

图3-38

图标一旦变成范例，它就不可动摇；有些软件开发者可能会试图改变设计，但几乎要冒着令部分用户无法理解的危险。

过分简洁的符号会导致无法被理解。即使用户曾经知道意思，时间一长，也留不下多少印象。如果图标中不具备唤起记忆的要素，要想通过表面视觉形象去猜测图标的意思就比较困难了，有时甚至会打消用户的使用欲望。

图标发展的趋势应该是描述精确﹑形象化﹑生活化。利用传统的语汇是为了向用户表明，新技术其实也可以是他们所熟悉和能掌握的。如图3-39所示，电话的图标表示了一个与网络打电话相关的命令图标，很形象，而图3-40是著名的刻录软件NERO的开始命令图标。

图3-39

图3-40

当我们在经验图像上加入其他功能时，一定要加倍小心，因为用户的经验是延续的﹑有惰性的，它经常会和所加入的新功能产生冲突。我们在选择隐喻对象的时候一定要慎重，好识别的图标对用户使用某个功能强大的系统大有裨益；容易引起歧义的图标，即便有好看的外相，甚至哪怕有一定的可比性，那也是差之毫厘﹑谬以千里。

2）一致

图标的一致性表现在以下三个方面。

（1）同一图标家族。

根据前面的介绍，图标要根据具体应用环境，设计出不同尺寸以及色彩的图标家族成员，然而尺寸以及色彩的变化，使保持图标外观的一致成为一项艰难的工作。但不管怎样，大图标和小图标看起来要相似，彩色图标和黑白图标也要感觉差不多。这样，用户在不同的显示环境下，才可以正常使用软件。具体来说，应从色彩深度高的大图标开始设计，再根据具体要求，弱化一些不重要的内容，删减一些无法保留的内容，强化图形中一些结构方面的因素，使各种版本看起来差不多。图3-41是一组DVD播放器的图标，相关的形态和不同色度的变化，很容易识别出它们的家族性。

图3-41

（2）同一系统的不同图标之间的风格一致。

图3-42所示是OSXP系统的一系列工具图标，它的图标之间非常相似，所有图标背景采用相同的色彩——灰白色，采用相同的方形形态构成。在此基础之上，形象生动地加入不同的命令图标，既保证了图标间的关联性，也便于不同的命令之间的识别操作。

图3-42

（3）应用程序和操作系统的图标之间尽可能一致。

每一次操作系统更新也是应用软件更新的时候，软件开发商不仅在功能上升级，同时在图形界面的风格上也是不遗余力地追求和操作系统的一致性。这样做的目的也是力求用户能够在完美和谐的环境下工作。如图3-43所示是Icompack的图标设计，不难看出，在图标的设计上与Windows操作系统保持了相当的一致性。

（4）兼容性。

图标的兼容是指图标在不同的文化语境下都可以识别为同样的内容和意义。文件夹﹑垃圾桶﹑画笔等都是目前广泛应用﹑隐喻效果良好的典型范例。

图3-43

在一种文化语义下理解的事物到了另一种文化语义下就可能不被理解，或者被理解成其他的含义。有研究表明，用一根根短线螺旋所形成的图形，在很多地方都被理解成旋转楼梯，而在非洲某些没有旋转楼梯语境的部族则可能理解不了，他们可能会觉得是羊角之类的东西，如图3-44所示。在中国的文化背景下，鱼可以理解为年年有余，是富有的期望，在其他文化中，就会觉得中国人的这种联系很奇怪。即便在同一文化背景下，也会因为次级的语义环境而产生不同的理解。

图3-44

所以在设计图标的时候，要充分考虑到各种用户在理解上的差异，要确保不发生理解上的困难和偏差。

（5）避免文字。

尽量避免在图标中使用文字，图标中的文字会让人感到不知所措，不能实现跨文化的交流。图形的特点在于它的直观性，它通过模拟已有的东西，让用户得以凭借经验和通过简单的视觉对比就可以认知图形所代表的内容和含义。而语言则不然，因为世界各地甚至同一国家使用的语言都不太一样，所以在母语国家看来容易理解的文字，对其他国家或地区的人们来说不啻为天书，更不要说即便在母语国家，还存在文盲等有文字认知障碍的人。

图3-45﹑图3-46分别为豪杰超级解霸图标﹑Yahoo图标。两个图标都使用文字作为图标内容，对于不认识中文的用户来说，如果不认识“豪杰”两个字，一切无从提起，甚至即便认识，也无法判断这是一个播放软件（有经验用户除外）。而对于Yahoo图标中的字母“Y”而言，初次使用的用户很难把它和搜索功能联系到一起，英文单词中以Y开头的字母太多了。

图3-45

图3-46

（6）为显示而设计。

图标的设计应用目前主要集中于软件界面﹑系统界面﹑网页界面等领域，这些领域大部分是通过显示器的显示来与用户进行交流的。所以，图标应当在当前显示器分辨率下看起来比较好。因为平面是通过一个个像素点来显示图像的，所以水平或垂直的直线以及45°或135°的斜线具有较好的显示效果，曲线的显示效果不太理想，不规则的像素排列会形成锯齿状，影响线条的流畅感。

所以，在设计图标时，先了解一些像素绘图的知识是非常有必要的。这是因为图标最终都是像素效果，尽管通常图标设计师喜欢利用Illustrator﹑Freehand等矢量图形软件来设计造型，但最终还是少不了用Photoshop这样的位图软件来修饰，从而避免那些在屏幕显示中由于像素堆积而导致的显示效果不佳的问题。正如组成汉字有基本的点﹑横﹑竖﹑撇﹑捺等笔画一样，在像素画中也有规范的笔画，我们称之为基本线条。在像素画中，笔画是非常讲究的，并不是所有的笔画都可以用的，如果没有使用恰当的笔画，往往会导致像素的边缘粗糙。每种特定线条都是根据像素特有的属性排列而成的，并且广泛运用于各类像素画的绘制中。很多人画像素画时总感觉边缘粗糙，主要就是由于线条使用不当造成的。

●基本线条。

最基本的线条就是直线﹑22.6°的斜线﹑30°的斜线﹑45°的斜线以及弧线等。画线条的工具一般为Photoshop中的铅笔，当我们选定铅笔工具的同时，还要设定笔头的形状，通常选定笔刷中的方笔头。在正稿中，尺寸要提前设定好，如果以后改变尺寸，由于间插的原因，会使边缘产生渐变像素。

●直线。

直线是图标显示中最完美的线条，可分为水平线和垂直线。由于直线有静止感，所以太规矩的水平线和垂直线会使得画面显得呆板不活泼，通常在设计图标的时候应尽量避免过多使用。

在Photoshop中选中1像素的笔刷的铅笔，同时按住Shift键，拖动鼠标就可以准确画出直线来，如图3-47所示。

图3-47

●斜线。

斜线有22.6°（含67.4°）的斜线﹑30°（含60°）的斜线﹑45°的斜线三种，在其数字上加上90°又得到垂直镜像的三种线条：112.6°（含137.4°）﹑120°（含150°）﹑135°，如图3-48所示。

图3-48

斜线必须一个像素接一个像素地“点”出来，所以经常要考验我们的耐心。选取铅笔工具并选择1像素的笔刷，在Preference将格子的宽度设为1Pixel，在Photoshop中设定好十字格以及坐标辅助线，并将Snap设置为Guides，就可以方便地爬格子了。

●弧线。

直线造型的方式毕竟有限，在很多情况下，我们都需要使用弧线。因为弧度有大有小，因此弧线画法有很多种。选取铅笔工具并选择1像素的笔刷，分别以像素3—2—1—2—3﹑4—2—2—4﹑5—1—1—5的弧形排列，其排列具有一定规律性以及对称性，如图3-49所示，此类线条较常用于人物头像﹑动物的绘制。

图3-49

[1] 1英寸=25.4毫米