美文网首页
关于卡片式轮播图的思考

关于卡片式轮播图的思考

作者: 入巷吃汤面 | 来源:发表于2019-01-07 16:58 被阅读0次

今天无意间看到了【轻听英语】的卡片式轮播图,看来看去总是觉得有点怪。如下图:

【轻听英语】首页轮播图

轮播图一般都紧邻导航,因此总得想个办法将导航与轮播图隔离。【轻听英语】的隔离似乎有点用力过猛。我仔细想了下,似乎是因为卡片轮播图的原因。

卡片轮播图不同于之前的,左右占满的标准矩形,卡片本身就有隔离的效果,在经过一个阴影的二度隔离后,就显得太过于疏离。

再来看其他APP轮播图里的卡片轮播图:

【网易云音乐】首页轮播图

【网易云音乐】也是用的卡片轮播图,但是它的导航背景有下探,延伸到了卡片的中间。形成了一种悬挂的效果,这样显得轮播图和导航很连贯。


【阿里云】首页轮播图

【阿里云】也用的同样的手法。但是阿里云更进一步,它将导航的背景下沿做成了弧线,更有“幕布”的效果。按理应当比【网易云音乐】效果更好,可是目前看来效果并不如网易。我想可能有两个原因:

轮播图仍然是标准矩形,这里方正的尖锐和“幕布”的柔和不太协调

轮播图和背景色边界不够清晰 影响了效果

【多看阅读】首页轮播图

这是【多看阅读】的卡片轮播图。也是我最喜欢的之一:简洁,内敛。

这里的轮播图仅依靠卡片本身的隔离效果从界面中剥离出来。像是一块镶嵌在界面的屏幕,恰到好处地融为一体。

忽然想到,原本在寸土寸金的手机界面,人们恨不得方寸之间都要放满元素。就像原本的轮播图都是方方正正,占满横屏。就像淘宝为了节省空间,硬生生将矩形轮播图压到了条形。

而如今大屏手机横行,终于有了空间来让人奢侈地考虑更精细的设计。卡片式轮播图虽然一定程度上浪费了空间,却在视觉体验上更让人舒适。

这是我对卡片式轮播图思考后的一点看法,希望能和大家一起多多交流。

相关文章

  • 关于卡片式轮播图的思考

    今天无意间看到了【轻听英语】的卡片式轮播图,看来看去总是觉得有点怪。如下图: 轮播图一般都紧邻导航,因此总得想个办...

  • 卡片式轮播

  • 无标题文章

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。它们各具特色,各有用处。 1.传统轮播图 第一步...

  • 轮播图

    轮播图分为:传统轮播图、间歇轮播图、呼吸轮播图、无缝滚动轮播图等。 1.传统轮播图 第一步,得到元素 第二步,设置...

  • 现金红包

    每日红包 轮播图 详情图 周末红包 轮播图 详情图 圣诞红包 轮播图 详情图

  • task30 用jQuery做个轮播吧

    示例:苹果风格的轮播科技感十足的轮播可能是最厉害的轮播组件纯 CSS 轮播 走马灯代码地址走马灯预览地址思考静态图...

  • day7_作业

    轮播图1 轮播图2

  • [iOS]定制性强的广告轮播图--SCAdView

    @[无限轮播图] @[3D轮播图] @[广告轮播图] SCAdView Statement If my code ...

  • 普通奖品

    卡西欧小方块 轮播图 详情图 三只松鼠大礼包 轮播图 详情图 天猫精灵 轮播图 详情图 小米蓝牙无线耳机 轮播图 ...

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

网友评论

      本文标题:关于卡片式轮播图的思考

      本文链接:https://www.haomeiwen.com/subject/foxurqtx.html