当今,无论任何一款互联网产品,都需要搭载PC平台进行推广,Banner更是推广的一大利器,怎么将Banner设计好就成为一个需要探讨研究的课题。

Banner规格尺寸大小不一,文件大小也有一定的限制,这就使得在设计上增加了许多障碍,颜色不能太丰富,否则会在文件大小的限制下失真,软文不能太多,否则会没有重点,得不偿失,怎么在方寸间把握平衡,变得十分重要。接下来,我为大家总结累一些,如有鄙陋,请指正,万分感谢。

第一部分:颜色

1.Banner与环境对比

试想如果在一个以浅色调为基准的网站上投放Banner,是不是从明度上拉开对比会很好的提高用户的注意力呢(相反亦然)。

以此也可推想出,如果在一个有颜色基调的网站上投放补色或者对比色的Banner,效果就会变得更瞩目(补色和对比色案例)。

2.Banner颜色简单至上

(1)试想一个Banner五颜六色,是不是就能够吸引眼球了呢?首先,先对比一下

哪个更吸引你的注意力呢?大多数人肯定会觉得后者给用户带来的视觉传达力更强,简洁明确、朴素有力的效果,给人一种重量感和力量感。前者颜色虽多,却没有带来更好的视觉传达效果,为什么呢?颜色过度使用会打乱色彩节奏,并且,减弱了颜色间的对比,使整体效果变弱。

(2)其次, 使用颜色越多,最后保存时文件体积越大,加载起来越慢,让用户等待就意味着和用户说再见了,如果靠降低品质来达到Banner的上传要求,那展现给用户的是低质量的banner,也一样会丢失一些用户。

所以,颜色简单有力,加载清晰快速,对于banner的视觉传达很重要,只要让用户产生点击欲望,我们推广的目的就达到了。

第二部分:构图

1.构图的定义及规则

构图其实说白了就是经营画面,进行布局,如何在你构图的引导下吸引用户点击,产生欲望,了解内容,如果都能达到,那说明你的构图成功了。构图的基本规则是:均衡对比视点

均衡:均衡不是对称,是一种力量上的平衡感,使画面具有稳定性。

均衡不是对称

对比:在构图上来说就是大小对比,粗细对比,方圆对比,曲线与直线对比等等。

白色线条的对比产生了空间感

视点:就是如何将用户的目光集中在画面的中心点上,我们可以用构图去引导用户的视点

将视点集中引导到slogan上

介绍完构图的基本规则,举例子检视下:一张X-MEN的宣传banner,这张banner人物排布既平衡又不对称,人物大小不一,产生出对比,突出了部分剧中人物。Banner正中一个大大的X,把视点集中到了画面的最中心,很好的利用基本构图规则进行banner设计。

2.构图的样式

构图大概分以下几种:(1).垂直水平式构图 (2).三角形构图(正三角和倒三角)(3)渐次式构图 (4).辐射式构图 (5).框架式构图 (6)对角线构图

(1)垂直水平式构图:
平行排列每一个产品,每个产品展示效果都很好,各个产品所占比重相同,秩序感强,此类构图给用户心情:产品规矩正式、高大、安全感强。

(2)正三角形和倒三角构图:
多个产品进行正三角构图,产品立体感强,各个产品所占比重有轻有重,构图稳定自然,空间感强。此类构图给用户心情:安全感极强、稳定可靠。

多个产品进行倒三角构图,产品立体感极强,各个产品所占比重有轻有重,构图动感活泼失衡,运动感空间感强。此类构图给用户心情:不稳定感激发用户心情,给用户运动的感觉。

(3)对角线构图:一个产品或两个产品进行组合对角线构图,产品的空间感强,各个产品所占比重相对平衡,构图动感活泼稳定,运动感空间感强。此类构图给用户心情:动感十足且稳定。

(4)渐次式构图:多个产品进行渐次式排列,产品展示空间感强,各个产品所占比重不同,由大及小,构图稳定,次序感强,利用透视引导指向slogan。此类构图给用户心情:稳定自然,产品丰富可靠。

(5)辐射式构图:多个产品进行辐射式构图,产品空间感强,各个产品所占比重不同,由大及小。构图动感活泼,次序感强,利用透视指向slogan,此类构图给用户心情:活泼动感,产品丰富可靠。

(6)框架式构图:单个或多个产品框架式构图,产品展示效果好,有画中画的感觉。构图规整平衡,稳定坚固。此类构图给用户心情:稳定可信赖,产品可靠。

3.软文(Slogan)

(1)俗话说得好“话不在多,精辟就行”当今炙手火热的微博就是一个例子“140字概括你要说的”,Slogan也是一样。
(2)要言之有物,第一要抓住用户的心里,了解用户的想法很重要。第二我们要推给用户什么,用户对什么感兴趣。下面举个例子:

Slogan只有四个字,终于来了,白色iphone4吊足了apple迷门近两年的胃口,这四个字恐怕是他们最想听到的。用户从不会质疑apple的性能,科技领先性及用户体验性,他们最想的恐怕就是拥有自己梦寐以求的白色iphone4。所以,apple的slogan简约而不简单。

【本文首发于:百度用户体验部】http://mux.baidu.com/?p=1606
【关注百度技术沙龙】
本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/746879,如需转载请自行联系原作者

浅析Banner设计相关推荐

  1. 前端项目课程7 banner设计注意事项

    前端项目课程7 banner设计注意事项 一.总结 一句话总结: 1.每个部分的里面的部分可以用相同的名字么,如何修改样式呢? 可以, 用模块名 + 比如上中下(top middle bottom) ...

  2. 设计师必备|年年都能借鉴的新年Banner设计

    新年春节是一年中最大的节日,也是电商们一年中最重要的促销机会,没有谁会错过春节的促销,从平台到品牌再到具体的策划设计,所有的人都使出浑身解数,希望在年尾有个好收成,为一年的辛苦劳作画个完美的句号. 集 ...

  3. 设计灵感|见过如此吸睛的,单色调Banner设计么?

    一个 Banner 可以研究的东西还是很多的,而且做一个 Banner 是不难,难的是在短时间内做一个出彩的 Banner.如何在排除技术的前提下,如何通过一些经验的思考,让 Banner 达到想要的 ...

  4. 电商美工必看|Banner设计没灵感?传说中大气的画册风格给你灵感

    Banner设计没灵感?不知道如何进行文字排版和配色,才能让店铺和产品更有吸引力-- 集设网 www.ijishe.com 设计师交流社区带来系列画册风格的banner设计,以简洁优雅的画册风格描述画 ...

  5. 设计灵感|延展画面的插画Banner设计!

    具有延展性的插画 Banner 设计,台湾设计师 Yun-Fang Ho 的系列作品,虽然平面设计中使用插图并不是什么新鲜事,但是未来的插图设计走向会往极简方向表达.简易化的插图能更直观地被人领悟和看 ...

  6. 电商咄咄逼人的黑色星期五促销横BANNER设计模板

    每年的"双11"过后,紧接着的就是大洋彼岸的购物狂欢节"黑色星期五"(下称"黑五").由于有跨境电商的参与,这个节日与中国消费者的关系变得密 ...

  7. 淘宝京东设计师来看,电商Banner设计策略!

    在电商的Banner设计中重要目的是将活动信息准确的传达给用户,让用户第一时间知道卖的是什么,起到引流的作用.在Banner设计时,能保证让用户明确主题的同时,进而让用户产生购买的欲望,就是成功的Ba ...

  8. banner设计怎么思考

    在做之前,首先要了解banner的定义 banner主要体现中心意旨,形象鲜明表达主要的情感思想或宣传中心: banner的优势有哪些 banner属于网络广告,他区别于传统媒体有很多优越性,比如: ...

  9. 【UI/UE设计师】banner设计原则-CSDN公开课-专题视频课程

    [UI/UE设计师]banner设计原则-133人已学习 课程介绍         本课程主要讲Banner设计. Banner是任何一个网站或者APP的重点,是重要的网站导视图, 在本章中,会讲到b ...

最新文章

  1. 用ZipInputStream和ZipOutputStream实现文件及文件夹的压缩解压
  2. BugKuCTF WEB web4
  3. Android平台实现Unity3D下RTMP推送
  4. 整合Flex和Java(上)
  5. springboot整合MyCat
  6. sendevent/getevent模拟Power键
  7. Zookeeper C API 指南一(准备工作)
  8. 小菜找实习——阿里3.25场笔试第一题(矩阵数组最小差值和)
  9. 黑苹果无线网卡选择intel还是博通?及其驱动方式详解
  10. 嵌入式linux项目,嵌入式linux项目开发(一)
  11. 五年高考三年模拟暗部软件库_BIM软件-关于Lumion的这些,你真的了解了吗?
  12. 计算机c盘删除的文件怎么找回,两分钟恢复电脑误删除的文件数据
  13. Arithmetic(线段树维护历史版本和)
  14. CSDN“2019 优秀AI、IoT应用案例TOP 30+”正式发布
  15. 氢os android 7.0,基于安卓7.0,一加手机3T氢OS公测版发布 支持NFC一卡通
  16. Leetcode_128_Longest Consecutive Sequence
  17. vmware搭建多台虚拟机-桥接模式
  18. 清华计算机系本科毕业起薪,大学本科毕业起薪最高的六大专业
  19. TiDB Hackathon 2021 — pCloud : 做数据库上的 iCloud丨pCloud 团队访谈
  20. OCM Examination Guide

热门文章

  1. boost::gil::num_channels用法的测试程序
  2. ITK:灰度图像中的聚类像素
  3. VTK:Snippets之SaveSceneToFieldData
  4. VTK:PolyData之PointSource
  5. VTK:Qt之QImageToImageSource
  6. VTK:图片之RTAnalyticSource
  7. VTK:图片之ImageDilateErode3D
  8. VTK:开发Warnings实例
  9. OpenCV Gunnar Farneback的密集光流算法(附完整代码)
  10. QDoc支持衍生项目