利用品牌特征做图标ICON-实战篇

北京/教育工作者/8年前/1415浏览
利用品牌特征做图标ICON-实战篇
治柱AI

如何在实际工作中,做好一套属于公司自己特点的ICON图标

ace059b0c199a801211d258843f1.jpg


啰嗦几句 可以略过到下面正文~~~~


很多人一直在寻找一个答案,如何在实际工作中,发挥出自己的优势,从copy别人图标,到ICONFONT中扒图标的老套路中逃脱出来,一直扒,都已经成了自己的一种习惯!

比如我们的一个PM曾经和我说,“你看我做的PPT文档图标都是自己搞定的,完全不需要你们设计师设计,要你们何用?”其实他说的很对,现在很多UI设计师都是在从网站copy图标,然后照猫画虎!真正的一套ICON系统的定义,是需要很多的步骤和方法论的支撑的,不然我们做出来的ICON是没有灵魂的,那么今天我们就用其中一个例子来讲一下我前几天做的一套企业ICON定义是如何出炉的---


大概方法有几步如下:


1、分析我们现有的图标

2、查询相关的参考

3、找出目前图标存在的问题

4、梳理设计思路

5、产出方案

6、广集意见并继续完善


adaa59b0c1cea801211d257ca7a5.jpg

>分析我们现有图标,比如从统一性、从表意内容、还有从复杂程度去分析


cec259b0c1e0a801211d256a82c2.jpg


ddae59b0c1eca8012028a9b8a38b.jpg

>查找相关参考,看看人家都是怎么做的,从同行作品中学习与借鉴,最后提取出方法论。因为俗话说的好,站在巨人的肩膀上,我们才能进步的更快!

以下是网上找到的,滴滴与优酷的相关图标及定义规范,我们可以尝试站在这两位“巨人”的肩膀上~~~


滴滴

ea4259b0c215a801211d2574c94a.jpg

                          滴滴将LOGO中的圆角特征作为贯穿符号,简洁、有个性


优酷

3ac259b0c225a8012028a99f1eff.jpg


                            优酷则是运用了“甜甜圈”特征,差异化明显,辨识度高


7a0a59b0c288a801211d254bba7e.jpg

结合以上方法,对比我们现有的内容,总结出以下两点有待提升:

1、当前的品牌特征

2、缺乏规范性和延展性

d44859b0c97ba8012028a94cfe2b.jpg

df3e59b0c297a8012028a97a2804.jpg


开始从LOGO中提取元素(美与丑先可不加评论(*^__^*) 嘻嘻……),为了发挥出其延展性,我决定从我们的LOGO弧度部分着手,再通过此元素进行联想,开始设计


1、提取元素并突出品牌特征---


4b1059b0c2a6a8012028a9e9b8ef.jpg


2、规范样式,让图标具有统一的视觉大小---

在做之前,我们还要定义好图标的统一规范(尺寸标准),规划图标边界与网格边界,确保基础形状和视觉比例协调(如下图)


8dd859b0c2baa8012028a9895f15.jpg


3、面积算法公式(字迹潦草,请见谅O(∩_∩)O哈!)


762259b0c2caa801211d25f497d7.jpg


P.s 提取品牌基因的方法大概有几种

1、从形状提取

2、从颜色提取

3、从特点提取


我们运用的是第1种方法,同学们也可以尝试另外两种~!


863659b0c2e2a8012028a90cb8cb.jpg

经过几个不眠不休的夜晚,先在本子上自己画,容易修改,开拓思路。

3ef459b0c2f1a801211d2597bf71.jpg


再通过电脑将其效果做出来,看看真实感觉如何

511559b0c2f8a801211d25f6c573.jpg


最后,从众多设计方案中提取3个方案

bc5c59b0c36da8012028a99dad9d.jpg


----------------------------------------------------------------------

我们都知道,做图标的大忌,是不通过实际使用环境进行验证,于是我们现在将图标嵌入真实界面进行对比(如下图)


d50959b0c37aa801211d25a750ae.jpg


3a5459b0c396a801211d2584dff0.jpg

>由于不想闭门造车,将以上三组图标群发给小伙伴们,可以让大家投票,最后获得一个完美的成果~!

大功告成!!



15
阅读原文
|
Report
|
27
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in