IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

广告Banner :20种高度可行、转化率高的设计思路

Catherine • 2017-05-03 06:18 • 交互设计

Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

文章目录[隐藏]

  • 1、聚焦LOGO
  • 2、扁平插画
  • 3、模糊效果
  • 4、借助栅格
  • 5、尝试单色配色方案
  • 6、字体搭配
  • 7、大胆使用强对比色
  • 8、经典的色彩叠加
  • 9、特征明显的手写字体
  • 10、善用图案
  • 11、以文本为中心的布局设计
  • 12、展示,而不是呐喊
  • 13、使用模板
  • 14、突出CTA按钮
  • 15、使用抓人眼球的色彩
  • 16、精心策划的摄影内容
  • 17、使用渐变
  • 18、使用纹理
  • 19、几何图形
  • 20、醒目的标题

Banner广告是快速高效的吸引用户的重要手段。Banner广告在网站中通常都占据着不错的位置,它们的转化率和它本身的设计优秀与否息息相关,最重要的是,它要能迅速的吸引用户的注意力,通过优秀的文案和视觉让用户立刻马上点击。今天的文章,我们通过一系列优秀的范例,帮你梳理Banner 广告的20种高度可行、转化率高的设计思路。

广告Banner :20种高度可行、转化率高的设计思路

1、聚焦LOGO

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

如果你的LOGO本身设计足够优秀,那么记得将它放置在广告Banner的正中央。Buatoom 就将他们的投放到Omise 的Banner广告中,高亮处理了他们的LOGO。

2、扁平插画

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

扁平化的插画是时下流行的一种处理手法,它们并不复杂,但是同样可以带来漂亮的视觉效果。如果你们的产品也适合这么处理的话,不妨试着设计一些扁平风的插画风banner,以备不时之需。

3、模糊效果

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

模糊效果本身也是非常常见的处理手法。将模糊运用在Banner 的背景当中,突出特定的元素,让整个设计拥有了纵深,相当有趣。

4、借助栅格

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

栅格常常用来组织不同的设计元素,虽然创建栅格会占用你几分钟时间,但是它能够在设计过程中省却不少时间。Banner 广告中,使用栅格快速构建布局,能够给人清晰直观的感觉。

5、尝试单色配色方案

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

单色布局同样能够创造出不错的视觉效果,重要的是掌握元素之间的平衡,你看看下面的几个案例就能够理解。单色配色方案不是仅仅只使用一种颜色,而是要善用一个颜色和它的同系色彩。

6、字体搭配

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

虽然我们为了追求一致性的搭配,通常不会使用太多的字体,但是在广告中,有时候为了创造多样而独特的视觉体验,可以将多种不同的字体有目的的搭配起来。当然,色彩的搭配也是要注意的。

7、大胆使用强对比色

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

你可以使用色轮上相对位置的对比色来创造设计,当然你也可以使用深浅对比,这个时候色彩甚至可以是近似的颜色,而两者在深浅上作出对比也是不错的。

8、经典的色彩叠加

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

色彩叠加这种技巧能够将多种不同的色彩统一到一个色彩体系当中来,它并不一定要非常的清晰、准确,但是能让你的整个设计呈现出更为风格化的一面。许多设计会采用高饱和度的色彩来叠加,这样一来白色的文字可以和图像内容构成明显对比。

9、特征明显的手写字体

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

手写字体是非常富有张力的,你可以使用现成的字体,也可以通过自定义笔画来构建字体。

10、善用图案

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

在特定的节日,可以在Banner 广告中加入小的图案来营造氛围。在扁平化设计风格深入人心的今天,也许你只需要反复使用一些常见的几何图案就能达到装饰的目的。

11、以文本为中心的布局设计

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

如果你的Banner 广告并不是以图片为中心,而是要突出特定的文本内容,那么你可能需要将特定的文本风格化处理,或者同其他的内容构成视觉对比。

12、展示,而不是呐喊

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

让你的产品自己说话,而不是喊口号。如果你的Banner 广告中的产品能够不言自明,那么最好是使用围绕产品本身的设计,突出产品。这样的设计并不是要你将文本去掉,而是要淡化处理,突出产品本身的特质。

13、使用模板

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

如果你经常做系列化的设计,那么可能会经常用到各式各样的模板,许多模板有不错的复用性,甚至部分模板有相当不错的泛用性,善用这些模板。

14、突出CTA按钮

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

许多广告都涉及到点击率这样的KPI,按钮几乎是其中绕不开的UI元素,这些核心的行为召唤元素最好高亮显示,搭配合适的文本内容,让它看起来很容易点击也很值得点击。

15、使用抓人眼球的色彩

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

如果你想让你的广告Banner更容易被人注意到,那么在色彩上多花心思是值得的。在以蓝色为主色调的Facebook 中打广告,你的Banner 如果使用蓝色,不论饱和度多高,都很容易“融入”到整个页面中,如果相反,使用橙色作为主色调,就很容易从整个设计中脱颖而出了。

16、精心策划的摄影内容

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

许多广告Banner 中都会使用摄影作品作为背景或者视觉主体,精心设计的图片或者摄影作品能够让你的设计事半功倍。

17、使用渐变

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

微妙的渐变已经作为已经设计趋势回归了。渐变的背景,甚至渐变的叠加,都能让你的Banner设计风格化,搭配图片、纹理和文字,渐变能给人多种多样的体验。

18、使用纹理

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

和UI设计不同,在电商和广告Banner 的设计当中,纹理一直都存在,甚至是非常常用的元素。纹理能够很好的提升整个Banner 的信息量和整体的质感。当然,在使用纹理的时候千万不要让纹理喧宾夺主。

19、几何图形

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

几何图形可以单独作为装饰元素置于Banner中,也可以融入到整体设计中,强化Banner 的设计感。这些几何元素能够提升Banner 给人的形式感和趣味。

20、醒目的标题

广告Banner :20种高度可行、转化率高的设计思路

广告Banner :20种高度可行、转化率高的设计思路

很多广告的尺寸并不大,醒目的标题能够让内容显得更加突出,更加直接的传递信息。

 

原文作者:Maria Jose

原文地址:designschool

译者:@陈子木

译文地址:http://www.uisdc.com/20-skills-web-banner-ads

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22866/

logoPSUIUI设计UXWEB产品产品经理字体广告Banner方法论用户视觉设计设计思路译文转化率配色
赞 (0)
CatherineCatherine
0
生成海报
10个步骤,了解新手入门过程的设计原则
上一篇 2017-05-03 05:31
网站设计:单页还是多页好?别争了,看这里
下一篇 2017-05-03 07:16

相关推荐

  • NO.14 下一站用户体验

    今天要为大家推荐的书是杨艾祥的《下一站用户体验》,用户体验这个词大家并不陌生,但用户体验的定义以及所包含的具体内容有哪些,这个问题,可能并不是很多人都特别清楚的了解,用户体验这个被用“烂”了的词到底具备哪些威力,作为一个设计师又如何去提升产品的用户体验,在《下一站用户体验》这本书中都可以找到答案。目录(简版):一、那些让人讨厌的流氓行为1、这是个烦躁的世界2、这个世界没有新物种3、美丽的错误二、用户究竟在体验些什么1、腾讯为什么那样牛2...

    微信热点 2018-02-25
  • 微信热点

    终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 为产品赋予人格 - 情感化设计的组成要素及实践案例 交互设计

    为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01
  • 交互设计基本功-pc端 从零开始学交互

    交互设计基本功-pc端

    很多小伙伴0基础想转ux,看了很多网上的文章和书,但是依然不知道具体怎样入手。看完这篇文章,你就可以真正的入门了。1、按钮的5种状态1)正常状态:可以点击且没有进行任何动作的状态2)鼠标悬停时状态:鼠标停留…

    2017-08-01
  • 网页感知价值研究:UI中的感知价值 交互设计

    网页感知价值研究:UI中的感知价值

    “感知”本身是心理学层面的概念,界限很模糊,以下是围绕网页感知价值研究的一篇文章,来自nngourp。定义:感知价值是指对产品或服务目标的主观感受。

    2017-05-13
  • 微信热点

    2018年用户体验设计趋势

    作者| Anthony Miller译者| 耳洞审校| 郑几块编辑| Ella全文共 5963 字 31 图,阅读需要 14 分钟———— / BEGIN / ————2017年就要过去了,让我们预测一下2018年的用户体验演变趋势。本文将回顾2017年数字世界中的显著变化,并将展望2018年在设计和开发领域让我们继续保持领先的那些趋势。一、更简单的导航导航体验是2017年设计师中的热门话题。设计师殚精竭虑,拿出熬秃少年头的精神,就是为...

    2018-02-02
  • UX设计师不得不掌握的心理学技巧 交互设计

    UX设计师不得不掌握的心理学技巧

    不要让视觉效果过重以至于霸占了整个网页的重心
    视频比起文本和图片更容易吸引用户的注意力
    女性和孩子的形象更容易吸引用户的注意力
    用户浏览页面的视觉轨迹是“F”型的

    动机
    能力
    触发

    2017-05-23
  • 转化率低是设计师的问题?这锅我们不背! 交互设计

    转化率低是设计师的问题?这锅我们不背!

    市场反馈好不好是由那些自带话语权或流量的人或产品决定的,这些人或产品既左右了大部分人的喜欢和习惯,又代表了大部分人的喜欢和习惯。转化率=(产生购买行为的客户人数 / 所有到达店铺的访客人数)× 100%

    2017-08-04
  • 设计实战|城市指南网站着陆页是这样设计出来的 交互设计

    设计实战|城市指南网站着陆页是这样设计出来的

    今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

    2017-06-06
  • 微信热点

    依靠强大品牌影响力,注重“用户体验”,“3000家企业定制酒计划”对白金酒意味着什么?

    在茅台集团白金酒公司的目标规划里,今年要选择1000家企业进行定制酒合作,未来3~5年要与3000家企业合作,打造“企业定制酒”这一细分市场的“当家品牌”。11月5日上午,华拓金服集团、神州长城股份有限公司、 永新华控股集团等数十家家国内知名企业与茅台集团白金酒公司签署战略合作协议,现场签约总额达近亿元,“定制酒计划”再迈出一步。直接面向企业需求这一细分市场,为企业打造专属的定制产品,满足其商务接待、宴请、礼赠等需求,白金酒公司确立了清...

    2018-02-01
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress