序言

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

借鉴的四大方向

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

风格

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

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

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

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

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

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

下面是另外三种风格

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

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

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

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

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

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

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

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

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

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

构图

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

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

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

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

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

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

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

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

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

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

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

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

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

颜色

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

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

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

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

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

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

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

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

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

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

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

标题

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

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

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

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

总结

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

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

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

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

感谢UEC全体同学的帮助～

Powered by Froala Editor