我要投稿
今天分享的是「banner位设计解析」。
UI设计中的banner大致分为四类:顶部banner、白底banner、胶囊banner、封面banner。现在一些大厂取消了顶部banner位或者压缩顶部banner,比如淘宝将横版banner改为竖版banner,融入到产品列表里,属于少数,暂不列举。
分为通栏banner、齐屏banner和卡片banner。
通栏banner
连着状态栏导航栏,适用于内容图片较丰富的APP。
优点:第一种可以让banner看起来更整体,不需要为导航栏图标再另留空间。
缺点:设计时需要注意颜色运用,不能使用太浅的颜色,会让导航栏内容显示不清。
齐屏banner
在导航栏下方,用色块区分不同板块功能,适用于图文丰富的内容。
优点:可以将上下内容很好区分,突出重要内容。
缺点:样式上比较中规中矩,做不了太新的设计。
卡片banner
第一种背景会随banner颜色变化,第二种就像卡片一样在导航栏下方。
优点:颜色没有太多限制,比较灵活,banner尺寸小不会占用太多空间,整体融合统一性较好。
缺点:背景和banner容易区分不开,视觉不易聚焦。
多张轮播出现,或者单张出现,多为静态图片。
一般位于界面中部区域,结构多为左文右图,由大标题、小标题、按钮或标签、装饰图案组成,适合做成组件复用不同场景。
特点:尺寸不大,文字为主,图片为辅,底色为白色。
优点:排版可以复用,只需要替换文字和图片,空间利用率大。
缺点:样式单一,不太显眼。
展现效果:右边图片元素有动画效果,轮播出现或单张展现。
顾名思义外形像胶囊,一般位于界面中部,多在促销或者节日时出现,颜色鲜艳,元素丰富。现在并不局限于胶囊形状,一些大厂会融合自己的品牌元素,比如设计成猫头形状。
优点:氛围感强,突出主题,可以刺激点击的欲望。
缺点:颜色形式太抢眼,和整体不太融合。
出现的位置大小不固定,为内容服务。
优点:可以清晰表达内容主题,减少理解成本。
缺点:形式不统一,在整体页面里显得花哨。
以人物为主,用人物的的知识技能分享或者美感来吸引用户。
用场景来烘托氛围,营造意境,表达主题;以美景引人入胜,激发了解的欲望和兴趣。
通常是根据文字内容,加点相关元素素材。
4.文字图形banner
以文字变形为主,加些辅助图形,构成感较强,比较新颖有个性。
以产品图片为主,让产品看起来更有质感,可以突出品牌调性。
色彩比较鲜亮,形式自由,风格多变,适用于不同的运营需求,不会有版权纠纷。
亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。