关于轮播图的设计

更新日期: 2022-03-31 阅读次数: 11150 分类: UI

carousel 旋转木马 - 即网站轮播图

又名 slider(滑块),slideshow,gallery (美术馆、画廊)

现在几乎每个站都在使用轮播图/carousel,但是我自己做了几个站,并没有一个轮播图效果能让自己满意。

不满意的地方:

  • 仅仅是好看的图片轮播而已,没有有效地传递信息
  • PC 端与手机端没有完美的自适应方案

如何充分利用轮播图传递有效信息?

第一个轮播图上的文字,必须能够简明概要的描述这个网页的主题。

例如,客户给了我们两句标语

  1. 工作理念:用手,用脑,用心,做最美的牙!
  2. 经营宗旨:品质惠苍生,诚信赢天下。

从概括主题的角度来看,第一句话适合作为第一个轮播图,因为大家一看就明白这是做牙模的公司。

突出文字部分,弱化背景图片

我感觉做的比较好的是蓝鲸的合作伙伴这个页面

蓝鲸轮播图

Title 醒目,又有概要的文字描述,还有一个大大的按钮引导用户进行下一步操作。 背景图片使用了暗色,即体现了设计感,又凸显了文字。

即使不用图片,使用纯色背景也非常不错

纯色背景轮播图

增加引导性按钮

引导用户注册、浏览重要内容。

PC 端与手机端背景图的自适应方案

感觉可以使用 background 来解决,结合 media query 采用不同尺寸的背景图。 毕竟 PC 是宽屏,手机是竖屏,图片的宽高比必须不同。

轮播图的 wrapper div 高度要写死

避免图片加载之后才能确定高度。

使用 slick.js 还是 bootstrap 的 carousel js 组件

slick.js 相对优势更多一些

  • 可以使用背景图片
  • 手机上可以手动滑动
  • indicator 样式更灵活

加分项

使用 animate.css 做一个入场的动画效果

不要使用 H1 标签

一个页面只应该有一个 H1 标签。

参考

tags: 轮播图

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式