APP推广合作
联系“鸟哥笔记小乔”
教程 | 手把手教你做好App端的banner设计
2016-11-30 10:08:38

世界要看脸,App也要看banner,作为一条与用户连接的关键纽带,门面当然要漂亮。banner虽然是一个小小的资源位,但却承担着巨大的使命,但凡需要在页面上呈现信息的产品,就离不开它。如何做好App端的banner设计?

banner在不同产品上,不同载体里,甚至是不同使用场景下,“好”的定义都不同。

有些banner的主要目的是吸引眼球,“骗”人点击就算成功了;有些banner还要体现出想表达的事情,方便用户做简单判断和筛选。而今天,我们暂时不说这些大概念,只唠唠App端的banner该如何设计。

话说banner好重要!

在说banner的重要性之前,我们要先摆脱一个错误的认识:“banner仅仅是用来装饰,抓取用户眼球的”。 

我们之所以把banner称为“资源位”,是因为它除了要承担吸引用户眼球的责任外,还需要向用户传达信息。让用户感受到视觉冲击的同时,也能接收到要输出的信息。所以说,一切不以传达有效信息、有效传达信息为目的的banner都是耍流氓。

另外,在传达信息的基础上,banner的另一个作用就是促使用户产生行动。使他们在看过banner上呈现的信息后,产生想点进去参与的欲望,这就是我们通常说的Call To Action。

如何合理设计一款banner

当然,我们也许早就知道了banner的重要性,可是真动起手来做却显得有些吃力。很多人也表示,不知道如何开始做一款banner,拿到需求脑袋是懵的。而这些问题背后的原因无非是看得太少,做得太少。今天运营君就和大家一起来梳理下设计出一款banner的基本步骤。

确定传达给用户的信息

通常来说,明确传达给用户信息这一步和审美、视觉设计都没关系,而是要求你对自己希望表达的内容、所面向的用户,有明确的掌握。


比如,小牛助驾调研问卷banner要传达出来的信息有:

调研问卷和参与调研的时间

这是我们要传达的核心信息。只不过这看起来有些单调,需要其它元素的辅助,更形象化地展现出来。所以,我们又添加了一些元素,让核心信息表现得更加生动。

品牌形象

让用户看到小牛助驾的卡通形象一眼就知道这是谁家的调研问卷。这就是所谓的视觉认知。当然,这种视觉认知的形成需要一定的重复次数,通过反复强化视觉形象来加深用户脑海中的印象。

引导语言

通过激励性质的语言“牛粉们赶快行动起来吧!”辅助banner表达主要信息,进一步点燃用户点击banner的欲望。

明确各信息的优先级

虽然上面的banner中有3类信息,但是优先级肯定不同,所以对应到设计上,放置在板块的位置、大小、颜色的突出是需要区别开的。

掌握用户视觉路径

遵循用户视觉路径设计banner最大的好处就是在用户接触到banner之初,就有了明确的“视觉中心”。当他们的视觉被聚焦后,设计师就可以从聚焦点开始引申,促使用户产生接下来的行动。

用户的视觉路径通常是按照阅读的“从上到下,从左到右”的顺序,所以一般会将重要的内容放在左上角。但小牛助驾选择了从中间向外扩散设计,重要的内容自然是放在了中间。但我们从辅助元素(品牌形象、调研问卷图标、引导语)的位置也能看出,整个banner的设计遵循了用户的视觉路径。

了解标准识别颜色

做一款banner,配色自然是十分重要的。如果实在是“配色弱”,那就去网上找找配色图表补补课吧……

做好视觉排版

所谓视觉上的排版无非是在信息优先级已经确定的情况下,让他们变得更好看些,视觉呈现上更有层次感。多注意一些视觉排版中的要素,例如:对齐、图标样式、字体数量等等。

掌握三个Appbanner进阶技巧

要想做好一款App端的banner,除了要了解上面的基本问题外,还需要掌握三个常用的进阶技巧才能让你设计…….完美!

平铺风格

平铺风格banner最大的好处就是可以让主题、文案得到突出,再加上展示的产品多、画面丰富,很容易营造出场景氛围,吸引用户的关注,从而使banner的打开率升高。但也因为产品展示得多,对产品质量和角度有很高的要求,在设计时耗时较长。

下面是几个典型的平铺banner



还是很好看的对不对?那我们就以巧克力为例,看看平铺风格的banner到底该如何设计。

假设需求方的要求是:表现出巧克力的丝滑口感,引起消费者食欲。

基于用户提出的需求,我们可以先找一些比较成熟的巧克力广告参考,获取设计上的灵感,比如颜色、设计元素等等(强调一下,要去官网上看,现在网络上即兴发挥的太多了……)。这个时候可以尝试搜索一些巧克力banner的关键词:巧克力海报、巧克力广告、知名巧克力品牌(如费列罗、德芙、GODIVA歌帝梵)。


当然,获取灵感的时间不能无止境,否则会适得其反,思路收不回来。这段时间尽量控制在30分钟之内(毕竟身后有一群急着投胎的需求方拿刀追着我们要……图……)。

接着要把收集到的元素和文案列出来,注意疏密均匀,做一个大概的草稿即可。


调节元素的前后顺序,做出阴影,压暗弱化背景后,调节文案的主次关系。


然后给banner的中心部位和背景提亮,加上一些装饰性的英文和欧式花纹。


修改大片

看见大片就兴奋……我说的可是正经事。

做banner设计时,修改大片的好处就是容易强调品牌调性,几乎不需要另找元素,同时还能做出高大上的效果。可有很多时候,大片不是说有就有的。另外,使用大片的素材时,一定要注意版权问题,版权问题,版权问题!

下面举一个化妆品banner的例子,来看看他们是如何修改大片的。

假设需求是:大品牌化妆品联合专场的banner(聚美优品上超多,可以参考),画面干净。

首先依然是我们雷打不动的寻找灵感,搜索相关关键词,找到素材图。


然后把四个部分单独扣出来,方便之后局部调整。


接着背景选用了一张干净、简单的丝绸,摆放上产品、文案以及刚刚抠出来的粉色花瓣元素。


还可以再叠加一层淡粉色,画出阴影和透明瓶子的折射光感,从整体上调节装饰物品的明暗、饱和度等等。


最后的最后,为了提升整个banner的逼格,可以为文案和整体图片叠加镜头光晕。


善用实拍

世界上最难做的banner就是产品丑得不行,还没有时间精细修图......这个时候就需要实拍图来实力救场了。


就像上面图中的酸奶、海苔就是从实拍图中抠出后合成的。接着又给实拍场景叠加上渐变背景,写上了产品文案。这就是利用实拍完成的banner设计。

当然,除了上面的这些设计技巧,还有很多很棒的banner设计创意风格。这就需要我们在日常生活中多看多积累,等到在脑海中建立起自己的banner素材库时,就不用在拿到客户需求后到网上搜索关键词了。这就是“素材在手,世界我有”!

文章来源:运营拍档(ID:dryypd)
运营那些事儿
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
运营那些事儿
运营那些事儿
发表文章49317
确认要消耗 羽毛购买
教程 | 手把手教你做好App端的banner设计吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接