论图像学分析法对移动UI界面设计的应用研究

何扬帆　覃会优

摘 要：随着当今社会信息时代高速发展，数字化媒体技术也更加广泛的应用在各个行业之中。在数字化媒体的快速更新的背景下，UI界面交互设计行业更展现出欣欣向荣的趋势。图像学是艺术学的研究对象，本文以图像学分析方法为理论依据，阐明其在UI交互设计中的推动作用，把图像学应用在移动端UI设计中，目的在于让UI设计师从基本的设计理论出发，可以让设计师更加提升人机交互的体验，进一步实现移动端UI 界面设计的价值性，这也是本文探讨图像学分析法在UI设计中启示的目的。

关键词：UI设计；图像学；界面设计

中图分类号：J524 文献标识码：A

文章编码：1672-7053（2017）08-0109-02

Abstract：With the rapid development of the information age in the society， digital media technology is also more widely used in various industries. In the context of rapid updating of digital media， the UI interface design industry is showing a thriving trend.The image is the study object of art， based on image analysis method as the theoretical basis， to clarify its role in the interactive design of UI， the image in the mobile terminal in the UI design， the purpose is to let the UI designer design starting from the basic theory， can make designers more to enhance human-computer interaction experience， further realize the value of the UI interface design of mobile terminal， which is to explore the image analysis method in the design of UI to the enlightenment.

Key Words：UI design； image； man-machine interactive experience

1 UI 設计

随着信息技术的高速发展，信息设计也成为文化产业不可分割的一部分，它悄悄的渗透到各行各业之中。而UI设计作为信息设计的一份子，在信息产业中占据着至关重要的地位。UI是User Interface（用户界面）的简称，它通常可以指具备信息传递功能的产品设计（包括硬体和软体）、信息传递方式的设计以及人机软件界面设计等[1]。同时也产生了人机交互——一门研究系统和用户之间交互关系学问。其中系统可以是各种各样的机器，也可以是计算机的系统和软件，人机交互界面通常是指用户可见部分[2]。随着移动用户的增加，移动UI设计更成为如今最热门的话题之一。在移动界面设计理念层面上，UI 设计不仅指视觉传达中所指的通过界面美化设计，让应用软件更加有个性、有品味，还蕴涵用户与界面的交互体验的设计思想，同时移动界面设计还要和用户体验研究相成、并驾齐驱，这是一个不断修正、改善从而满足用户视觉体验和操作体验的过程。

总所周知，我们已经进入一个互联网时代，当下的政府更提出“互联网+”的政策，而移动互联网更占据举足轻重的地位，因此移动产品成了这个时代的必需品，同时“移动”互联网也成了当下的时事热点对于移动界面的视觉设计而言，漂亮的外观能够引起用户的关注，但同时也不容忽视外观好看却不便于用户对信息甄别的情况发生，否则这样的界面终究会被淘汰。如今设计师们越来越重视用户体验在设计中的地位和作用。而将艺术理论引入计算机处理技术，已成为计算机视觉领域的研究热点。实践证明，善于利用艺术设计学理论和提升用户体验可以抓住用户群，产品也因此才能更具有价值[3]。在界面设计中要以用户的喜好为出发点，不断更新和改善产品设计以满足用户的需要，从而提高产品的实用性。

2图像学分析法与UI设计的关系

图像学源于19 世纪在欧洲美术史研究领域里发展起来的图像志研究，它所关心的是艺术客体的主题内容以及题材背后延伸的深层喻意。自然减少了对艺术作品的形式和表现风格的关注，在这一点上同传统的艺术史研究方法背道而驰。20 世纪以来图像志的研究领域不断扩展，与其它学科的联系日益密切，发展成为一种蓄势取代传统艺术史研究方法的新方法——图像学[4]。

潘若夫斯基指出图像学研究的三种形态：（1）解释作品的本质内容，即象征意义。（2）考察西方美术中的古典传统，古典母题在艺术发展中的延续和变化。（3）考察一个母题在形式和意义上的变化[5]。笔者试图通过图像学分析法阐述UI设计的的基本理论支撑点。UI设计作为一种的图像元素的设计语言其本身性质跟受众主体之间会产生相互作用的原则，这些原则贯穿受众之间的的视觉语言，笔者将从图像学三个层级分析法来解释UI设计中的图像语法。在 UI 设计中使用图形学分析法为人机互动形式的形成和建构的动力机制做引导，让我们对图像学分析法在设计语言上有全新的理解。

在UI交互设计系统中，界面设计是用户与设备互动过程中的桥梁，沟通联系了人与移动设备，让用户可以更快进入移动设备的世界，对其进行操控与使用。而图像学虽然最早是用于西方绘画的分析方法论，但是从其中衍生出来分析法对UI设计的上的形的研究有一定的帮助，研究结果表明我们每个人对形都具有一种与生俱来的组织能力，然而不同的形由于它的大小、方向、位置等发生变化，就会有不同的组织水平并伴随着不同感受，这种感受是大脑皮层对外界刺激进行积极组织的结果[6]。这种视觉刺激的过程中，图像学分析的三个层级方法论对着UI移动设计起着促进与指导性作用。下面将以图像学分析法，探讨其在移动界面视觉设计的影响。

2.1第一层级

在图像学分析法中第一层级是“前图像描述”，说的是界面设计元素之间的产品的本质内容，即象征意义，在移动UI界面设计中，解释设计元素的本质内容，有助于让我们的视觉经验在第一时间自动组织并将数据或事物向着简化的方式解析，并赋予它们简化视觉元素更优化的视觉体验与象征意义。以当下微信界面为例，其界面的本质内容的描述分析是整个界面没有过多地使用分界线去区分各个区域，而是利用图标与选项文字间的左右距离以及每个选项间的上下距离，以及背景浅灰色的块面，同时通过颜色展示元素之间的关联性或者非关联性，传递一种有组织，有联系有层次的感觉。这都能让用户明白界面中的每个选项是如何分配的，让人们在视觉上得到更多的优化体验，不会造成信息混乱的交互体验。因此，在设计UI系统的过程中，要善于利用“图像描述分析法”分析大量的的UI设计作品，吸收其优秀的视觉设计语言。

2.2第二层级

“图像学分析法”的第二层级是考察与分析图像母体延续和变化，當我们看到几个组合的视觉元素时，视觉区域中的信息有着不止一个可能的延续和变化，但我们的视觉经验会在第一时间自动组织并将数据或事物向着简化的方式解析，并赋予它们简化视觉元素的设计语法。以新浪微博网页版为例，在冗长的微博信息中，UI设计师将各个区域进行分类管理各类信息被安排在了界面的左右两侧，但当浏览‘我的关注”中的内容与信息时，其他模块的信息会自动屏蔽，页面亦会转调到“我的关注”的页面，视觉元素页面便会自动将界面简化处理，与此同时，也利用颜色上的的见简化对比，让界面信息更加明了。色彩部分的延续和变化是 UI 用户交互设计中一种非常有用的工具，但是它与图形语言一样依赖用户的本能感知，对于大部分用户来说视觉感知器官中的色彩感知部分有着特定的局限和特征，当然也受用户的个人喜好不同而有所差别。母体设计语言延续和变化的分析方法在交互设计中的合理运用能使交互过程更加地高效而舒适，但是若不根据改分析方法的运用，看似简单的色彩便会困扰用户甚至带来操作失误。

2.3第三层级

在帕诺夫斯基关于图像学的三段式中，第三个层级的则是图像学的阶段进入了其图像元素的整体，它在这个空间中与其他的符号形式发生联系而形成视觉的语言的上的整体思维惯性，同时它也具有这些符号形式的痕迹。在人机互动的过程中，受众的视觉神经系统倾向于将不连贯的离散信息进行视觉上整体化补充。所以即使我们看的是不完整视觉语言，我们的视觉经验会倾向于将其完整化。

以中国移动的流量计时器为例，通过图像学第三层级的分析法对其进行剖析，中国移动的流量计时器是一个断开的圆环，圆环图形中不同的颜色跟文字的相结合起到表现信息数据与功能的作用，画面简洁干净，在圆环上的断开处以及圆下面解释文字一定程度的破坏的的然圆环的整体性。在视觉上，我们虽然感受到了圆环图形的变化和不同部分的差别，却并没有强烈地感受到圆环图形的碎片感，我们依旧能感受到圆环是个整体，是个完整的存在，其他元素并没有影响我们对人体的识别。这种构图方式使得有边界的页面在无形中被放大，界面在神经系统中的延伸让视觉效果变得更加广阔。我们的视觉神经系统可以有意识的组织离散元素，根据以往经验形成完整图像，这样的设计使得界面的冲击力更强。其实这便图像学分析法的第三阶段，充分考虑的到设计元素发生在视觉神经上联系的。

3结语

随着手机用户的不断增加，电子普及化迅速发展，智能手机正飞速改变着人们的生活方式。这些智能设备都有一个共同的特点，都将繁琐的实体按键操作改为全屏触摸式操作，显示界面的变大，用户希望移动用户界面更加前卫、炫酷，重视通过个性化、时尚化、多样化来提升本身的视觉刺激感。如今移动应用软件界面设计越来越受到人们重视，对移动应用界面的设计要求也越来越高。

本论文从交互UI视觉元素角度出发，介绍了移动界面视觉设计的背景，阐释了关于图像学分析法在UI移动界面视觉设计的原理。通过结合案例及本人实践设计经历，探讨了如何合理的运用视觉元素来使得移动应用界面在操作时更加流畅、舒适、人机交互体验更好，让移动界面既美观又不失明确的交互及实用价值，让用户更轻易去解读我们的界面，也让设计更有影响及使用价值。

参考文献

[1]屠秀栋，浅谈 UI 设计[J]. 2010，07-1706-02.

[2]尹家鸣，朱雨晴.基于基于心理学的人机交互界面的的变异与常则[J].包装工程，2014，35（16），26-30.

[3]王晓慧，覃京燕.基于深度学习的情感化设计[J].包装工程，2017，38（6），13-16.

[4] （英）贡布里希，范景中等译.图像与眼睛.浙江摄影出版，1989.

[5] （法）阿尔维托·曼谷埃尔，薛绚译.意象地图[M].云南人民出版社，2004.

[6]鲁道夫·阿恩海姆艺术与视知觉，中国社会科学出版社，1984.