关于轮播图的设计

更新日期: 2017-04-26 阅读次数: 6089 分类: 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 标签。

参考

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年08月07日 立秋
2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
2020年09月10日 教师节
2020年09月16日 国际臭氧层保护日
2020年09月16日 世界清洁地球日
2020年09月18日 "九一八"事变纪念日
查看更多节日