序言

一般我们做一个项目的时候,它的完整流程是,沟通需求,然后查找参考资料,最后制定策略完成设计。

借鉴的四大方向

而难点就是我们把参考转化为设计方案的这个过程,那今天,从风格、构图、色彩和标题,这四个方面来分享一下借鉴的方法。


风格

之前有一个职场进化指南这个项目,它当时是精品课为了蹭毕业季的热点,为公众号引流做的测试答题h5,而且需求里面每个页面会绘制对应不同主题的人物场景插图。因为是针对毕业生,所以我将风格定义在了年轻、有趣味性。

风格,是用户在打开图片时的第一感受。而不同的风格,代表的气质也不相同。所以针对这个需求,我查找了各种风格的参考。

· 赛博朋克风格是一种基于未来,体现科技感的风格,比如多应用于电子产品。

· 中国风,就比较常用于中国传统节日,比如中秋春节之类的。

· 酸性设计风格,是这两年新型的风格,使用充满活力的排版样式和重金属风格的主体物进行组合,不拘一格的表现方式,表达叛逆的情绪。

· 蒸汽波风格可能有一些无厘头的感觉,奇葩说片头视频和2017年淘宝潮流节就使用了这种风格,体现搞怪~

下面是另外三种风格

· 其中波普风格,使用大量的波点给人一种混乱的感觉,所以这几年在运营设计中使用的较少了。

· MBE风格是从线框型Q版卡通画,演变出来的风格,设计采用更大更粗的描边,绘制扁平的插画,相比于其他插画风格,更简洁、更通用、易识别。

· 孟菲斯风格是使用波普风格的配色 和 扁平化的几何元素进行结合。

mbe和孟菲斯是比较体现年轻有趣这个特征的风格。

所以,为了与h5年轻有趣的调性相契合,我将这两个风格结合起来进行使用。

大风格选择了孟菲斯,提取了它的表现形式

  • · 是运用艳丽的色彩搭配。
  • · 使用大量的几何图形,利用色块制造出空间立体感。
  • · 是用黑色框住文案,突出标题。

而页面中插图的绘制,则选择了mbe风格。

  • · 利用粗线条的描边,将每一个元素之间相互重叠,但又相互独立出来。
  • · 每一个图形也更简洁抽象,人物的五官只用点线来表现

这是这个项目大部分页面的展示,整体来看呢,它就很直观的呈现了,年轻有趣的气息。

构图

下面说下构图。词霸有一个考研课程,百日冲刺提分班。词霸多数的课程头部都是以插画搭配标题制作。构图需要注意的就是标题文案和插图的排列方式。

针对标题和图片的排列方式,来介绍几种常用的构图方法和实际应用案例。

首先是三分构图法,它的特点就是画面中的内容三等分,并突出c位的信息。常见于电商设计。

从图中可以看到,三等分中,处于c位的是5折这个信息,两侧是商品的品类。这样的构图,很明确的将售卖的商品和最重要的打几折这个信息传达给了消费者。

中心构图法,它的特点就是重点突出。

图中需要突出的重点信息是单身狗pk秀恩爱,中心构图就能让主题信息,一目了然的展现到用户眼前。

两分构图法分为上下和左右两种构图方式。

上下构图所占图幅是比较大,但是内容冲击力更强。左右构图所占图幅较小,但要求文案的数量需要精简,尽量不超过6个字。

对角构图法,就是将想要表达的信息对角放置。

因为对角线将画面一分为二。分出来的这两块空间的面积是对等的,因此在重量上来说画面依旧是均衡稳定的,并不会因为对角线的出现而打破平衡感。这种构图方式,让页面显得更灵活,有动势,让画面有更多可能性。

对角构图在著名画作中也被广泛应用。

反观我们这个需求,文案很多,有三行;需要考虑与插画的结合;而且需求方希望第一屏就有详细信息展示。

所以就选择了对角构图,由于我们的阅读方式是从左到右,自上而下的,所以选择了把文案放在左上角,插图放在右下角,这样更符合正常的阅读习惯。

颜色

接下来说下色彩。词霸当时是百日冲刺提分班和百日冲刺抢分班,这两个课程同时上线,内容又都为考研,那我能想到最好的区分方式就是利用颜色制造差别。

在设计开始的初期,我们要确定页面的色调,也就是建立色彩索引,确定画面中的主色、辅色和强调色。

词霸的主题色为红黄蓝,比较快捷的配色方式是利用主题色俩俩搭配,也就是红黄、红蓝、黄蓝。考虑到红黄经常应用于国庆,春节等活动中,就选择了红蓝和黄蓝的搭配方式。

以黄蓝配色为例,我们在查找参考的时候,可以利用花瓣的颜色选择工具,更快捷的选择,我们想要参考的颜色。

因为咱们的词霸针对高中生大学生,所以配色的参考方向,肯定都是高对比,高饱和的搭配方式,体现年轻的特性。

最开始我是想像上图左侧两种图片一样,用蓝色作为主色而黄色作为强调色,或者相反用黄色作为主色,蓝色进行点缀。

但我在找参考的过程中发现,像右侧这样,大面积的撞色。利用颜色将页面进行分割,也可以帮助页面的信息排列展示。

这样我就想到可以黄蓝都是主色,用颜色将头图与下面的内容进行区分。确定了思路后,我选择将左侧两个页面中的颜色进行融合,使用黄色页面的配色方式做头图,黄色底,棕色标题。下方衔接蓝色页面的底色,大面积蓝色,然后黄色做点缀。

将这两个参考图拖入eagle里面,软件右侧会自动提取颜色。这样会提取的比较准确~自己选择里面出现的主要颜色。在提取颜色的时候,收获了意外之喜,发现可以用红色做点缀~这样相当于词霸的主题色红黄蓝都用上了。

然后根据提取出的颜色,搭配出这个提分班的设计。

抢分班的页面和刚才提分班页面的配色方式相同,只不过是用红蓝做主色,黄色作为辅色点缀。

标题

接下来说一下标题。之前许愿圣诞礼这个项目,它是词霸的一个做任务领礼物的h5。而标题设计的关键点是营造圣诞氛围。

我在找参考的过程中呢,发现很多都在标题的位置增加一些元素,烘托节日氛围。比如新年加个小狮子头,加个灯笼,圣诞节加个糖饼人,情人节加朵小玫瑰~这样标题的氛围就很明确。

那我就想,我这个标题是不是也可以加点什么~观察这个文字,只有礼字在这个折弯勾的位置有一些空间~而圣诞帽也是非常典型的圣诞元素。我就想把他们两个结合一下。

添加之后~既不影响文字的阅读,又加强了圣诞的氛围~

总结

最后呢,还是要说一下。借鉴是能力提升的必经之路,我们要学会针对需求找参考,或者是在参考中找到设计思路。

但我们如果一味的临摹,可能就会和参考图做的一抹一样,就会变成抄袭~

所以要对参考图加入我们的想法和理念,然后与我们的产品调性做一个契合。

比较“快捷高效”的方式就是用a的排版,b的颜色,c的文字处理,重新排列整合出最终的设计。

感谢UEC全体同学的帮助~

Powered by Froala Editor