电商干货!Banner图设计之商品图该怎么玩(上集)

2016/03/17 30836

product-photo-banner-design-1-1

编者按:拿到一个banner设计需求后该如何动手?不同风格的Banner都有什么规律可以借鉴?今天@TTTing1 (京东用户体验部)这篇好文不仅分享了拿到设计需求后5个应该执行的步骤,而且还对六种常见的商品图进行归纳总结,干货满满收!

小婷姐的电商设计系列好文:

  1. 《新人手册!聊聊关于电商设计的那些事儿》
  2. 《前辈经验!聊聊新人设计师最容易遇到的12个问题》
  3. 《不怕没灵感了!SALE 招牌的9种排版设计方法归纳(附案例)》
  4. 《如何辨别一个BANNER的好坏?(附案例)》

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

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

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

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

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

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

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

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

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

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

5、什么时候交稿

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

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

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

ds20160317

关键词:大牌、稳重

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

1、背景大量留白。

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

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

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

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

ds201603172

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

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

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

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

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

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

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

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

ds201603173

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

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

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

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

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

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

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

ds201603174

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

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

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

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

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

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

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

ds201603175

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

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

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

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

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

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

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

ds201603176

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

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

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

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

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

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

写到这里就算是把“Banner图设计之商品图该怎么玩”(上集)讲完了,由于内容比较多,剩下的内容我放到下集再讲,所以,我们下次再见咯。

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

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

tttttqr

「优设2月份优秀教程合集」

地图图标教程:
《PS教程!手把手教你打造一个配色小清新的地图图标》

卡通动物肖像:
《AI教程!教你绘制六个扁平化风格的卡通小动物肖像》

卡通人物肖像:
《AI教程!教你绘制扁平化风格的卡通人物肖像(四人组合篇)》

作者:@TTTing1

uisdc-hao

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/product-photo-banner-design-1

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里