恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
运营设计策略-借鉴方法论
1.0°
原创文章 / 经验/观点 / / 举报
138 2 3 0

2021-09-28

序言

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


借鉴的四大方向

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


风格

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

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

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

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

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

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

下面是另外三种风格

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

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

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

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

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

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

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

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

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

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


构图

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

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

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

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

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

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

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

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

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

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

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

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

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



颜色

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

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

词霸的主题色为红黄蓝,比较快捷的配色方式是利用主题色俩俩搭配,也就是红黄、红蓝、黄蓝??悸堑胶旎凭Sτ糜诠?,春节等活动中,就选择了红蓝和黄蓝的搭配方式。

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

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

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

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

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

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

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

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


标题

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

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

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

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


总结

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

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

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

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

感谢UEC全体同学的帮助~

Powered by Froala Editor

设计分享经验

创建于:2021-09-28
收藏

2人已收藏

  • 22

    作品

  • 4218

    粉丝

  • 3

    关注

  • 2019上半年作品回顾2_插画篇
  • 2019上半年作品回顾(1)_金山词霸插画篇
  • 所有设计师都应该懂的动效设计
  • 视觉设计师必备的交互思维_01换个视角看问题

猜你喜欢

    金山办公用户体验中心_北京

    金山办公用户体验中心_北京

    We Create!

    人气明星老马识途首页达人一鸣惊人
    • 4218

      粉丝

    • 460.5

      人气

    • 2.1w

      颜值

    作品

      金山办公用户体验中心_北京

      点赞:3

      收藏:2

      评论:0

      运营设计策略-借鉴方法论

      你确定要举报运营设计策略-借鉴方法论?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年09月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录
      全网福利资源合集搜索处解压码