从0到1 —— 一组图标的诞生 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


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

2019-6-20 分享达人 图标设计文章及欣赏



如果您想订阅本博客内容,每天自动发到您的邮箱中,

图标——界面设计最重要的元素之一。


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


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


1.风格设定

2.创意脑爆

3.设计执行

 

1。风格设定

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


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


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


2。创意脑爆

锁定风格之后,就要构思创意了,也就是如何在这样的风格之下去表达你的内容。


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


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


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


首先来说具象:其实很好理解,如果词汇太抽象,你是很难表达的,比如流行这个词,你是很难表达的,而就很具象,很容易表现。


再来说二层:指的就是尽量不要选择核心关键词延展出来的第一层词汇,因为这些词是大家都能想到的,并且用烂的,比如人气直接延展出来的奖杯等等。(但是如果你的图标没有文字提示,需要表意特别明确,建议还是使用第一层延伸词,可以在风格上做些差异化表现)。


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

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


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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

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

 

3.设计执行

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

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

 

3.1 设计技法的细节

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

3.3 俏皮的那一笔

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


再比如一根线条的破局:


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

接下来分享的也是这几个图标,不过是延伸版,切入的角度会略有不同。

 

这次改版背景很简单:帝皇彩票整体架构调整的同时,主图标的设计语言改成了面性,而由于时间紧,小说图标还没来得及改,所以这次的设计目标就一个,把第一版图标改成面性的。

 

本来我以为,直接由线性改成填充的形式就可以了,分分钟搞定,但没想到改过来的效果是这样的:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

为什么还是不好看?

我也不知道啊!

这种情况就去多找参考,分析分析别人的优秀作品,比如下图谷歌的图标:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

为什么人家的看起来就那么好看,那么精致?

 

我个人觉得最大原因就是它的透气感比较好,导致透气感好的原因在于,它采用了多元素组合的方式,并且使用大量留白与彩色形成对比。

 

在这样的分析之下,我对图标进行了重新构思,直接在脑暴阶段就重新思考(因为原有图标是一个元素,很难再拆分成两个元素来进行组合)。

为了能做到独特,我最终选用的图标含义如下(尽量避开用烂的词汇):

 

书架:两本书互相依靠

 

热门:手捧爱心

 

免费:冰淇淋甜筒(创意来自甜筒经常会有第二份半价,或者买一  送一的活动)

 

完结:黑子手捧完结的牌子

 

 

 

最后的执行效果如下:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

新版图标也是利用元素的组合,并且图标内有大量留白使图标更加透气。

 

除了透气以外,我还在图标之中融入了一些有生命感的内容,比如手,品牌形象,拟人化的书等等:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

使图标变更加可爱,有情感,充满一些故事感。

除此之外,对图标还增加了一点点的小细节作为小彩蛋:

 

一般我们在做一组东西的时候,都希望能够有一个主旨贯穿始终,这样解释起来更加有说法,有说服力。

 

比如上面这组小说图标,设计关键词是温暖,情感,可爱,在这样的理念下,我将温暖转化为阳光作为视觉语言。

 

可是阳光怎么落地呢,我当时能想到的就是高光和投影,本次使用的就是充满光感的长投影:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

除此之外,像前面所说,为了体现可爱的主旨,融入了手,品牌形象等有生命的元素(并且整体图形都是比较圆润,避免尖角的出现),这也是贯穿主旨的一条路径。

 

方法很多,各不相同,其本质目的还是希望大家做设计的时候要有适当的理念贯穿!

 

整个设计过程就差不多这些了,其实花在调整细节的时间还是比较多的,随便一个图标有了大方向和思路之后,还是需要不断的修改修改再修改。

 

 

 

颜色的搭配、五官的间距、元素之间的大小关系等等,都需要不断的调整,而真正考验我们的也就在这些细节当中。

 

这里再补充两个增加可爱度的实用小技巧:

 

五官紧凑

一般情况下,缩小五官的间距,可以一定程度上实表情更加可爱,尤其是嘴鼻和眼睛的间距:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

腮红

 

一般来说,在我的印象中只有可爱的东西才会有腮红,五大三粗的大老爷们加个腮红,咦~,不敢想!

 

所以画可爱的形象或表情时,可以考虑加个腮红:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

不过我这次由于元素太多,所以没加,大家可以根绝实际情况自行实践。

 

最后:

看万卷书,行万里路!不走,书白看。

看万篇文,练万个习!不练,文白看。

 

 

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 图标 « 帝皇彩票官网十分钟认识界面设计中卡片式设计 | 细说B端后台产品UI设计那些小结»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 帝皇彩票官网2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 帝皇彩票官网2016年12月(55)
  29. 2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 帝皇彩票官网2016年3月(19)
  36. 2016年2月(26)
  37. 帝皇彩票官网2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 帝皇彩票官网2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 帝皇彩票官网2015年7月(33)
  44. 2015年6月(46)
  45. 帝皇彩票官网2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 帝皇彩票官网2013年10月(61)
  65. 2013年9月(20)
  66. 2013年7月(13)
  67. 2013年6月(27)
  68. 帝皇彩票官网2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 2013年1月(31)
  73. 2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
甘肃快3 桔子彩票平台 大乐购彩票计划群 大象彩票APP 帝皇彩票 内蒙古快3 帝皇彩票官网 帝皇彩票登陆 迪士尼彩乐园 贵州快3走势