在移动设备激增的今天，响应式网站设计正在蓬勃发展，越来越多的人倾向于使用响应式网站设计。当谈到响应式网站设计时，许多人都关心如何选择和放置网站上的图片。这个问题争论了很久，大家也基本达成了共识。有兴趣的可以看看。然而，除了使用单幅图片之外，我们经常在响应式网站中显示多幅图片，使用图库或幻灯片轮播。多张图片比单张照片更复杂，这也意味着我们在网站应用中需要注意的点更多。这是小编今天要和大家讨论的话题。在响应式网站上使用图片轮播需要注意什么？
    响应式网站设计最显著的特点之一是它可以应用于各种不同的设备。在设置carousel或gallery时，我们首先需要考虑的是它如何能够同时在电脑、手机、pad等设备上为用户提供良好的浏览体验。其实下面很多建议都是围绕这一点。让我们来看看小编关于如何在响应式网站中更好地使用gallery或carousel的九条建议。
    1.设置“隐藏”导航菜单。
    在响应式网站中使用图库或多图轮播时，要将传统的导航菜单栏设置为隐藏。这是因为在传统的电脑网站中，一个清晰可见的导航菜单栏是必不可少的，对于手机、pad等移动设备，最好不要显示。所以在导航菜单栏上设置一个按钮是最好的选择。当用户需要导航和指引时，只需要点击它就出来了。当他们不需要时，它可以自动隐藏，这将使用户更容易操作，使浏览体验更流畅。此外，“隐藏”的导航菜单可以避免访问者的注意力分散，因为与网站的内容或背景图片相比，设计巧妙的导航菜单会在一定程度上吸引用户的注意力。通过隐藏“导航菜单”，网站的主页面更加简洁，用户可以更加专注于网站的重心。
    2.避免使用过多的照片。
    当我们在网站上使用网格图库或多图片轮播时，尽量选择水平或方形图片。这种照片既能适应传统的电脑网站，又能让访问者在小屏幕上浏览图片时更加舒适。人像照片适合垂直浏览。虽然它们在手机上看起来不错，但在电脑上横向观看时，它们太小了。所以尽量避免使用人像照片，切记横版照片是最好的选择。如果没有，正方形图片也可以。
    3.支持移动终端上的手势操作。
    在触摸屏设备上，人们更喜欢使用手势。游客自己滑动照片会更受鼓舞，因为这种体验与他们息息相关，更真实。千万不要在移动设备上使用箭头之类的导航元素，真的很无聊。反之，支持游客用手指上下左右滑动图片不是更自然吗？
    4.避免在移动端使用Lightbox。
    Lightbox是一个流行的图片浏览效果，可以实现很多功能，比如根据窗口大小自动缩放图片，幻灯片放映，内容预加载，渐变等等。如果我们需要在网站上使用大量产品细节的照片，那么Lightbox就可以大显身手了。不过这种效果其实更适合传统的电脑网站。在手机等屏幕较小的网站上使用，可能会带来不好的用户体验。例如，当Lightbox的大小与网站的整体大小不匹配时，用户可能找不到退出界面，或者照片可能无法很好地显示。小菲在这里说的只是为了避免使用。如果你确定要设计lightbox，也可以尝试一下。
    5.导航菜单不应该太突出
    当我们想使用幻灯片图片传送带时，导航菜单就很方便了。为图片设置导航，让游客可以按照自己的节奏浏览图片，点击进入-获取信息-退出离开，游客不能等着一个旋转木马才能看到某张图片。但是，当我们在响应式网站中使用导航元素时，需要注意几点:导航点不要挡道，不能覆盖任何文字或链接；不要在网站中使用复杂的导航元素，这会分散用户的注意力，使页面布局看起来混乱。所以记得给可以点击跳转的轮播图片设置一些导航点，加上前进后退键，就够了。
    6.不要把图片和视频混在一起。
    通常，一个网站同时拥有不同多媒体形式(如图片和视频)的用户是可以接受的。但是尽量把图片和视频放在不同的区域。这是因为如果我们将图片和视频混合在一起，用户可能会在公共场合浏览网站图片，不小心点击了视频进行播放。突如其来的声音只会让人觉得尴尬。所以，把图片和视频分开，让用户在浏览的时候知道自己面对的是什么。另一方面，在极少数情况下，视频和图片的大小可以保持一致。很多时候，图片和视频之间总会有一些空白或者缝隙，看起来不美观。

    7.图片的显示尺寸不得超过原始尺寸的最大宽度。

    这真的很重要。当我们在大于原始尺寸的空间中填充图片时，图片会因像素问题而失真。这会影响用户的浏览体验，如果恰好产品图片失真，给访问者造成视觉上的误差，访问者的购买欲望就会降低，网站的转化率也会降低。一般来说，对于移动设备来说，图片完全填满超出原尺寸的空间是不会有问题的，但是对于传统网站来说，我们还是需要设置图片的宽度，最好不要超过图片的原尺寸。

    8.图像缩放(缩小图像) 。
    如果我们需要在carousel或gallery中使用图像缩放，我们甚至可以设置图像的确切大小来最小化图像，而不是放大图像。设置图片的确切大小一般是通过控制某个属性的百分比来实现的。如果图片的一个属性设置了百分比，最好将另一个属性设置为自动，这样图片可以更加灵活，更好的适应不同的浏览器。例如，如果我们希望图片覆盖浏览器宽度的50%，我们可以将图片的宽度设置为50%，将图片的高度设置为自动。
    9.避免使用图片标题。
    虽然添加字幕或其他形式的文字描述可以丰富图片的信息，但在响应式网站上使用这些文字会给我们和用户带来很多麻烦。第一个问题是图片的文字很难在移动设备上很好的呈现。由于智能手机等移动设备的屏幕相对较小，在图片中添加文本会使网站看起来密集而杂乱。另一个问题是，使用图片文字需要我们在网站设计中考虑很多元素:如何在文字中断句？需要多大的空间？几个段落怎么配图比较好？而且，如果文字叠加在图片上，要注意放在哪里，因为文字的颜色和图片相似时，访问者可能很难识别文字，所以要注意文字和图片颜色的区别。但是图库或者转盘里的图片比较多，每张图片都不一样，我们具体实现起来可能比较费时间。
    看了这么多建议，你有什么想法吗？记住:作为站长，我们需要从用户的角度出发。避免这些错误会让访问者更喜欢我们的网站。你准备好了吗？让我们做一个响应式的网站吧！起飞自助网站平台可以给你提供很多漂亮的幻灯片模板。它采用真正的响应技术，一旦编辑就可以在所有设备上使用。不仅建站快，对搜索引擎优化也有帮助，让你分分钟做一个高大上的幻灯片。让我们行动起来！