论移动界面信息可视化图形设计

沈愈;蔡杨超

【摘 要】大数据时代下移动设备的广泛使用冲击着桌面端交互界面,用户浏览时间的碎片性为移动界面设计迎来新的挑战.文章对信息可视化图形界面的研究与发展进行综述,针对当前移动界面桌面化、冗杂化、单向性的特点,总结出精准性、直观性、引导性、可交互性设计准则,以提高移动端的浏览效率,带来愉悦的感官体验. 【期刊名称】《工业设计》 【年(卷),期】2018(000)007 【总页数】2页(P149-150)

【关键词】移动界面;界面设计;信息可视化;图形设计 【作 者】沈愈;蔡杨超

【作者单位】浙江工商大学杭州商学院;浙江工商大学杭州商学院 【正文语种】中 文 【中图分类】J524

伴随移动互联网的盛行及智能化的不断推进，移动终端使用频率大幅度上升，潜移默化地改变着人们的生活方式，现如今在地铁、公交车，甚至人行道上“低头一族”随处可见,智能手机、平板电脑便是这类移动设备中的典型代表。本文主体以智能手机和平板电脑移动端界面信息可视化图形设计为讨论对象。 1 信息可视化图形

仔细观察用户不难发现在与移动产品交互时有一共同特征：碎片性。时间的碎片性迫使用户在短暂的时间内获取信息并准确理解，提高浏览效率且留下深刻印象。用户和产品之间交互过程中时间的碎片化，使得难以在短时间内有效地获取信息。据此，那么问题来了，桌面端的交互界面在这狭小的空间内，短时间吸引用户的眼球显然存在阻隔。因此，针对移动端的界面信息图形设计发挥着重要作用，其易读性、趣味性等特点与移动终端匹配给用户带愉悦的体验。

1)信息图形化。所谓信息可视化图形化设计是通过设计艺术的表现手法，将复杂的概念、罗列的文字信息以及庞大的数据以视觉化的语言，如图形、地图、表格等形式直观化。它是建立在科学之上的艺术设计，涵盖设计心理学、计算机科学、图形学、设计学等学科。传统的印刷媒介通常以图形来发现、观察和认知事物。在移动产品交互中，介于屏幕空间和用户浏览时间碎片性的原因，比传统媒介界面要求更高。可视化的图形应简洁明了，清晰易读、互动性强特点，易于被用户理解、使用和记忆。信息内容以深刻，创造性和有趣性的方式形象化，既可以表达感情又可以有效地传递信息。

2)信息可视化图形的研究与发展。在文字出现之前图形化的壁画、岩刻等是人类早期信息交流的初步尝试，以视觉化的图形为呈现方式成为信息图形化的起源。随着逐步出现象形文、地图绘制、信息图表等，直到信息文明的今天，计算机领域信息以可视化的图形界面为交流媒介。

英国科学家Willam Playfair于1786年出版的《The Commercial and Political Atlas》中首次出现数据型图表，使用条状图和直方图来描述18世纪英国经济体系的详细内容；1801年出版的《Statistical Breviary》第一次发表了关于面积图形的介绍，两本书中都使用可视化图形来呈现数据信息。1878年，James Joseph Sylvester第一次提出“图形（Graphic）”概念，并绘制了用于表达化学键及其数学特性的图表，使信息图表具有“图标”的视觉特征。尔维斯特提出的

“图形”概念是基于信息图表并逐渐向“图标”化演变[1] 。计算机图形化设计作为一门新兴学科随着计算机图形学的诞生而得到了广泛研究。1950年，第一台图形显示器作为MIT旋风I号（Whirlwind I）计算机的附件诞生，该显示器使用类似于示波器的阴极射线管（CRT）来显示简单的图形。此时计算机图形学处于准备和酝酿阶段，称之为“被动式”图形学。到50年代末，MIT 的林肯实验室在“旋风”计算机上开发SAGE空中防御体系，第一次使用了具有指挥和控制功能的CRT 显示器，操作者可以用笔在屏幕上指出被确定的目标，预示着交互式计算机图形学的诞生。1962年，Ivan E.Sutherland发表《Sketchpad：A Man Machine Graphical Communication System》一文，编写了世界上第一个图形化计算机程序标志着计算机图形学的正式诞生，他被认为是“计算机图像学之父”[2]。论文中首次使用了计算机图形学“Computer Graphics”这个术语，证明了交互计算机图形学是一个可行的、有用的研究领域，从而确定了计算机图形学作为一个崭新的科学分支的独立地位。

现如今，我们使用的电脑桌面操作系统的图形界面,无论是Macosx操作系统还是Windows操作系统，以及一部分Linux操作系统,例如Canonical公司的Ubuntu等，这些图形界面和位图显示最早是由Xerox PARC提出并开发。Xerox PARC的工程师希望开发友好的用户图形界面把桌面概念应用到屏幕上。1981年施乐公司推出“施乐之星（Xerox Star）”，采用位图显示、图形界面、鼠标、窗口以及桌面概念。在此基础上，1984年苹果公司发布了一款具有图形用户界面的Macintosh广泛应用到个人电脑上[3]。1989年，Stuart K.Card、Jock D.Mackinlay和George G.Robertson提出“信息可视化”这个概念[4]。此后信息可视化作为一个学科领域逐渐发展起来。 2 信息图在移动客户端界面中的应用现状

移动产品界面信息的可视化直接影响到用户的感官使用，友好的界面将给用户带来

舒适的视觉享受，拉近人与产品之间的距离。以信息图在移动端中的应用为考察对象存在桌面化、冗杂化、单向性的问题。

1)桌面化。桌面化包括两方面：一为与移动端相对应的桌面端，主要为计算机浏览界面；二为如报纸、杂志等传统媒介以桌面上阅览的界面。在移动端界面以桌面端的图形化呈现“浏览器所访问的信息产品就等于计算机网页原版”[5]，此种图形设计方法是套用桌面形式，并未依据移动端具体的尺寸，空间小的个性特点再设计，而是以一张囊括了所有内容桌面化信息图的形式呈现。因计算机屏幕、报纸、杂志的界面空间可以将长图比较完整、准确的展现，而在移动端界面限于屏幕尺寸以及时间碎片性的原因，对桌面化信息图细节的阅读显然较为困难。对“以用户为中心”的人机交互强调用户的体验，提高用户交互过程中的愉悦度，将桌面端的信息图设计思路直接移植到移动端中显然是不可取的，不仅降低用户的阅览效率，甚至会产生一定排斥感。

2)冗杂化。经过可视化图形传达的信息比文字、数据等原始信息更直观，易被理解，但不排除产生一定的弊端。如信息堆砌的冗杂化，以完整的逻辑线索阐述，造成阅读时间长信息传达效率低的问题，而这些在注重高效率的移动时代是不能容忍的。冗杂的可视化内容，不分重点或者重点模糊让受众模棱两可。在信息可视化过程中选取适当的信息源、表现形式和传播渠道，明确受众的诉求点。对理解信息、认识世界产生积极作用，而一旦陷入片面追求“可视化”的牢笼，冗杂的图表和枯燥的形式让用户易产生厌倦和逆反心理。在内容不删减的前提下，可以通过转换信息编排方式，有选择的呈现信息并突出重点提高传达效率。

3)单向性。移动界面的单向性难以提高用户愉悦度、交互过程中的体验感。单向性包含两方面：其一，信息展示的单向性。信息图从头到尾的阅览形式，用户手势行为从上到下、左到右拨动，页面切换按序翻动。在使用过程中并不能进行信息的反馈，单调而乏味；其二，交互流程的单向性。用户参与交互所触发的反馈基本只有

“下一步”，缺乏动态的互动效果。例如：发光、旋转、放大、立体化……，以及通过编程实现对可交互性的支持。 3 移动端信息可视化图形设计要点

基于桌面端移植到移动端界面呈现出桌面化、冗杂化、单向性的弊端，针对移动端屏幕空间尺寸及用户浏览的碎片性的特点，以精准性、直观性、引导性、可交互性等为设计准则提高移动端的浏览体验。

1)精准性。精准性是信息可视化图形的首要条件。精准性能够高效、清晰地传达信息，缩短信息接收的时间。但图形在表意上不像文字那样清晰直接，甚至具有一定的模糊性，为信息在短时间内准确的传递增加了屏障。图形化后的信息接收方是面对用户不同的个体，因人脑对客观事物认知的复杂性以及用户特征因人而异，诸如生活经历、教育程度、工作背景等差异，使得信息的接收方对图形的理解不在同一层面，甚至会产生曲解。所以图形表述要尽可能的精准，使用户能够最大化地、准确地把握。

2)直观性。信息图形化是让复杂的数据、繁琐的文字通过图形语言以直观的图形方式呈现，来传达基本意义、交互方式，具有通用性特点。针对于移动端信息图形化的简洁直观性比桌面端更具渗透性和辐射性，能快速增加认知度为用户留下深刻印象。图形化设计中在遵循有限的屏幕空间前提下，尽可能以生动而形象、简洁而直观且富有艺术美感的图形化形式语义表达，在短时间内让用户理解。因此，需要从认知心理学角度剖析，首先应合理安排图形内容，划分出视觉主次层次；其次图形化信息不是凌乱地堆砌，要具有连贯性。

3)引导性。图形导航清晰可靠，引导性是关键。“引导性设计”可根据不同的性质和方向拆分出不同的内容，让用户能主动选择接收的信息，降低在同一页面中塞入冗杂内容的风险。界面图形的引导性设计是通过引导的手段，达到交互的结果，从而提高阅读体验的目的。

4)交互性。以动态的交互方式与用户形成互动，依据用户需求在交互过程中获取信息，提高用户参与感增强自主性，将数据、表格、文字转换为直观而形象的界面图形及时获得信息，多维呈现所需的信息，增加视觉趣味性，吸引注意力给予用户惊喜与愉悦感，提高用户体验。例如：动态的登录背景、图片左右切换弹性动画、手指滑过放大突出效果……，以及通过自定义生存可交互性。

5)美观性。富有美感的信息图可以吸引用户的注意力，增强信息在短时间内的传达效率。这对图形界面的板式设计提出高要求，充分利用视觉艺术语言进行设计，主要分为字体、颜色、界面布局等内容。文字表述在信息图形中起到易于理解的辅助性角色，需要考虑到字符大小、间距等版面布局以提高文字的易读性。为达到具有美感的视觉效果，在遵循易读性的前提下将文字图形化设计，既突出信息传递的重点也带来视觉冲击感。在进行视觉体验时，较之于文字和构图布局，色彩最先进入视觉识别更具视觉冲击力。美国视觉艺术心理学家布鲁墨曾说：“色彩唤起各种情绪，表达感情，甚至影响我们正常的生理感受。”不同的色彩关系给人以冷暖、硬软、前后等视觉感受与心理效应，构图中有意识地运用色彩关系造就不同的美感效应。 4 结语

针对移动端界面空间以及用户时间碎片性特点，图形化的信息精准高，使用户能够最大化地、准确地把握；数据、文字通过图形语言直观性的表述，提高信息传递效率；通过引导的手段达到交互的结果，提高阅读体验的目的；以动态的效果集中用户的注意力，多维度的呈现信息；强化界面图形的视觉美感，通过文字、颜色、布局等呈现让用户感到有趣、新奇的感官体验。 参考文献

【相关文献】

[1]柴源.基于信息可视化的图形设计研究[D].北京服装学院，2014.

[2]（美）赫恩著，（美）巴克著，蔡士杰，宋继强，蔡敏译.计算机图形学（第三版）[M].北京：电子工业出版社，2010.

[3]（美）沃尔特·艾萨克森著.魏群等译.史蒂夫·乔布斯传[M].北京：中信出版社，2014，3. [4]G.Robertson，S.K.Card andJ.D.Mackinlay.The Cognitive Co-processor forInteractive UserInterfaces. Proceeeding of the ACM SIGGRAPH symposium on User interface software and technology，1989 ：P0-8.

[5]黄龙.基于交互与应用的移动终端信息产品设计类型研究[J].包装工程，2014（06）.