怎样做好移动端的banner展示位

  • A+
所属分类:经验思维

本文来源: 山竹屁(公众号:海盐社), 共 1900 字

日常的界面设计中经常会做到banner展示位的设计,前段时间做banner区域的时候,就想着怎么样能够做的特别又落地,兼顾美观与功能。可是搜遍网络也没有找到相关的文章,于是自己一边学习一边整理了这篇关于移动端banner区域的分析。本篇文章并不涉及视觉运营设计,文中有不足的地方还请在留言区留言指正,或者有其他的想法也可以一起交流。

北京赛车文章主要从以下四个方面切入:

1、banner的尺寸设置

2、banner的展示位置

北京赛车3、banner的展示形式

4、轮播指示

怎样做好移动端的banner展示位

尺寸设置

北京赛车banner尺寸的设置,一般情况下是遵循一定的比例,比如说:16:9;9:6;5:3等。但是我在调研的过程中,一些大流量的产品,banner的尺寸方面比较多样化,分别都有5:2,3:1,4:1等,有些也并未按照整数比例来设计。我认为主要也看banner的内容对于产品的重要程度,以及界面的需要来决定尺寸,并无严格的模式。

怎样做好移动端的banner展示位

大尺寸的banner营销感与氛围感更强,像是一些视频类、或者电商类的产品,banner作为主要活动入口,是一个大的流量来源,因此需要占据页面的更大面积,对其着重显示。

小尺寸的banner相对来说就低调很多,量级较小,也能够有效的提高页面利用率。并且相对来说不干扰用户的其他功能操作。

展示位置

提到banner我们的第一反应就是在北京赛车的顶部,其实banner也可以存在于其他位置,比如在北京赛车的中间页面,又或者在个人中心的界面中。不同位置的关注度不同,北京赛车顶部的位置是相对来说比较突出的,因为用户进来之后目光聚焦点就在这里,关注效果肯定也是最好的。

怎样做好移动端的banner展示位

一些工具类的或者是用户进来之后目的性较强的产品,会将banner置于页面中间,略弱于功能模块。比如找房类的贝壳北京赛车,和整形app新氧等,基本上用户都是需求明确,以功能入口为主,banner就不必那么突出,因此可以调换位置。

怎样做好移动端的banner展示位

个人中心页面主要目的是查找效率,因此实用性是第一位的,用户要尽快找到自己要的功能入口,banner尽量置于不太突出的位置,做到不干扰用户。

怎样做好移动端的banner展示位

展示形式

banner的展示形式多种多样,有通栏、非通栏、卡片形式以及异形形式。

1、通栏形式

Banner通向界面顶部,将导航栏和电池电量条包括在内。这样的形式整体性强,且可以节省页面空间。这样做的时候要注意,为了清晰显示状态栏与导航栏信息,要在顶部做一个不透明的渐变遮罩,通常采用同色系深色。

怎样做好移动端的banner展示位

2、左右通栏

这种形式的banner置于导航栏下方,能够很好的区分上下内容,但是整体效果相对中规中矩一些。比如说豆瓣和学习强国的页面。左右通栏的形式也适用于在页面中部的banner。

怎样做好移动端的banner展示位

3、卡片形式

现在用的比较多的是卡片形式,有白色背景、纯色背景、渐变背景、以及图片背景等。白色背景形式,界面透气,视觉上轻盈、简约。而有色背景会使界面看起来丰富、饱满、提升界面的氛围感。一些位于页面中部的banner也多采用卡片形式。

怎样做好移动端的banner展示位

4、异形

有些产品为了凸显产品的特点或者个性化,会采用异形的形式。比如说阅读类的app会采用书籍形状的banner展示位。淘宝的北京赛车banner区采用弧形,能够有效的提升页面利用率,且让界面看起来有活力。

怎样做好移动端的banner展示位

轮播指示

banner区域基本上都是多张图轮播展示,因此轮播指示也很重要。要让用户清晰的知道目前banner所处的位置,能加入品牌元素就最好了。一般情况下采用的都是轮播指示点,以圆形和长形为主,当前进度变换颜色或者色彩展示。

怎样做好移动端的banner展示位

可以加入品牌元素,将轮播指示点异形化。比如下面这个腾讯动漫的处理方式。也可以在交互上入手,比如说爱彼迎banner轮播采用进度条形式。我认为这样可以预告翻转,让正在看的用户有心理预期,避免没看完就跳转的焦虑感。

怎样做好移动端的banner展示位

北京赛车除了用轮播指示点的形式,如果做卡片形式的banner也可以左右露出一点边,告诉用户界面之外还有内容。

怎样做好移动端的banner展示位

划重点

北京赛车1,banner区域的展示设计,主要从四个方面考虑,1、尺寸设置,2、展示位置,3、展示形式,4、轮播指示。

北京赛车2,尺寸的设置虽然有一些比例的参考,比如16:9,5:3,5:2。但是具体的我们在设计的时候也要考虑到banner的重要程度、页面的利用率等因素,从而灵活的设置尺寸。

3,展示位置要根据模块的重要层级来决定,顶部的位置重要度高,获得的关注度也高;在功能性比较强的页面放置banner,就要考虑不要干扰用户的操作。

北京赛车4,展示形式分为四种:通栏形式、左右通栏、卡片形式、异形形式。这几种形式分别有不同的特点。可以根据自己的产品选用合适的形式。

5,轮播形式主要有轮播点形式,还有页面外内容露出的形式。在做轮播指示的时候可以考虑加入品牌元素,或者从交互上思考,以求把这个小点做出彩。



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: