UI设计中的banner大致分为四类：顶部banner；白底banner；胶囊banner；封面banner。现在一些大厂取消了顶部banner位或者压缩顶部banner，比如淘宝将横版banner改为竖版banner，融入到产品列表里，属于少数，暂不列举。

顶部banner

位于APP的首页顶部，多用来推广宣传，占的区域比较大，设计需要符合产品的调性。

1.类型：

分为通栏banner、齐屏banner和卡片banner

通栏banner

连着状态栏导航栏，适用于内容图片较丰富的APP

优点：第一种可以让banner看起来更整体，不需要为导航栏图标再另留空间。

缺点：设计时需要注意颜色运用，不能使用太浅的颜色，会让导航栏内容显示不清。

齐屏banner

在导航栏下方，用色块区分不同板块功能，适用于图文丰富的内容。

优点：可以将上下内容很好区分，突出重要内容。

缺点：样式上比较中规中矩，做不了太新的设计。

卡片banner

第一种背景会随banner颜色变化，第二种就像卡片一样在在导航栏下方。

优点：颜色没有太多限制，比较灵活，banner尺寸小不会占用太多空间，整体融合统一性较好。

缺点：背景和banner容易区分不开，视觉不易聚焦。

2.展现效果

多张轮播出现，或者单张出现，多为静态图片。

白底banner

一般位于界面中部区域，结构多为左文右图，由大标题、小标题、按钮或标签、装饰图案组成，适合做成组件复用不同场景。

特点：尺寸不大，文字为主，图片为辅，底色为白色。

优点：排版可以复用，只需要替换文字和图片，空间利用率大。

缺点：样式单一，不太显眼。

展现效果：右边图片元素有动画效果，轮播出现或单张展现。

胶囊banner

顾名思义外形像胶囊，一般位于界面中部，多在促销或者节日时出现，颜色鲜艳，元素丰富。现在并不局限于胶囊形状，一些大厂会融合自己的品牌元素，比如设计成猫头形状。

优点：氛围感强，突出主题，可以刺激点击的欲望。

缺点：颜色形式太抢眼，和整体不太融合。

封面banner

出现的位置大小不固定，为内容服务。

优点：可以清晰表达内容主题，减少理解成本。

缺点：形式不统一，在整体页面里显得花哨。

banner设计类型

1.人物banner

以人物为主，用人物的的知识技能分享或者美感来吸引用户

2.场景banner

用场景来烘托氛围，营造意境，表达主题；以美景引人入胜，激发了解的欲望和兴趣

3.元素banner

通常是根据文字内容，加点相关元素素材

4.文字图形banner

以文字变形为主，加些辅助图形，构成感较强，比较新颖有个性

实物banner

以产品图片为主，让产品看起来更有质感，可以突出品牌调性

插画banner

色彩比较鲜亮，形式自由，风格多变，适用于不同的运营需求，不会有版权纠纷

总结

UI设计中的Banner形式，既要考虑界面的整体视觉风格、产品调性，还要考虑banner承载的内容信息，以及为什么内容服务，根据不同内容选择合适的banner形式。