关于轮播图的设计

发布时间: 2017-04-26 15:34:34 作者: 大象笔记

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

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

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

不满意的地方:

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

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

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

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

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

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

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

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

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

增加引导性按钮

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

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

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

轮播图的 wrapper div 高度要写死

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

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

slick.js 相对优势更多一些

加分项

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

不要使用 H1 标签

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

参考

我是一名山东烟台的开发者,联系作者