好久没更新了，今天来一篇二合一，稍微长了一丢丢！
今天和大家分享一个工作上的需求，本来需求方给的3天排期，结果我几个小时就搞的差不多了，为什么这么快，其实还是有点小方法的，和大家展示下整个思考的过程。
1.需求分析—找出难点
这次需求是做V A r + \ } f P F一个联合会员的活动页面，大概的布局方式和Q ` 3之前腾讯动漫的v会员有点像：
虽然状态有点多n # \ M P @，但其实没有多大难度，最大的难点就在于头部的主形象。
主要把主形象搞定，其实的内容大概半天就可以搞定。
2.对应难点—找到参考
现在我们知道了难点在于头部的主形象，那怎么做呢？
主题是腾讯动漫和腾讯会员的联合会员，这种主形象，之前没做过啊。
这时候最好的办法就是去网上找些参考，我可能是第一次做，但是别人不知道已经做过多少次了，网上一搜“联合会员”四个字，立马出来：
很多参考，我看其中一个就很合适：
简单直接，也挺出效果。
但是如果直接用2.5的形式可能就和人家太像了，这时候就需要进行V * b M g ; r + v下一步思考了。
3.有了参考—寻求差异
这一步非常关键，因为我们做东西# O $必须要有点差异化，不能和别人一摸一样。
如何突破呢？其实这次需求做的这么快也是因F + F o 1 Z { {为平时搜集的参考有用心X Q ` 5 . \ @ C留意，当真正合适需要的时候就可以直接参考创作。
这次主要是在构图上做点E a U V 5 / D s I差异化，灵感就来自于之f 8 m c x M +前搜集的构图参考里的其中一张：
就是一个b % s g E开口的圆洞，里面冒出来一些物体，而我们这次就可以冒B _ X . y出来腾讯动漫、腾讯视频的icon，再加上一点小修饰，大概的效果如下：
4.最后成稿
有了大概的效果，这时候可以加点配# ! y X G u .色了，主色就用腾讯视频上的蓝色，辅助色就用黄、橙、绿，咔咔一配，然后再加上点标题和小排版：
一个头图就基本上出来了，页面中的内容没啥W 1 9 / n g Q太多可讲的，这里就不多说了。
整个思考过程基本就这样了，这个主形象从构思到完稿也就用了2个小时，然后下面的内容一填充，这个需求差不多一天} $ ;就搞定z s S V z _了，还算比较快，主要是平时比较用心的积累，所以在需要的时候可以马上调动。
做到这里，也没什么大问@ 6 ( 7 J o题，就普普通通的过稿了。
但是我在想，如果一直做这种比较简洁的设计，那就会一直在舒适区内，根本没什么进步，于是我开始优化这个主形象，中c A M间经历了很多版本，比如这种:
虽然在层$ T % ;次上有更丰富的层次，但是并不是我想要的感觉，还是没有设计感，也没有独特性。
最后我用一个周末的时间优化结果如下:
中间也请教了慢热、小智一些画云、流体的方法，收获很多，接下来我们来看下整个优化的过程v & o U Y O ? c和思路：
关注早的朋友可能知道，我做的设计相对比较简洁可爱，比如下面这些：
为什么走简洁风可爱风呢？是不喜欢那种层次丰富、酷炫的风格吗？
当然不是，是我做起来太费劲，不在我的舒适区内。
但是我也想突破一下，让自己做的东西更加的丰富饱7 C r , % z | G A满，于是说干就干，从上次那个联合会员开始，尝试了更加富有设计感的手法。
过程学到了非常多的知j E ; 4 8 g d B识，今天和大e f ~ ` l H & J家剖析下优化的内容，大概有如下几m ? H = ~ V a Y I点：
5.云和流体绘制的技巧
6.字体的优化
7.排版的优化
8.画面元素的关联性
9.元素的质感优化
5.云和流体绘制的技巧
云和流体的这种元素绘制起来时非常麻烦的，这里和大家介绍几个小技巧。
其一
云一定要a i f w有一个大n 9 y R的动势，然后整体结构要跟着大的) 6 w T Y @ c x动势走J 3 A e * J，比如我这里的大的动势就是从那个圆圈里出来，然后环绕一圈扩散出去：
如果没有大的动势，就很容易画乱。
其二
一定要先画好草稿，在进行钢笔绘制，如果直接上来就用钢笔画，很难画出好的结构细节，所以一定要在草稿的时候就把大概的结构画到满意，然后用钢笔直接描出来就好了：
其三
云一定要有层次，如果你的云只有一层颜色h j Z，就l j ; B _ q \ (会非常单薄，所以一般最少v $ n都要有三层，一层固有色，一层暗部，一层亮部：
这样看起来就会丰富很多。
其四
云两侧的形状一定要都漏出，千万不要只露出一边，那样很容易画成我中间的一版本：
就变成普通的叠层了。
这四个点就是在画云过程中的一些感悟，现在画的还不够熟练，还需要多练习，去感受其中的的细节。
6.字体的优化
想让一个画面变得更加优化，我就必须要把默认字体变成有点设计感的字体，不然看着就会比较呆板，这个字体差不多修了3、4个小时，中间有尝试更加夸张一点的形式，比如：
但是做的还不够到位，并且和主画面不是很搭配，因为主画面已经比较丰富了，字体如果还那么乱的画，整体画面就没办法看了，所以选了一个比较保守的r – n字+ 2 w \ c ) }体设计，过程优化如下：
这一版就看起来还算比较稳。
7.排版的优化
之前的排版实在是没什么细节：
因为字体修饰了，所以只要稍微加点小细节，整体就会丰富很多，比如整体} W ,文案都用了倾斜的方式，然后副标题下面加了一排小英文：
这样整体排版就会丰富精致很多了。
8.画面元素的T N e ! $ \ 3关联性
最开始我的修饰元素有两个冒出来的竖条，其余的都是球体：
这样就会导致元素和整体主题的关联性比较弱，那是不是可以适当加一点与会员相关的元素呢？
于是我就加了两个会员特权，比如1080HD、再比如速看等等：
这样就会让元素与整体主题更加契合一些。
9.元素的质感优化
最开始的那版元素，其实基本没怎么修饰，所以看起来比较单薄：
在优化的过? * r 3 n / R } l程中，主要是对色彩进行了更加丰富的出来S * ` \，比如环境光：
还丰富了颜色的色相，比如我在左侧图标的橙色上融入了黄色以及梅红色，这样可以让颜色看起来g ! – t更加透彻一些。
最后大概效果：
总结
以上就是这个优化案例的知识点啦，过程很痛苦，因为要脱离舒适区，去做不擅长的] \ f东西，但是结果正向，自己也算\ ; \ 4 a n M _ ;是比较满意，这是个开始，希望后面可以做的越来越好！
Pow4 D F = * :ered by Froala Editor
