APP图标风格与创意设计的方法分享

一些如何去确定、把控图标风格的办法，还有图标设计的创意方法，在这篇文章里被分享了出来，于初入职场的诸多设计师们而言此颇为实用。

图标是视觉符号，是用户在应用里接触得最多的那种，它有着承载引导用户去操作的功能，并且还是构成产品视觉风格的重要元素。

涉入职场不久的设计师，也许会鉴于时间紧迫，又或是急于呈现出成果，进而径直上网寻觅素材着手设计图标，致使最终在被询问设计依据之际，仅仅能够讲出“流行”或者“比较有设计感”这般的缘由。

所以，本文着重分享，在接到新项目这个情况下了，怎样去确定图标风格，怎样把控图标风格，还有图标设计的创意方法是什么。

Step1.设计分析：从产品出发确定视觉方向

为什么要从产品出发？

产品整体视觉里包含图标，它要跟界面的别的设计元素维持统一的设计语言。鉴于产品定位、品牌而定的视觉方向，产品界面里所有视觉设计的一致性得以达成。

从产品到视觉，如何提炼视觉关键词？

这其实是一个从产品开始发散，渐渐具像化、视觉化的过程。

大概来讲能总结成这样一个过程，即“名词（产品定位）-形容词（视觉关键词）-名词（设计语言）” ，比如说。有个简单的例子是这样的，那就是bilibili ，它的名词是二次元、弹幕），形容词是快乐、活泼、可爱（ ，名词是多彩、圆、表情。

具备经验的设计师，在接到需求之际，其脑海当中，或许已然生出一张大致成形的设计图来了。

对于才入行的人来讲，平时得去多多探究他人的产品设计，网络上存在着许多关于怎样赏析的文章能够去阅读，以此来积攒素材。

总之，借助产品定位，目标在于获取一些用于形容视觉氛围印象的词汇，最终方可转化为具体的、经由设计语言表述的事物。

举例：产品定位与视觉表现

虾米宣称自己的产品口号是“听见不同”，将产品定位为小众特质、文艺风格以及具备品质，借助其推出的产品，受众可以领略到它那种精致入微以及带有细腻风格的品质感受。

产品里没用大面积彩色色块以及分割线，界面十分干净，至于图标设计，采用特别细的描边，其粗细在2到3px，与顶部tab下的线条同一个标准，同时运用了断线处理和短线条修饰，图标看起来极其精致。

此外，造型方面存在着创意，首页的功能入口图标，皆与圆（CD的造型）的形式相结合，这些细节，将虾米音乐的细腻烘托了出来。

网易云音乐，其app开屏的Slogan为“音乐的力量”，当进入主页时，能看到顶部采用了大面积的主题红，整体营造出的氛围是较为热烈的。

与此相对应的是，它的金刚区图标采用了红色渐变的圆形底板，其目的在于实现平衡界面视觉重量的效果，进而防止出现头重脚轻的情况。

要是采用虾米那般呈细线样式的图标，其一，它没办法传达出力量感，其二，它 likewise是不能够撑起界面的（鉴于头部色彩过重）。

图标造型，虽说处于那种规规矩矩的状态，不存在过多带有修饰性质的设计，然而图标所表达的意思精准无误，简洁明了得很容易让人理解爱游戏登录入口网页版平台，比较偏向于大众普遍所具有的那种风格。

QQ音乐，其Slogan为“听我想听的音乐”，给人的品牌印象表现为“潮流的”以及“个性的”。所以首页入口图标采用更具重量感的面性设计而非线性，即便在其他线性图标的设计当中，像是播放控制及“我的”界面中这类情况，所采用的描边也较粗，是以形成更为“强烈”且“肯定”的风格。

所以，在我们要给产品设计一套新图标之际，不能赶忙去寻参考，而应首先领会产品的定位，以及用户群体的特征，从而提炼出视觉要害词，拿捏稳视觉的方向。

Step2. 设计方法：确定图标各要素的设计表现

视觉的关键词被确定下来后，就能够着手去定义设计语言了。要是你针对图标设计并非十分熟练，那就能够试着把图标设计划分成几个要素，像造型、描边、色彩、圆角、大小、质感等，逐个去定义这些要素，一套图标的设计语言的初始形态也就大致形成了。

倘若你所拥有的产品属于活泼类型的社交性质产品，那么或许你就要去作圆角、较细的那种描边、饱和丰富着的色彩方面的尝试，以此去凸显产品的亲和力，营造出热烈的氛围。

要是你打算打造高端电商平台，那你选用的图标或许是稍细描边爱游戏app官方网站登录入口，运用干净简洁图形表现，采用较克制用色，以此来展现平台高级感。

处于这个阶段之时，设计并非一下子就能完成，而是须得耐心地多次去进行尝试，并且要对不同的效果予以对比。

Step3. 设计加分项：创意方法

依据这个思路大体能够将图标风格确定下来，然而要是仅仅依照该思路去做图标，最终的设计兴许会陷入极为严重的同质化状况。此时借助加入一些具备创意性、特色的设计表达，来形成与竞品之间的差异。

然而，创意获取并非易事爱游体育app下载官网，或许有不少人都有过在网络上持续不断地浏览图片以搜寻参考，满心期待灵感能够瞬间涌现这样的经历 ，故而，我试着针对图标从造型、色彩以及质感等多个维度入手去归纳图标所具备的创意方法 ，从当中选取一个切入点去探寻创新 ，说不定能够更为快捷地找到出色的表达。

1. 从品牌LOGO延伸设计

这种思路是被最为推荐的，由于其是基于Logo设计特征所延展出来的图标设计，实际上是将品牌基因融入到UI设计之中，能够让用户自然而然地生出与品牌之间的联想，进而加深品牌印象。

马蜂窝，提取了Logo底部的弧线设计，此弧线在系统图标中多处都得以应用；该弧线成为其标志性的设计元素；app logo与系统图标形成一套统一的视觉系统。

链家，Quark这个品牌：都运用了那种断开线条（也就是所谓的开口样式）的设计方式，因为其品牌Logo自身具备这样的特性，所以给人一种极为自然、一体的感觉。

2. 从品牌IP延伸设计

与从品牌标志展开延伸的设计相同，从IP进行延展也能够使用户自然而然地联想到品牌，而且拟人化的形象会让图标充满情感与活力，进而更出色地把情绪传达给用户。

3. 造型创意

法为断线法，其断线、开口之相关规划致使图标拥更多造型体验，要加以侧重说明，该处之开口常态定在位于线条交界的区域，如此设计乃可让图标营造一种灵动通风的感触。

几何法：

要是运用像圆、方、线条、点这样基础的几何图形来做设计，那么这种设计语言最终所呈现出来的风格常常会带有较强的设计感，它适合那种需要着重突出自身调性的，或者是与艺术相关品类的 app。

因这种设计造型呈现出简洁的样子，故而一般会搭配稍粗一些的线条，以此来增加图标给人的视觉重量。

4. 色彩创意

1. 如今比较流行的一种设计，是那种将描边的图标造型，与几何形状的色块相结合的色块（自如）。

2. 大众点评的微渐变，一款流行了一整年的设计，在诸多 app 的金刚区图标之上，会运用此设计以强调入口，进而吸引用户的视觉注意力。

3. 对于邻近色的碰撞这种用法（enjoy），它是比较少见的，要是应用得不合适，那就容易致使图标变得过于花哨，进而失去视觉焦点。

4. 相同颜色的不一样透明度，或者不一样明度进行组合，这样做可以使图标的色彩层次变得丰富起来，并且在这个过程中，不会导致图标过于繁杂。

5. 质感创意

设计具备质感，会使图标视觉极为凸显，所以一般适用于界面自身内容较为繁多，需格外着重强调的图标类别之上（像金刚区图标）。

常用的表现手法：

渐变，是那种应用渐变色从而让图标具备厚度或者形成前后关系情形的；投影，是那种应用投影用以提高图标的视觉层级致使具有重量感的；轻拟物，是比起以往追求逼真细节的拟物，借助色彩变化所形成的轻微拟物质感能够让图标更富有现代感的。

6. 动效创意

有着在图标之上应用动效的例子，现在变得越来越多了，然而其中的多数情况，是在进行切换tab这个操作的时候，存在着一个具备缩放效果的动效。

这两个例子，当图标处于被选中的状态时，存在着十分轻微的动画效果，能给人那样的一种令人觉着极为舒适的感受。

氧气应用程序，商店标签被选中之际，盒子上方的微型气泡不断进行着轻巧的晃动与碰撞，其创意契合产品“氧气”这一主题。而且这种微小的动态效果极为轻微，不会过度分散用户的注意力，在图标开始运动的刹那瞬间，能够给予用户一种眼前突然一亮的惊喜感觉。

饿了么方面表示，分类图标的“水果”图标，它有着会轻微弹跳的情况，嗯存在截图的时候橙子正处于跳着的状态，所以才会显示为拉长了的景象。

VSCO，DSCO icon具备渐变色彩变化的动效，这或许是源于推广方面的需求，其目的在于吸引用户的注意，就那些首次看到的用户而言，基于好奇去点击的可能性应当是比较大的。

要让图标形成差异化，深化品牌风格，只需那么一点点的创新即可。以上每种创意方法都独具各自的特点，在我们精准敲定风格方向之后，要依据项目特点挑选适宜的创意方法。

设计合理的前提是，从产品以及品牌出发，去判断视觉方向，这是总结设计分析作为基础所要求的，也能让我们在被产品或老板挑战时，不会心虚而是充满底气啊；设计图标之时，要尝试“逐个击破”，将图标各元素进行“解构”，也就是形、色、质、动效这些方面，要耐心去对比各种不同组合产生的效果如何；融入品牌基因而生的创意，是跟竞品形成差异化，进而建立品牌独特风格非常关键的所在。然而在追求表现与创意的进程里，需要保持既定下来的方向，要时不时停下来瞧瞧，看看并参考之前所做的分析内容，仔细检视自己所做的设计是不是满足了要求。

文中因为存在部分图片源自花瓣，所以未标注出处，要是设计师本人看到了，能够和我取得联系，进而补充出处，多谢～。