设计美学在移动应用UI界面设计中的体现

张雪铭　赵晓明

摘要：文章以UI界面设计为中心，围绕智能手机移动端，分析读图时代的界面设计中的设计美学体现，以及智能手机界面发展的趋势。在虚拟的视觉文化中，如今具有代表性的移动应用UI便能良好地体现人机之间的关系，信息的接受者与信息的传播者即移动应用UI的设计师之间的关系。而这种人际关系，信息授受之间的关系很大程度上依赖着UI界面这一重要媒介。因此，UI界面设计这一媒介的研究对于视觉传达设计来说尤为重要。

关键词：设计美学 移动端 智能手机 界面设计 交互

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

文章编号：1003-0069（2018）04-0040-02

一、读图时代的视觉设计

在如今的读图时代，生产力的不断发展使得视觉呈现技术越来越发达，越来越复杂。视觉技术与虚拟现实之间的关系越来越密切。移动应用UI设计正是基于这两个方面发展起来的。有人认为，因为科技导致的先进设备的出现，使得本来就具有实体的人和机器之间划分开了，而连接二者交流的界面的问题就更为突出重要了，电子产品使得现实世界与虚拟世界并存，二者又能进行交互，这是人类与机器彼此之间产生的一种新的相互关系，而这其中的界面便是使人通往虚拟世界的枢纽。

移动UI设计正是由于视觉现代化的发展而自然而然发展出来的，视觉现代化拉近了人机之间的关系，它包括视觉方式、视觉手段、视觉理念、视觉体制和理论的现代化。在其某种意义上来看，视觉现代化依赖于视觉呈现技术的现代化，也可以理解为视觉技术的现代化导致了视觉观念的现代化。洛可维尔认为，人眼能看到的物体影响的呈现方式主要依赖着当时的科学技术能够支持的展示技术，但是在《视觉文化的转向》中，该作者认为视觉技术至少包括了观看物象或图像的技术，展示的技术和复制的技术这三种类型。观看物体影象技术主要包括两个方面：一是观看物质世界的途径、角度和意识。二是审视世界的方式。视觉现代化还包含视觉技术的现代化，视觉技术包括形成或呈现图像的技术。它与展示的技术密切相关，但又不完全相同；受到观看方式、手段和观念的制约。第三类的视觉技术指的是图像传播的技术。这种技术的宗旨就是将已经生产出来的图像的编码通过各种技术手段将其传送到观者那里。

在传统社会中，人趋近图像，但是有了不断发展的技术的帮助，使得当代不再是人趋近图像，而是图像趋近人。图像包围了人，我们如今的生活无时无刻都充满着各类图像。今天图像传播的技术深刻改变了人们的视觉“生态环境”，一方面是图像资源的富裕，另一反面是图像资源共享平台的富裕。

从视觉技术的角度来看，图像在社会中的地位日益突出，不同视觉文化历史形态的背景下也相对应地产生了镜子、摄影、电脑这三件不同的视觉观念，如果说镜子体现了模仿的视觉文化，那么摄影则体现了复制的视觉文化，电脑体现了虚拟的视觉文化。

在虚拟的视觉文化中，如今具有代表性的移动应用UI便是在电脑中产生，它能良好的体现人机之间的关系，信息的接受者与信息的传播者即移动应用UI的设计师之间的关系。而这种人际关系，信息授受之间的关系很大程度上依赖着UI界面这一重要媒介。而在信息接受方面，“美”的产品传递信息会更加高效，使用户更容易上手、更容易接受。因此，美的元素在传播信息过程中十分重要。

美是一种视觉感受，人们通过眼睛接受视觉信息，人们可以通过眼睛观察物体的形状、大小、颜色、布局等来分辨物体的具体信息。人也具有观察美的能力。当人们谈论某个生活用品时会常说：“这个产品很好用，用起来得心应手。”“这种造型很美观，使人感到赏心悦目。”这表明产品的界面会给用户带来不同的感受，它反映的是用户与产品之间的价值关系。

审美价值体现的是产品的精神功能，适用性体现的是产品的物质功能。所以，用户在使用手机移动端应用时感受到的不仅有应用的适用性，还有移动端界面的精神功能一即审美价值。然而，在生活中对同样产品，不同人有着不同的观点和态度。

以色彩为例，色彩除了具有审美价值以外，还对人的心理产生影响，人的心理也会影响其观看的色彩。我国古代美学观有这样的观点：“人之有形、行之有能、以气为充，神为之使。”“五色之变，不可胜观也。”在南朝的刘勰《文心雕龙.物色》中“春秋代序，阴阳惨舒，物色之动，心亦摇焉。”客观景物色彩的变化与艺术家的心灵发生联系，这种联系绝不是艺术家对景物的机械录像，而是艺术家的主观心灵或思想感情对于客观景物的能动反映。人们常说色彩与感情，色彩的感觉。实际上是色彩的变化引起人的心境变化，是色彩与心灵的互动。人对同一审美对象所产生的感受，会产生因人因时而异的不同，继而形成不同的审美意象与结论。

二、界面设计中的“美”的形式

界面中表现的内容是由承载着各种信息的形式因素表现出来的。完型心理学认为，由于人的内在心理结构与外在事物形式结构的同质同构关系，人的审美才能与形式表现力之间产生共鸣。从而人能欣赏美。

（一）节奏与韵律：人对节奏的意识是从具体的劳动过程中逐渐分化出来的。景物中的节奏大多是由事物的重复、数量的多少变化、结构的疏密中体现出来的。在移动应用界面中，信息呈现的各种模式：纵向列表、无限列表、缩略图列表、鱼眼列表、走马灯、选择列表等模式，这些模式都以不同的视觉节奏和韵律呈现着信息。例如，在纵向列表中，文本被有序安排在不同的条目中，每个条目显示着各自的信息，文本沿着横轴铺展，列表的条目依次沿着纵向排开，这里表現的是纵向紧密而统一的“节奏”。在网格列表中，信息被各自安排在固定的栏中，每个区域都显示极少的文字，甚至只有图片。网格用于呈现一组可供选择的图片，在设备中，用户可以通过上下滑动或左右滑动来获得更多的信息。所有的图片都有统一或相近的大小和长宽比例，在图片获得焦点时，可以显示一些附加信息。除此之外，人的眼睛获得信息会自然依照阅读习惯-从左至右，从上到下的视觉顺序。人们会认为相邻的物体必然相关。左右相邻的物体，会被人们认为它们是同类或者相关的物体。反之，如果将不是相关的两个物体放得过近，就会使人困惑，打破观看的节奏。同样，屏幕上的栏宽同样把控着人们阅读的节奏，每行字数较少时读的快，阅读节奏快，字数多时，阅读节奏会放慢。

（二）比例与尺度：事物的部分与整体之间的关系就是比例，比例还包含部分与部分之间的关系。这种关系达到某种协调的状态时，便是“美”的比例。尺度则是衡量的标准，在产品设计中把人的尺度作为一种参照标准，反映了产品与人之间的关系，以达到适合人使用的产品的标准。2014年美国苹果公司推出的iPhone6的屏幕尺寸符合黄金比例，其屏幕为4.7英寸，是适应人单手持握的最佳尺寸。经过市场的磨炼，4.7英寸的尺寸也逐渐成为主流手机的适用尺寸。美国苹果公司的“苹果”的标志设计也是符合黄金比例的。美国国家地理网站就采用了符合黄金比例的方式布局，构建了一个方便用户浏览的网站。它为读者提供了一个有规律、有秩序、平衡的和流畅的阅读体验。

（三）对称与均衡：对称是指某物体或图形其结构、形式、内容等有规律的重复。均衡要素彼此之间达到的平衡状态。均衡强调的是物体关系之间的稳定感、整体感。均衡感并非只有对称可以达成，非对称也可以形成均衡的状态。对称的均衡给人稳定的感觉；非对称的均衡具有动势的效果（如图1）。

智能手机软件中能够体现出对称和均衡这一美学原则有很多，例如界面中键盘的设计，无论是苹果公司开发设计的IOS系统的键盘还是适应安卓系统的键盘都体现出了以下一些特点：键盘的左右内容不同存在不对称，但视觉效果达到了均衡的状态。无论中文模式、英文模式、日文模式等语言模式，键盘上的布局都具有相同、相似的规律。键盘左侧的大写按钮与键盘右侧的撤销按钮形状对称、颜色、按钮大小都相同，标志却不同，键盘的最下一行由五个键钮组成，然而其布局安排却不是左右各两个，中间一个的对称布局，而是数字键钮与语言选择键钮二者的视觉“重量”之和等于最右侧的“换行”按钮。而位于中间的“语音”和“空格”按钮被衬以白色，左右两侧的按钮衬以灰色。从而，构成了键盘整体平衡的感觉。

在IOS版Roambi的例子中，当用户不是垂直滚动屏幕的时候，最左侧的列固定，其他列可左右滑动。由于Roambi的超扁平化设计，乍看之下要分辨出左侧为固定列有点困难，但可以看出右边有更多的信息。在这里，页面内容的左侧不会改变，但右侧的列表会跟随手部的滑动而改变内容，但是设计师使得这样的布局依然能够达到平衡的状态。除此之外，该页面中顶端布局与底部布局，每个单独信息块之间通过改变颜色，疏密的排列达到了对称和均衡。

（四）对比与协调：对比可以通过改变或调整事物之间的大小、轻重、明暗、色彩、质地等来加强对比。具有强烈对比效果的画面会更加吸引人的眼球，引起人的观看，对比越弱画面就越趋于平和、稳定，对比越强烈就越富有动感。协调是指对立要素之间达成调和一致均衡的状态，苹果公司的电子设备中的IOS系统，在警告窗口中就良好地保持对比与协调这两者之间的“度”。警告窗口首先要做到引人注目，突出窗口中的内容，其次还要保持好跳出窗口与正在使用界面之间的协调关系。该窗口与系统之间的均衡是由以下的几条体现出来的：

1.窗口显示动作不同，该窗口为跳出后带有闪烁。2.窗口颜色为白色，而当前使用的界面变暗。3.窗口内容为清楚、明晰的字体，而当前页面的内容被虚化。4.跳出窗口在最前，其尺寸小于其他应用界面的大小。

（五）变化与统一：变化指的是事物之间存在差异的现象，这种变化可以是有规律的，也可以是无序的。统一即同一，事物之间存在的共同性质或特点。统一使得事物彼此之间存在整体性。无论在艺术品中还是在设计作品中，重复和变化二者相辅相成，缺一不可，任何其一抛弃了另一要素最终都会走向极端。梁思成在他的文章中曾提到“重复与变化的统一，在建筑形象的艺术效果上起着极其重要的作用。古今中外的无数建筑，除去极少数例外，几乎都以重复运用各种构件或其组成部分作为取得艺术效果的重要手段之一。”智能手机界面设计中较为典型的要数手机的操作系统中的主屏幕的设计了。以IOS10为例，主界面中置放着各样的应用ICON，彼此之间都有着各异的LOGO、色彩、图形，各个ICON代表着不同功能的应用。再到各个ICON的摆放，每个图形都占据着自己的位置，但是这些位置都是在同一个网格系统中被统一安排的。界面的设计中除了ICON的摆放具有这种变化与统一的美的同时，其他方面，例如短信的应用界面、游戏的应用界面等都存在着变化与统一。

设计审美范畴中除了形式美还有技术美、功能美、艺术美等。新的科学技术的发明推动了生产力的进步，生产力的发展会提升产品的质量的同时，更能满足人们的诉求，信息时代的科学技术促进了电子信息技术的发展这就催生了智能手机，如今智能手机能够体现出一种新的技术美，它是当代的一种审美形态。其次，对技术美的历史研究表明出科学技术的发展状态、发展程度会在某种程度上影响着、制约着人的审美意识的发展。也就是说，智能手机的界面设计，包含了当今时代最先进技术的真实体现，同样，在历史上的建筑领域中，建筑艺术历来都是其时代最先进技术的真实体现，才能设计出优秀的建筑物。这体现出无论是主体的审美趣味还是客体的艺术风格的迭代变化，都是离不开当时的社会中的物质基础。其三，手机界面设计具有和谐统一的特点，这也是技术美的理论意义与现实意义所在。

结语

智能手机的界面是为了人们更好地使用手机本身的功能而存在的，在美学领域中存在着这樣的一类观点：“有用即是美”、“美必然是有用的”。这种“有用的”指的即是产品的功能性。

最后，界面设计的好坏都是要到实践中才能得到答案的，“美”的设计一定是好的，而不好用的设计一定是不“美”的，对设计风格的选取最终还是要取决于具体产品的实际应用的具体情况。手机界面设计的风格有两种走向，拟物化和扁平化，扁平化的优势在于它能够更加简单、直接地将事物的工作方式和信息展示出来，减少阅读过程中认知障碍的产生，拟物化的优势在于可以逼真、直观地展示出信息内容。无论设计出怎样的风格，高效实用的界面设计都需要遵从一般的设计原则，并在实践中不断改进、优化，最终才能打磨出优秀的、“美”的设计产品。