快好知 kuaihz

升级篇:利用品牌基因法进行图标设计

图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

前一阵子写了一篇《利用品牌基因法进行图标设计》,但只讲了一种提取视觉基因的方法,不够全面。菜心担心大家因为方法的不全面而导致设计效果过于死板,所以近期将整个品牌基因法的体系重新梳理了一遍,增加了一些提取基因的路径,可以扩展我们的设计思维与制作方法。

需要强调一点,文中所讲的品牌基因是指视觉上的哦!

来看下大纲:

提取特定形状

吸取品牌颜色

抓取风格特点

1. 提取特定形状

通过对logo或品牌元素提取特定形状,这个形状是固定的、具象的,例如圆形,三角形、字母甚至是logo本身等等。

提取出形状基因后,如何与图标相结合呢?有三种方法:

1.1 直接应用

最常见的用法就是直接将整个logo作为图标(比如首页),如下图:

再比如MONO的标签栏图标,设计的非常大胆,提取logo上面的4个字母——M、O、N、O后,直接将其作为图标,如下图:

但是这种方法还是有很大的风险,因为毕竟每个字母与功能本身的含义没什么联系,如果不是非常个性化的app,还是尽量少用吧!

1.2 做为外轮廓

将提取的形状作为整套图标的外轮廓,例如谷歌play一样,提取出三角形后,整套图标都是以三角形作为外形,如下图:

再比如你提取出一个圆形基因,也可以将其作为外轮廓使用,如下图:

1.3 将图形与图标巧妙融合

假如我在logo上面提取出一个圆形作为基因,我们可以将这个圆形巧妙的与图标进行融合,如下图:

但这里必须要强调一点,很多时候,我们很难将一个特定形状融入到所有的图标当中,如果强行融合,难免会让人觉得死板生硬,所有一定要有所取舍,例如案例中的图标也不是所有都融入了圆形,如下图:

有同学可能会问,为什么案例中有些图标没有融入圆形基因,也不影响整套图标的和谐统一呢?

因为它们融入了另外一个品牌基因——颜色。也就是我们接下来要讲的内容。

2. 吸取品牌颜色

这招是最简单直接的方法,直接吸取品牌色作为视觉基因,以此来进行图标设计,举几个例子:

颜色基因,我就不多讲了,比较容易理解。

但是大家仔细观察优酷这套图标,我们会发现除了颜色基因以外,好像在logo上还提取了一个叠层的效果,而这种叠层的效果又属于另外一种品牌基因——风格特点,我们继续往下看。

3. 抓取风格特点

这部分是今天内容的重点,也是我最近做图标的一些感受。

我们先来讲讲如何抓取风格特点!

又要开始拿我的作品来举例了,还是iwork那个logo:

除了颜色以外,我在logo上面提取出两个特点:

断:是指整个logo有两个断开的地方

层:是指logo有三个不同颜色的深浅,形成前后关系,也就是层级。

那如何将这两个特点运用到图标上呢?我们看下图:

第一步:先画好基础形;

第二步:将合适的地方断开;

第三步:将局部(小块)调整颜色,以区分层级。

这样一个具有品牌基因图标就诞生了!

其它的图标也是一样的道理,最后得到整套图标如下图:

上面这个案例只是抓取风格特点的一种结果,不同的案例会有不同的结果,例如网易云音乐的图标,是抓取logo上圆润的风格特点,如下图:

而优酷的图标则是抓取叠层的风格特点,如下图:

小密圈则是抓取断线的风格特点,如下图:

以上就是菜心近期总结的《品牌基因法做图标》整套知识体系,后期会不断的优化改进,如果你有什么好的想法也欢迎和我私下交流,我们一起将这个系统完善起来,帮助那些需要帮助的好朋友们。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:基因  基因词条  图标  图标词条  利用  利用词条  升级  升级词条  进行  进行词条  
交互

 译文 | 交互设计中对于“可控性...

前言交互设计师追求的是让用户获得极致的用户体验。但在很多使用场景中产品的体验是不可预测的,运用常规的设计方法是无法照顾到的。就像出门遇到堵车,旅游遇到坏天气一样...(展开)

交互

 让等待更加美好

初到北京,给人留下印象最深的可能不是雄壮的天安门,也不是巍峨的长城,而是无处不在的长队。不管是吃饭购物还是旅游上班都得先“排队”等待,作为一名苦逼的北漂小青年,...(展开)

交互

 浅谈用户体验的 4 个维度

本文深入分析了用户体验的四个维度在不同产品中的体验以及背后的原理。通常而言,用户体验越多,产品能量越大;不过也要考虑例外的存在,依据产品特性而言。上篇文章,提到...(展开)