APP图标设计要点!UI设计中那些创意的图标怎么做以及好图标的设计原则

　　导语：一个图标的美观度决定了用户对这个图标的观感，精致美观的图标会大大增加用户点击的概率，从而更有效地传达图标所代表的含义，今天我们就聊聊：APP图标设计要点!UI设计中那些创意的图标怎么做以及好图标的设计原则

　　APP图标设计要点!

　　图形独特

　　APP图标既要有功能性，又要有独特性，进行图标设计时，既要把握应用的专业共性，又要体现应用的个性专长。

　　准确表意

　　APP图标需要清晰地传达信息，帮助用户理解功能、信息，这是图标设计最重要的一点。如果图标含义无法正确地传达，那么它在界面中只是一个多余的信息。为了达到准确的表意，设计图标时需要结合当前场景、界面进行考虑。在特殊情况下，图标还需要结合文字，作为一种辅助信息出现。

　　谨慎用色

　　每一种颜色都代表不同的色彩情感。APP图标具有谨慎的用色的特点。设计图标时，色彩有辅助信息外化、进行表意的功能，能帮助用户更好地联想和记忆图标的功能。我们需要研究各种色彩由生活联想而产生的普遍意义，又要充分了解用户的色彩欣赏习惯和审美心理，寻找其中的共性。

　　少量文字

　　图标的表意功能，使得它可以有效地替代文本来使用。可识别的、清晰的图标，对于界面导航的可用性有极大的帮助，APP图标具有少量的文字。

　　提炼符号

　　一般而言，图标是具有高度概括性的、用于视觉信息传达的小尺寸图像，是提炼的符号。图标常常可以传达出丰富的信息，并且常常和词汇、文本相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

　　为了使高度概括性的图像能准确地表意，设计师需要提炼与图标表意相关的造型、颜色、文字，确保准确有效的交互。

　　适应场景

　　图标是界面的一部分，适应的场景指设计师需要根据场景、功能定义图标的样式、尺寸等。一般情况是选择界面的主要图标进行设计，再进行系列的设计。

　　明确信息传达

　　图标作为快捷传达信息的载体，明确的信息传达是第一原则。如果个图标不能准确快速地表达含义，不能准确快速地引导用户操作，那么这个图标也就没有存在的必要了。

　　功能具象化

　　图标代表的是一个产品的属性和功能作用。一个高品质的图标应该让用户在第时间了解产品的属性和功能。设计图标时需要注意采用相关的元素进行设计。

　　这样的设计方式能够准确快速地传达产品属性。另外，图标设计应当高度提炼产品特色，找到最能代表产品属性的图形元素，并对这个元素进行突出设计。

　　美观大方

　　一个图标的美观度决定了用户对这个图标的观感，精致美观的图标会大大增加用户点击的概率，从而更有效地传达图标所代表的含义。但是，对于一个产品而言，美观大方需要服从功能，完成产品的目标任务永远在第一位。设计师应耐心地打磨图标细节，让用户愿意花费时间和精力去使用产品。

　　UI设计中那些创意的图标怎么做

　　无论是软件标识类图标还是功能标识类图标，都需要讲究“创意”。

　　当设计师拿到一个图标项目时，可以从卡通形象化、关键词图形化和字体直观化3个方向来思考创意点，但是每个创意方向都应该遵循简洁性和易识别性两大基本原则。

　　优秀的图标设计不仅拥有自己的特色，而且能清晰地表现出信息内容，以最简洁的图形体现最明确的主题。

　　图标创意

　　1.卡通形象化

　　大多数产品都会为自己打造一个卡通形象，通过角色的表现来让用户记住自己的产品。

　　例如：我们一看到企鹅图标就会想到QQ，看到黑猫与红背景的组合就会想到天猫，看到黄色的狮子就会想到苏宁，如图所

　　卡通形象化的图标

　　2.关键词图形化

　　利用功能关键词设计一个能体现产品的图标，是图标设计中一个非常重要的创意点。

　　这种类型的图标在设计时需要注意简洁性与造型的独特性，不要过多添加细节，因为如果图形过于复杂，用在小尺寸的场景中可能会无法看清楚。

　　我们可以看到微信、QQ音乐和陌陌的图标设计都是很简洁的，但每个轮廓、每个弧度和每个转角都进行了精细的打磨，最终才得到了让大众认可的图标，如图所示。

　　关键词图形化的图标

　　3.字体直观化

　　专注于产品名称的打造，利用名称中的关键字进行设计是图标设计中的又一大创意点。因为将文字直接设计成图标是独一无二的，既直接明了，又令人印象深刻。

　　有很多产品会用英文首字母或中文名称中的第一个字来设计主图标，当大家看到这样的图标时，立刻就能识别出这是哪个APP，如图所示。

　　字体直观化的图标

　　图标类型

　　从表达形式上来讲，图标分为像素图标、拟物化图标、扁平化图标、线性图标和立体图标。

　　无论是什么类型的图标，其表现方式一定要遵循统一性和识别性。图标的常规制作思路是先以功能信息提炼出图形语言，然后对细节进行刻画。

　　1.像素图标

　　像素图标是一种以像素为基本单位制作的插图(属于位图)，也可以称为“像素画”。

　　在生活中随处都可以见由点阵式小灯组成的荧光屏，如图所示。这种荧光屏具有一个明显的特征，就是轮廓非常清晰，像素图标的原理其实和这个点阵荧光屏是相同的。

　　荧光屏

　　以前像素化图标主要运用在网页设计中，现在更多地运用在一些智能设备上，如手表、电子硬件等。

　　像素图标的设计比较简约，易读性也比较高，所以很多时候会用来代替复杂的图形元素或信息，如图所示。在制作像素图标的时候需要注意的是像素的清晰度。

　　像素图标

　　2.拟物化图标

　　拟物化图标在iOS6的时候发展到了最高峰，材质、光影的表现是拟物化图标的核心理念。苹果iOS6有一个非常优秀的设计细节，那就是滑竿上的圆形金属按钮，如图所示。

　　这个按钮不仅表现出了金属的材质，而且在倾斜手机的时候还会像真正的金属一样改变光泽。这是追求拟物化设计的最高境界，在最大程度上还原了真实环境。

　　拟物化图标

　　拟物化图标的最大优势就是识别性很强，就算是老年用户也能一眼看明白其代表的意思，如图所示。

　　虽然拟物化图标的识别性很强，但是它有一个致命的缺点，就是这种图标不太适用于界面整体的功能化展示，而且制作成本很高，需要花大量的时间来设计视觉上的阴影和质感。

　　认知性很强的拟物化图标

　　在拟物化设计转为扁平化设计的过程中，为了平衡设计效率与视觉效果，演变出了一种“微质感化”的设计，也就是用尽可能少的样式来表现图标的质感，如图所示。

　　微质感化设计

　　3.扁平化图标

　　现在的界面设计越来越注重简洁性，扁平化图标也就变成了界面图标的主导形式。扁平化图标看似简单，但是对于初学者而言，要把控好形体还是比较困难的。

　　把控不好形体就会导致设计出来的图标不够美观或是不能直接表达出图标所蕴含的寓意。另外，扁平化图标还需要将关键形状刻画到结构上，这一点也很考验设计师的能力，如图所示。

　　将复杂图标简化为简洁图标

　　因为扁平化图标造型简单，易识别，经常应用在界面和菜单栏中。在绘制这类图标时一定要注意外观的统一性和识别性。很多新手设计师会通过网络去下载图标素材，东拼西凑成一套图标，这不仅降低了界面的档次，而且很难统一图标的整体风格。

　　如图所示的这些图标从单个来看都没有问题，但是放在一起后就很凌乱了，风格不统一是图标设计中的一大忌讳。

　　风格不统一的图标

　　扁平化图标分为面式图标和线式图标两种类型。面式图标需要注意形状的圆角和黑白面积，在绘制的时候一定要把握好形状的轮廓造型，如图1所示;线式图标需要统一线条的宽度以及线段的连接方式等，如图2所示。

　　图2：线式图标

　　面式图标由于填充面积比较大，整体会显得比较饱满，视觉平衡度也比较高。而线式图标的优势是比较有设计感，在视觉上显得更轻盈，同时拓展性也比较好。在我们常见的iOS系统中，经常会将正(面式)负(线式)图标当成选中和未选中的状态，如图所示。

　　正负图标表示的选择状态

　　4.线性图标

　　现在的图标设计越来越简洁，因此线性图标就应运而生，界面的底部标签栏、导航功能按钮和分类按钮经常会使用线性风格的图标来表现，如图所示。

　　线性图标

　　5.立体图标

　　很多界面的表现形式需要体现空间感，于是就有了立体图标。立体感的图标更有层次，并且在视觉上更耐看，经常出现在网页界面设计和专题页面设计中，如图所示。

　　立体图标并非真实的3D效果，而是通过明暗面的划分来产生体积感，制作起来很考验设计师对图形透视和结构的把控能力。

　　立体图标

　　只要掌握了设计要点，图标设计并不算很难。

　　好图标的设计原则

　　那么，到底是什么东西成就了一个优秀的图标呢?

　　简单点总结一下设计好图标的原则：

　　保持简约

　　单个图标要贴合语境(所处的APP和网站)，而图标之间又彼此不同

　　真正要做到这一点，并不简单。对于设计师而言，有大量的诱惑，促使着他们让图标设计变得复杂，混乱，甚至无法识别。接下来我所提到的6个诱惑，是让设计师毁掉图标的主要原因。

　　诱惑1：想用图标表现全部的功能

　　回想一下，当我们想打印一份文档的时候，会通过软件中的打印功能来达成目标，通常会点击一下文档打印的图标。这个时候，你通常还会碰到一个问题，打印机设置、查找打印机、添加打印机的图标也是差不多的，甚至完全一样的打印机图标。这个案例被记录在经典的 UI交互设计书《About Face 3》当中，直到今天，这个案例依然经典得让你无法忘怀。

　　也许你觉得这个问题是可以被解释清楚的，可是不论怎么复盘，如何推导，还是很难解释清楚。即使是最简单的功能图标，当你看到它的时候，也常常无法准确地解释清楚它的真实功能。

　　就像 Office 的菜单当中，这一堆信封图标，就无法准确清晰地表明它们的功能(如果不看旁边的文本标签的话)。

　　事实上，就是解释不清，没有必要在设计的时候强求一定要使用一个图标阐述清楚一个复杂的功能。

　　诱惑2：在图标中保留3个甚至更多的视觉对象

　　在图标中包含2个以上视觉对象本就是一件非常麻烦的事情。当然，即使是16×16 px的小图标，包含2个简单的对象也是可以的，但是，「可以」仅仅是一种针对承载能力的表述，并不是说这样做就一定好，事实上，减少对象的数量可以增加图标本身的可读性和识别度。

　　作为设计师，适当取舍，尝试使用图标来阐述一方面的功能。比如「网络管理员」的图标，可以使用一个带着眼镜的男性角色来代表，这个形象比较符合大众对于这一角色的固有认知，就不要再在图标上加上扳手或者电脑这样的元素了。

　　而这个安装包图标就是一个包含对象过多的典型。我们已经清楚的知道软件是需要安装到计算上的，所以没必要弄这么复杂。而考虑到软件安装包图标的整个发展历史和 CD光盘之间的紧密关联，所以这个图标的设计可以抽象为一个放在 CD盒上的 CD 也足够清晰了。

　　诱惑3：对于细节刻画过于具体

　　图标本质上只是传达信息，作为符号代表，和翻译一样是需要讲究「信、雅、达」，而不是「抄现实」的绘画：

　　这个图标的设计确实是很有风格，也足够有调性，貌似也表达了什么，但是大概的含义也并不清晰，功能性也不具备，作为个人表达还行，但是在商业产品中实际上是并不具备可用性的。

　　诱惑4：融入过多的品牌元素

　　作为设计师，如果你想使用品牌化的设计来取悦甲方或者老板，这是无可厚非的。这个时候，你可能会使用品牌色将产品中的图标统一起来，让它们看看起来是一致的。千万别这样做!

　　将品牌配色和元素融入到图标的设计当中，尤其是系统化地「格式化」图标的时候，99%的可能会造成图标可读性降低。图标的设计和使用，尽量还是遵循平台(iOS、Andrlid、Material Design 或者 Windows)的设计规范来做。