浅析类扁平化设计在图标设计中的应用

张朦朦 （河南牧业经济学院 物流与电子商务学院 450045）

扁平化设计是当前在界面设计中使用最多，讨论最多的一种设计形式。在设计作品中经常可以看到设计精美的图标，特别是在网页以及UI设计中，图标的应用更加广泛，。从本质上看，扁平化设计不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化，本文将从扁平化设计的优缺点入手，探讨类扁平化设计理念在图标设计中的应用。

一、扁平化设计概述

1.拟物化设计

拟物化设计在很长一段时间内都是设计的主流，它是指在设计过程中通过添加高光、纹理、材质和阴影等效果，力求对实物具象的再现，在设计过程中也可以适当程度地进行变性和夸张，界面模拟真实物体。拟物化设计可以使用户第一眼就能够认出对象是什么，拟物化设计的交互方式也模拟现实生活中的交互方式。

拟物化设计因其完全模拟现实生活中的物体对象，其优势十分明显。其一是识别度高，即无论是什么年龄、什么文化背景的人都可以认识拟物化的设计；其二是质感和交互性强，拟物化设计的视觉质感非常强烈，并且其交互效果能够给人很好的使用体验，以至于人们对拟物化设计已经逐渐养成了使用和认知习惯；其三是人性化，拟物化能够较好地体现人性化，其设计风格与使用方法与现实生活中的对象相统一，在使用上非常方便。

为了实现兑现的视觉表现和质感效果，在进行拟物化设计时需要花费大量的时间和精力，进而会忽略其功能化的的实现，因此很多拟物化设计并没有实现较强的功能化，而只是实现了较好的视觉效果，这是拟物化设计的主要缺点。

2.扁平化设计

扁平化设计从字面意思上理解是指设计的整体效果趋向于扁平，无立体感。扁平化设计的核心是在设计中摒弃高光、阴影、纹理和渐变等装饰效果，通过符号化或者简化的图形设计元素来表现。在扁平化设计中去除了冗余的效果和交互，其交互核心在于突出工鞥呢本身的应用。

扁平化设计与拟物化设计时两种完全不同的设计风格，扁平化设计的优点主要有三点，其一是时尚简约，扁平化设计总常常使用一些流行的色彩搭配和图形元素，使看多了拟物化设计的用户有一种焕然一新的感觉，扁平化设计可以更好的表现出时尚和简约的美感；其二是突出主题，扁平化设计中很少使用渐变、高光和阴影等效果，或者使用的微弱的效果，这样可以避免各种视觉效果对用户视线的干扰，使用户专注于设计内容本身，突出主题，也使得设计内容更加简单易用；其三是更易设计，优秀的扁平化设计具有良好的架构、排版布局、色彩运用和高度一致性，从而保证其易用性和可识别性。

扁平化设计主要是纯色和简单的图形符号来构成基本设计，所以在表达情感上不如拟物化设计丰富，这是扁平化设计的主要问题。

二、扁平化设计所带来的问题

好的设计无论是否扁平，都应该通过整洁的视觉交互、有效的设计和易用的体验为用户解决问题，扁平化设计的发展时间只有短短的几年时间，随着ios7界面抛弃了之前一直沿用的拟物化设计走向扁平化设计，扁平化设计才逐渐被广大用户逐渐接触，然而ios7扁平化设计也有一些缺陷，比如图标符号化过于简单，使用户不容易理解，或者图标符号化特征过于复杂，与其他图标风格不统一等，这是设计师在进行扁平化设计需要注意的方面。

与优秀的的UI设计一样，好的扁平化设计应该把可用性放在首位，扁平化设计的美感需要和可用性息息相关，并且如果必须要在“美感”和“用户友好”两者之间二选一，应该是“用户友好”优于“美感”。比如Windows8的界面设计采用了扁平化设计，大胆的配色和平铺的设计风格与传统的Windows系统界面有着很明显的区别，虽然Windows8界面中的额图标既美观又整洁，但是可操作性并不强，抛弃了渐变、高光和阴影等效果，很难让用户知道哪些图标是可以点击的，哪些是不可以点击的。有些时候，扁平化实际会变得太“平”了，以至于影响了设计的可用性。如果界面太过于扁平，可操作的元素就会淹没在看起来一样的扁平化元素中，没有任何良好的视觉提示的话，人们并不能知道能和哪个对象进行交互。

类扁平化设计既可以解决扁平化设计所带来的问题，又向扁平化靠拢。所谓类扁平化设计就是不需要武断地抛弃渐变和投影灯效果，相反，可以使用细微得渐变、投影灯颜色效果来营造空间快感、距离感、视觉层次和边缘效果。在类扁平化设计中，通过一些微妙的美学效果给用户一种视觉上的暗示，告诉用户哪些对象很重要，并且可以操作，这样就大大提高了设计的可操作性和易用性，并且保持了扁平化的风格。

三、图标设计的基本概念

1.什么是图标

图标是具有明确指代含义的计算机图形。其中操作系统桌面图标是软件或操作快捷方式的标识，界面中的图标是功能标识。图标广义上是指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性；狭义的是指应用于应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。

随着计算机的出现，图标被赋予了新的含义，又有了新的用武之地。在这里图标成了具有明确指代含义的计算机图形。桌面图标是软件标识，界面中的图标是功能标识，在计算机软件中，它是程序标识、数据标识、命令选择、模式信号或切换开关、状态指示。图标在计算机可视操作系统中扮演着极为重要的角色，它不仅可以代表一个文档，一段程序，一张网页，或是一段命令。图标在界面设计中无处不在，是界面设计中非常关键的部分，随着社会和科技的发展，图标呈现出百花齐放的状态，图标设计不仅需要精美质感，更重要的是具有良好的可用性。随着人们对美的认识发生改变，越来越多的设计向简约、精致的方向发展，通过简单的图形和合理的色彩搭配构成简单的图标，给人简约、清晰、实用、一目了然，这就是扁平化图标。

2.图标设计的作用和意义

在界面设计中，图标设计占有很大的比例。图标在设计中一般是提供单击功能的，了解其功能后，要在其易辨认性上下功夫，不要将图标设计得太花哨，否则刘拉起不容易看出它得功能，这也是扁平化图标设计的精髓所在。

优秀的图标设计可以为设计界面增添动感。现在，界面设计趋向于精美和细致，设计精良的图标可以让所设计的界面在众多设计作品中脱颖而出，这样的界面设计更加连贯，富于整体感，交互性更强。

四、基于类扁平化的图标设计

1.类扁平化图标的设计原则

界面设计的未来方向是简洁、易用和高效。精美的扁平化图标设计往往能够起到画龙点睛的作用，从而提升设计的视觉效果。现在，图标的设计越来越新颖，有独创性，扁平化的图标设计的核心思想是要尽可能地发挥图标的优点：比文字直观漂亮，在该基础上尽可能使用简洁、清晰、美观的图形表达出图标的意义。

（1）可识别性

可识别性是图标设计的首要原则，是指图标的设计要鞥能够准确地表达相应的操作，让浏览者一眼就能明白图标要表达的意思。例如，道路上的图标，可识别性强、直观、简单。

（2）差异性

差异性也是图标设计的重要原则之一，同时是容易被设计者忽略的设计原则。只有图标之间有差异性，才能被浏览者所关注和记忆，从而对设计内容留有印象，否则图标设计就是是失败的。

（3）与环境的协调性

任何图标或者设计都不可能脱离环境而独立存在，图标最终要放在界面中才会起作用，因此，图标的设计要考虑图标所处的环境，这样的图标才能更好地为设计服务。

（4）视觉效果

图标设计追求视觉效果，一定要在保证差异性、可识别性和协调性原则的基础性，现满足基本得功能需求，然后考虑更高层次的要求——视觉要求。

（5）创造性

在保证图标实用性的基础上，还要提高图标的创造性，只有这样才能和其他图标相区别，给浏览者留下深刻的印象。随着网络的不断发展，图标的设计更是层出不穷，要让浏览者注意到设计的内容，对图标设计者提出了更高的要求。创造性在设计中非常重要，在图标的设计过程中同样需要具有创意性。

2.类扁平化图标的设计风格

扁平化图标在在界面设计中应用的越来越多，因其简介、大方、直观和易用等特点，使用的越来越广泛。为了避免扁平化图标在设计中可能出现的图标符号化过于简单、识别度不够的问题，需要在基础风格上增加一定的阴影、长阴阳和梯度风格。

（1）基础风格的扁平化图标设计

基础风格的扁平化图标，不添加任何的渐变、阴影、高光等体现图标透视感的图形元素，而是通过机器简约的基本形状图形、符号等表现出图标的主题。如图1所示。

（2）阴影风格的类扁平化图标设计

阴影风格的扁平化图标主要是为图标中主体图形元素添加常规的阴影效果，如图2所示。

（3）长阴影效果的类扁平化图标设计

长阴影风格的扁平化图标是目前最流行的、也是应用范围最广的类扁平化图标设计分割。长阴影设计主要用于较小的对象和元素，在扁平化图标设计中应用最为广泛，具体效果如图3所示。

（4）微渐变风格的扁平化图标设计

微渐变风格就是将简单的图形元素与传统的拟物化图标的高光表现方式相结合，通过微渐变的方式体现出图标的层次感和立体感，具体效果如图4所示。

总结

拟物化设计具有识别度高、质感和交互性强、人性化的有点，扁平化具有时尚简约、主题突出和更易设计的有点，两种设计理念可以在一定程度上进行结合形成类扁平化设计思路，本文在提出类扁平化设计思路的基础上，分析了图标设计的基本概念，从从阴影风格、长阴影风格、微渐变风格三个方面对类扁平化设计在图标设计中的应用进行了探讨。

参考资料：

[1]李海玲.互联网产品设计[M].高等教育出版社，2012.

[2]罗仕鉴，朱上上.用户体验与产品创新设计[M].机械工业出版社，2010.

[3]金景文化.扁平化用户界面设计教程[M].人民邮电出版社，2015.