基于移动终端交互界面设计的审美原则探析

姜旬恂　韩凯迪

摘 要：以移动设备的交互界面设计为研究对象，从视觉审美角度探讨目前三大主流平台比较流行的扁平化风格的设计形式及审美原则。针对目前移动端进行交互界面设计仅限于传统平面印刷模板式的常规表现形式，提出交互界面视觉设计迫切需要注意的视觉审美形式要素问题，即：针对交互界面视觉设计的个性化、情感性、多维性及导向性等审美原则性问题进行分析与探讨。目的是为跨平台进行UI设计的设计师提供理性认识上的参考，同时推动移动应用程序在功能的适用性、提升审美蕴性及满足精神需求等方面为用户带来更佳的功能与情感上的愉悦体验。

关键词：移动设备；交互界面设计；审美原则

近几年，智能手机及其他移动端设备在社会生活中的普及，给我们的生活方式和生活习惯带来了巨大的改变，移动互联网及应用程序的使用已经成为我们日常生活中的重要组成部分，人们的生活质量开始变得与移动产品的设计水平息息相关了，挑剔的移动端用户们从最开始较多的关注应用程序的功能，慢慢地在界面视觉设计的审美形式上开始有了更高、更深层次的心理要求。因此，必然使得设计师们对于移动端交互界面的设计开始有了更多的关注和思考。

1 移动端交互界面设计的特点

其一，从移动设备的物理特征来看，由于其便捷的可操作性及便携性，智能手机都以触屏操作为主，它的屏幕尺寸较小，而且屏幕尺寸的种类繁多，这就要求我们在对交互界面进行设计的时候要珍惜宝贵的屏幕空间资源，合理布局导航、层级界面及界面内信息，并注重同一应用程序在不同屏幕尺寸下的设计元素布局以及响应式的适配设计，对于按钮及可触控区域空间的设计也要符合人的手指的尺寸来进行设计的考量，一般来说，根据食指及拇指对移动设备屏幕的接触面积来看，按钮的面积最小的范围区间应在57～72像素之间，[1]如图1所示。

其二，从移动设备的媒体特征来看，它可以从视觉、听觉、触觉多个通道来对内容进行呈现。听觉及触觉的设备反馈配合优秀的交互界面设计，可以让用户有更真实的沉浸感，设计师们在进行设计的时候可以对多种媒体资源进行调用。例如，在以枯燥的数据信息为主的内容的交互界面设计中，适当加入信息动画的元素，能够增加人们使用的乐趣，提高浏览页面的兴趣。例如，在iOS平台上有一款由KYU TAE PARK开发的应用程序《温湿度计》，在界面的设计上就充分运用了信息动画的形式来向用户展示当日的温度、湿度、气压等方面的气象信息，让这样的信息更容易被人们所接受（如图2所示）。

其三，从移动设备的使用环境特征来看，由于它的体积较小，几乎可以被我们携带到任何地方，并且几乎在任何时候都可以使用，这种时间和空间的自由性会使环境光对交互界面设计的影响加剧。例如，同一屏幕的内容，在环境光低照度下阅读，屏幕亮度过高，长时间阅读会对视力造成损伤；而在环境光高照度，屏幕亮度过低的情况下，使用者会看不清屏幕的内容。

2 移动终端交互界面设计的视觉审美原则

从目前世界范围内的三大主流移动平台（苹果公司的iOS平台、谷歌公司的Android平台和微软公司的Windows Phone平台）的设计风格来看，扁平化的设计风格已经成为当今移动终端交互界面设计的最主流的视觉设计风格了，扁平化设计风格主张抛弃那些任何能使作品凸显立体效果的特性，不像大多设计师们经常会用到的透视、阴影、纹理等高度拟真的视觉效果，而通过抽象、简化、符号化的设计元素来进行信息的传达，这种风格现代气息浓郁，视觉上给人一种干净利落的感受。[2]

但其实追溯到扁平化设计风格的起源，它的灵感来自于平面设计领域及印刷出版领域，目前比较公认的灵感来源风格是：瑞士风格（国际主义平面设计风格）、包豪斯风格和极简主义设计风格。所以，我们在进行移动终端交互界面设计的时候，尤其是对处理图形元素和页面布局间的关系的时候，除了考虑移动终端固有的特点以外，还可以在视觉设计方面参考版式设计的一些审美原则和规律。

（1）交互界面视觉设计的个性化原则。据今年年初移动市场研究公司AppFigures发布的一项报告显示，截止到2014年底，Google Play Store上已拥有143万款应用，而iOS App Store上的应用也有121万款之多，在这样庞大的应用市场当中挑选我们需要的应用程序，实在是件不容易的事。设计师们也不甘心自己设计的作品在趋于功能同质化的市场中因缺乏个性而被埋没，所以，追求新颖、独特、个性化的艺术表现形式成了设计师们在做设计时思考的重点之一。由美国《纽约时报》开发的一款旅游类的应用程序《The Scoop》，主要分享本地人最喜欢的餐厅、酒吧、咖啡店，有趣的表演和一日游等活动。在界面风格及导航图标的视觉设计方面就别出心裁（如图3、图4所示），使用了色块和可爱插画的表现形式，摆脱了以往旅游类应用严肃的唯美的界面风格，得到了一种幽默、风趣的视觉感受。

（2）交互界面视觉设计的情感性原则。“以情动人”几乎是所有视觉艺术创作门类当中都要遵循的表现规律，无论是摄影作品、电影作品，甚至推及到平面设计的各个门类，一件作品既然称得上优秀，就要能够打动观者，能够让观者产生强烈的心理共鸣，甚至影响到观者的情绪和行为。移动终端的交互界面视觉设计也是如此，界面的使用方法及交互模式要符合我们日常生活的心理模型，这样才能提高使用者的认知程度及使用效率。如图5、图6所示，由韩国VCNC公司开发的《News Gallery》，是一款新闻类的应用程序，界面的信息设计采用了画廊的展览形式，而且用户可以根据自己的阅读偏好来制定画廊展览的内容，让使用的体验更接近展览馆的阅读感受。

（3）交互界面视觉设计的多维性原则。手机屏幕虽然是一个二维的空间，但是由于计算机技术手段的不断进步及各种艺术表现风格的需要，在手机屏幕上甚至可以达到裸眼3D的视觉效果，这就给交互界面的视觉设计在展现空间距离方面带来了更多的可能性。谷歌公司在2014年的网络开发者年会上推出了一种全新的设计语言：Material Design。它同样具有扁平化设计风格的特征，但是它最大的特点就是非常重视动效在交互界面设计过程中的使用，通过添加动效的方式将页面内的元素、页面与页面之间有机的连接起来，巧妙的表现不同层级界面间的过渡，而且通过吸收水墨浸染纸张这一过程的灵感，采用触摸反馈涟漪的方式给用户带来更加有趣的使用体验。Material design设计语言中还在元素的层级排列中引入了z轴的概念，它假设把app的界面放在了一个容器当中，z轴垂直于屏幕，用来表现元素的层叠关系，如图7、图8所示。z值（高度）越高，元素离界面底层（水平面）越远，投影面积越大。[3]所有元素都有默认的相对高度，对它进行操作会抬升它的相对高度，操作结束后，它应该落回默认高度。

（4）交互界面视觉设计的导向性原则。在版式设计中，视觉流程是一种“空间的运动”，是人的视线随版式设计中诸多视觉艺术语言形态在版式空间沿一定轨迹运动的过程。在移动端的交互界面设计中也存在着“视线流”这一概念，而且除了用户的主动注意外，视觉注意力还很容易被运动的元素所吸引，造成注意力的被动转移。视觉的焦点需要运用在应用程序所要传递的信息的聚焦点上，如何引导用户看到他们想要的信息，或者是产品需要用户看到的内容，是设计师们需要事先考虑好的问题。如图9所示，是一款购物类应用程序的搜索列表的原型草图，左侧的界面，由于有活动指示器的存在，所以用户的视线流的起点就落在的进度指示器上，又由于多加入了一个返回的按钮在界面的左上角位置，用户的视线流最终就落在了左上角上，整个视线流的流线稍显混乱，而相比之下，右侧的搜索列表界面在视线流的引导上就显得更加流畅了。

3 结语

扁平化设计风格在近几年的移动终端交互界面视觉设计方面，正在被广泛地应用和快速地发展着，但实质上它只是印刷出版美学在当今数字世界的一次重现，我们无法准确预知扁平化设计风格的最终走向趋势，又将被什么样的设计风格所取代。设计师们在进行跨平台应用开发时，更需要注意研究每个平台的设计语言及美学风格，并挖掘应用的典型交互方式和视觉特征，尽可能地保留能传达应用品牌的设计特征，使移动产品在符合各个平台的设计审美原则的同时，又能将品牌的形象传递给客户。毕竟，对于很多用户来说，界面的视觉效果和个性化体验才是他们选择应用程序的重要依据。

参考文献：

[1] 杨焕.智能手机移动互联网应用的界面设计研究[D].武汉理工大学，2013.

[2] 刘浩然.扁平化交互设计的美学研究[J].艺术品鉴，2015（11）.

[3] 赵大羽，关东升.品味移动设计：ios、Android、Window Phone用户体验设计最佳实践[M].北京：人民邮电出版社，2013.

[4] 耿阳.基于杜威实用主义美学思想的人机交互研究[J].包装工程，2012（02）.

[5] 陈星海，杨焕，廖海进.基于效率的移动界面视觉设计美学发展研究[J].包装工程，2015（16）.

[6] 傅小贞，胡甲超，郑元拢.移动设计[M].北京：电子工业出版社，2013.

作者简介：姜旬恂，女，美术学硕士，吉林动画学院游戏学院副教授，研究方向：信息设计与新媒体应用。

韩凯迪，男，设计艺术学硕士，吉林动画学院游戏学院助教，研究方向：交互设计。