Banner设计全方位教学！

在工作中需求方往往不是设计出身，提需求时传达上往往也没有办法很好的表达自己的想法，在这种需求模糊的环境中往往做的 banner 会被需求方怒怼，而追问原因是，只会得到“不好看！”或者当我们每天疯狂填充自己的素材库时，很多小朋友都会有“该如何分辨作品的好坏”这样的疑问，那到底什么样的 banner 算是优质的 banner 呢？

一、简单了解 Banner 本质，Banner 在运营工作中的作用，从需求方的角度来看 banner 的作用大致分为两种：

便于上线操作：如果直接投放活动内容页面，首先屏幕使用空间有限，不能多个活动共同展示，其次每次活动上线基本上都是凌晨，暂且不说累不累，在人工成本上就会消耗大半。如果遇到大促或者重要节日，那全体运营需要时时刻刻更改内容。而 banner 的定时上架和权重排序大大减少运营工作成成本，提高工作效率。

清晰看到数据反馈：说白了，banner 就是广告形式的一种，在一款 APP 中，除 banner 外还存在很多形式的广告比如开屏广告、弹窗广告、落地页内嵌广告等。而对于运营同学来说，他们需要清晰的了解每一条广告，每一种投放形式的数据反馈，根据数据对每次活动的内容进行复盘、优化。应对以后的不同的活动形式。

优质 banner 的特点，由于 banner 的位置和大小都属于产品中的绝对的巅峰，但用户在此页面停留的时间往往很短暂，所以在整个产品页面中，视觉层面会呈现鲜明的中心，设计层面需明确视觉层级关系，以最短的文案加上图像形式直击目标用户内心，使用户快速获取信息。

三秒原则，通过对市面上大多数产品 banner 进行研究，发现轮播中每一张 banner 停留时间不超过三秒，在这里我们需要做的就是在三秒内传递用户所有重要信息。

增强可读性，由于 banner 是由文案、CTA 按钮、配图、装饰元素、背景组成，增强识别性一般指的是文案以及按钮元素。文案部分需要尽量精简，控制在一级标题、二级标题、备注标题‌三段式，针对不同的目标用户做到内容可读性，确保用户快速获得信息。设计部分不仅要保证页面整体美观、观看舒服，更重要的是确保信息层级关系，‌引导控制用户视觉动线‌。其目的都是为引导用户不断的参与内容，促使 banner 极大程度的转化用户，同时也间接提升了企业的商业价值。

二、Banner设计的核心目标

在我看来，与文字信息相比，我们更容易被图形化的内容所吸引，也更加能够快速理解图形化内容。产品页面的 banner 也是主要展示一些产品最近的活动或者一些传递产品内容信息的图片，而根据 Jakob Nielsen（尼尔森十大可用性原则的那个男人）做了一个眼动实验，发现 2010 年后用户平均花费 80.7%的阅读时间在前三屏，其中首屏时间占总时长的 57%。基于在第一时间抓住用户注意的角度出发，我们必然将最显眼，最突出的 banner 放在首屏的位置，这样不仅让我们进入页面后第一时间看到，而且还可以在三秒内了解具体主要宣传信息。

正确传达信息：有一天你的好朋友在过生日，你拿着一个生日礼物送给他，你的朋友肯定希望打开礼盒直接就能看到礼物，而如果里面和套娃一样全是包装盒，你的朋友也许只会这个表情，然后流露一丝尴尬。

有一天你的好朋友在过生日，你拿着一个生日礼物送给他，你的朋友肯定希望打开礼盒直接就能看到礼物，而如果里面和套娃一样全是包装盒，你的朋友也许只会这个表情，然后流露一丝尴尬。

什么是视觉动线？我们可以将一个 banner 理解成你大学所在的城市的地图，回想一下当年你来到这所城市后，首先想到的是什么？以我来说，我大学是稳坐中国宜居城市榜首的城市-成都，来到这所城市后首先想到的就是吃喝玩乐感受这座城市的美好。但我又不能没有目的的乱逛，相信喜欢旅游的朋友都做过攻略，都是想在最短的时间内逛某个城市，我也不例外，从路线到景点大小再到美食据点等等安排出一条最佳线路。而在欣赏景区的过程中如果遇到很不错的的地方，肯定会记住之后频繁到访，为其消费。回归到 banner 中，视觉动线就是最终安排出的这一条旅游路线，而“做攻略的我”这个角色就相当于在手机面前的你“设计师”这个角色，由你来安排用户在 banner 内观看内容的顺序，而“不错的景点”对应在 banner 内是可以让用户进行下一步行为，保证用户留存，提高转化率的亮点区域。

如何让用户跟随视觉动线观看？应用于 banner 内容排布时受限于 banner 的长条尺寸，视觉盲区压缩。往往将重要的信息放在左边，右边放主视觉图形和其他元素。运用视觉元素创建一条虚拟的“动线”，引导用户实现从左往右移动，符合用户习惯性的眼动规律。在这种左右排版是最我们最容易上手的一种排版方式，虽然不算很惊艳，但是永远不会出错。其中根据文字与图形级别高低决定采用左文右图还是右图左文。

二、实现用户转化

我在工作中，运营同学经常将 banner 称为“资源位”，从这个名称就可以看出 banner 在整体页面中的价值所在。它对产品来说起到了非常好的宣传作用，用非常短的时间让用户帮助用户了解主要内容，通过 banner 传达出的真实有效信息为用户提供愉快、优惠、收入、知识等情绪价值，促使用户做出行为。这也大大降低了企业在传播和获客的成本，而且可以快速增强产品竞争力。

当下我们方方面面都在体现着良好的用户体验，由此我们在设计 banner 后，我们可以模拟用户去检查我们的 Banner，是否能直观感受到画面内容，内容是否吸引我们，是否第一眼就想了解画面内容参与其中。如果以上问题都是否定的，那可以说是相当失败了！

在整个 Banner 中不光要看表面的图形字体的美丑，更需要建立在用户研究和事实之上贴近用户，帮助用户零成本了解画面内容，了解用户行为，具体需求以及背后动机，从而打入用户内部，激发用户操作，提高内容转化率。

分享名称：Banner设计全方位教学！
本文网址：/news8/319758.html

成都网站建设公司_创新互联，为您提供建站公司、云服务器、、用户体验、网站内链、品牌网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联