浅析视觉界面的设计原理.docVIP

浅析视觉界面的设计原理 　　【摘 要】产品视觉界面设计是产品交互与用户体验的联系基础。优秀的视觉界面设计能更好的传递产品设计理念与品牌形象，为软件的交互设计提供更匹配的视觉风格。设计师运用基本的视觉要素创造优秀的用户界面，有效地传达产品的行为和信息。并且要结合用户的心理模型或产品行为使视觉结构与之相匹配，关注用户感知功能方面的认知体验与传达。视觉界面设计就是要在保证功能的前提下，在美学的基础上，最优传递交互产品的行为，向用户展示一个优雅的视觉设计。 　　【关键词】界面设计；交互设计；UI；视觉传达 　　交互产品将行为和用户联系在一起发生在视觉上，通常是通过产品界面的表现来实现的。视觉界面设计者工作的重点在于设计在组织上的运用，以及如何来利用视觉暗示和启示将行为信息传达给用户。设计师必须掌握交互设计原则和界面习惯用法的基本知识，这些对于塑造产品的行为都很重要[1]。 　　1 设计视觉界面设计的要素 　　视觉界面设计可以对产品的吸引力和效力产生很大的影响。要创造出有效且吸引人的用户界面，设计师必须掌握一些基本的视觉要素，如颜色、版面、形式和构成，还必须了解如何运用这些要素来有效地传递行为和信息。 　　1.1 文本 　　文本在任何用户界面中都是及其重要的一个组成部分，文字可以传递大量细微信息，但是我们必须要小心仔细才能够正确恰当地使用好文字。 　　人们主要通过文字的形状来辨识文字，形状差异越显著，文字也就越容易辨识。在报纸、杂志等印刷品中，正文字体主要采用宋体。宋体是有衬线字体，特点是横细竖粗，棱角分明。与之相对，显示器上的字体一般都是黑体。黑体基本上没有横竖粗细的变化，也没有衬线装饰。与印刷品相比，显示器的分辨率要低得多，如果在这种输出媒介上使用宋体的话，文字的衬线反而会妨碍阅读。不但没有棱角分明的美感，还很容易导致眼睛疲劳。也就是说，显示器的分辨率低，不足以显示有衬线字体。因此显示器上的字体一般都采用毛边较少的黑体[2]。 　　辨识文字和阅读文字有所不同，阅读中我们有意识地扫描个别字词，之后按照上下文来理解它们的含义。界面应该尽量少用文本，从而减少阅读量，这样才能保证几面导航的顺利进行。我们应该避免只依赖文字进行讲解，因为阅读文字速度很慢，而且会破坏用户对应用的浸入式体验。使用太多的文字是一种“说而不秀”的方法，这与移动应用的优势相违背[1]。少用文字原则并不意味着用文字是错的，或者说文字总是越少越好。它指的是在你想吸引用户进一步体验的时候，应该首先考虑减少文字，增加交互。 　　1.2 颜色 　　颜色作为界面视觉语言的一部分，向用户传达信息。对于多数应用程序，颜色的使用要吝惜，并且应该与视觉语言的其他元素结合，如符号、图标、文本，以及在界面上维持的控件关系。 　　当颜色太多时，我们的大脑不得不花费额外的时间记住每种颜色的意义，这样便降低了我们的处理速度。互补色在颜色处理中是指那些相反的颜色，当这些颜色被高饱和并且放置在一起时，就会制造出视觉假象。并且非常难以正确辨别，也非常难以让人聚精会神。高饱和的颜色看起来会显得鲜艳，从而吸引过多的注意力。在较小的地方适当地运用饱和始终的颜色可以有效地吸引用户的注意力，但这种用法应该保守使用。如果图形颜色与背景颜色只是颜色不同，而在饱和度和亮度上没有差别，则很难辨认。图形和背景除了色调不同外，饱和度和亮度也应有区别。 　　1.3 图标 　　图标最大的特点就是可以通过使用不同颜色和形状的图像来帮助用户直观地了解信息的种类和操作内容。与单纯的文字界面相比，图标的另一个特点是可以使界面的整体效果张弛有度。 　　软件中的图标有两大用途：一是作为信息传递的标志；二是作为指导用户操作的控件。但是，图形界面也存在缺点，只使用图标很难传递准确的信息。即便是人们经常使用的软件的工具栏，其中有些图标按钮也会使用户感到困惑。而且，如果消息框中只使用图标也无法传递详细的信息。因此，一般情况下，图标还需要文字信息的辅助。 　　2 设计视觉界面设计的原则 　　设计师需要关注如何用界面的视觉结构匹配用户的心理模型或者产品的行为，也必须关注如何将程序的状态传达给用户（如文档的编辑状态），还要关注围绕着用户感知功能方面（布局、视觉层次及图形背景问题等）的认知性问题。 　　2.1 运用视觉属性将元素分组，创造出清晰的层次结构 　　比如颜色、形状和位置来区分层次结构中的每个层次。最为重要的元素应放在其他元素的上方或者向外突出一些。需要突出的元素最好用饱和颜色来渲染，次重要的元素用欠饱和颜色渲染。与背景的颜色及其值的对比也不要太强烈，尺寸要小一些或者向内缩进。不饱和及中性颜色则可以用在不重要的元素上。 　　2.2 图像的运用要适当紧凑、一致，并且要适当考虑使用环境 　　视觉元素也应该是紧凑