建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > 交互设计教程 >

BANNER图设计之商品图该怎么玩

更新时间:2017-04-13整理编辑:建站学习网阅读:0

   一、拿到一个banner设计需求后,我们该怎么做

  接到一个banner图的设计需求,第一件事情应该是去了解以下几个方面点:

  1、banner图是针对什么活动、什么目的而设计的

  我们需要知道做这个的原因,为谁而做,比如是为了某个节日专题活动还是针对某一个单品的预售,是走高端大气上档次路线,还是走促销亲民热闹路线等等,因为这些关系到banner图设计风格的选择(不妨问一下需求人看他有什么参考图可以提供给你,不要害羞~)

  2、主副标题、利益点等文案信息的确认

  一般来说我们可以从文案中寻找灵感确定设计方向,为了避免设计方向错误,所以需要确认好了才好动手,其次就算只是简单的文字排版,万一后续又有文案的改动或字数的增减,就麻烦了。

  3、这个banner图是放在哪个位置投放的

  这个主要是考虑banner图与周围的关系,比如首页banner图背景色避免和左侧导航背景同色,如果投放的位置周围都是热闹的图,那这个时候你可以试一下安静的,大面积留白的,与周围形成对比反差。

  4、与需求人沟通听下ta的看法或建议

  我们作为设计师在视觉方面可能是要专业些,但是不防也听取一下运营或需求方的看法或经验,因为点击数据掌握在他们那里,他们可能比我们更了解用户喜欢什么,需要什么,同时他们往往是拍板说ok的人啦,但不是说完全听他们的,我们自己要有判断能力,对于他们的意见或看法适当引导和取舍(这个过程可以展现设计师的专业素养,增加好感,从而比较容易过稿)。

  5、什么时候交稿

  这个大家都知道,好的设计是需要时间的,假设有几个设计方向可以选择,如果时间充裕当然选择那个最优方案,如果时间比较赶,那就选那个不出错的、能快速实现的方案咯。

  二、了解以上几点信息之后,脑海中应该会出现一些风格定位关键词:

  促销、热闹、大牌、简约、可爱、稳重,时尚、文艺、一些特定元素(节日、季节),好嘛,其实这些关键词往往是一个或多个同时出现在一个banner广告里的,下面我们看些案例:

  关键词:大牌、稳重

  说到大牌,我们观察感受一下,就是:

  1、背景大量留白。

  2、色彩单一,常见黑、白、灰作为主色(因为这些是无彩色,它的存在只是为了凸显主体而已)。

  3、商品或模特一定要够大(不是指字体或logo哦),截取部分细节展示(因为就是这么自信)。

  4、不需要太多文案描述,有时只需一个logo摆在那就好了(仿佛在说:你爱买不买咯)。

  5、需要说明的是,这种高冷的比较适用于数码电子产品,奢侈品牌等,彰显bigger。

  关键词:时尚、品质感、促销(时尚感大于促销感)

  平时是不是经常遇到别人给你说既要大牌又要促销的无理要求?下次纠正一下吧,是既时尚又促销,不是既大牌又促销,就像你说一个人他穿的好时尚啊,因为时尚不一定非要花大价钱才可以达到,而大牌是真的需要很多钱才可以达到的,而促销代表打折,低价,热闹,这与大牌是相违背的。

  这种分析一下会发现有以下几点:

  1、注重排版,文字规整排版,比如左对齐右对齐,居中对齐,不会去做一些怪异的字体变形,而是有一个着重突出的文字信息放大形成 一个面,压住全局,适当留白。

  2、色彩不会太多,3种至多(如果商品本身就是五颜六色的就另当别论了),配色参照商品本身或邻近色来提取,只有某一个需要突出的文字信息才会用对比反差比较大的颜色,比如折扣信息或重要的功能信息。

  3、商品角度要好看,品质要高(常见商品角度:45°角,俯拾,平视,可别整出个仰视了。。。)

  4、一般都会有主标题、副标题、利益点这几个文案信息,利益点要大大大。

  5、这种一般比较适用于与时尚相关的美妆护肤、男女鞋箱包、配饰,食品、母婴也会有。

  关键词:可爱、热闹、亲合力

  这种比较适合食品、可爱服饰,母婴品类,因为这些属性跟这些品类的特点是相符的,要给人可爱、可口、甜美、亲和力的感觉。

  这种分析一下会发现有以下几点:

  1、商品很多,画面会比较满,会有很多小色块,手绘图形什么的点缀。

  2、色彩丰富,配色柔和,偏暖,给人热情的感觉

  3、会有某一个特别突出的信息,但是整体画面又注重比例的和谐(后面我会具体讲到这块)

  总之,整体画面感觉是不会有攻击性的,是友好热情的。

  关键词:素雅、安静、大面积留白、文艺,简约

  这种比较适合家居、茶艺、布艺、棉麻森女系、文艺、日系服饰鞋包(在这个浮躁的社会就是需要有人去做那个安静的美女子,来保证社会的和谐和多样性,你说是不是呀)

  这种分析一下会发现有以下几点:

  1、超级大面积留白,东西都小小的(这一点跟前面讲的大牌是截然相反地,虽然都是大面积留白)

  2、色彩单一,以浅灰、淡蓝白、米白、棕色,饱和度和纯度低的绿色等色彩居多

  3、文案要么很少,要么很多,但都是打动人小情绪的一些文字,并且小小的放置在画面里

  总之,如果你们身边有这样的女子,你观察一下她你就知道了,就是这样子的安静素雅,不爱说话,淡淡的犹如一阵清风吹过…..)

  关键词:促销,形式感佳(促销甩货目的更大)

  这种比较适合尾货大清仓、综合卖场促销活动,适合任何品类(那种常见的路边摊设计我就不举例了,大家有兴趣可以自己去找,一大堆哦)

  这种分析一下会发现有以下几点:

  1、要么文案超级多,要么商品种类超级多,要么文案和品类都超级多

  2、色彩多样、留白较少,注重排版,选品需要注意颜色和形状的选择(这个我稍后会提到)

  3、醒目大大的sale 或价格信息,就是要告诉全天下人我现在很便宜啊快来买我啊(就是这么热情咧~)

  总之,它就像一个热情的促销员,同时打扮的很nice,拿着喇叭喊:全场清仓大甩卖啦,快来看快来瞧啊,你买了不吃亏,你买了不上当啊–)

  关键词:促销(比较diao的促销)

  这种比较适合商家店铺banner图或者实体店促销招牌,因为banner图上没有任何商品,要不是因为你本身就处在这个店铺里面,鬼才晓得你要卖什么咯。

  这种分析一下会发现有以下几点:

  1、形式感,大大的sale和大红背景告诉你,恩,人家是来促销的~

  2、哼~就不告诉你我要促销什么,你来猜啊,你来点我点我我才告诉答案哦(很傲娇吧)

  总之,这种要么是为了吸引有点好奇心的消费者,要么是吸引已经是老顾客的消费者,运用在实体店比较常见。

  一个banner图就是由以下几个元素组成:

  那么我们看到商品或模特还有文案信息在一个banner图里的重要性了吧?上面说了这么多,我是不是好像偏题了?才没有呢,上面相当于是先把比赛规则说清楚,接下来我才具体讲这场比赛该怎么玩。

 

  三、那么Banner图设计之商品图该怎么玩?

  1、商品摆放有几种姿势

  (1)叠加的

  (2)模拟货架摆放的

  (3)平面构成图形化的

  (4)商品部分细节展示

  (5)商品平飘来飘去

  (6)堆放的

  (7)手绘商品(全手绘/部分手绘)

  (8)拿在模特手上或穿在身上脚上

  而往往以上姿势会一个或多个同时出现在banner里,下面我们看些实践案例:

  叠加商品+切边构图+截取部分商品展示+商品数量要多。

  总结:

  将商品按一定的构图规律沿着banner图四周环绕,这就跟给一幅画加一个框把它裱起来一个道理,既美观又能聚焦视觉到画面中心,只不过这里是将视觉聚焦到中间文案,这也是为什么这种构图文案信息都是居中在画布中间放置的原因,该手法在摄影构图中也很常见。

  观察分析如下:

  1、这种构图往往要求所选商品形状要尽量规整,比如矩形,方形、圆形,摆放位置和大小要形成一定规律,有大有小,有高有低,切勿乱摆。

  2、因为选择的是叠加模式,将商品融进背景里的处理手法,所以对商品的颜色并无太多要求。

  3、这种常运用于服饰鞋包、美妆护肤等活动banner里。

  还有其他类似手法的我们一起看下,下次遇到适合这样处理商品的图不妨一试,时尚感立马提升。

  模拟商品真实摆放场景+三件以上商品:

  总结:

  这种手法主要就是试图营造一种真实的购物场景体验,一定程度上增加网购信任感和亲和力。

  观察分析如下:

  1、这种手法对于商品的拍摄角度有较高要求,因为看上去要真实,如果透视阴影光线都不对,就穿帮了。

  2、如果有条件在拍摄时就把场景搭建好,那么作图的时候直接拿来用就好了。

  商品堆放+三件以上商品:

  这四个都是横向或纵向往一个轴线堆放,也是稳定构图,类似堆积木,做汉堡包,唯一要注意的是,商品角度上有点变化可以让画面更灵活,如上图所示。

  总结:

  虽然都是堆放的形式,但是变化也是可以很多样化,前面几种三角堆放商品的形式在食品,服饰鞋包或综合类目的活动中应用较多,后面几种比较适合同类商品的堆放,要求商品形状是比较规则的立方体或扁平的物体,想象一下堆积木或叠衣服就知道了。

  远景近景的对比+2件以上物品:

  总结:

  这种形式不需要太多商品,比较适合推单品的活动,要求商品拍摄角度要好看,45°角最佳,这样透视感比较容易出来效果,近大远小,近景商品为主角。

 

  穿在模特身上展示+大小对比+1件以上物品:

  总结:

  这种形式需要一个姿势好看或动感的模特试穿效果,若是左右的布局,则适合近大远小的形式,若为左中右布局,则适合大小相当的对称式构图,颜色的选取和形塑造都应该遵循产品本身的特点来,这是比较有依据的做法。

  飘着的商品+大小对比+虚实对比+3件以上商品:

  总结:

  这种形式要求有一个中心主体,在正中间,比如文案信息,然后商品作为配角,或环形围绕着他转(想象一下宇宙银河系什么的)或左右对称漂浮着(对称构图懂撒?左边你飘一个大的,右边我也飘一个大的,左边你飘一个小的,右边我也飘一个小的),或像生长在主体周围一样(想想大树上的叶子树枝的生长),所以说,设计真的是有很多可以向大自然学习的规律。

  按某种规律平铺商品+4件以上商品:

  总结:

  这种形式适合任何布局,上下也好,左右也好,居中也好,都无限制,所以你的banner到底适合哪一种,就要看缘分和心情了。。(好吧其实要看你的商品适合哪种布局,具体请对照查看)。

  铺满整个画面+前后景+n多商品:

  总结:

  1、这种形式与清仓大甩卖这种活动简直是绝配,它往往意味着廉价,超级便宜,商品种类蛮多,往往也可以淘到很多物美价廉的商品(所以也不要觉得这种banner非常俗气哦)。

  2、将商品堆一堆铺满整个画面,作为多彩的背景,将文案利益点放置在纯色底上(背景复杂,前景肯定要干净才可以突出文字撒), 最后一步,将折扣信息突出突出再突出,一个banner就完成了,是不是感觉自己在做一道类似于火锅大杂烩的黑暗料理?设计跟做菜也

  是有相通之处呢,平时多思考观察吧。

  手绘+虚实结合+1个以上商品:

  其实这种就是前面讲到的很常见的商品三角构图堆放,文案和商品左右布局啦,只是商品变成全手绘稿,设计感和艺术气息立马提升几个台阶(你就当我是夸张手法吧,毕竟读书少),如果你有手绘功底并且时间充裕,并且你的需求人愿意让你这么搞,你就开干吧。

  这三种构图前面也讲到了,这里就不再多说,我要说的是,如果你有手绘功底,并且你的活动类型是可爱或者炫酷,或者脑洞大开的,你就发挥自己的特长,加点想象力,在实物图上手绘几笔,虚实结合,画面非常有活力,看到的人都会觉得,哇,好棒!不信你试一下?

  总结:

  1、硬性指标:会手绘,有想象力,或者你会照葫芦画瓢也行

  2、要你的活动定位愿意让你这么干,毕竟不是每个类目都适合这种手法,比如如果是要走国际高端路线,这种手法就会太小儿科了,与品牌调性不一致,这种适用于潮牌服饰鞋包,护肤美妆,母婴、韩系日系可爱风。

  3、你的手绘内容应该是与商品活动有关的或有联系,如果你卖的是女装,你画只鸭子合适吗?

  4、时间充裕,因为手绘比较费时哦(牛逼的除外)

  结合商品本身的特点排版+从文案里找灵感+2件以上商品:

  超大局部细节展示+1件商品:

  总结:

  1、超大局部细节展示(因为大牌就是这么自信啊,我细节棒,做工好用料好,不怕你拿放大镜看我)所以,有些天天喊着我要做大牌感大牌感的广告,但是,给的商品又是拍摄质量很糟糕的,或者做工很一般的,真想。。。。

  2、大面积留白,画面干净无杂质,商品就是唯一的主角

  3、其次是品牌logo稍微醒目点,文案信息字体多比较纤细,并且字号很小,处在配角的位置,但是因为往往这种广告大面积留白,即使字体很小很纤细可视度也很高,也不影响阅读。

  4、背景色多为黑、白、灰、色彩也比较单一,总之,就是高冷。

  5、这种形式适用于奢侈品彰显大牌调调的活动,或者数码电子产品,数码电子产品也是喜欢走这种高冷路线,因为冷酷,有bigger,让人觉得拥有它很有面子,那种一般的商品比如衣服有线头,褶皱,产品用料又不高档做工不精细的就不要尝试这种了,因为本来你是

  想要装大牌感来着,却把你的瑕疵缺点展示出了,就起反作用了。

  写在最后:

  到这里,我们的上集和下集就都讲完了,今天我们主要是讲商品该怎么玩,因为玩商品最保险,“玩“模特一方面找合适的人物比较费时,另一方面往往涉及到肖像权问题会有很多限制,尤其是大品牌或大的电商平台更加谨慎,万一被告不就完了?还有,把商品排版玩转了,距离走向人生巅峰也就不远了(哈哈,你信么?),今天就讲到这儿了,下次再见,么么哒!~

  欢迎关注小婷姐的微信公众号「TTTink-D」,一个干货与文笔俱佳的美女设计师:

  微信公众号简介:专注开拓电商设计思维,不定期分享一些个人见解干货,当然也会分享一些顶级创意、摄影、人生感悟方面的好文啦。

本文网址:https://www.dedexuexi.com/wysj/jhsj/2864.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
设计师必备的优秀字体识别网站 提高设计效率
« 上一篇2017年04月12日
自动生成上千款热门配色色板的COOLORS
2017年04月12日下一篇 »
  • 网易云音乐WP1.0设计项目实战
    0阅读
    WP 平台是很多设计师很少涉足的地方,优设之前发过一篇WP设计规范指南,今天网易的同学继续上干货,来一篇WP的设计项目实战!作为一款有诚意的音乐APP,这次设计过程相当用心,值得学习的地方也很多,学习来。项目背景Windows Phone一直是各家公司缺少投入的平台,WP用户不得不经常面对一个成...
  • 马伯庸教你如何做一个万年好甲方
    0阅读
    编者按:原以为亲王精通历史,会写小说,现在才知道他也很懂作为甲方的门道啊。今天分享@马伯庸 同学的一篇好文,前有笑点,后有干货,有趣得紧。作为设计师,能遇到这样的甲方就嫁了吧。@马伯庸 :对我们甲方来说,艺术性是第三才需要考虑的因素。我们第二考虑的是如何有效率地把核心信息传达到客户那儿去。无论多么...
  • 网站设计主题和风格是重点
    0阅读
    企业为了在互联网上争夺一席之地,纷纷建起了网站。企业的网站就像企业的网络门户,既然是门面那么就要将网站建设好,充分展现企业的良好形象。貌似许多企业建网站是为了赶时髦,因为他们的企业网站设计的实在是不堪入目,这样不仅不会为企业带来什么利益,相反还会毁了企业的形象。那么企业要建好这样的门面应该如何入手呢...
  • 如何给网站布置干净的“关于我们”页面
    0阅读
    所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的关于页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。 一、为什么要有关于页面 不要让用户思考! 1、向浏览者传达本站的价值,留住用户 2、始终提醒自己站点的主旨,不要跑题 二、起什么名 关于页面存在的...
  • 如何建立一个成功的移动应用
    0阅读
    一个消费者应用程序是否成功,只通过相加其组成部分的总和来计算。简单的查看用户手机应用的下载历史,用户设备残留的移动应用数量,和那些真的被坚持使用的移动应用情况,就能知道这句话的真实含义。然而,如果你想知道为什么有些用户不再使用某些手机应用,那这篇文章可能会给你一些启示。 像一台机器一样,移动应用通过...
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录