响应式网站的主要特征是简单性和适应性。 页面的丰富性主要由图片和内容显示。 没有太多的多余页面效果，但是页面上的图片也收集在图片库中。 您不知道的事情。 响应式设计无疑是当前Web设计领域不可或缺的一部分。 在响应式网页中显示图片是一个普遍的问题。 许多争议都集中在如何在响应式网站上显示图片。 继续扩展，响应式网站中的图片库应如何设计？ 与单张图片相比，图库的显示无疑更加复杂并且涉及更多的变量，因此实现起来更加麻烦。 接下来，让我们看一下要设计响应式图像库时值得注意的基本规则和技术。 1.轮播幻灯片：尝试隐藏导航 桌面上导航的存在可能不算什么，但是在移动终端上查看导航时，导航仍会尽可能隐藏，并在需要时重新出现。 向上移动光标后，最好显示诸如左右切换按钮之类的按钮以及标记浏览位置的点。 这种设计不仅可以避免用户分心，而且可以避免内容和导航元素之间的冲突，并减少总体设计的混乱感。 2，避免使用很多人像图片 如果您设计的图片库类似于网格布局，则可以尝试选择水平图片或正方形图片。 此设计与桌面设计兼容，但也允许用户在小屏幕上更好地查看它。 肖像图片适合在手机的肖像屏幕上查看。 如果将它们水平旋转，图片将显得非常小，并且浏览将非常不便。 风景是最好的，否则，使用正方形图片将是一个很好的兼容性解决方案。 响应式图像库的设计需要考虑许多因素。 请记住用户的不同浏览方案。 3，支持移动终端上的手势操作 在触摸屏上使用整洁的操作几乎是用户的本能。 因此，在设计响应式图像库时，诸如滑动操作之类的手势操作将为用户提供更大的力量，并使体验更真实。 在移动设备上使用箭头导航过于繁琐且过时，手势交互更加自然，更符合真实的交互体验。 4.在手机上禁用灯箱影响 灯箱效果可能是桌面网页上最常见的图片浏览模式。 图片以弹出框的形式显示，可以根据屏幕大小和鼠标操作进行缩放。 在产品显示页面中，这种图像浏览模式特别广泛和频繁地使用，但是在移动终端上，它可能会引起很多用户体验问题：覆盖其他交互式控件，无法退出，尺寸不合适等。 5.让导航元素保持低调和张扬 如果使用幻灯片显示包含大量图片的图片库，则导航尤为重要。 用户当然不想花太多时间等待加载，他们仍然会以自己的速度单击，翻页，进入，退出，保持等。 因此，当您要使用导航元素时，请务必将其设计在不会妨碍导航的地方。 不要让小的导航点覆盖文本或链接，并避免使用复杂的控制方法，这会使用户分心，并使整个页面的设计趋于复杂。 可单击的导航点使用户可以快速跳转到他们想要去的地方，提高效率并减少不必要的消耗。 当然，不要太复杂！ 平衡是最重要的！ 6.不要混淆图片和视频 通常，混合不同类型的媒体没有问题，但是当用户不想看图片时，他们突然发现下一张图片变成了视频。 突然的声音和额外的数据消耗绝对不是他们想要触摸的。 发生了什么！ 将视频和图片分开，让他们知道接下来要发生什么，不要让事故发生。 7.确保图片显示尺寸不超过原始图片的最大宽度 这个非常重要。 尽管这是非常基础的，但仍需要强调。 图片不应填满尽可能超过其自身大小的空间，这将使图片显示像素化失真效果。 值得注意的是，在很多情况下，图片可以完全填满移动终端上的特定区域，但在台式机终端上，最大值不能超过其自身的宽度。 似乎并不困难？ 但是仍然有很多响应页面。 扩大浏览器界面时，将显示超出其自身尺寸的图片。 8.图片缩放 如果图库中的图片涉及图片缩放，请尝试缩小图片而不是放大图片。设置图片的确切尺寸。 通常，图像缩放将使用百分比来控制其大小变化，如果将属性设置为根据百分比进行缩放，则其他相关属性最好设置为自动。 例如，如果图像宽度设置为50％，则高度缩放比例应设置为自动。 9，避免使用图片标题 使用图像标题或其他附加文字会给您自己和用户增加很多问题。 第一个问题是它将被迫出现在移动界面上。 在移动终端的有限界面空间中，它可能会与图片一起被挤压，带来混乱的用户体验。 另一个问题是，它可能会限制您的文本使用量。 您必须弄清楚它如何打断句子，占据多少空间，在桌面和移动终端上显示什么以及它是正常的。 太多的变量可能很难控制。 图片是不同的，文本总是会覆盖一些不应该被莫名其妙地覆盖的地方。 图片和文本之间的对比度总是随不同的图片而变化，这也是麻烦之一。 结论 注意不要犯大错。 今天提到的规则并不复杂，但是当您开始对照相馆进行响应式设计时，这些零散的问题开始出现，影响了整个设计和意外地方的体验。 关注用户并谨慎地绕开这些陷阱将使您的响应式网页变得更好，更快。 至