马卡龙主题图标——扁平化在主题图标中的应用

摘 要

马卡龙主题图标设计是我毕业设计的其中一部分，希望运用扁平化概念为主题图标设计方法提供新的思路，让主题图标的使用最大化的不再受方方面面的限制。

对于主题图标来说，用户的使用粘度至关重要，通过分析发现造成主题图标用户使用粘度不高的视觉原因主要有以下两点:

• 主题图标难以识别

• 应用主题图标之后，系统图标和第三方应用图标视觉不匹配

而本文就是以这两大问题为切入点展开论述。

通过分析扁平化特点发现引用扁平化概念，可以完美解决这两个问题。

扁平ICON经过长时间的发展已经形成了一种视觉符号，好比红灯停，路灯行一样，在人们心中有着根深蒂固的印象，当我们使用扁平元素做载体应用到主题图标中，不但可以加强主题ICON的识别性，更加可以使主题图标的风格多样化。

市面上的大多数APP图标都是扁平化的，我们可以从中提取扁平图标主体部分之后再充当为主题图标载体。再次应用到主题图标中。本文以马卡龙主题图标为例，向大家具体论述扁平化在主题图标中的应用

并且通过大胆猜想，提出了“主题图标自动生成方案”，并分析了在第三方应用图标高度匹配的前提下“主题图标自动生成方案”的可行性。希望为相关领域工作者提供参考，早日将设想变成现实。

正文

主题图标的现状分析

• 主题图标概述

主题图标是用户在主题商店下载的一种应用程序。在应用到手机之后，手机原来的图标会立即变为与之对应的主题图标。主题图标仅仅是作用于视觉层面，并不影响手机的交互。一般来说主题图标分为系统图标和第三方应用图标两个部分，系统图标是类似于相机、相册、通讯录这样的图标，而第三方应用图标则是像淘宝、支付宝、微博这样需要下载安装的图标。并且主题图标的风格也是多种多样的。用户可以选定某一主题图标来装饰手机，使手机变得更加个性化。

• 主题图标设计现状

• 积极方面

国内外的许多生产商（华为、OPPO、vivo、三星、小米）都有各自研发的主题商店见图，主题商店分为付费区和免费区，用户可以根据自己的需求选定主题图标来装饰手机。并且这些厂商还会定期举办主题大赛见图。例如：DIGIX华为全球手机主题设计大赛（见图）、方寸之间，“星”城无界 – 三星全面屏手机主题设计大赛、魅族Flyme手机主题设计征集、荣耀Magic2魔法手机主题设计大赛等。手机主题图标越来越受到人们的青睐，设计师们也陆续设计出优秀的作品参赛，供人们下载使用。而且主题图标的好坏也成为了考核视觉、UI等设计师能力的重要指标。因此主题图标的风格也越来越变得多元化。

• 消极方面

市面上的主题图标风格越来越多种多样，主题图标的质量越来越良莠不齐。用户使用粘度也越来越低，笔者针对这一现象进行了分析，发现了影响这个现象的原因有以下两点。

1 图标辨识度太低

一款成功的图标具备的不应该仅仅是视觉美，而是应该从用户体验的角度上考虑，如果用户在辨认图标上花费太多时间的话，那么这款图标就丧失了一定的专业性，设计师在设计主题图标时是无法同时兼顾主题与辨识度的问题，就好比下图中的图标，如果给时间辨认的话，当然是可以通过图案要表述的意思来判断出主题图标的功能，但是在作为功能性极强的主题图标来说，每个图标都是需要通过看到图案-判断图案意思-猜出图案功能这个流程来进行的话，势必是需要浪费时间的。而对于用户来说，在视觉感差不多的情况下，会更加青睐于辨识度较高的主题图标.

2 第三方主题图标和系统图标不匹配

当手机应用主题图标之后，就像微博、微信、QQ这样的图标是不会像系统图标那样有与之对应的图标，通常来说设计者们会采用一种方法来解决问题。如图和图，都是设计者设计了通用底座，再将原本图标标嵌入进去形成主题图标，但这样的解决方式很明显，在风格、颜色上是不统一的，就好比下图相册，电话，信息三个是协调统一的 但是手机淘宝和支付宝却显得格格不入，颜色上前三个用的是设计者们通过设计后定的主题图标主色调 ，而后两个依然保留原来APP ICON的主色。所以在风格和颜色上面是高度不匹配的，视觉感太混乱这也是造成主题图标用户使用粘度不高的主要原因。

扁平化概述

• 扁平化设计现状当今，扁平化手法已经被广泛的应用在我们国家的不同设计领域中，扁平的图标深入人心。如图，即使图标下面并没有标注名字，但我们几乎可以不加思考直接说出他们的意思，这就像红色代表禁止，绿色代表通行一样在大家心中形成了一种固有符号。就拿垃圾桶的图标来说，一看到它就会知道它的意思，在人们心中埋下了深深的根。

现在，扁平化设计已经成为图标创作的关键的风格，也可以说是人们日常生活中非常关键的一部分，人们的生活受到它的影响逐渐增大。它是时代的产物，到现在，扁平化设计也在一步一步的改良自己，一点一点的进步。让图标尽量变得更加多元化。

•  扁平化的优点及缺点

• 优点

• 扁平化设计相比拟物化来说可以大量节省设计者的时间，并且去掉多余的装饰让人们最直观的看到所要表达的内容，减少了认知障碍。

• 缺点

扁平化相应的也会有一些缺点，对于情感的表达不够丰富，留给我们个性化的余地特别小，而这样是与设计与主题图标的初衷是相违背的。

扁平化在主题图标中的应用分析与实施-以马卡龙主题图标为例

扁平化概念解决主题图标识别问题

不难发现主题图标的辨识度问题是影响主题图标用户使用粘度的重要指标，而通过以上我们可以发现扁平化在处理辨识度问题是极其有效的，所以笔者试着通过一种手法将二者相结合。希望得出结构层级第一级为视觉扁平化并且还拥有主题图标特性的设计作品。

图是笔者设计的马卡龙主题图标的一部分。分别分为系统图标和第三方应用图标两个部分，相比通常的主题图标来说，笔者设计的主题图标是没有个数的。图标的基础形状是由扁平的线性图标，通过3D变形，成为主题图标的基础性形状，就拿其中的天气主题图标来说如图

扁平ICON通过变形成为2.5D的天气基础形，再将基础形巨像化，搭配上与之匹配的小场景插画，再添加与主题相匹配的各种视觉元素，形成了天气iCON，图标的底层也是根据扁平ICON的外轮廓绘制的，加深扁平天气的印象，上面天气icon和底层天气icon外轮廓在面积上占了大多数，使人们第一眼就看到了扁平的图标，同时作为视觉层级第一级首先被人们看到，大大加深了主题图标的识别性。而中间的场景插画则用来丰富主题图标，使其更加具有个性化，通过这样的设计，将扁平化的图标放在视觉层级第一级可以有效的加强主题图标的识别性。

而加强视觉层级的方法并不单单只有增大占用空间一种，还可以通过颜色来进行视觉层级的弱化与加强。例如天气图标中的顶层蓝是要比底层的蓝色纯度高一些，在视觉上又将这两部分划分，使用户的视觉聚焦点更加集中，使主题图标辨识度升高，而这都得益于扁平化。

•  扁平化概念解决第三方应用不匹配问题

自2003年以来，应用图标逐渐的趋于扁平化，扁平化的应用图标占市场的大部分。在我们的手机常用APP中，绝大多数的应用图标风格都是（类似）扁平化，轻而易举的提取出扁平化图标的主体，由于这些图标主体都是各自企业的形象，所以在设计上来说，正负空间是合理的，这为主题图标的设计带来极大的便利。所以可以通过图的步骤将扁平主体提炼再进行转化形成2.5D主体。再加入与主题相关的手绘插画进行丰富主题如图，提取 支付宝上的扁平化主题之后再次变形，可以观察图，相册、电话、信息、淘宝、支付宝的风格是和谐统一的。并且正负比例也是发挥了极大的优势。

如图，马卡龙主题图标的视觉效果要远远优于下面两个主题图标，将第三方图标和系统图标完美结合。即使马卡龙主题图标比其它两个图标体积更小颜色更淡，依然丝毫没有减弱它的识别性和统一性。而这一切，也都是因为扁平化。

 

扁平化在主题图标中的应用实施

• 应用

最后，把设计好的马卡龙主题图标放置在手机桌面上，如图。通过马卡龙主题图标的实际应用可以发现，该主题图标设计取得了比较好的效果。通过马卡龙主题图标的实际应用可以看出，设计主题图标是需要考虑用户体验的。不仅仅给用户带来非常好的感官体验，还使得界面与功能非常好的结合在一起。

通过马卡龙主题图标的实际应用可以发现，它传达给用户的是最直接的信息，弱化了次要的装饰带来的信息扰乱，从而使用户最希望看到的信息可以首先被看到，把视觉重点转移到内容本身。

 

 扁平化在主题图标中的应用拓展

• 主题图标不受个数限制设想

马卡龙主题图标是没有个数限制的，只要解决了第三方应用图标问题，保证图标视觉统一的情况下主题图标没有个数限制的设想是有一定可用性的。

• 主题图标自动生成设想

结合以上分析，笔者大胆设想马卡龙主题图标可以自动生成，方案可行性如下

1、主题图标的应用商店在对每个应用都有进行风格定位例如：工具、旅游、办公、儿童、阅读，教育、出行等。可以事先根据风格定位关键词绘制所有插画小场景 ，每个风格对应无数个APP但只对应一个插画小场景。小场景插画随着各种APP风格定位的切换而转换。

2、图标的颜色提取于马卡龙见图右边的是通过左边颜色降低纯度得来，图标的颜色可以在给定的范围内随机选择。

结合以上两点，笔者认为马卡龙主题图标中的第三方应用图标可以通过程序，得到不受数量限制，辨识度强、系统图标与应用图标高度统一的图标。这一设想仅为今后相关领域研究者提供参考，希望我们今后在使用主题图标的过程中早日摆脱各种局限。

结论和展望

本文研究的是扁平化在主题图标中的应用，以主题图标的两个局限为出发点，结合马卡龙主题图标的实践进行分析，得到以下结论，主题图标的辨识度问题和第三方图标统一问题一直是主题图标发展的主要问题，而运用扁平化概念来解决这两个问题是行之有效的。根据本文的设计思路，我们可以基本不受限制地设计出不同风格的主题图标。主题图标的设计或许可以有新的表现方式，可以不再受图标个数的限制，在保证第三方各图标高度融合的情况下，系统自动生成主题图标，减少人力，物力，财力的同时，大大提升主题图标的实用性，从而使用户粘合度不断升高，笔者希望运用扁平化概念为主题图标设计方法提供新的思路，让主题图标的使用不再受方方面面的限制。另外，希望我在文中对未来主题图标自动生成的设想可以实现。

写在后面

文章是在做毕设时的灵感迸发，上面的观点自己认为还存在诸多漏洞，例如第三方应用图标大多是类扁平。还有就是图标自动生成方案遇到的诸多技术问题。希望得到大家的更多的建议。