千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  UI视频教程  >  UI设计之Banner设计的视觉导向原则分析

UI设计之Banner设计的视觉导向原则分析

时间:2018-05-04 15:24     来源:千锋视频教程 作者:千锋教育

一、Banner的布局方式

常见的Banner布局方式有五种,以下分别给出大致样式:

1

以上几种布局方式不分好坏,对于不同的主题、素材和文案可以自行选用适合的方案。

二、视觉组成部分

虽然Banner的风格种类众多,但是就目前来看,广大受众的偏好和心理动线是大致相同的,人们往往会被靓丽的色彩和醒目的标题所吸引,这就为我们突出主题,吸引受众提供了指导。

Banner(海报)的视觉组成部分有三大块内容:

(1) 第一视觉(主视觉)

第一视觉在整个视觉导向中起吸引作用,而吸引受众眼球的方法主要有夸张、拟人、寓言故事、性和特效五种。

(2) 第二视觉

在第一视觉起到吸引作用之后,第二视觉用来告诉受众“这是什么”,常见的表现方法是文案。

(3) 第三视觉

第三视觉的作用是“告诉你我是谁,怎么找我”,其表现方法同第二视觉,一般也是文案。

注:以上三种视觉在大部分情况下都适用,但在少数海报中,会出现没有第二视觉或第三视觉的现象。

Banner设计-2

以这张Banner为例,它的第一视觉是一个场景,场景中一位男士打扮比较休闲、大方,我们第一反应是还挺好看的,那么他是谁呢,坐在这里做什么。

接着我们会去寻找答案,随即发现了第二视觉,也就是Banner右侧的文字,他告诉我们这是男装促销广告,有什么样的优惠

最后关注到这是什么品牌,于是找到了第三视觉,即左上角的品牌LOGO。

整个Banner视觉导向很完整,能够清楚地表达主旨。

三、色彩搭配

在制作Banner的过程中,我们常常会因为配色的问题而纠结很久,反复比对。配色需要参考Banner的主题,我们都有一些思维惯性,例如看到蓝色会想到海,心情比较平静,看到黄色会想到火,会兴奋等等,这说明颜色是有心理属性的。

Banner设计-3

上图是以大数据为主题的Banner,选用了深蓝色作为主色,中调偏暗,很契合“大数据”的感觉,给人以较强的科技感。

Banner设计-4

对比非常明显,此类Banner通常适用于电商平台轮播,节奏快,更新快,加上促销的主题,更适合采用红色、橙色等较为明快的颜色。一方面暖色更容易吸引眼球,另一方面这种积极的色调更容易激发人们购买的欲望,从而在有限的时间内实现最大的点击量。

四、总结

在接到Banner设计的任务后,我们需要充分了解受众的心理导向,考虑到布局、视觉组成、色彩搭配等问题,将统一的元素恰如其分地组合起来,才能够做出一个较为认可的作品。这需要我们不断赏析他人作品,取精华、弃糟粕,同时善于审视自己的作品,才能日益进步。

上一篇:UI设计之用AI快速的画角度渐变
下一篇:
  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-186-9990
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱