当前位置:主页 > 产品展示 >

六合彩136期开奖结果白小姐彩图库六合彩大图库www 香港六合彩150
* 来源 :http://www.vcnielson.com * 作者 : * 发表时间 : 2018-11-05 07:59

  生肖号码统计器手机版小丽君六合统计器最近我在设计App中Banner排版样式的时候总是在纠结怎么用来用去就那几个样式,到底还有没有其它样式呢?那么问题又来了不同场景类型对应哪种样式更好呢?

  下面我就以上这些疑问找了一些比较有代表性的Banner样式进行了汇总归类,分为以下6种类别:单张切换样式/多张切换样式/功能类样式/特殊排版一致类布局/特殊背景处理/复合拓展类。

  其中熊猫金库采用的是全部撑满的样式,淘宝采用的是屏宽撑满的弧形样式,转转采用的是未撑满的样式。总的来说,单张切换样式主要用于首页Banner的展示。

  全部撑满类样式在越来越多的App中被弃用,主要原因是此样式对运营图的要求比较高,需要做到风格和颜色尽量一致,才不会影响App整个的风格展示效果。

  当然这里以熊猫金库举例是因为它并没有采用相同颜色切换,而是都采用了左侧文字,右侧吉祥物的设计,而且采用的不同颜色饱和度明度也趋向一致,所以这样对APP的视觉呈现效果并没有起到反效果,反而有加分。

  然而屏宽撑满样式并不受此局限,是因为顶部采用了品牌主色调压轴,不管Banner风格样式和色彩怎样多变,都不会对视觉呈现有多大影响。

  所以全部撑满类样式如果不能确保Banner的一致性,还是要慎用。屏宽撑满的样式适合有主色调压轴的情况下使用,适用于风格多样的购物类平台。

  我们首先来了解下什么是走马灯,上图为中国古代的走马灯。因多在灯各个面上绘制古代武将骑马的图画的连贯动态造型,而灯转动时看起来好像几个人你追我赶一样,故名走马灯。

  那么App里常见的轮播Banner样式,可以追溯为走马灯式轮播,只不过由于这里是为功能信息服务的,所以我们这里无需展示图像的动态连贯信息。

  上图的乐刻App首页采用的为大小一致平行轮播、第二个为景深类轮播、第三个为景深类异形轮播、最后一个为一致类弧形轮播。一般拓展应用的话会采用文字等特殊排版来进行一致性统一。

  大小一致平行类轮播:其中大小一致平行类轮播多用于Ios11或者主色调较为弱化的App风格中。一般图片的高度较窄,因为据不完全统计,越来越多的App运营活动效果并不是太好,所以图片的高度也相对调低了。

  弧形轮播样式:弧形轮播较为特殊,实际上比较常见的是手机系统屏幕上可自定义的弧形轮播交互形式,这种形式因为是弧形的,容易给用户造成眩晕感,所以需要根据具体场景谨慎使用。

  信息展示类侧滑分为常规图文类、图片嵌套卡片式信息的形式和视频展示类。例如:淘宝的海淘笔记页面为图片嵌套卡片式信息的形式,淘宝的生活研究所为视频展示类侧滑,也就是滑动到哪个哪个Banner可以自动播放视频。一般信息展示类侧滑多用于产品的二级页面。

  侧滑景深类这里的实例使用在了首页,但此类样式较为特殊,通常还是二级页面使用的较多,因为首页侧面的使用对页面的一致性有一定的。

  纵向层叠样式一般适用于首页,且与产品背景图相结合的形式出现,例如:上图左一,每个Card显示不同的航班信息。

  横向层叠样式一般适用于页面里的中间,区别与其它常见的Banner样式,主要用于图片展示较多的场景内使用,丰富页面形式的多样化。

  点击展放类通常适用于视频、音频等App,比如:虾米的Ai页面,点击较窄的一块色块Banner即展放相应的播放类别。

  信息归纳切换类以上2个淘宝案例都属于这个类别,只是中间那个把信息归纳为不同促销价格分类,右边把信息归纳为不同时间点进行切换,这种类别通常适用于电商商品促销类页面。

  功能附加类通常在当前Banner需要附加什么功能的时候采用,比如:需要添加收藏、添加购物车等功能,产品展示背景图通常也是商品展示类页面使用较多。

  图文错开类样式一般适用于想要有个性化页面展示的App,相对于其它中规中矩的App有更多的创意类元素可供发挥,六合彩136期开奖结果白小姐彩图库六合彩大图库www 香港六合彩150期例如:上图图一的卖比较个性类别的服装。

  图文关联类一般适用于每个Banner都有一致性的文案和标签信息展示的时候使用,例如:电商类的Enjoy。

  文本一致类多用于采用不同的图片作为背景,且图片上都有蒙层作为遮罩,每个不同的banner上的文字大小,排版都相同。例如:上图的京东股票和最后一张Enjoy的页面,这里的Enjoy的文本都添加了主色调作为文字底衬,更加强调了文字的一致性。

  特殊背景处理一般分为:异形背景形状类样式、图片元素背景切换类样式、图片背景模糊处理类样式、

  异形状背景形状类样式一般也适用于想要个性化展示,区别与同类App的展示形式,通常采用品牌色为主。

  图片色彩元素背景切换类样式一般提取了当前展示banner的图片元素做为背景展示,可以丰富当前活动在页面中的氛围,一般电商类App使用较多。

  通常采用固定的图片背景并进行了高斯模糊的处理方式,再叠加一层蒙层进行展示,一般背景可以随图片切换也可不切换,例如:淘宝的生活研究所采用的是不切换的图片模糊类型。

  复合拓展类一般分为:纵向层叠列表样式、沉浸式Banner+功能类样式、Banner视频与图片叠加类样式

  纵向层叠列表样式是属于比较特殊的展示类别,此处最美有物App的定位为精品高端类原创商品,所以这里采用了卡片式纵向层叠的样式进行展示,用户不光能看到当前产品的信息还能看到其它产品的文字信息,一般用于特殊品质类产品展示。

  淘宝的聚名品背景采用了较为商务男性化的背景风格展示,给用户传递的感觉较为硬朗、品质,非常符合男性优品的特质。顶层左侧放置了一个男士模特,右侧放置了三个卡片。其中最的一排卡片可以侧滑,下面是对应的优惠信息。

  这里淘宝的生活家页面背景采用的是视频展示,顶层采用了多个图片进行展示,并配合了相应的文案。并且引入了期刊的概念,进行专题展示。

  以上介绍了6种不同Banner的展示类型,分为单张切换样式、多张切换样式、功能类样式、特殊排版一致类布局样式、特殊背景处理类样式、复合拓展类样式。

  希望在我们设计banner样式的时候能够选择更为合适的样式,以适用当前的场景。

  还有一种比较特别的是两张图层叠加的Banner。例如:华为的应用市场首页Banner。由于一个Banner由两个图层组合,在进入与退出时有悬浮效果。

  特意找同事看了下这个效果,想起来之前看过类似的,近年用的相对少了。感谢补充!

  【每日一问】在产品设计(如社交类、电商类产品)中,如何降低用户咨询成本与运营的客服成本?

  【轻松一问】(我常常因为不够,而感到和你们格格不入)怎么样才能引导男人穿裙子?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。