浅析视觉界面设计原理

聂　伊　张敏言

（西安工程大学，陕西 西安 710048）

【摘　要】产品视觉界面设计是产品交互与用户体验的联系基础。优秀的视觉界面设计能更好的传递产品设计理念与品牌形象，为软件的交互设计提供更匹配的视觉风格。设计师运用基本的视觉要素创造优秀的用户界面，有效地传达产品的行为和信息。并且要结合用户的心理模型或产品行为使视觉结构与之相匹配，关注用户感知功能方面的认知体验与传达。视觉界面设计就是要在保证功能的前提下，在美学的基础上，最优传递交互产品的行为，向用户展示一个优雅的视觉设计。

教育期刊网 http://www.jyqkw.com
关键词 界面设计；交互设计；UI；视觉传达

作者简介：聂伊（1988.08—），女，汉族，河北人，西安工程大学机电工程学院工业设计研究生，研究方向为视觉传达与媒体设计。

张敏言（1969.03—），女，汉族，陕西人，西安工程大学机电工程学院，副教授，研究方向为产品设计与人机关系。

交互产品将行为和用户联系在一起发生在视觉上，通常是通过产品界面的表现来实现的。视觉界面设计者工作的重点在于设计在组织上的运用，以及如何来利用视觉暗示和启示将行为信息传达给用户。设计师必须掌握交互设计原则和界面习惯用法的基本知识，这些对于塑造产品的行为都很重要[1]。

1　设计视觉界面设计的要素

视觉界面设计可以对产品的吸引力和效力产生很大的影响。要创造出有效且吸引人的用户界面，设计师必须掌握一些基本的视觉要素，如颜色、版面、形式和构成，还必须了解如何运用这些要素来有效地传递行为和信息。

1.1　文本

文本在任何用户界面中都是及其重要的一个组成部分，文字可以传递大量细微信息，但是我们必须要小心仔细才能够正确恰当地使用好文字。

人们主要通过文字的形状来辨识文字，形状差异越显著，文字也就越容易辨识。在报纸、杂志等印刷品中，正文字体主要采用宋体。宋体是有衬线字体，特点是横细竖粗，棱角分明。与之相对，显示器上的字体一般都是黑体。黑体基本上没有横竖粗细的变化，也没有衬线装饰。与印刷品相比，显示器的分辨率要低得多，如果在这种输出媒介上使用宋体的话，文字的衬线反而会妨碍阅读。不但没有棱角分明的美感，还很容易导致眼睛疲劳。也就是说，显示器的分辨率低，不足以显示有衬线字体。因此显示器上的字体一般都采用毛边较少的黑体[2]。

辨识文字和阅读文字有所不同，阅读中我们有意识地扫描个别字词，之后按照上下文来理解它们的含义。界面应该尽量少用文本，从而减少阅读量，这样才能保证几面导航的顺利进行。我们应该避免只依赖文字进行讲解，因为阅读文字速度很慢，而且会破坏用户对应用的浸入式体验。使用太多的文字是一种“说而不秀”的方法，这与移动应用的优势相违背[1]。少用文字原则并不意味着用文字是错的，或者说文字总是越少越好。它指的是在你想吸引用户进一步体验的时候，应该首先考虑减少文字，增加交互。

1.2　颜色

颜色作为界面视觉语言的一部分，向用户传达信息。对于多数应用程序，颜色的使用要吝惜，并且应该与视觉语言的其他元素结合，如符号、图标、文本，以及在界面上维持的控件关系。

当颜色太多时，我们的大脑不得不花费额外的时间记住每种颜色的意义，这样便降低了我们的处理速度。互补色在颜色处理中是指那些相反的颜色，当这些颜色被高饱和并且放置在一起时，就会制造出视觉假象。并且非常难以正确辨别，也非常难以让人聚精会神。高饱和的颜色看起来会显得鲜艳，从而吸引过多的注意力。在较小的地方适当地运用饱和始终的颜色可以有效地吸引用户的注意力，但这种用法应该保守使用。如果图形颜色与背景颜色只是颜色不同，而在饱和度和亮度上没有差别，则很难辨认。图形和背景除了色调不同外，饱和度和亮度也应有区别。

1.3　图标

图标最大的特点就是可以通过使用不同颜色和形状的图像来帮助用户直观地了解信息的种类和操作内容。与单纯的文字界面相比，图标的另一个特点是可以使界面的整体效果张弛有度。

软件中的图标有两大用途：一是作为信息传递的标志；二是作为指导用户操作的控件。但是，图形界面也存在缺点，只使用图标很难传递准确的信息。即便是人们经常使用的软件的工具栏，其中有些图标按钮也会使用户感到困惑。而且，如果消息框中只使用图标也无法传递详细的信息。因此，一般情况下，图标还需要文字信息的辅助。

2　设计视觉界面设计的原则

设计师需要关注如何用界面的视觉结构匹配用户的心理模型或者产品的行为，也必须关注如何将程序的状态传达给用户（如文档的编辑状态），还要关注围绕着用户感知功能方面（布局、视觉层次及图形背景问题等）的认知性问题。

2.1　运用视觉属性将元素分组，创造出清晰的层次结构

比如颜色、形状和位置来区分层次结构中的每个层次。最为重要的元素应放在其他元素的上方或者向外突出一些。需要突出的元素最好用饱和颜色来渲染，次重要的元素用欠饱和颜色渲染。与背景的颜色及其值的对比也不要太强烈，尺寸要小一些或者向内缩进。不饱和及中性颜色则可以用在不重要的元素上。

2.2　图像的运用要适当紧凑、一致，并且要适当考虑使用环境

视觉元素也应该是紧凑而通用的视觉语言的一部分，这意味着相似的元素应该采用相同的视觉属性，在一致的位置摆放信息和控件。不同页面上提供的相同功能的控件和数据显示应该摆放在每一页上的相同的位置，而且他们还应该有相同的颜色、字体和阴影等。这样的一致性能让用户很快地找到和识别它们。除了具备功能价值，图标在传递品牌属性上还有重要的作用。无论采用什么样的风格，风格都必须一致。

2.3　避免视觉噪声和混乱

界面上的视觉噪声一般是由过多的视觉元素造成的，这些多余的视觉元素将人们的注意力从那些直接传达功能和行为主要对象上转移到他处。这些视觉噪声包括过分的装饰、不必要元素、过度使用标尺、视觉上厚重的用于隔离控件的元素或者过分的使用视觉属性（包括颜色、纹理和对比）等。混乱的界面试图在一个有限的空间中提供过多的功能，结果会导致这些空间在视觉上相互干扰。视觉上过分装饰、混乱或者过多的屏幕都会加重用户的认知负荷，产生信息焦虑的情绪，这将影响用户的速度、理解能力和任务的完成。

2.4　保持简单，使用最小的视觉风格

一般来说，界面应该使用简单的几何形状和最小的轮廓。如果一个程序长时间占据使用者的注意力，应该考虑弱化视觉表现上的颜色和纹理。颜色的数量要严格限制，并且应该以较为不饱和的颜色或者中性颜色为主，可以适当加入一些高对比作为强调重要信息的颜色，那样会让控制组织得更紧凑。

用户可能长时间盯着相同的工具栏和菜单，会得到一些纯粹因为熟悉而产生的位置感。优秀的视觉界面和任何优秀的视觉设计一样，在视觉上应该是高效率的，它们有一个共同的特点，即让最少的视觉和功能元素发挥最大效能。这样，设计师可以自由地用更少的像素做更多的事情。

2.5　消除视觉附加工作

设计原则的主要目的之一就是优化用户的产品体验。对于生产工具和其他非娱乐导向的产品而言，这意味着将工作负荷降至最低。软件经常包括一些不必要的具有繁重工作量的交互，对于用户来说，这些是附加工作[1]。

视觉附加工作是用户不得不分析的视觉信息，比如在列表中找到某个条目、判断从哪个位置开始阅读屏幕，或者决定哪些元素是可以点击的，哪些元素仅仅是装饰性的。有时设计师过分依赖视觉隐喻，因此添加了各种附加工作，这些视觉隐喻能让人们容易理解程序元素和行为之间的关系，但了解了这些基本情况之后，隐喻的管理成了完全的附加工作。另外一种视觉附加工作的根源是过度使用了风格化的图形和界面元素，而实际上，视觉风格的运用首先是要支持清晰的信息通信和界面行为。

2.6　避免歧义

避免显示有歧义的信息，并通过测试确认所有用户对信息的理解是一致的。当无法消除歧义时，要么依靠标准或者惯例，要么告知用户用你期望的方式去理解歧义之处[3]。

3　优雅的视觉界面设计

视觉界面的设计对品牌形象、用户体验及本能反应等方面都有一定的支持作用。优秀设计的经典要素之一即形式简约：以简御繁。对于界面设计，就是用最少的操作与学习成本来完成任务。简约同样适用于行为，在视觉设计中给与用户简单的工具，即运用最少的视觉区别来明确传达想要表达的意思。

视觉界面设计师所关心的是寻找最适合的表现方式来传达他们设计的交互产品的行为。设计师应该用一种容易理解、有用、支持企业品牌和目标的方式来表现产品的行为和信息。用户界面的设计不应该轻视美学方面的考虑，而是要在一定的功能框架下来最大化地考虑如何优雅地向用户展示应用的视觉设计。

教育期刊网 http://www.jyqkw.com
参考文献

［１］Alan Cooper,Robert Reimann,David Cronin.About Face3交互设计精髓[M].刘松涛,等,译.北京:电子工业出版社,2014,9:115-118,170-172,218-239.

［2］古贺直树.好设计不简单UI设计师必须了解的那些事[M].张君艳,译.北京:人民邮电出版社,2014,8:22-28.

［３］Jeff Johnson.认知与设计：理解UI设计准则[M].2版.张一宁,王军锋,译.北京:人民邮电出版社,2014,8:11-12.

［责任编辑：汤静］