UI扁平化设计在移动终端的应用与价值

开篇：润墨网以专业的文秘视角，为您筛选了一篇UI扁平化设计在移动终端的应用与价值范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘 要：结合移动平台ui扁平化设计的特点，通过与拟物化的UI设计进行比较，论述了两种界面风格对交互及情感层面的影响和意义；追溯扁平化设计思想的源头并解析它在移动终端流行的原因；在此基础上，透过用户体验和移动界面未来的发展趋势探讨扁平化设计理念在移动平台UI设计中的应用与价值。

关键词：界面；用户体验；扁平化设计；拟物化设计；交互

中图分类号：J524 文献标识码：A 文章编号：1005-5312（2013）33-0159-02

在微软以Windows UI诠释了“扁平化”设计理念之后，新一代苹果的移动操作系统也抛弃了主界面图标复杂的光影效果和体积感，整个系统看上去更加简洁，却不再华丽。扁平化是对界面设计中过度装饰的一种颠覆，就像极少主义是华而不实的装饰风格的一种颠覆一样。从美学的层面来说，人们对某一风格视觉形态审美疲劳后也必然寻求于新鲜形式的视觉刺激，扁平化设计在短时间内迅速流行，有其必然性，但是从本质上看，它不仅仅是一种视觉层面的改变，更是在信息化时代大数据背景下的一种设计语言和思维方式的转变。

一、拟物化设计

（一）拟物在交互体验中的价值

对信息产品而言，功能的呈现不再是传统的可感知方式，而是无形的程序。拟物化设计的本质是把虚拟环境中产品体验的某一特性在真实世界中找到一种映射，然后把这种映射通过设计语言的归纳在体验中以视觉或交互形式得以体现，从而使产品体验本身更具真实度和情感化，并且更符合用户的心智模型。“界面和行为看起来越接近现实生活中的事物，用户就越容易理解它们的运行方式，使用起来也就越简单。”

图形界面伴随着拟物化设计而诞生，比如微软系统对Windows的隐喻，以及Mac早期的储存和删除图标等。拟物化设计的视觉表现形式亲切而多样，运用生动的操作过程唤能够起使用非物质产品时的情感体验，通过拟物的设计唤起用户大脑中的记忆模型，帮助新手用户使用程序的同时，也唤起熟练用户对情感的诉求。界面中的拟物化设计包括实物形态的拟真，交互行为方式的模拟。模拟形态的拟物设计脱胎于传统工业设计中的仿生设计，由于产品的功能需求和结构解决的自然相关性，对于拟物的研究和使用往往能够为设计提供一种独特的解决方案，从而高效地满足功能的需要。有的还因为拟物化设计具有形态或交互界面的趣味，更显拟物设计的价值。在一些高沉浸感的应用程序，比如游戏中，拟物的设计不仅可以增加界面的美感，也更多的满足了用户的娱乐需求和情感需求，这种对真实世界感知的还原，在艺术效果上的提升，有助于沉浸感的实现，并使用户感到愉悦。此后，越来越多应用类产品也开始采用拟物化设计的方式。通过模拟现实生活中的场景，实物的质感，以及人们的日常行为习惯等，使产品的表现形式更加丰富有趣，操作也更加符合用户的日常习惯。

（二）拟物的局限

拟物的设计方式并不适合严肃的功能性界面，比如以数据呈现为主的金融类软件和办公软件等等。另外，虚拟界面与实物的界面差异，真实维度的不同，维度差异导致了大量在实物上常见的控制方式无法在以屏幕为载体的界面当中得以还原。当一个程序的界面几乎完全模仿现实生活中对应物的界面时，用户会期望二者之间能有对应的行为方式，但某些情况下这样设计是为了满足视觉感官，而对功能的期待并不都能得到满足，这就导致了用户界面设计的“形似而神非”。此外，同一套拟物设计，面对不同用户的操作习惯和经验，以及用户群体的地域性及文化差异，不能完全使用户将已有经验映射到程序界面上。拟物设计极易产生视觉冲击，使人产生身临其境的亲切感，拉近内容与用户的距离，以画面传递更多产品的特性信息，加深对产品的认知，但对交互的功能本身并不一定有质的提升，越来越少的人需要这些视觉线索来理解一个图标或者按钮的功能，而更需要视觉上的简化去除次要信息的认知干扰。

二、扁平化设计

（一）极简与秩序

扁平化设计最好理解的是“极简”，即强调运用最轻量、简单的设计来传递核心信息，强调通过对视觉焦点的引导来让用户快速地完成操作。苹果的首席设计师乔纳森・艾维阐述出了极简设计的哲学理念：“简洁之美将影响深远，包容、高效。真正的极简不仅仅是抛去了多余的修饰，它给复杂带来了秩序。”

（二）信息为主体

放弃任何附加效果，突出重要的信息，简化交互的流程。视觉层面，UI扁平化设计可以通俗的理解为：不包含三维属性，诸如纹理、投影、斜面、羽化边缘、浮雕等特效都不在设计中使用。从本质上讲，UI扁平化设计的核心是强调信息本身，而不是冗余的界面元素。扁平化界面目的不仅仅是为了创造视觉刺激，而是解决干扰，内容优于形式，在屏幕上仅留下用户当前最关注的信息，让用户沉浸在他们喜欢的内容中，注重通过对齐来呈现简洁、易读的内容，把精力集中到最核心内容上。减少概念与界面层级的视觉装饰，更多地使用用户已经掌握的交互行为。

（三）扁平的局限

在视觉的层面，UI的扁平化设计正如瑞士国际主义风格，同样具有冷漠、理性和功能主义的特征。扁平无疑是一把双刃剑，过分的理性化与公式化导致了个性的丧失，忽略了大众对于情感的需求，无法关照个人的审美和传统对于人的影响，缺乏感性和人文思想给设计者造成较大的局限。它强调易于理解和记忆，于是必须具有形式简单、反装饰性、强调功能、高度理性化和系统化的特点，如界面设计上对质感最大限度的抽象化，对于表现空间深度、维度、光影这样的基本元素全都舍弃，割裂了用户对虚拟界面认知时对真实世界的联想，增加了某些用户群体的认知成本，尤其是儿童和初级用户。

三、移动互联网发展对UI设计风格的影响

据2013年百度《移动互联网发展趋势报告》显示，PC互联网正加速向移动端迁移，手机正替代PC成为大众最常用的终端。基于科技和移动互联网的发展，我们已经身处大数据时代的序幕之中。大数据时代大数据时代信息无处不在，UI设计也面临前所未有的挑战：数据量巨大（Volume）、处理速度快（Velocity）、数据多样性（Variety）、价值密度低（Veracity）。因此，从信息与交互的层面，移动UI扁平化是必然的趋势。

（一）简洁、高效、通识的界面需求

从信息传达的层面，用户“看到”与“看见”是个非常复杂的选择、推理与决策的过程，对于意识焦点的干扰也是拟物设计在交互效率上所面临的问题。扁平化设计在小屏幕上得到了更好的表现，尤其是在手机移动端上。随着移动互联网的崛起，信息传播的速度和规模达到空前的水平，实现了随时随地全球的信息共享与交互，但是，汹涌而来的信息常使人无所适从。移动UI所面临的的挑战：信息量大（各种应用、网站层出不穷）、使用环境复杂（界面显示需面对不同的光线和运动的环境）、使用时间碎片化（很难满足信息的连续性）、手势控制（无法精确）、屏幕的限制（显示空间压缩但复杂程度不亚于PC）。此外，移动终端所提供的信息和服务的极速增长，以程序图标引导的界面形式，渐已无法承载如此之多的信息需求。如在iOS6主界面上仅提示数量无法获知邮件的信息，需要由程序图标进入邮箱才能得到预览，而在Windows UI中，邮件的主要信息会直接呈现在邮件区域，并可以以动画滚动形式在此层级获得更多的信息，显示天气等其他部分的应用都是如此。因此，界面设计需要直接呈现信息，内容即是界面。当信息内容以本来面目成为界面主体，过去纯粹装饰性设计开始成为内容化界面的重负，需要为大量的信息内容让渡意识焦点，因此必然会受到逐步减弱和剥离。

（二）扁平更适应响应式界面

2013年6月，视频网站优酷的改版采用了扁平化设计风格，实现PC、手机和平板屏间风格、内容及交互的一致性体验。以前，通常需要为移动用户，专门搭建一个移动网站，以解决跨平台或多屏适配的问题。而现在解决的方案是响应式设计，即根据不同的浏览器和设备尺寸的变化，动态改变网页的布局和内容，相比之下扁平化界面则更容易实现响应式设计，这也是为什么许多设计者开始避开注重质感纹理的设计而向极简化的设计靠拢。

（三）从新技术普及的层面看UI扁平化设计

将虚拟世界跟现实世界进行融合的增强现实技术在移动互联网上的应用是未来的一大趋势。其应用形式主要体现在实景上的信息增强，即将现有互联网信息附加显示在现实信息中。无论是“第六感”设备和OmniTouch以投影的形式呈现界面，还是google眼镜式的增强现实显示屏，都是在实体环境中来显示移动终端的界面，这就需要界面能够适应不同色彩、光线、纹理乃至异面的显示，而扁平化的界面风格相对于拟物风格更容易做到这一点，也更能减少冗余信息的干扰，呈现主要的信息，同时也更需要将交互过程进一步简化，即操作层面的扁平化。因此，正如以上设备所呈现的界面风格，在目前或者短时间内，移动设备的界面都将是扁平化占据主流，微软展示的愿景系列也预示着这一方向。

四、结语：两种设计风格的交汇与共生

新的科学技术和交互设计理念，赋予人类能力极大的延伸。UI设计师们总在探索和挑战新的设计风格，也热衷于看到不断变化的趋势和进步。扁平与拟物的取与舍，不能一概而论，需要以用户为中心、目标为导向，不同的用户群体、不同的硬件类型、不同的功能诉求和情感诉求都决定界面的结构与形式。因此，不仅要从功能和技术的角度出发理性的思考，同时也需要从情感的层面，赋予产品更多的美学和人性。移动平台的UI设计需要从美学、功能、体验综合去考量和平衡。

参考文献：

[1]苹果人机界面指南.

[2][美]唐纳德・A・诺曼.付秋芳，程进三译.情感化设计（第3版）[M].北京：电子工业出版社，2006.

[3][美] Carrie Cousins. Flat Design： Can You Benefit from the Trend？ [EB/OL]：http：///flat-design/

[4]王受之.世界现代设计史（第2版）[M].深圳：新世纪出版社，2001.