Banner设计全方位教学！

时间：2022.10.13作者：彩乐园浏览量：2057

在事情中需求方往往不是设计身世，提需求时转达上往往也没有步伐很好的表达自己的想法，在这种需求模糊的情况中往往做的 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 中不但要看外貌的图形字体的美丑，更需要建立在用户研究和事实之上贴近用户，资助用户零本钱了解画面内容，了解用户行为，具体需求以及背后动机，从而打入用户内部，引发用户操作，提高内容转化率。

上一篇 : 解析网站搜索设计思路

下一篇 : UI设计中9个常用的控件规范

19
分享到：

back