carousel 旋转木马 - 即网站轮播图
又名 slider（滑块），slideshow，gallery （美术馆、画廊）
现在几乎每个站都在使用轮播图/carousel，但是我自己做了几个站，并没有一个轮播图效果能让自己满意。
不满意的地方：
- 仅仅是好看的图片轮播而已，没有有效地传递信息
- PC 端与手机端没有完美的自适应方案
如何充分利用轮播图传递有效信息？
第一个轮播图上的文字，必须能够简明概要的描述这个网页的主题。
例如，客户给了我们两句标语
- 工作理念：用手，用脑，用心，做最美的牙！
- 经营宗旨：品质惠苍生，诚信赢天下。
从概括主题的角度来看，第一句话适合作为第一个轮播图，因为大家一看就明白这是做牙模的公司。
突出文字部分，弱化背景图片
我感觉做的比较好的是蓝鲸的合作伙伴这个页面
Title 醒目，又有概要的文字描述，还有一个大大的按钮引导用户进行下一步操作。 背景图片使用了暗色，即体现了设计感，又凸显了文字。
即使不用图片，使用纯色背景也非常不错
增加引导性按钮
引导用户注册、浏览重要内容。
PC 端与手机端背景图的自适应方案
感觉可以使用 background 来解决，结合 media query 采用不同尺寸的背景图。 毕竟 PC 是宽屏，手机是竖屏，图片的宽高比必须不同。
轮播图的 wrapper div 高度要写死
避免图片加载之后才能确定高度。
使用 slick.js 还是 bootstrap 的 carousel js 组件
slick.js 相对优势更多一些
- 可以使用背景图片
- 手机上可以手动滑动
- indicator 样式更灵活
加分项
使用 animate.css 做一个入场的动画效果
不要使用 H1 标签
一个页面只应该有一个 H1 标签。
参考
- Carousel/slider design best practices | Webflow Blog
- Carousel Usability: Designing an Effective UI for Websites with Content Overload
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式