图形的设计与编排在多媒体界面设计中的应用研究

彭海胜

[摘 要] 图形是艺术的一种非常重要的表现形式，在界面设计中起着非常重要的作用。计算机中图形是数字化的，在多媒体系统中的图形有两种类型，一种是矢量图，一种是位图。图形的设计与编排目的是让界面看起来更加美观，有利于对所浏览的内容及知识点的理解及分析。随着时代的发展，人们对界面设计效果的要求越来越高。如何使界面设计具有感染力和视觉冲击力，以及图形在界面设计中扮演什么样的角色，值得探讨和分析。

[关 键 词] 图形；设计与编排；界面设计

[中图分类号] G712 [文献标志码] A [文章编号] 2096-0603（2018）20-0080-04

一、引言

图形顾名思义就是指所有的图和形。图形的概念可以有多种理解。广义地讲，图形包括图像，图形指的是能够在人的视觉系统中形成视觉印象的客观对象，包括各种自然景物，各类照片、图片、图纸、图像，用数学方式描述的景物形态，荧屏和银幕上显示的画面等。

在制作多媒体作品中，设计师都会使用一些图形，这可以产生直观感、立体感。因此，图形在多媒体界面设计中具有十分重要的意义。

图像相比文字，更具体直观，能为观者提供具体的形象，有研究表明，利用示意结构图等简化的图像形式能够更有效地传达画面上的信息。另外图形在界面设计中还起到重要的修饰美化作用。图形作为其他指代符号，用来辅助表示界面的结构、帮助以及操作等信息。

二、图形素材的收集与加工

图形素材的收集，主要有两种途径，一是用软件进行绘制，一是借助于网络进行下载。不过借助于网络所搜集到的图片很多时候不可直接利用，须借助于一些软件进行优化处理，其目的是为了让图片跟设计较为搭配。平时所用的一些关于图形图像加工的软件也有不少，可以借助于电脑本身自带的一个“画图”工具；或者还能够借助于标准的关于绘制图片的软件，比如说Photoshop、CDR及其他一些绘图软件。

三、图形图像的格式

随着技术的进步和网络的发展，我们早就告别了只有文字的网络时代，同时，随着网络传输速度的不断增加，越来越多的图片在界面中出现。对设计者来说，JPEG、GIF等名词并不陌生，但是它们之间是有一定的差别的，很多情况下必须使用特定的图片格式才能达到理想的效果，图片主要有下面几种常见的格式。

四、界面设计中图形的视觉元素

在多媒体界面设计中主要的视觉要素一般有这几种：背景图片、照片、剪贴画、形状、按钮、动画等。

（一）背景图片

人们在观看多媒体作品的时候第一眼看见的就是它的背景，因此在选择背景图片或图形的时候，既要考虑到是否符合作品的主题，还要考虑到颜色是否过于鲜艳或沉闷。图形与背景是对比是和反衬的关系。也就是说，界面上的背景不应太过烦琐或复杂，图像与背景的图案或色彩在和谐统一的基础上，应使主体形象更加突出。特别应该避免使用具有多种色调和复杂对比度的图案作背景，应该使用淡雅的图案或简单的颜色作背景。

（二）照片

由于其课程的差异性与特殊性，艺术类的多媒体作品与其他课程的作品，照片的应用量要高出很多。当想在界面设计上表现真实与信任的时候，用照片的形式来进行设计会更好，当想表现作品的艺术性和创意性的时候，图形的优势就很大。

（三）剪贴画

剪贴画通过独特的制作技艺，巧妙地利用材料和性能，充分展示了材料的美感，使整个画面具有浓浓的装饰风味。剪贴画有取材容易、制作方便、变化多样等特点，是一种极好的图形图像素材，矢量的特性使其缩放不失品质，可以对它们进行任意组合。在一些软件或网络上可以收集到很多精美的剪贴画，运用得当的话可以大大增强界面的美感。

（四）形状

形状是表示特定事物或物质的一种存在或表现形式，如长方形、正方形、圆形等，很多制作软件都附带有绘制形状的功能，可以绘制很多符合多媒体作品要求的形状为画面增添美感。

（五）按钮

按钮为多媒体作品必不可少的元素，是人类与计算机相互沟通的一个链接。交互按钮是通过Photoshop或Flash软件制作而成的拥有动感功效的凸出的按键，交互的界面十分具有人性化，囊括了上页、下页、前往第一页、前往最后一页等诸多交互按键，除此之外，还设计有返回主菜单的返回按键，不仅仅能够依照画面顺序翻找页面，还能夠让学习的人在任意的画面内任意时刻回到主菜单，可以依照自身所需随意筛选自身想要掌握的知识点。在多媒体作品《动画人物角色设计》的主界面中，从主页面跳转到学习画面时而设置的按钮，当滑鼠滑过按钮的时候，按钮就会变大，同时显现出相应的按钮的代称，滑鼠点击其按钮后就可以跳转到相对应的界面，如下图所示。

（六）动画

制作动画效果的最基础办法有三类：通过关键帧制成动画；利用预先设定的行动路线设置动画；如果存在多余一个以上的物体在做全体性移动时，可以参考层级的意义，将很多个物体整合为一体，设定运动、转移或者其余较为繁琐的行动方法。二维空间的图形动画Flash是属于Macromedia企业设计的网络与多媒体开发设计手段中的一种，Flash的设计一般为矢量类的图形动画，可以进行交互，自身拥有高品质、信息量较小的特征。

五、图形对界面设计风格的影响

（一）界面设计对多媒体作品的重要性

不同的多媒体作品有相应的浏览群体，特定的浏览群体意味着有特定的主题内容。也意味着有特定的浏览需求和特定的设计定位。时刻想着读者的需求，并千方百计地满足他们的需求，是设计者必须要考虑的。

多媒体界面设计风格定位并没有一个固定的程式可以参照和模仿。同一个主题性的设计内容由不同的设计风格创建会是完全不同的类型。风格会极大地影响读者对多媒体作品的评价。一个好的界面设计应使读者不需要任何预先的知识，就可能从视觉界面获得主观印象。

读者主要以视觉方式从屏幕上接受界面上的文本、颜色、图形图像等信息。首先，从读者如何从界面中接受信息来看，最初是由界面的印象推断这个作品是否值得浏览。外观开始时显得特别重要，但读者继续使用时，会逐渐增加对内容以及浏览作品过程中的种种感受，从而获得该作品的综合印象。

（二）界面设计的风格

在表现形式上，我认为界面设计的风格大致可以分为以下几类：（1）写真图像类：将需要的图片图像材料，加工设计主题所需的场景图片；（2）手绘动漫类：用手绘或数字动画的图像元素，构成符合设计主题的情景画面；（3）装饰性设计类：视觉元素将被图案化，装饰处理有序，强调屏幕的装饰感；（4）图形归纳与构成类：以点、线、面等几何形状和颜色块为主要视觉元素；（5）文字及文字变形类：图片或视觉元素的主体是以独特字体设计的标题文本。

（三）界面风格设计的原则

风格即特点，以特色的形式体现特色内容。有价值的内容是风格的基础。一个作品的内容如果没有特色，风格将失去价值；如果没有风格，内容也将损失价值。很多读者并不像设计者一样理解设计者认真设计的多媒体作品，他们的兴趣甚至也与设计者不尽相同。考虑到读者的兴趣和期望的重要性，表面上满足读者的喜好仿佛很合适，但如果考虑到了另一个基本原则，那就不是一个好主意了。读者的喜好是动态的，随着眼界的开阔，见识的不断增加，欣赏品味不断提高。在风格定位时必须考虑以下几点原则：

1.确保形成统一整体的界面风格。界面上所有的图像、文字包括背景颜色、区分线、字体、标题、注脚等要形成统一的整体。这种整体的风格要与其他多媒体作品的界面风格相区别，形成自己的特色。

2.确保网页界面的清晰、简洁、美观。这会带来更大的易访问性。

3.确保视觉元素的合理安排，让读者在浏览多媒体作品的过程中体验到视觉的秩序感、节奏感、新奇感。

4.量少质精。由于图形具有文本和颜色无法比拟的优点，因此在界面设计中被许多设计师频繁使用，这当然有助于设计师更好地向观众表达他的设计思想，但如果是复杂和无序的，将适得其反。因此，在图形的使用中，首要的原则是坚持量少质精。一方面，不能违反图形通俗易懂的原则，即在界面设计过程中，应避免图形叠加的现象或过分强调图形的比例，忽略文字和色彩的使用。太多的图形很容易使界面设计偏离设计的本质，容易出现图形化的现象；另一方面，它不能违背图形信息传递、增加审美意识的原则，即在界面设计过程中，要注意图形的构想、选择、实现、绘制，特别是创意的体现，避免图形给观众造成一种无力、平庸的感觉。

5.体现主题。图形作为设计师表达设计思想和情感需求的工具，一个基本的设计原则是体现主题，为主题服务。一方面，我们应该以主題为基础进行创造性思维和设计。平面设计虽然强调独创性和独特性，但偏离主题的形象不仅削弱了整个设计的表达，而且使整个设计显得繁琐甚至多余。另一方面，图形应该与文字、色彩相辅相成，充分发挥各自的优势和特点，更好地为设计主题服务。总之，不应过分强调和强化图形的特点，偏离设计的初衷和最终效果。

六、图形的编排设计

（一）图形在画面中所占据的面积

图形在界面中占据的面积大小能直接显示其重要程度。图像的外形、大小、数量以及与背景的关系，都与画面的整体内容有着密切的联系。一般而言，大图像容易形成视觉焦点，感染力强，小图像常用来点缀画面，有呼应画面主题的作用。在一个画面中，大图像、小图像和密集的文字形成对比和互补，构成最佳的画面视觉效果。在界面设计和排版的过程中，要注重图片的摆放位置及图片占据面积的大小的设计。图片摆放的位置将直接影响到页面的排版。图片空间面积的大小控制，将直接性的关联到视觉的冲击性与想法的展现。

（二）图形的主从关系

图像的规格不仅决定着主从关系，也控制着页面的均衡与运动。因此，在界面设计时，应首先确定主要图像与次要图像，扩大主要图像的面积，缩小次要图像。只有大小图像主次得当地穿插组合，给人跳跃感，显得页面活泼而具有视觉冲击力。

通常，将一些较为重点的能够增加观者集中力的图片扩大，陪衬的图片缩小，形成重点、次重点彼此划分明确的格局，如图2所示。

（三）图片在多媒体界面中的分辨率设置

由于图片通常在计算机的显示器上呈现，受显示器分辨率的最小值所制约，所以图片的分辨率不需要太高。因为虽然图片的分辨程度高，颜色也相应变深，但是人类的眼睛也没有办法将其与一张经过修改的一般照片分辨开来。就通常而言，很多图片的分辨程度等于72 dpi左右为最佳。如果为了某种特殊的目的，可适当提高图片分辨率，但高分辨率图像会增加浏览器下载的时间。在界面中使用表格，图像尺寸非常重要，如果没有定义尺寸的图像，浏览器只得重绘表格来容纳图像，会浪费时间。如果要改变图像的尺寸，应该在图像软件中定义尺寸。

（四）点、线、面的组合运用

点、线、面的组合运用是构成界面的装饰要素。多媒体界面的装饰是各部分视觉要素在画面内进行规划的结果，界面的整体结构是基于装饰要素对立或平衡而形成的。加强界面的视觉冲击力的常用手段之一是在冲突或矛盾中求得统一的视觉效果。点、线、面的装饰是将视觉元素进行相互配合时所显示出的视觉差异。它体现在各种视觉元素的形态、对比、协调等关系中。

（五）编排设计的视觉流程

所谓“视觉流程”是指界面设计为用户所进行的视觉引导，视觉观看的顺序可以通过规划页面的视觉过程来实现。清晰的可视过程不仅可以增加用户在界面上的停留时间，而且可以提高用户的观看意向和作品的点击率。我们正常的视觉过程是简单的“从上到下”和“从左到右”。心理学认为，左上角容易注意。当我们欣赏画面时，我们通常先看一看整个画面。然后关注一个兴趣点。我们注重设计中视觉中心的规律。画面的中间部分很容易成为视觉中心，画面中的主要图形很容易成为视觉中心，画面中的强势位置也很容易成为视觉中心。

视觉设计流程主要有单向视觉流程、曲线视觉流程、重心视觉流程、反复视觉流程、导向视觉流程与散构视觉流程等6种。

1.单向视觉流程。单向视觉流程根据视觉过程的规律诱导观看者的视觉，以有序的方式组织和排列关键要素，从主要内容依次观看，使界面的流程更加简洁，主题内容可以直接表达。主要有三种方式：竖向视觉流程、横向视觉流程、斜向视觉流程。

2.曲线视觉流程。曲线的视觉流程是视觉元素随弧线或螺旋线变化的视觉流向。曲线的视觉流向不像单向视觉过程那么简单，但它比单向视觉过程有更明显的节奏感和韵律感。它可概括为弧线形“C”和回旋形“S”两种形式。

3.重心视觉流程。一个画面有它自己的视觉重心，重心的视觉流动以一个强大的图像或文本为特征，它在页面中占据着重要的位置，使人们乍一看就会有一个非常清晰的视觉主题。人类视觉的稳定性与形状的形式美之间的关系是相当复杂的。当人的视线接触到屏幕时，视线往往从左上角迅速移动到左下角，然后通过中间部分到达右上角。通过右上角回到屏幕最吸引人的中心视线圈停留，这个视觉中心就是重心。图像轮廓的变化、图形的积累、颜色或光影的分布都会影响视觉重心。

4.反复视覺流程。反复视觉流程是指在设计中，相同或相似的视觉元素按照一定的规律有机地结合起来，使视线有序地构成规则，沿着一定的方向流动，引导观众的视线反复浏览。虽然不如单向、曲线和重心的视觉运动强，但更有节奏感和秩序。这个可视化过程适用于许多需要用相同组件排列的视觉元素。重复过程可以是图片、标题、标志等，重复部分会给人留下深刻的印象。重复流动还可以使构成要素在秩序关系中，故意违反秩序，使少数、个别要素的线条突出，以打破规律性。由于这种局部的变异，它突破了传统的单调性和雷同性，成为布局中有趣的中心，产生了醒目、生动、动感的视觉效果，具有较强的节奏感和秩序美。

5.导向视觉流程。导向视觉流程是通过诱导元素沿着一定的方向依次引导读者的视觉。由主体和其他要素依次连接，形成一个有机整体，集中、有序，发挥着最大的信息传递功能。有真实的、多样化的表现，如文本导向、手势导向、视线导向等。

6.散构视觉流程。相对于导向视觉流程，散构的视觉过程是指布局元素之间的散乱布局，如图与图、图与文本之间的散乱布局，没有明显的方向性，通常以较为随意的方式呈现，具有较强的阅读自主性，视觉线条在形象中是自由的，文本可以自由地从一边移动到另一边。这种阅读过程并不像直线和弧线那样快速清晰，而是充满了有趣、活跃、跳跃和舒适的视觉体验，体现了设计的个性和独特性。

七、结语

图形的设计与运用作为一种独特的创作过程，以美学为基础，通过人脑的理念、相关的物质知识、相似性、相关性等，整合和表达了新的图形。在这个过程中，图形创作可以表达更深刻的道德，简单的图形可以表达文字的内容。图形不单对界面的设计有非常重要的作用，在其他领域的设计同样具有不可或缺的作用。图形的创意与运用，既符合当代社会的发展需要，又满足了人类发展对艺术的追求，因而可以在新的社会发展轨迹下得到重视。作为一个新的生活时代，我们是否能掌握必要的图形创作技巧，这将是我们未来需要不断学习和实践的。

参考文献：

[1]韩宇.动画设计原理教学中的多媒体交互技术应用研究[D].北京工业大学，2012.

[2]王瑞红.版面设计多媒体课件开发研究[D].北京工业大学，2013.

[3]邮海砚.视觉传达在多媒体课件中的运用研究[D].山东大学，2014.

[4]李勇.艺术设计教学方式的新体验：艺术设计学科网络学习平台的开发与研究[D].广西师范学院，2004.

[5]乔立梅.多媒体课件理论与实践[M].清华大学出版社，2011-03.

[6]徐伟雄.电脑美工基础[M].北京：高等教育出版社，2014.

[7]赵殊.网页美工设计实训[M].北京：高等教育出版社，2012.

[8]戴文兵.网页美工设计[M].北京：高等教育出版社，2012.