呼应式规划无疑是当前网页规划在响应式网页设计中，图片库是用户体验的关键环节，尤其对展示美术作品、摄影、电商产品等内容至关重要。范畴傍边，不可疏忽的必要组成部分。而呼应式网页中的图片显现又是老生常谈的问题，许多争论会集在呼应式网站的图片应当怎样展现。继续延伸开来，那么呼应式网站中的图片库应当怎样规划呢？

比较于单个图片，图库的展现无疑更加杂乱，牵涉到的变量更多，所以实现起来也更加费事费神。接下来，我们来看看假如要规划呼应式的图片库，有哪些值得注意的根本规矩和技巧。

1、轮播幻灯片：尽量躲藏导航

在桌面端上导航的存在可能没什么，可是在移动端上查看的时分，导航还是尽量躲藏起来，需求的时分再显现。而诸如左右切换的按钮和标明阅读位置的圆点，好是在光标移动上去之后再显现，这样的规划不只能够防止用户分神，而且能防止内容和导航元素之间的冲突，下降整体规划的紊乱感。

2、防止运用许多肖像类图片

假如你规划的图片库是相似网格布局的话，你可能会尽量选择和横向的图片，或者方形的图像。这样的规划在兼容桌面端规划的一同，还能够让用户在小屏幕上更好地查看。人像类的图片在手机上适合纵向屏幕上阅读，假如横过来的话，图片会显得特别小，阅读会适当不方便。横向是佳的，假如不可的话，运用方形的图片会是很好的兼容性计划。一个呼应式的图片库的规划需求考虑多种要素，请务必牢记用户的不同阅读场景。

3、在移动端上支撑手势操作

触摸屏上运用拾掇操作几乎是用户的本能了。所以，在规划呼应式图片库的时分，滑动操作等手势操作赋予用户更多的权力，让体会更加传神。在移动设备上运用箭头导航太过于乏味、老旧，手势交互更加天然也更符合真实的交互体会。

4、在移动端上禁用lightbox作用

Lightbox作用大概是桌面端网页上常见的图片阅读模式，图片以弹出框的方法出现出来，能跟着屏幕尺度和鼠标操作来缩放。在产品展现的页面傍边，这种图片阅读模式的运用尤其广泛和频繁，可是在移动端上的时分，它可能会引起许多的用户体会上的问题：盖住其他的交互控件、无法退出、尺度不合适等等。

5、让导航元素低沉不招摇

假如你运用幻灯片的方法来展现许多图片组成的图片库的时分，导航就显得尤为重要了。用户肯定不想在等待加载中耗费太多的时间，他们仍然会按照自己的速度点击，翻页，进入，退出，保持，等等。所以，当你要运用导航元素的时分，一定要规划在让他们觉得不碍事的当地。不要让导航的小圆点盖在文本或者链接上，而且防止杂乱的操控方法，这样会分散用户注意力，并让整个页面的规划都趋于杂乱。可点击跳转的导航小圆点能让用户快速跳转到他们想要去的当地，提高功率，下降无谓的耗费。当然，不要弄的太杂乱！平衡重要！

6、不要让图片和视频混淆

通常情况下，不同类型的媒体混到一同没啥问题，可是用户肯定不想翻看图片的时分，忽然发现下一张图片变成了视频，突如其来的声音和额定的流量耗费肯定是他们不愿意碰到的工作！将视频和图片切割开来，让他们知道接下来的会是什么东西，不要让意外产生。

7、保证图片显现尺度不要超过原始图片的大宽度

这一点很重要，尽管很基础，可是仍然需求着重一下。图片尽量不要去填充超过本身尺度的空间，这样会让图片表现出象素化的失真作用。值得注意的是，许多情况下图片在移动端彻底填满某个区块没问题，可是在桌面端的时分，大也不能超过本身宽度。这似乎并不难？可是仍然有许多呼应式页面，当你拉宽阅读器界面的时分，会有图片超出本身尺度来显现。

8、图片缩放

假如你的图库中的图片要牵涉到图片缩放，那么尽量让图片去缩小，而不是放大。甚至好是为图片设定准确的尺度。通常，图片缩放会运用百分比来操控它的大小改变，假如你个属性被设定为按照百分比来缩放，那么其他的相关属性好设置为主动。比方将图片宽度设定为50%，那么高度缩放应当设定为主动。

9、防止运用图片标题

运用图片标题或者其他的附加文字会为你自己和用户添加许多的问题。第一个问题是，它在移动端界面上会强制显现出来。在移动端有限的界面空间上，它可能会和图片挤压到一同，带来紊乱的用户体会。另外一个问题是，它可能会限制你的文字运用。你得想理解它怎样断句，占有多大空间，在桌面端显现和在移动端显现别离是什么样，怎样才正常，太多的变量操控起来会适当费事。图片各不相同，而文字总会不可思议地掩盖到某些不该掩盖到的当地。图片和文字的对比度总会跟着不同的图片而改变，这也是费事的当地之一。性能是底线：即使世界名画，加载超3秒也会流失60%用户。