移动智能终端目标导向视觉界面设计研究

孙迪 浙江机电职业技术学院

为了让产品功能需要与竞争者完全相同的产品有所区别，制造商引入了用以增强产品对用户吸引力的设计。有意识地引入设计，标志着现代产品开发三原则的形成：功用性、可行性、合意性(desirability)。三者中任何一个要素的弱化都无法使产品经受时间的考验。在移动智能终端上的应用程序是用户自主选择下载，天生具备了功用性，而可行性关系到开发团队能否支撑生意的问题，无法第一时间反馈到用户面前，暂时缺少时效性。唯独合意性是最能直观反映该程序使用满意度的要素，也是三要素中最能直观反映产品用户体验的要素。

恰恰是这个最直接，最感性的要素，往往导致了设计上出现的偏差。这主要表现在交互设计中，交互设计不仅仅是审美选择，更要建立在对用户和认知原则的了解上，从而更好地理解用户目标、需求和动机，即目标导向设计。本文重点讨论在目标导向设计中的视觉界面设计策略。

一、视觉艺术与视觉设计的区别

美术从业者和视觉设计从业者有着共同的视觉媒介。二者虽然都非常了解这个媒介，但是工作目的不同：美术从业者是围绕情感或者思维关切的主题，是向社会总体表达自我的方式，艺术家受到的限制很少，他们的产品价值与产品的非凡独特成正比。

但相对的，视觉设计从业者的目标是创作具有特殊用途的人工制品，以供人们使用为目的。艺术家的首要关切是表达自我，而设计师的重点则是清晰沟通。设计关注的是发现最适于传达某些具体信息的呈现方式。按照目标导向的方式，设计师的责任是努力以易于理解和使用的方法来呈现行为和信息，支撑组织的品牌目标及人物角色的目的。

当前的所谓交互设计师大多出身自高等艺术院校，拥有较强的图形塑造能力和审美感知能力。如果让其设计一个令人赏心悦目的图案或者画作显然不再话下，但是交互设计显然不是绘画艺术，它的核心指向与艺术创作大相径庭。它更多的是理性的看待图案，从客户的需求出发，关注如何处理和安排可视元素，传达信息和行为。这些属性应用于各种元素的方式让用户理解内容和图形界面。比如，如果两周界面对象颜色相同，用户会认为二者有关或者相似。如果两个对象颜色相反，用户会认为对象有某些类别差异。人类可以通过不同的视觉外观区别对象，视觉界面设计利用这点特性创造出比单纯使用文字更加丰富的含义。

但是，视觉界面设计永远不能排除对美学的关注。只是把这些关注放到目标导向的框架里，尽管视觉交流总是牵涉某些主观判断，但是需要努力缩小品位差异。清晰的阐述用户体验目标和商业目标，对于设计界面中用以支撑品牌身份、用户体验和情感响应的部分来说是重要基础。

二、视觉界面设计原则

在移动智能终端的屏幕上，每一个角落里都充满了信息，人类的大脑此时是一台计算机，每时每刻都要处理目光所及之处的高密度视觉信息。我们通过观察可视模式，将所见事务的重点和流入眼睛的海量信息加以发现和整理。为了最有效地向用户传达应用程序的行为，视觉界面设计师必须抓住人类与生俱来的视觉处理能力——一种潜意识的眼脑协同处理视觉信息的能力加以利用。

在如何安置这些信息以至于不让它们看起来让人摸不着头脑或者不知所措的过程中，设计者的所总结的经验值得我们关注。某些重要的原则有助于我们将视觉界面设计得更加吸引人的同时更加易用。

(一)传达风格，传递品牌

交互系统日益成为用户感知品牌的主要途径。在开始着手界面设计之前，有必要理解品牌承诺。只有理解对应的品牌承诺，才能将设计风格加以统一的呈现。而当一种风格被无数字的不断重复呈现则意味着品牌开始呈倍数传递。

苹果公司内部开发的应用程序很好的说明了这一点。从最早期的拟物化设计风格到现在的扁平化设计均采用统一的风格样式。使得用户在任何一个地方看到类似的风格就能意识到自己已经在苹果公司的品牌传播语境下。而微软的Windows Phone早期却缺失了部分这种对统一性的保护，使得应用程序界面显得平庸而五特点，随着其最先开启偏平化设计之风，微软的产品识别度很快提高并且引领了当前设计潮流的发展。

(二)理清视觉层级

在面对一组视觉元素时，用户最感兴趣的并不是某一个精致漂亮的图标，很可能是下意识地问自己“这里什么最重要”，然后便是疑惑众多元素之间的关联。用户界面必须创建合理的层级和关系才能回答上述两个问题。根据场景确定哪些控件和数据是用户需要立刻理解的，哪些相对次要或者只是偶尔用到。上述这些排列逻辑便是视觉层级。

区分层级级别的是基本视觉元素，重要的元素所占比例自然需要偏大；色调、饱和度相对于背景需要被强化；所在的位置也要靠上或者缩进和悬垂。相反，不太重要的元素则需要降低饱和度、色调等。

只是这样的原则往往会形成新的误区，会变成一种标准的公式。一旦被标准化似乎可以意味着提高效率。其实相反，越是标准的公式越容易将设计变得糟糕和效率低下。应该克制地调整这些属性，在视觉界面设计中，建立清晰的视觉层级是非常困难的，需要不断保持整体样式，优化信息密度，尊重特定屏幕的需求。尽管用户几乎从未留意良好的视觉层级，但糟糕的视觉层级立马就能跳出来影响用户体验。

在传达元素间关系时必须要找到哪些元素岑子相似的功能，哪些元素的使用率更高。经常同时使用的元素可以放在一起减少重复操作，其他还可以根据相似的功能组织虽然空间上没有联系但是在视觉上具有可组织性的元素。在空间上对元素进行组织可以有效的告知用户这些任务、数据和工具存在的关联性，同时也暗示了顺序关系的存在。

(三)提供清晰的视觉结构

在进行交互设计时可以将用户界面看作视觉元素和行为元素的有机组合。这些元素往往按照分组来操作，这些分组被网格所构建，他们被按照间距和其他视觉属性进行分组。为了传递出清晰的视觉结构，视觉元素往往被进行对齐操作，它是设计者帮助用户有组织而系统地体验产品的一个重要途径。分组后的元素需要水平和垂直对齐。一般来说，屏幕上的每个元素都要尽可能和其他元素对齐。即使有些时候需要作出不对齐元素的决定，实现某些特点的差异化效果，设计师就必须在一些元素的辅助视觉系统上做的合理的布局。

因为需要提供清晰的视觉结构，所以网格系统是设计者最有效的设计工具之一。它为布局提供了统一且一致的结构，对于设计视觉层次较多和功能上较为复杂的界面特别重要。它可以给视觉界面带来较高的可读性。一套有规则的的网络系统可以令用户始终找到各视觉元素所在的位置，一致的间距和定位可以辅助人们内在的视觉处理机制。它还可以极大增强美学吸引力。井井有条的网格系统能形成一种和谐的秩序感，用户对于这种清晰有条的布局自然会赏心悦目，提高优质体验度。对于设计者来说，模块化的网格布局可以减少创造高质量的视觉界面所需的工作量。设计迭代修改是必不可少的，由于模块网格的布局使得元素的重新设计变成了替换，方便后期的修改和扩展，也能在调整中产生最合适的布局决策。

(四)创建合理的逻辑路径

视觉引导很重要的一点便是构建高效的逻辑路径，让用户沿着这逻辑路径与界面互动。这条逻辑路径的设计首先来源于前期的交互逻辑设计，视觉界面设计师在遵循交互逻辑设计时从视觉机制出发，结合人眼从上到下和世界普遍范围内的从左到右的阅读顺序开发的逻辑路径可以为屏幕区域提供视觉入口点。

(五)易懂的图标

图标往往具备很强的标识指代性和艺术审美性。从认知角度来说，图标是一个复杂的主题。将其简要为两点便是准确传达功能性和对象关联性。图标的视觉语言代表抽象概念，选择习惯用法是比较保险的做法。独特的符号可以让用户快速的找到屏幕上的目标，而图标的图形设计就必须和对象本身产生关联。

(六)精简视觉工作量

界面上的视觉噪音一般是由过多的视觉元素造成的，这些多余的视觉元素将人们的注意力从那些传达能共性和信息的主要对象上转移到他处。目前视觉噪音主要表现在过多的颜色对比、文理及没有必要的装饰上，另外就是一些无谓的三维渲染。混乱的界面试图在一个有限的空间中提供过多的功能，结果会导致这些控件在视觉上互相干扰。视觉上过分装饰、混乱或者拥挤的屏幕都会加重用户的认知负荷。

一般来说，视觉界面应该尽可能简单，让人能够清晰的感受到各自的对象所指和互相间的逻辑关系。它们必须是高效率的，让最少的功能和视觉元素发挥最大的效能。当前流行的扁平化设计风格或许就是一个针对精简视觉量的设计趋势。

三、设计原则遵守的必要性

视觉设计师喜欢关注最新潮的风格和设计，自然也喜欢尝试打破原有的规则。标准的确立经过了诸多的实践是经得起考验的，如果肆意的因为视觉上的美观而打破规则我们会发现用户体验呈直线下降，原因也非常简单：脱离了用户已经养成的习惯设计。

如果出现了一个充分的理由去改变规则，但是我们又如何定义何谓“充分的理由”，因为这种理由无法简化至可量化的程度。只有当一个习惯用法被目标用户群反复测试后发现这样操作会较之前更好时“打破规则”或许才会被提出。

虽然违背指导规则被视为可能会付出代价，但是并不一定就要拿规则来限定设计师。设计师在“违规”时可以从错误中学习经验，当个体企图改进方案时是一种内在且未经检查的缓慢而微小进步的过程。

从整体框架设计到每一处细节设计，如果我们都能够遵守目标导向设计原则，运用其思想便能增加用户的粘性度，从每一处细节出发帮助用户达成目标、完成任务。

[1]Jess James Garrett.以用户为中心的Web 设计[M].机械工业出版社，2007.

[2]Jeff Johnson.认知与设计：理解 UI 设计准则[M].人民邮电出版社，2011.

[3]董建明，傅利民，饶培伦等.人机交互：以用户为中心的设计和评估[M].清华大学出版社，2010.

[4]Robert Hoekman.Jr.瞬间之美：Web界面设计如何让用户心动[M].人民邮电出版社，2009.

[5]Donald Arthur Norman.设计心理学[M].中信出版社，2010.