今天我们来分享一个直播活动页面的改稿过程!来,上才艺!
首先我们先看一下需求:直播活动的页面,中间需要摩天轮的样式来承载活动内容
接下来给大家分享一下我们的变身过程~
因为主体主要是摩天轮,首先我们要确定摩天轮的结构,凭空肯定想象不 出来,此时掏出我们的花瓣哐哐一顿看
从上图我们可以发现,主要是摩天轮的连接以及四周的轿厢来区分摩天轮的样式,轿厢的样式需要根据结构来调整承载需要放置的信息内容,于是诞生了如下的草图:
草图1:整体空中间的负空间太多会比较空;草图2:
用装饰撑满了整个画面,但是看起来会太密,整体有些拥挤
最终选定草图3,把装饰缩小,围绕在中间,从整体的结构上看疏密关系更好,并且不会影响阅读外圈轿厢上的文字信息。加上信息内容,最终草图优化如下:
此时带着激动的心颤抖的手去跟需求方对了一下,需求方表示可以,但是中间的吉祥物想要换一下,换一个动作效果,觉得很生硬。甲方大大说的有理,这就去办
这是一个游乐园,兔子能干嘛呢,躺着很惬意优哉游哉的,举着气球,或者举着棒棒糖,嗯,就这么干!
是时候祭出了我的三脚猫功夫了,如有辣到眼睛(你什么都没看见)
此时观察一下下面三个草图,造型都很呆,然后三个草图的中标红的部分留白都比较多,甚至占了画面三分一的大小,那我们的主体肯定是不饱满的
对于整体造型不饱满的问题,此时我们把主体兔子整体放大,让它占据画面主要部分,让耳朵可以破出去不用局限于这个圆,减少画面的留白那怎么解决造型呆的问题呢,会发现兔子举着东西就是这样直直的举着,没有一个动态,这时我们给他一个动势,并且加上表情,这时我们的兔子就活泼多了
02 色稿敲定在颜色敲定上我们出了几版给甲方大大选择,主要是摩天轮的颜色以及底座按钮的颜色
通过以上观察看出上面两张图的颜色轿厢跟背景都是同色系的,轿厢就有些融合背景,整体的摩天轮对比没有拉开最终选择了一个对比比较强烈的颜色,用蓝色的背景跟主体的紫色摩天轮拉开对比,这样能更好的突出我们主体的摩天轮,最后敲定的色稿如下:
但是会发现整体质感偏油腻了并且有些糊,轿厢的结构不是很清晰,边缘光糊,光很软,这样就容易造成画面的油腻感,并且颜色都是高饱和没有对比,接下来让我们看看轿厢改前与改后的:
改前的整体结构饱和度都很高,上中下结构上也没有一个明暗的变化,字就糊在画面里有些看不清
怎么解决字看不清的问题呢,这时我们看修改前中间的结构部分是亮的,我们的字也是亮的,那就让我们中间暗下去,给一个暗色的背景字瞬间就清晰了
同时轿厢上下结构也可以丰富起来,也给它一个亮部一个暗部试试,固有色紫红色的基础上加入亮部黄色,暗色部分紫色,整个颜色上就丰富了起来
此时,我们把修改后的轿厢放到画面里,并且试一下水果蔬菜图标看下整体效果如下:
再观察发现此时:1.按照真实比例画的胡萝卜的图标在画面里看起来特别细小,不是很饱满;
2.中间的吉祥物主体也没有特别的出来;
3.按钮也还有些随意
那么首先我们来优化一下图标:最初是找了真实的图片来提取,所以整体的胡萝卜很细长,这时我们放到圆里就可以看出留白是很多的,整体的图形就不够饱满
如何饱满起来,按照之前的逻辑那就是胡萝卜变得胖体积变大让空白减少,就先调了一版,整体还是不够圆润,经过优化更饱满的最终版胡萝卜就横空出世了接下来我们在看看胡萝卜放在画面里的前后的对比:
有了这个思路,其他的图标我们就都可以根据这个一样的来
现在开始中间的主体兔子部分的优化:首先我们先看看问题出在哪:
1.兔子下star按钮这犯了跟前面一样的问题,底色是一个亮色,字也是亮色,字也就不突出有些糊了
3.整体中间兔子因为颜色跟背景色一致,就显得整个中间颜色是往后的,并没有突出出来
关于按钮颜色的问题,同样给一个深色的底,这样star的字就变清晰了,同时给按钮一个厚度,这样就解决了这个部分结构很平的问题按照这个方法也可以调整一下整个圆环的厚度,给圆环再叠加一层,让整个圆环可以更立体,并且加重圆环内心圆与外面颜色的对比,之前的圆环背景纹理是点,效果并不明显,此时换成更粗一点的线条,增加内心圆里背景的丰富度
兔子整体的颜色也采用更深的邻近色红色,有颜色上的对比,让兔子从画面里跳脱出来
最后按钮各种小细节的修改后如图:
大家做图时一定要多观察我们整体图形是否够饱满,当拿不定主意时就放到画面里,当有个容器背景如圆里时,这时看画面的留白就可以观察到了,要多用颜色、明暗对比来突出我们想表达的信息。祝大家也能改稿顺利!