今天分享的是「banner位设计解析」。
UI设计中的banner大致分为四类：顶部banner、白底banner、胶囊banner、封面banner。现在一些大厂取消了顶部banner位或者压缩顶部banner，比如淘宝将横版banner改为竖版banner，融入到产品列表里，属于少数，暂不列举。
顶部banner
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
以文字变形为主，加些辅助图形，构成感较强，比较新颖有个性。
5.实物banner
以产品图片为主，让产品看起来更有质感，可以突出品牌调性。
6.插画banner
色彩比较鲜亮，形式自由，风格多变，适用于不同的运营需求，不会有版权纠纷。
总结
UI设计中的Banner形式，既要考虑界面的整体视觉风格、产品调性，还要考虑banner承载的内容信息，以及为什么内容服务，根据不同内容选择合适的banner形式
優(yōu)網科技秉承"專業(yè)團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網科技成立于2001年，擅長網站建設、網站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯網解決方案。優(yōu)網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網、微信商城、企業(yè)微信）等一系列互聯網應用服務。
公安局備案號：
專屬顧問
