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

上次分享了一组图标的设计过程,主要思路就是从“风格设定”到“创意脑爆”再到“设计执行”,具体可查看:《从0到1——一组图标的诞生》。效果图如下:

今天分享的也是这几个图标,不过是第二版,切入的角度会略有不同。这次改版背景很简单:首页整体架构调整的同时,主图标的设计语言改成了面性,而由于时间紧,小说图标还没来得及改,所以这次的设计目标就一个,把第一版图标改成面性的。本来我以为,直接由线性改成填充的形式就可以了,分分钟搞定,但没想到改过来的效果是这样的:

于是经过调整又得到这样的:

为什么还是不好看?我也不知道啊!这种情况就去多找参考,分析分析别人的优秀作品,比如下图谷歌的图标:

为什么人家的看起来就那么好看,那么精致?我个人觉得最大原因就是它的透气感比较好,导致透气感好的原因在于,它采用了多元素组合的方式,并且使用大量留白与彩色形成对比。在这样的分析之下,我对图标进行了重新构思,直接在脑暴阶段就重新思考(因为原有图标是一个元素,很难再拆分成两个元素来进行组合)。脑爆的方法,大家可以看上一篇:《从0到1——一组图标的诞生》,这里就不多说了。为了能做到独特,我最终选用的图标含义如下(尽量避开用烂的词汇):

  • 书架:两本书互相依靠
  • 热门:手捧爱心
  • 免费:冰淇淋甜筒(创意来自甜筒经常会有第二份半价,或者买一  送一的活动)
  • 完结:黑子手捧完结的牌子
最后的执行效果如下:

新版图标也是利用元素的组合,并且图标内有大量留白使图标更加透气。除了透气以外,我还在图标之中融入了一些“有生命感的内容”,比如手,品牌形象,拟人化的书等等:

使图标变更加可爱,有情感,充满一些故事感。除此之外,对图标还增加了一点点的小细节作为小彩蛋:一般我们在做一组东西的时候,都希望能够有一个主旨贯穿始终,这样解释起来更加有说法,有说服力。比如上面这组小说图标,设计关键词是温暖,情感,可爱,在这样的理念下,我将温暖转化为阳光作为视觉语言。可是阳光怎么落地呢,我当时能想到的就是高光和投影,本次使用的就是充满光感的长投影:

当然,为了使图标轻量化,投影不宜过重,起到点睛的作用即可:

除此之外,像前面所说,为了体现可爱的主旨,融入了手,品牌形象等有生命的元素(并且整体图形都是比较圆润,避免尖角的出现),这也是贯穿主旨的一条路径。方法很多,各不相同,其本质目的还是希望大家做设计的时候要有适当的理念贯穿!整个设计过程就差不多这些了,其实花在调整细节的时间还是比较多的,随便一个图标有了大方向和思路之后,还是需要不断的修改修改再修改,比如一个完结图标:

颜色的搭配、五官的间距、元素之间的大小关系等等,都需要不断的调整,而真正考验我们的也就在这些细节当中。这里再补充两个增加可爱度的实用小技巧: 1. 五官紧凑一般情况下,缩小五官的间距,可以一定程度上实表情更加可爱,尤其是嘴鼻和眼睛的间距:

2. 腮红一般来说,在我的印象中只有可爱的东西才会有腮红,五大三粗的大老爷们加个腮红,咦~,不敢想!所以画可爱的形象或表情时,可以考虑加个腮红:

不过我这次由于元素太多,所以没加,大家可以根绝实际情况自行实践。最后:看万卷书,行万里路!不走,书白看。看万篇文,练万个习!不练,文白看。以上仅供参考,加油!

菜心设计铺(公众号)

作者:菜心设计铺

(0)

相关推荐

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

    图标--界面设计最重要的元素之一.菜心经常写关于图标的教程和感悟,可见图标设计在我日常工作中占了很大比重,所以我始终坚信能够把图标做好,也是难得的特长之一! 这里拿几个月前做的第一版小说模块图标为例( ...

  • 教你用AI制作萌萌哒的MBE风格图标(第二弹)【AI教程】

    Hey~ 大家好,今天是10月的最后一天,马上就要进入寒冷的11月了,双十一要来了呢~ 不知道大家的钱包准备好了没?反正我是准备好了!这个十月你努力了没有呢?抓住最后一天的小尾巴,跟着嘉儿来做一个MB ...

  • 三星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飞车图标点亮 点亮要求:等 ...

  • 腾讯电脑管家8.0评测

    近日腾讯电脑管家8.0新版正式发布,综合杀毒防护和安全管理,不仅提供创新的多引擎杀毒服务,同时融合清理垃圾、电脑加速、修复漏洞、软件管理、电脑诊所等丰富电脑管理功能,更增加了多项新特性新功能,加强杀毒 ...

  • 像素图标绘制技巧

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