旋转是指自动或手动依次播放一系列图片。轮播可以给静态的网站页面带来动态感,让页面看起来更时尚。无论是随机播放还是按一定顺序播放,旋转突出重点内容都是非常明显的。苹果iPhone登陆页面用一系列图片突出其产品的工程技术水平。
有些内容比静态图像更适合轮播。在本文中,我们将讨论如何实现出色的旋转效果。
图像一致性首先,确保你想使用的图像的大小和长宽比是一致的。这样就可以保证转动的顺畅,不会出现下图这样的事故。虽然看起来很有意思,但是我们一般不推荐。如果图片太大,转盘会自动将其宽度调整到合适的宽度。但是,如果图像的长宽比不同,缺失的部分会被空白背景填充。为了避免这种情况,请在上传之前调整图像的大小。
自动播放发挥作用的是自动播放功能。你可以通过展示图像来达到不同的效果:讲述一个故事,从不同的角度展示产品的各个方面,或者展示目录等等。播放的间隔和由访客控制的重放选项创造了一个美丽而实用的旋转木马效果。
阿迪达斯专注于运动鞋和t恤在网店中的轮换,通过自动播放的方式展示全部四款产品。
极简用户界面,没有人喜欢沉重的界面,因为这使得与网站的实际内容进行交互变得很麻烦。好的轮播只占一张图片,但可以展示更多内容,不影响用户体验。
上图所示的旋转木马使用胶片——一种可以查看旋转木马中所有图像缩略图预览的设计。单击缩略图,转盘将聚焦在选定的图像上。当您需要在相对较小的空间内预览许多图像时,这是一个很好的选择。我们通常使用箭头导航,但也可以使用其他更适合网站和品牌风格的元素。比如上图的箭头就很适合极简风格。