/才1年多!我是怎么从只能临摹的小白蜕变为参与大厂项目的原创

才1年多!我是怎么从只能临摹的小白蜕变为参与大厂项目的原创



好平台+一个好老师,谁说你学不会设计?

2020年12月加入星球,到现在已经快2年了,从刚开始的只会临摹,到现在的半原创、质感图标以及参与到大厂项目中,都离不开一个良好的学习环境和一个引领成长的老师。

心哥的“菜心设计铺”就是一个很好的学习平台,每天都有成员图标打卡,成员之间也在积极的互相寻找练习作品中存在的问题来锻炼自己的眼力和设计能力,而且星球直播群每个星期还会有各种干货直播。

起初是星球成员的打卡问题汇总,后来发展出如何提升作品集质量、面试大厂、字体设计、界面训练营、图标训练营、插画训练营等等干货满满的直播,可见心哥的用心。


在学习的过程中,一个良好的学习平台很重要,有一个关键的老师引领比学习平台更重要,心哥就是我在锻炼设计能力上一个很好的老师。

受他的影响,我逐渐在纷杂的焦虑氛围中明确我之后的主要学习方向,也从只会临摹图标,进步到现在可以绘制半原创、质感图标,一直到今年参与到小米图标项目中参与主题图标绘制。

不得不说,有一个好老师,不仅可以通过星球认识到更多的优秀伙伴,也是让自己继续努力的动力;在未来的时间里我也会努力提升自己的能力,能够参与到更多项目中,感谢心哥带我一起呀~



小米图标主题-微光曼舞在站酷发表后获得了三火,感谢大家的喜欢和肯定,下面我分享下过程中的收获吧!


没想到细节这么多

在拿到主题文件后,先临摹了一个图标学习里面的层次和细节,没想到里面居然有这么多细节:


首先图标的造型细

1. 有圆角和尖角搭配,想体现“光”的明亮和“影”的黑暗;

2. 尽量用简单的块面诠释整个图标,用简洁的造型契合整体风格-“优雅、稳重”;

3. 每个图标的造型都是流畅顺滑的,没有多余的负型空间,图标统一感非常强;

其次是图标的层次

结合光影的主题给图标设定2-3个清晰的层次,用层次来增强空间感,也能增加光影的细节;

以邮件举例,一般会将左右两边统一成一个面,而在这套主题中,邮件采用3个面的设计区分出信封的层次,每一个面之间层次分明,让图标更接近真实,立体感更强;


最后是光影质感:

给图标设定受光面、暗面、明暗交界面,灵魂添加左下角的反光和轮廓光增强图标的质感和立体感,配合图标的层次加强图标的空间感,再加上由右上角到左下角的投影,让图标更符合“有光就有影”的设计主旨;



学到了这么多的细节,为什么做的图标还是有问题?

在发布后的主题中,我发现有几个图标没有被采纳,来分析下原因:

1、造型问题:图标细节处理不到位,形体可以再优化

例如遥控器图标,最开始的一稿是这样的:


从图中可以看出来图标中的负型占比过大,除了中间的圆形是标志化的图形暂时不调整以外,可以再进一步缩小横向、纵向的三角,缩小负型占比,优化后如下:


占比好了一点,但负型的问题没有解决,虽然三角形缩小很多,但是三角形本身就会有左右两个位置的负空间,基础造型还是不稳的,所以这个图标没被采纳,来看下最终的遥控器图标吧:


用圆形来代替三角形,减少负空间,并缩小中间圆形占比,整个图标造型更稳;

2、风格不符:和整套主题的风格不搭

基于前文的风格分析,整套图标是走“优雅、稳重”的路线,采用简洁的造型来诠释风格,所以在图标个性化的过程中,也是有没被采纳的图标,让我们一起看看吧!

在做联系人图标时,需要和初始主题不一样,所以在个性化的过程中设计了几个版本:


机器人的形象虽然很有个性,但是存在识别度低,与优雅、稳重风格不符的问题被pass掉了,所以在尽量保持基础造型上,又优化了下一个版本:


虽然没有改变基础造型,但加上帽子让图标看起来更像一个侦探,而不是联系人,而且也能看出来图标的造型是不稳的,负空间有点多,所以也被pass了,那一起来看看最终版吧:


优化后的图标,整体的造型是圆润饱满的,简单的造型也更符合设计风格,所以只有在正确分析图标的风格后才能做出符合风格的作品,动手做之前最重要的是动脑思考。

接下来再来看一个!

最开始的初稿是这样的:

整体的造型虽然没太大问题,但是后方斜过来的模块增加了图标的负空间,也和整体图标的风格不搭调,略显活泼了一些,优化之后是这样的:

把模块改为文件夹内显示,造型更稳,模块改为白色让整个图标更透气,也弱化了一些上个版本的活泼的感觉。

3、局限的思维:只做常规图标,不敢做新的尝试

做UI设计做习惯的后果就是给图标画个框,把图标稳稳当当的安在框里就行,所以在这次图标设计项目中,没有打破这个惯性思维,始终局限在“图标就在底板中间”的想法中,没有做更多方向的尝试,来看一个例子:

比如计算器的图标,最开始我做的是这样的:

由于没有做更多的尝试,也一直有一些局限性,所以没有Get到橙汁组长“可以撑满整个背景”的建议,直到我看到最终版:

图标用简单的光影分割为两个模块,不仅符合简洁造型的特点,而且也很有差异性,所以在平常做设计时,不要怕试错,也要多去想一些更好的设计形式来诠释。

再来一个例子,看便签这个图标,最开始的一稿是这样的:

就是一个很普通的便签图标,没什么特点,相反,在底板上像是方框套方框一样不舒服,优化一下之后是这样:

虽然造型加了一点特点,但是图标风格活泼了一些,也是方框+方框的组合,再加上文字和胶带的细节就会让图标很复杂,内容传递的太多了,于是又优化了一版:

把整个底板改成便签的一部分,但底板造成的透视让它和整体图标格格不入,笔的造型也不稳,太细了,所以直接来看下最终版:

放大整支笔作为主体,给主体加上光影的变化和造型的细节,把底板的透视去掉,只加一个若隐若现的顶部横条代表笔记本,不抢主体的目光,也能诠释“便签”的含义。

4、光影的层次太多

前文也提到过,每个图标基本在2-3个层次左右,这样设定是为了避免图标层次过多会比较复杂,所以图标层次过多也是不行的,来看个例子:

信号图标最开始做的是这样的,图标造型不够饱满,所以优化了一下,变成这样:

优化后的图标识别性有点低,而且不仅变得更加复杂了,里面的层次也变得特别多,每一个形状都有独立的层次,单独看还可以,但是放在整体中就经不起推敲了,层次之间的清晰度也不够,所以又改了一版:

把信号图标改成用块面来表达,可调整后的图标在统一性上有点问题,信号是面性,左上角的图形又是线性,冲突感太强,如果去掉,图标造型不稳,左上角会失重,所以调整了一下:

把信号直接画出来,只在最右侧稍作造型的变化,每个竖线之间的高度差距和上一版比不会很明显,所以就不会造成左上角的留白特别大,不会有失重感,再加上光影细节,一个信号图标就完成啦!

再来看一个光影层次太多的例子!

最开始做的小米直播:

因为小米直播的图标是应用本身的Logo,所以不建议个性化,那就把原来的logo画出来再加上光影细节就行?想的可太简单了:

因为图标有拟人化,所以如何给眼睛部分加光影就成了个比较难的问题,加不好,整个图标就会比较“阴间”,所以最初的版本里,眼睛的变化就不行,看着很不舒服,所以又调整了一版:

试图让眼睛部分和背景更融合一些,可没想到调整后,眼睛看着有点吓人,所以尽量让眼睛亮度差距不要太大,加上嘴巴内部的构造,又调整了一版:

调整了星星的亮部,让亮部面积再稍大一些,这样眼睛即便亮着也会比较和谐;


写在最后

在这次的小米图标项目中,我学习到的知识比做一个月的练习还多,不仅对之前学到的知识点印象更加深刻-让造型更稳的方法,还扩展了一些新知识点:

1.风格的统一:做整套图标时,要注意整这个统一。其中包含造型的统一,造型要符合设定的风格。

2.气质的统一:走优雅路线就不要加入风格活泼的图标。

3.质感的统一:光影层次在2-3个,层次之间要清晰明确。

等等,总的来说,完成整套的图标设计不只要注重细节还要从大方向的设计风格出发去审视自己的设计,这样才能达成设计最优解!

最后,很感谢心哥带我加入小米图标项目中,也欢迎大家一起加入星球共同进步,一起成长,未来的大佬也许就是你哦~

长按识别二维码(有50的优惠券),一起加入这个大佬遍地的星球吧,

是不是以为50的优惠这就结束了?别走,加入后,除了这50的优惠,还能找我返现拿红包哦~

菜心ui试听课

赶紧戳下方阅读原文,名额有限,抢完为止!

本文来自微信公众号“菜心设计铺”(ID:caixinshejipu)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。