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

一、视觉层表现类别

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

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

1.1 静态Banner 展示

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

1.2 动态 Banner 展示

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

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

1.3 视频嵌入banenr展示

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

1.4 分层视差效果展示

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

最后：

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

END

更多干货可关注微信公众号：产品设计研究院 想学习更多关于产品、设计、职场、心理、认知等干货，可长按下方二维码，关注我们。回复【社群】一起聊！

Powered by Froala Editor