重庆总部电话:88888888
重庆总部电话:88888888

亚星管理平台

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

亚星管理平台菁思福知识库

探索行业前沿,共享知识宝库

UI页面Banner设计大揭秘:4大分类+6种类型,让你的设计更出彩!
发布日期:2024-11-13 11:37:59 浏览次数: 1007 来源:UI设计达人

今天分享的是「banner位设计解析


banner最开始是用作网页横幅,这里仅指的是App内出现的banner。通常位于界面的首屏,是运营活动等重要信息的展示区。

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

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

5.实物banner

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

6.插画banner

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

总结

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

亚星管理平台菁思福科技,优秀企业首选的互联网供应服务商

亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》