从0到1——一组图标的诞生

图标——界面设计最重要的元素之一。菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比重,所以我始终坚信能够把图标做好,也是难得的特长之一!

这里拿几个月前做的第一版小说模块图标为例(目前已经改版为2.0,等正式上线后会再次与大家分享),简单介绍下我的图标设计思路,大纲如下:

1. 风格设定

2. 创意脑爆

3. 设计执行

1.风格设定

在开始构思之前,我们首先需要确定图标的设计风格,风格可以根据整体产品的设计语言推导,需要符合目标人群的喜好以及产品的属性定位。

虽然我们是小说模块,但还是附属于动漫产品体系之下,前期的种子用户还是产品原有的动漫人群,所以我将风格锁定在原有动漫的视觉风格之上,大家可以看下当时动漫标签栏图标的样式:

由此小说模块图标与上图保持一致,设定为“描边与色块结合”风格。

2.创意脑爆

锁定风格之后,就要构思创意了,也就是如何在这样的风格之下去表达你的内容。这一步很关键,如何让图标不普通,大部分因素都就体现在内容表达上(因为风格其实也就那么几种),我的方法是尽量去发散核心关键词,让图标的含义标新立异,举两个这次图标脑暴的例子:

第一个,“人气”图标的脑暴路径:

这里选词有个小技巧,我会遵循两个原则,“具象”与“二层”。

首先来说具象:其实很好理解,如果词汇太抽象,你是很难表达的,比如“流行”这个词,你是很难表达的,而“火”就很具象,很容易表现。再来说“二层”:指的就是尽量不要选择核心关键词延展出来的第一层词汇,因为这些词是大家都能想到的,并且用烂的,比如人气直接延展出来的“火”、“奖杯”等等。(但是如果你的图标没有文字提示,需要表意特别明确,建议还是使用第一层延伸词,可以在风格上做些差异化表现)。

所以在上面两个原则下,我最后设定人气图标使用“爱的手势”,如下图:

因为看到有些同学把“爱”与“摇滚”的手势弄混,所以说下它们的区别:

希望大家在使用的时候不要搞错哦!

第二个,“完结”图标的脑暴路径:

也是通过“具象”与“二层”原则,最后使用了商店挂的打烊门牌这一创意来延展:

每个关键词的脑暴都会产生很多词汇,各不相同,我们需要学会筛选,尽量避开过于抽象或者过于普通的词汇,避开抽象等于具象,可以方便执行;避开普通等于特别,如果所有的设计都是大家用烂的创意,那作品一定会很平庸,以上就是我在脑暴时使用的方法。

我们需要让自己产出的每一套设计至少有一个“特别”出现,不然如何体现自己的价值呢?

3.设计执行

这一步就是根据前面得到的灵感图来进行设计,我们来看下执行对比图:

对于执行需要注意的基础细节,之前有写过《图标设计五维自检法》,有兴趣的同学可以看一下,除此之外这里再补充一点——如何让图标做到有细节!

本次设计总结了三个方法供大家参考:

3.1 设计技法的细节

比如给描边增加短线风格:

再比如线条增加面形色块的组合:

3.2 根据事物本身特征增加细节

比如一个木质门牌的细节:

3.3 俏皮的那一笔

比如书架上歪着的一本书:

再比如一根线条的破局:

当然增加细节的方法有太多种,总的目的就是防止图标过于简单、简陋,希望你也可以有自己的一套秘方来进行设计,大家互相学习。

最后再看下图标整体的效果吧:

附上过程中的一些稿子,哈哈,别吓到你:

对于执行这一块,别人再怎么说,你不做大量的练习与思考也是无济于事,这个道理毋庸赘言了。

好了,这期就这么多。最后最后,感谢大家的持续,么么扔!

菜心设计铺(公众号)
作者:菜心

(0)

相关推荐

  • 从0到1,一组图标的诞生(第二弹)

    上次分享了一组图标的设计过程,主要思路就是从"风格设定"到"创意脑爆"再到"设计执行",具体可查看:<从0到1--一组图标的诞生> ...

  • 三星s6更新6.0后按电话图标提示联系人已停止,怎么解决

    若三星S6手机使用时屏幕提示联系人已停止,建议您: 1.重启手机尝试. 2.设定-应用程序管理器-全部-菜单键-重置应用程序偏好. 3.查看手机通讯录是否可以正常使用.若可以,请备份手机中联系人数据, ...

  • 小白教程!如何从零开始绘制一枚线性图标(实战篇)

    小编: 今天的教程除了一枚线性图标的操作演示,更重要的是帮同学们领会UI设计师必备的化繁为简,抽丝剥茧的能力.初学图标绘制的同学,绝对需要里边提到的这个方法~ ­ 对于初学者来说,我们可以这样理解,任 ...

  • iphone4运营商图标修改

    现在iphone4美化的地方有很多,运营商图标、滑块图标等等。鉴于很多朋友不会iphone4运营商图标修改方法,所以本教程就来教大家修改iphone4运营商图标和滑块图标。 pc6小编提醒:在修改前一 ...

  • 评测小米手机原生系统4.0怎么样

    如今米系统4.0已经公布很久了,对于所有的疑云也慢慢的解开,但这个新的系统到底好不好用了?也一直是手机友友关心的问题。MIUI V4是要基于Android 2.3.5K系统下面升级才行的,因为Andr ...

  • qq飞车图标怎样点亮,qq飞车图标升级方法

    QQ飞车图标是QQ飞车玩家一项尊贵的标志,可以在QQ客户端中显示。作为一个QQ飞车忠实玩家,怎么能没有点亮QQ飞车图标呢。快来跟随小编的脚步,快速点亮QQ飞车图标。 一、QQ飞车图标点亮 点亮要求:等 ...

  • 像素图标绘制技巧

    图标是网页中的常见元素,主要功能是表意,也包含装饰及品牌传递的作用。存储为gif、png等位图格式的图标,称为像素图标,大小通常为16px、24px、32px等。当然像素图标也可以理解为像素风格的图标 ...

  • 使用Resource Hacker实现替换EXE图标的方法

    Resource Hacker替换EXE图标教程,Resource Hacker也称ResHacker,本站提供的ResHacker软件为简体中文,使用方便. 1. 首先先下载ResHacker,然后 ...

  • ResHacker怎么替换图标 ResHacker提取并保存avi图文步骤

    Resource Hacker是非常强大的资源查看器,编译和反编译工具!Resource Hacker 主要用于察看.反汇编和取代 Windows 32 位可执行程序中的资源,支持 Delphi 5 ...