人机交互界面中的视觉化设计要素分析

李佳蔚　傅潇　彭贇

摘 要：人机交互界面主要通过视觉化设计向用户传递各种交互信息。本文分析了与人机交互界面视觉化设计工作相關的文字、图像、色彩和动态效果四个设计要素基本理论，为人机交互界面视觉化设计奠定理论基础。

关键词：人机交互；人机交互界面；视觉化设计；视觉化设计要素

人机交互界面主要通过视觉化设计向用户传递各种交互信息。文字、图像、色彩和动态效果是构成人机交互界面视觉化设计中最重要的基本构成元素，这也就决定了视觉传达设计的主要功能就是通过这四个要素，把设计者想要表达的东西传递给每一个接收到这个信息的接受者，以及由这些基本元素所表现的交互界面整体布局和风格属性，展示给用户一个完整的交互界面视觉感官形象，它的主要功能就是起到传播的作用。

1 文字元素

文字本身就是简单的视觉图案再现，在视觉传达中具有其他设计元素和设计方式所不能替代的设计效果，阅读文字不但能获取文字本身所传递的信息，也能通过文字的“相貌”感受文字内容所带来的意境。现代的计算机文本信息量占据很大，其构成方式一般直接使用间接文字表达。

文字作为人类用来记录语言的符号系统，特点有：（1）以文字描述对象，不易产生信息表达歧义，能够准确清晰的传递信息。（2）文本类信息传输速度比较快，对硬件和网络质量要求比较低。是信息传递最直接也最准确、详细的方式，更是互联网信息最主要的载体，所以文字在交互界面视觉化设计中占有很重要的位置。平面设计中文字往往也被视为一种图形元素，用作版式的编排，区域的划分，甚至布局构成的调整，优秀的文字设计能让人过目不忘，除了传递信息，告知内容外，还能提高软件诉求，增强软件交互界面视觉化效果，达到视觉审美的目的。是设计者在软件交互界面视觉化设计中应该最应关注的问题。

2 图像元素

图像是人对视觉感知的物质再现，由照相机、镜子等光学设备获取，也可以人为通过手工绘画创作。在人机交互界面中出现的图像以数字形式储存，通过数字采集技术和信号处理，由一些排列的像素组成并保存。图像在人机交互界面中具有重要作用，避免了全文字界面的枯燥，甚至给人的视觉第一印象更优于文字，是一种直观的表现形式，具有灵活和富有创造力等特点。图像分为静态图像和动态图像，静态图片如照片、图片、绘画作品等，动态图像如Gif动画、Flash动画、3D动画以及影片等。

（1）静态图像： 在人机交互界面中占主导地位，多用于按钮、广告、缩略图和详细信息细节说明等。通常采用JPEG、PNG、GIF等格式。1）JPEG格式（Joint Photographic Exerts Group联合图片专家组），可以用不同的压缩比例进行压缩，对图片质量影响不大，因此可以用最少的磁盘空间得到较好的图像质量，几乎所有的手机系统都支持。2）PNG格式（Portable Network Graphics便携式网络图片），是一种位图文件（bitmap file）存储格式，压缩比高、生成文件容量小时它的优点，这个特性很适合于在手机通信过程中生成和显示图像。3）GIF格式（Graphics Inter Change format图形交换格式），在Internet上被广泛应用，文件较小，适合现今手机网络环境传输和使用。

（2）动态图像：动态图像通常用于特效表现。在手机购物软件中，按钮效果、动画装饰效果、商品操作展示等都要用到动态图像，大致可分为Gif动画、Flash动画、3D动画以及影片。1）GIF动画，也叫动画图片，通过对多个图层的图片，按时间长短连续切换显示，以达到动画的效果，图片格式小，易于手机网络环境使用，但制作的动态效果也相对较简单。2）Flash动画，较Gif动画表现层次更为丰富，也是网络上动画常见的表现形式，并且具有音效画面结合表现的特点，在音画作品中被广泛使用。3）3D动画，使通过3Dmax等三维软件制作的动态图片，又称为三维动画，则更为专业，但由于文件很大，在手机购物软件中使用频率较前两种少很多。

3 色彩元素

色彩本身便是大自然的产物，从人类起源开始人们就学着和大自然中的色彩打交道，无论是工作、学习还是生活，都累积了无数色彩常识。人们借助大自然的力量创造丰富多彩的物质世界，美好的一切都被我们的眼睛所感知。对色彩元素的相关理论研究，也是设计者进行交互界面视觉化设计最重视的。

（1）色彩的属性。色彩被人们赋予了色相、明度、纯度三属性，色相指色彩的不同相貌，就像人的脸一样，我们通过色彩的相貌来识别色彩；明度指色彩的明暗程度，根据色彩的明暗来调整色感的强弱；彩度则指色彩的鲜艳程度，彩度越高颜色就越鲜艳抢眼。在视觉传达中，往往通过这些属性来辨别色调、了解色彩所表达的情感。

（2）色彩的心理效应。色彩的心理效应来自色彩的物理光刺激对人的生理发生的直接影响，也就是人的第一视觉感觉。任何物体都有特定的色彩构成，不同的色彩产生不同的视觉感受，这些视觉感受就算没有身体接触到，也能让人产生不同的感官联想，这也叫做“视触觉”。1）直接心理效应。生活中，蓝色的天空、白色的云朵、绿色的植物、金色的太阳……都给人们留下了深刻的色彩形象，这是最原始的心理效应。人们从这些影响中总结出蓝色表示广阔、深远、透明；白色表示明亮、干净、纯洁；绿色表示生命、春天、成长、希望；金色表示光明、温暖、华丽……而这些直接心理效应不会因为地域、国度、文化的不同而发生变化，反而影响范围很广，容易让人产生共鸣。2）间接心理效应。色彩往往不是单一出现在人们的视线中，它们会聚集在一起产生色彩混合和视错觉。心理学家从众多实验中发现，色彩在色相、明度、纯度变化的不同情况下产生综合反映，对人的心理效应也有所不同。例如，在色彩鲜艳、对比强烈的色彩环境中，人的脉搏会加快，情绪会变得兴奋；相反，在色彩对比弱、色调平和的色彩环境中，人的脉搏会减缓，情绪会变得平静。这些色彩所产生的间接心理效应更多地被设计师所应用到不同领域的设计中。

4 动态效果

在用户体验过程中，人机交互界面的动态效果要解决以下两个最基本的问题：一是动态的信息可控制性，用户可以随意的控制流动的信息。二是相应和运行的时间不能超过用户的心理期待。动态效果表达没能大规模使用的原因是动态信息会在界面上产生强烈的“视觉刺激效应”，产生突出的视觉焦点，虚化其他信息；过多的动态效果会造成界面信息混乱无序，容易形成视觉疲劳，导致消费者注意力不集中，信息获取混乱和操作错误率上升等问题。

5 小结

本文主要分析了与人机交互界面视觉化设计工作相关的设计要素基本理论，分别分析文字、图像、色彩和动态效果理论，为人机交互界面视觉化设计奠定理论基础。

参考文献：

[1] 李四达.交互设计概论[M].北京：清华大学出版社，2009.

[2] Ben Shneiderman（美）.用户界面设计——有效的人机交互策略[M].张国印，等，译.北京：电子工业出版社，2008.

[3] 方学兵.人机界面信息视觉化设计研究[D].合肥工业大学学位论文，2010.

[4] Alan Cooper（美）.交互设计之路——让高科技产品回归人性（第二版）[M].Chris Ding，等，译.北京：电子工业出版社，2005.