A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 绘儿 黑马粉丝团   /  2022-1-10 10:52  /  1121 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 绘儿 于 2022-1-11 10:41 编辑

什么是Banner?

Banner一般翻译为网幅广告、旗帜广告、横幅广告等,狭义地说是表现商家广告内容的图片,县互联网广告中最基本、最常见的广告形式。

当用户访问电商网站时,第一眼获取的信息非常关键,直接影响用户在网站停留时间和访问深度。然而仅凭文字的堆积,很难直观又迅速地传递给用户关键信息,这时就需要Banner将文字信息图片化,通过更直观的信息展示提高页面转化率,因此Banner的设计十分重要。

Banner一般使用gif格式的图像文件,可以使用静态图形,也可用多帧图像拼接为动画图像。随着互联网的发展,新兴的Rich Media Banner(富媒体广告)赋予了横幅更强的表现力和交互内容,但一般需要用户使用的浏览器插件支持。


Banner设计特点

因为Banner设计应用在网站中,所以与传统纸媒设计相比较其特点略有不同。除了设计应该遵循的视觉美观、色调统一、形式突出等特点外,Banner还具有以下两个特点:


1. 大小限制严格

为了提高网页的加载速度,设计Banner时,对其尺寸大小要求比较严格。一般需将Banner的大小控制在100kb以内,分辨率设置为72像素/英寸。过大的Banner会使加载速度过慢影响浏览网页的速度和用户心情,从而直接影响网站的转化率。


2. 可以被点击

和传统纸媒最大的区别是,Banner 一般都有链接,可以通过单击Banner引领用户进入并了解详情。可以被点击的互动性,是Banner与其他设计特点最大的不同了。通过点击率,也可以直观反映出Banner的被认可程度。由于点击会进入深入介绍的页面,页面的统一性和连续性也需要在Banner中体现。


Banner设计原则

通过以上Banner设计特点可以得出,Banner 的存在就是为了迅速传递信息,提高转化率。以此特点为基准,能够总结Banner在设计方面需要注意的原则。做到这些原则,可以使Banner最大化地实现争取眼球、深人浏览的效果。


1. 对齐原则

对齐原则指的是相关的内容要对齐,方便用户视线快速移动,一眼看到最重要的信息。当然,关于对齐原则,有些时候是设计师为了美观而设计的。


2. 聚拢原则

聚拢原则是将内容分成几个区域,相关内容都聚在一个区域中。一个Banner最好只有一个主题,不论是文字信息还是图片信息都是为了这个主题服务的。


3. 留白原则

在设计中不要把Banner中的内容排得过满,要留出一定的空间,这样既减少了Banner的压迫感,又可以引导读者视线,突出重点内容,过多的话语、图片和元素反而会导致广告毫无效果。


4. 降噪原则

颜色过多、字体过多、图形过繁,都是分散读者注意力的“噪音”,所以整合很关键:将不同元素整合、去其冗杂,就能达到降噪的目的。


5. 对比原则

加大不同元素的视觉差异,这样既增加了Banner的活泼程度,又突出了视觉重点,方便用户一眼浏览到重要的信息。

以上原则内容概括出Banner设计最主要的原则一醒目。


Banner构图方式

构图是指在平面的空间中安排和处理对象的位置和关系,把局部的元素组成一个整体的画面,以表现构思中预想的艺术形象和审美效果。Banner的构图有以下几种基本形式。


1. 左右式

左右式是最常见的构图方式,该构图方式分别把主题元素和主标题左右摆放,直观展示文案和图像,给人稳定、直观的感觉。


2. 正三角式

采用正三角形构图,可以使Banner展示立体感强烈,重点突出,构图稳定自然,空间感强此类构图方式给人安全感和可靠感。


3. 倒三角式

采用倒三角形构图,一方面突出强烈的空间立体感,同时构图动感活泼,通过不稳定的构图方式,激发创意感,给人运动的感觉。


4. 对角线式

采用对角线构图方式能够改变常规的排版方式,适合组合展示,比重相对平衡,构图上活泼稳定,且有较强的视觉冲击力。


5. 扩散式

扩散式构图运用射线、光晕等辅助图形对图片主体进行突出,构图活泼有重点,利用透视的方式围绕口号进行表达,给人以深刻的视觉印象。


面试宝典精华推荐:

UI设计师如何自我介绍最有用!
如何向面试官介绍你的项目
从工作对接——告诉你UI设计师的工作流程
破解HR常见5种面试套路,助你轻松拿下Offer
初级设计师面试失败,大部分败在这50个问题上
设计面试——应聘机试题怎么破1
设计面试——应聘机试题怎么破2
设计面试——应聘机试题怎么破3


--------------------------------------------------------------------------------------------
希望我们整理的面试宝典助你面试成功!
如果有用,记得点赞留言哦~
获取【UI设计视频教程资料】加绘儿2168934524

--------------------------------------------------------------------------------------------

推荐阅读:
想了解UI设计更新【行业前景UI设计师的薪资待遇怎么样?
想了解更新更真实学员就业动态听传智UI/UE设计深圳校区老学员毕业工作经验分享
更新更真实学员亲身经历从百度底薪4K到14K+13薪UI设计师

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马