分享关于Banner布局样式的研究【UI设计师】

Banner布局样式的深入研究

Banner其实对于UI设计师来说并不陌生，更多的还是在于视觉表现层，但是它的本质是关于产品设计中的布局样式分析。那么通过本文大家来一起梳理和探索！

一、视觉层表现类别

Banner 在UI 场景中通常伴随着轮播的形式展示，所以也经常称之为轮播图，这也是导航的一种形式之一，也有轮播导航的功能。在产品中出现可以带给用户平台需要重点传播的内容，比如产品活动信息和官宣咨询、年度佳节等。

为了能引起用户更高的关注度，Banner 在视觉层的表现上面也在不断的创新。除了 Banner 设计创意、构图、配色等视觉层面发挥以外，在表现类别上面我分为静态、动态、视频、分层视差等。

1.1 静态Banner 展示

此类型的轮播图是最常见的，无论是设计效率还是对于IT技术落地都是最为便利的。此类型的画面可分为单图或多图的图片格式，单图是静态的展现形式，多图可以设置自动轮播或手动左右滑动切换。

1.2 动态 Banner 展示

动态表现的Banner 相较于静态而言更能引起用户的关注度，因为动态的东西可以打破静态的视觉平衡，引起的视觉权重更高，更能强化信息重点，在一些重点元素和交互按钮等地方实行动态表现。

在这个万物互联的时代，产品设计师都在不断的尝试如何更快、更准地获得用户的关注度。微动效是其最有效的一种表现方式，无论是在功能交互还是视觉表现层面，都随处可见。

1.3 视频嵌入banenr展示

随着当前短视频的走热，视频形式作为信息流越来越得到重视，视频嵌入到轮播广告中逐渐增多。较多的表现形式为默认出现在首个Banner 中，伴随着倒计时出现，也可以关闭播放。此类形式为了降低用户在未知场景中的使用干扰，通常默认为静音模式，带给用户更加友好的体验。

1.4 分层视差效果展示

分层视差效果能打破常规表现形式的广告，可以带给用户不一样的视觉呈现和互动体验，具体有轮播叠加的视差、3D翻转、元素和背景分离视差等方式。

二、Banner 布局样式分析

在锁定了Banner 的视觉表现形式以后，我们来分析一下 Banner 在界面布局中的样式。造成布局差异的因素较多，比如 Banner 比例、大小、通栏、分栏、孤立还是背景对比等。

首先我们来看看通栏和分栏的差别，这个因素会影响Banner 所能呈现的大小。常规理解都觉得 Banner 越大越好，如果考虑到产品内容布局和信息层级区分方面，也会注意到整个界面布局的舒适度。所以，界面整体的风格和布局样式也会影响 Banner 布局样式，需要融合而非格格不入。

如果遇到一些界面布局头部采用深色，在布局Banner 的时候为了让空间感更强，也会让 Banner 布局于头部背景上层。通常背景色为固定色值和变动色值，变动色值会根据轮播图的色彩来定义背景色值，这样的设计解决方案不仅融合度高且空间感强。

关于Banner 的比例是很多产品设计师不断探索的方向，比例影响高度值的控制。界面布局内容量的不同影响高度值的不同，根据内容自定义也是可行的方法之一。也有设计师会根据斐波那契数列计算，推荐出宽高比例有 8:5、8:3、8:2、8:1 等，在计算的过程中我们通常取能被 4 整除的数值。

我们将Banner 的宽度值定义为：W，高度值定义为：H，比值关系用：Y（ Y 为 5/8、3/8、2/8、1/8 等）。得出计算公式：H=W*Y，得出来的值取能被 4 整数的数值即可。这只是其中一种计算形式，设计师也可以根据具体布局情况进行自定义，设计不是一层不变的方法论，而是做适合具体情况的解决方案。

三、案例分析

3.1 常规形式运用最为普及

常规形式Banner通过不同的滑动交互形式来显示不一样的变化。图片本身以直角或者圆角、通栏或者分栏来呈现，这个需要结合页面整体的风格来定；轮播点的形式比较多样，也有不显示轮播点的形式，以显示待轮播图片来替代。

如：腾讯视频是分栏显示待轮播图+直角风格，爱奇艺是通栏显示+轮播点配合，优酷是圆角风格配合轮播点，芒果TV是通栏呈现融合背景且营造前后空间感。

3.2 背景色随着Banner 轮播而变化

界面头部视觉表现为了提高用户关注度，利用深色表现更能体现空间感和衬托Banner 效果。通常用品牌色进行衬托，也有很多产品会利用 Banner 进行取色，作为背景色的选择范围，这样更具融合性和视觉表现差异。

3.3 以分层信息模拟滑动banner的形式

最近在淘票票 App 中发现了一种新的表达，以分层信息的形式呈现突显优质观影观影评价并吸引点击下单，带给用户全新的体验。

3.4 模拟舞台背景呈现轮播Banner

在界面布局中营造空间感可以让信息对比更加明显，考拉APP就将Banner作为背景来搭建一个具有空间感的舞台，使得整个界面延伸出更强的深度空间感，带给用户不一样的视觉感官体验。

3.5 异形广告效果

有一些产品在Banner 呈现的形式上面不断打破边界的束缚，异形广告的运用逐渐变得频繁。最简单的异形广告是在画面本身突破束缚，整体的结构布局还是在固定的造型里面，比如腾讯动漫 App 推荐板块的轮播 Banner。这种异形表现形式非常适合动漫、二次元、特殊教育及旅游活动的产品中，带给人活力四射的体验。

3.6 微动效增强用户关注度

微动效在产品设计中已经运用非常频繁，因为动效往往能打破静态平衡，引起视觉关注，从而引起用户的关注度。

3.7 视频广告嵌入，不破坏只融合

视频广告的运用是比较常见的，在保持原有Banner 布局不变的情况下嵌入到结构中，引起用户的关注度。通常为自动播放的形式，为了降低用户在未知场景中的使用干扰，默认静音模式。有倒计时的伴随着关闭操作，也有一些提供重播的操作，播放结束自动翻页。

3.8 卡片叠加滑动提升轮播空间感

滑动Banner 过程中的体验感能带给用户对于当前内容的关注程度，便于操作的同时能引起用户的好奇心更是重中之重。

虾米音乐的乐库便是结合了众多设计思考，卡片叠加带来视觉呈现的空间感，手势滑动流畅自然，带给用户更加友好的选择体验。

3.9主题元素分层视差带来轮播新玩法

自如App的做法引起了我的关注，将主题元素和背景层进行分离，主题元素进行轮播的同时背景层渐隐呈现。

最后：

Banner 在很多产品中是较为常见的元素存在，一个好的体验也许只是一个细节的探索，如果能在每一个功能设计的时候都能把控每一个细节，必能带给用户更好的使用体验。

END