恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
视觉海报该如何设计?
81.9°
2023-05-05 原创文章 经验/观点 举报 16276 148 334 2

「海报」是一种信息传播方式,一种信息传递的解决方案。从学校的布告栏、到马路边公交站的站牌广告以及各种形式的户外广告,它们都是物理世界的海报。在PC互联网与移动互联网时代,海报被广泛应用在网页、移动端 App 设计等互联网平台,比如开屏广告、弹窗广告、落地页内嵌广告等。作为设计师,日常做一张视觉海报乃家常便饭,如何才能设计一张高质量且有价值的视觉海报呢?在本篇文章中,将和大家聊一聊该如何设计出一张“好的”视觉海报。


1.0 好的视觉海报,不止承载审美价值

海报作为一种常见信息传递的解决方案,首先是给人带来审美的愉悦感,这是海报在实现其主要价值后延伸出来的「审美价值」。而大部分人对其理解仅停留在审美价值,认为好看就行,其实这是一个错误的理解,或者说是对海报本身缺乏相应的判断标准;那么视觉海报设计它的目的/目标是什么?承载的主要价值是什么?例如:

  • 对于产品官网,企业想第一眼吸引并留住客户,往往需要通过头图,用户在看到头图海报时,需要快速了解所要讲的内容是什么;
  • 对于运营活动,每个运营活动都有相应的业务诉求,如拉新、促活、又或者是单纯为了卖货等;
  • 对于品宣活动,需要将品牌价值、品牌符号、品牌理念等融入其中,从而加强或改变该品牌在用户心里的形象;
  • 对于个人,可能是希望提升知名度与影响力;对于社会事件,希望通过宣传引起大众的重视等等

以上这些都可以归纳为海报的目的与主要价值,仅追求视觉效果的视觉海报是没有价值的,或者说价值是极其低的,等于自嗨式的设计;总而言之,有的是为了点击率、有的是为了促进销售、有的仅仅是为了改变品牌形象的而进行的宣传,每一张视觉海报自身所承载的目的和价值都不尽相同。


2.0 好的视觉海报,都是用户设计的

好的视觉海报的标准并不是我们制定的,不是“我们”说好就是好,也不是“需求方”,更不是某些“专家评委”说好就是好,而是根据用户的选择得来的;所有的设计都要围绕着用户来进行设计,用户所需要的到底是什么?用户心里所想的到底是什么?只有了解用户,才能设计出好的视觉海报;具体将从下面三个方向讲解,帮助你设计出好的海报:


2.1 目标驱动

广告投放如果没有目的性,就很难将产品信息传递给目标用户,从而很难实现最大效益化,大数据时代往往能帮助我们精准地传递信息给有需求的用户。对于运营同学来说,他们需要清晰的了解每一条广告,每一种投放形式的数据反馈,那么对于我们设计师来说,根据数据对每次设计方案的结果进行复盘、优化,是我们持续不断提高设计产出的价值的方式。

首先,我们需要明确我们的目标用户,明确我们数据指标,并以此进行分析,最后得出可以辅助我们做方案优化的结论,才可以让我们的设计不断进化。在流程上大致可以分为两个阶段,活动前与活动后,活动前对目标用户进行需求分析,活动后积累相关数据,分析数据进行总结,将历史数据作为下一次设计方案的判断依据,形成正向循环;

方案产出前:此时先以用户需求分析为主(如果有历史数据做辅助最好),根据目标用户的年龄段、职业、消费水平、审美倾向、心理预期...等来判断如何进行设计;

方案产出后:当一个活动经历过上线验证后,会产生数据反馈,一般是关注看:点击率、完成率、跳出率、浏览时长、转化率...等,当量积累足够,即可根据历史数据进行分析,得出对于类似活动方案有利的设计经验,总结累成方法论,辅助下一次的设计;


2.1.1 用户分析

说到需求,很多人想到马斯洛的五大需求:生理需求、安全需求、社交需求、尊重需求和自我实现需求,如果用一句话简单地概括,需求即是用户尚未满足又渴望被满足的愿望。当我们在设计前,要思考视觉海报的投放渠道、产品定位等等来分析目标用户,从而让设计更易被目标用户接受;

举例:拼多多的某次活动设计,通过分析得出拼多多用户群体的主要特点后,根据用户针对性进行设计:

  • 特点1:学历低(文案要做到简洁易懂)
  • 特点2:以三线以下的城市人群,且以老年人为主(审美风格要贴近老年人,不要“高大上”)
  • 特点3:追求低价格(突出价格视觉层级)

下面对比了三类电商的不同的视觉海报设计:


2.1.2 数据分析

每当你打开抖音时,推荐的你刷到的视频大多数都是“你”喜欢的同类视频,这就是通过数据,从而让内容达到精准推送的效果。而设计师在设计视觉海报之前,也需要参考之前的数据结果,例如设计A类的广告投放量、阅读量、点击率等等数据去分析方案的好坏,再通过大量的比对来分析出哪个些因素所产生的作用更大,从而为后面的设计做参考。

(ps:数据的反馈不仅仅在于视觉,跟产品、投放渠道等也有影响,在结果数据分析时应当注意)

以下是当年作者本人在动漫领域时,对于移动端开屏图的数据分析(仅展示部分),通过当时的分析,对后续的设计起到一定的指导作用。

设计不是千篇一律,也不需要完全摸着石头过河,而是需要了解用户,有数据的支持,再根据业务目标,让设计体传递用户价值,才能达到最终的目标。


2.2 信息传递

设计应从用户获取信息的角度出发,思考如何让用户更加简单更加高效地获取信息。

2.2.1 三秒原则与可读性

三秒原则:现实中我们路过广告位的时间只有 2-3 秒,没人会愿意站在原地等下一个广告,无论是公交站还是地铁上,又或是互联网产品场景下的“轮播图”与“开屏广告”,视觉海报的使用场景大多是需要快速传递信息,所以我们需要思考如何让用户更快获到取关键信息。

可读性:视觉海报的核心价值是传递信息,信息传递的准确性,是决定视觉海报成败的关键,信息传递不达预期,那么其它所有的努力都将是无效的。常规的视觉海报主要由文案与配图(插画/产品图/人物形象)构成,尽量做到文案言简意赅,这样用户才能快速理解其中含义,减少用户思索时间;配图需要与主题相关性一致,帮助用户加强记忆和快速理解;同时视觉效果要做到舒服,内容要有信息层级,合理引导用户的第一眼看到的信息内容。


2.2.2 行业属性

当产品所在行业在用户的头脑里占据一席之地时,在设计视觉海报时要善于利用已其所在的行业风格,便于用户更加准确的获取信息。用固有的用户思维,在视觉海报中融入所要表达的信息。那么如何利用其已有的行业风格呢?这里建议大家从:色彩设定、元素设定、表现手法三个方面入手。

  • 色彩设定:在设定主色调时,不同的行业都会有相应的色彩倾向,例如工具产品:一般是蓝色调,色调相对沉稳、电商领域:一般是红色,色调相对热闹丰富;两性社交领域:神秘暧昧的紫色等等。选择适合的色彩,让色彩帮助用户“记住你”(注:例如各种节日或某些特殊活动类并不一定非要切合行业色彩设定);
  • 元素设定:元素这里主要是指画面中的元素使用,例如:通过铅笔、橡皮等元素,可以快速的判断是教育行业;通过各种实物的商品元素,可以判断大概率是电商领域;
  • 表现手法:这里主要指的是画面中各元素或背景所呈现的方式,包含技法但不仅仅指技法,例如:卡通插画 or 古风插画、三维模型 or 2.5D插图、真人摄影 or 抽象人物......不同的行业属性都有其适合的风格范围,让适合的风格给你的海报插上翅膀;

以上案例都是利用用户已有的行业印象,降低读者的认知负担,从而快速获取海报信息。当然,品牌属性也是非常重要的,如果是企业相关的视觉海报,一定是需要融入品牌属性的。


2.3 情感设计

广告是会让用户感到枯燥的,我们需要通过情感设计,引起用户的好奇心,带动用户情绪,从而降低枯燥感。当我们根据目标用户进行了分析,且设计符合信息传递的标准,那么就可以考虑如何让海报进行再一次的“升华”,思考怎么样才能让用户更有欲望去点击?如何让用户在脑海中对内容留下深刻的印象呢?下面我们主要从「创意」和「氛围」两个方面入手:

2.3.1 创意-让用户眼前一亮

好的设计能引起用户注意,而有趣的设计才能真正唤醒用户的眼睛,加深用户脑海中的印象。创意的思路有很多种,可以是「情理之中,意料之外」的组合,也可以通过「产品拟人化」的方式讲故事,终究其目的是能让用户感到有趣想看下去,吸引用户的眼睛。


2.3.2 氛围-让用户沉浸其中

视觉海报在唤醒用户眼睛的同时,如果能触动到用户的心里,便可以让用户可以瞬间沉浸其中,拉近与用户的距离。一般是根据产品的定位,比如产品是电饭煲,我们会给用户描述回家做饭的感觉;产品是家具,就可以给用户描述周末温馨的生活......以此来带动用户的情绪。


3.0 好的视觉海报,是符合设计原则的

我们不是一个凭感觉创作的工作者,设计中需要更多的理性,我们承担的角色如同一场晚会的导演,每一个元素的位置,每一根线条的长短粗细都需要安排妥当,让其在适合的位置发挥最大的价值;

设计原则是做设计的标准,可用于指导设计和衡量设计方案的优劣,为设计决策提供标准,提供向导,从而帮助我们明确设计修改与调整的方向。个人总结了在视觉设计中较实用的 7 个设计原则,来帮助我们在设计时找到相应的设计标准。


3.1 对齐原则

对齐原则指的是:任何元素都不能在页面上随意安放,每一项都应与页面上的某个元素存在视觉联系。类似于地铁站原本混乱的人群,通过相应规则的调整,最终大家都朝着一个方向有规律的行进,对齐的目的是让页面充满秩序和条理。我们不能只要页面上刚好有空间,就将元素随意“扔”进去。元素之间不是孤立的,相互之间要有联系,对齐有助于增强设计的逻辑性和易读性,使人们更容易地理解和捕捉到重要信息。

版式中常见的对齐方式有:左对齐、右对齐、居中对齐,应尽量避免在页面上混合使用多种对齐方式,要找到一条明确的「轴线」,并以之为基准。


3.2 对比原则

对比就是强调两个或者两个以上元素之间的差异性,通过突出视觉元素之间的差异来增强设计的层次感和吸引力,营造出核心视觉。犹如鹤立鸡群,我们的视觉永远是会被独特的内容给吸引的。通过对比,可以引导读者关注重要信息,提高整体设计的视觉冲击力和传达效果。

在平面构成中,指画面元素形成强烈的冲突,如元素的大小、颜色、形状等等,理论上元素所有可改变的特征,都是可以形成对比的。例如海报上的重点信息“优惠折扣”、“活动标题”等,便可以加大其与周围元素的视觉差异,通过颜色、字重粗细、色块大小的对比,让用户快速获取信息,同时又能增加海报的视觉丰富度。常见对比方式如下:


3.3 留白原则

留白是指页面中没有被文字、图片或其它视觉元素占据的部分,也称为负空间。留白原则强调在设计中合理地运用空白区域,恰当地运用留白原则,可以使画面内容清晰有层次感,提高阅读舒适度和美感。留白运用不合理时,则会使整个画面拥挤杂乱,影响整体的美感,也使读者觉得杂乱无章,毫无头绪,不利于观者有效阅读。例如字间距和行间距就是留白的具体表现,它决定着文本的可读性。总之好的留白,可以切实提升画面的艺术与审美价值。

留白体现方式:

  • 边距留白:在画面四周留出一定的空白区域,有助于突出页面内容,防止过于拥挤的感觉。边距留白可以让设计更具透气感,增强整体美感;
  • 模块留白:在不同的内容大模块之间留出空白,有助于划分不同的信息区域,使内容整体更加有序和结构化,用户阅读信息将更加清晰;
  • 元素留白:这里指在模块内的如文字、图片或其它视觉细节元素之间留出适当的空白,避免视觉元素之间的干扰,使阅读更加舒适,有助于减少视觉混乱,使信息更加清晰易懂。

通过以上方式进行合理的组合后,便会形成不同的风格感知,常见如“舒适的大留白”与“热闹的小留白”,下面带大家感受一下:

小提示:

  • 留白多少不决定作品的好坏:留白较少、图文多时,给人热闹、嘈杂的感觉;反之,则会给人优雅、恬静的感觉,与高格调气质。我们需要根据作品本身的需要而定;
  • 留白要服务于作品风格特征:留白不能和整个作品风格特征冲突,否则就是为了留白而留白;


3.4 模块原则

「模块原则」其实是我们常讲的「亲密性原则」的进化,在这里之我所以没有采用「亲密性原则」,是因为模块化的概念才是我们真正应用时的最终结果,也就是通过「亲密性原则」的方法来达到「模块化」的效果;总结起来就是要“整”不要“散”,类似于把在体育场零散的人群,都组成有规律的方阵。无论是文字,还是画面上图形的元素,又或者是背景,在视觉呈现上要形成整体感,整体感有利于信息的获取,零散的画面会导致视觉的分散,造成画面重点的不清晰;

这里有 2 点需要注意:

  • 从信息传递的角度,画面中信息模块一般不要超过3个,过多会则会开始产生“散”的感受;
  • 一般画面越大,则模块数量可以随之增加,画面中可承受的模块则越多,但依然需尽量让模块不要过多;


3.5 聚焦原则

想要更好地传达主题,必要前提是能够吸引用户的注意。一般画面只需要一个视觉重点,其它元素需要相应弱化,当视觉焦点过多时,用户将无法快速获取信息。“少即是多”最适用聚焦原则,处处强调,其实就是没有强调。在一定程度上,焦点原则更多是与对比原则的组合运用,在相似的元素组中异军突起,想不引起你的注意都难;在设计中,经常将关键元素安排在最希望用户看到的地方,比如按钮“立即购买”,通过引起受众的注意,达到设计目的;

通过设计方法和技巧引导观众注意力,突出关键信息和视觉重点。可以帮助观众更容易地理解设计的主要目的和信息。以下是在视觉海报设计中实现聚焦原则的一些方式:

    • 层次结构:创建清晰的视觉层次结构,结合对比原则,突出关键信息和视觉重点,引导观众从重要到次要信息的阅读顺序;
    • 视觉引导:使用线条、箭头或其他视觉元素引导观众的视线,帮助用户关注关键内容;
    • 表现手法:使用具有强烈视觉冲击力的图形和图像,吸引观众注意力并突出关键内容,如:3D效果的元素、真人摄影图等;
    • 简化画面:通过简化设计和避免不必要的视觉干扰,使关键信息更易于识别和理解;


3.6 降噪原则

设计师经常为了增加画面视觉的吸引力,就会使用过多的字体、颜色或者过于复杂的图形,如果对画面的掌控能力稍微不足,这种不断做「加法」的行为,实际上是在增加用户认知的“噪音”。而降噪原则可以被理解为减少视觉「噪音」,从而提高设计的可读性、清晰度和有效性。视觉噪声是指一种干扰,使观众难以理解和接收设计中的信息。以下是实现降噪原则的一些常用方式:

  • 色彩简化:避免使用过多的颜色或高对比度的颜色组合,以降低视觉噪声。
  • 图形简化:使用简单的形状和图标来表达概念,避免复杂和精细的图像,以降低视觉负担。
  • 字体简化:选择易于阅读的字体,避免使用过于复杂或花哨的字体样式。
  • 信息分组:结合模块化原则将相关的信息组织在一起,并使用明显的分隔符或背景色块区分不同的内容模块。
  • 设计一致性:在整个设计中保持一致的样式和排版,以提高可读性和认知一致性。


3.7 倍率原则

倍率原则与对齐原则相似,即元素大小间距等都不能随意设置,需存在一定规则关联。倍率关系则指的是元素之间的倍数关系,如文字画面中的字号、距离的使用等,均是遵照一定的倍率关联性;统一的比例关系可以使视觉元素更加和谐统一,让画面元素之间增加统一的韵律感,有助于提高设计的美感和和谐感。在实际应用中,可以采用一些经典的比例关系,如黄金分割比例,来安排视觉元素的大小和位置。

其实无论在自然界还是人为创造的背后都存在着逻辑关系和巧妙性,来确保一定的秩序和美感:

  • 如:纸张开本,倍数就是2倍关系,正度纸 32k = (130mm X 185mm),16k = (185mm X 260mm);
  • 如黄金螺旋曲线,它的形状与黄金分割(约为1.6180339887)有关,即使用黄金分割比例的长方形按照比例重复绘制而成;

  • 如:斐波那契数列,0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377……规则是从0和1开始,每个数字都是前面两个数字相加之和;数值越大,每一项和前一项的比值,都无限接近1.618;


应用案例:

排版中的倍率关系需要依附于网格系统,而网格模块分为多少取决于信息复杂程度,信息越复杂,模块越复杂;倍率关系是网格系统的底层逻辑,也是网格系统的基础,推荐感兴趣的可以深入学习一下“网格系统”

小提示:

  • 网格系统是非常值得深入学习的内容(本文写的还是比较简略),此原则主要是受 @文成武 老师的文章启蒙,并在自己的设计工作中进行了应用,推荐可以直接站酷搜索,值得读一读!


总结

设计没有绝对的标准,为内容而设计,从内容传递的角度出发,在凡事强调用户体验的今天,我们的设计应当做到从用户中来,到用户中去,从用户的角度去提出问题、思考问题、解决问题。

不断成长,谢谢大家!觉得有收获就点个赞吧!



作者:谷阳(vx: guyang686868)

本文由 @谷阳 原创发布。未经许可,禁止转载。

Powered by Froala Editor

更新:2023-05-05

收藏

148人已收藏

谷阳MrG

合作微信:guyang686868 看机会

  • 23

    作品

  • 433

    粉丝

  • 151

    关注

  • H5视觉作品总结
  • 微博动漫APP复盘
  • 汶川地震-什方穿心店遗址-原创摄影
  • 机械师壁纸插画-创意工厂

    猜你喜欢

      2023-05-05 原创文章 经验/观点 举报 16276 148 334 2

      视觉海报该如何设计?

      81.9°

      你确定要举报视觉海报该如何设计?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2023年05月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      334
      148
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录