从响应式网站的图片怎么展示,延伸开来的响应式网页图片库应该怎么设计这个问题,相信大家都很关注。相比于单个图片,图库的展示无疑更加复杂,牵涉到的变量更多,实现起来也更加麻烦费神。那么,响应式网页图片库设计有哪些注意事项呢?
1、轮播幻灯片:尽量隐藏导航
在桌面端上导航的存在可能没什么,但是在移动端上查看的时候,导航还是尽量隐藏起来,需要的时候再显现。而诸如左右切换的按钮和标明浏览位置的圆点,最好是在光标移动上去之后再显示,这样的设计不仅可以避免用户分心,而且能避免内容和导航元素之间的冲突,降低整体设计的混乱感。
2、让导航元素低调不招摇
如果你使用幻灯片的形式来展现大量图片组成的图片库的时候,导航一定要设计在让他们觉得不碍事的地方。不要让导航的小圆点盖在文本或者链接上,并且避免复杂的控制方式,这样会分散用户注意力,并让整个页面的设计都趋于复杂。可点击跳转的导航小圆点能让用户快速跳转到他们想要去的地方,提升效率,降低无谓的消耗。当然,不要弄的太复杂!平衡最重要!
3、避免使用图片标题
使用图片标题或者其他的附加文字会为你自己和用户增加大量的问题。第一个问题是,它在移动端界面上会强制显现出来。另外一个问题是,它可能会限制你的文字使用,会莫名其妙地覆盖到某些不该覆盖到的地方。图片和文字的对比度总会随着不同的图片而变化,这也是麻烦的地方之一。
4、避免使用大量肖像类图片
如果你设计的图片库是类似网格布局的话,尽量挑选和横向的图片,或者方形的图像,在兼容桌面端设计的同时,还可以让用户在小屏幕上更好地查看。横向是最佳的,如果不行的话,使用方形的图片会是很好的兼容性方案。一个响应式的图片库的设计需要考虑多种因素,请务必牢记用户的不同浏览场景。
5、不要让图片和视频混淆
用户翻看图片的时候,突然发现下一张图片变成了视频,突如其来的声音和额外的流量消耗绝对是他们不愿意碰到的事情!将视频和图片分割开来,让他们知道接下来的会是什么东西,不要让意外发生。
6、确保图片显示尺寸不要超过原始图片的最大宽度
图片尽量不要去填充超过本身尺寸的空间,这样会让图片表现出象素化的失真效果。值得注意的是,很多情况下图片在移动端完全填满某个区块没问题,但是在桌面端的时候,最大也不能超过本身宽度。
7、图片缩放
如果你的图库中的图片要牵涉到图片缩放,那么尽量让图片去缩小,而不是放大。甚至最好是为图片设定精确的尺寸。通常,图片缩放会使用百分比来控制它的大小变化,如果你个属性被设定为按照百分比来缩放,那么其他的相关属性最好设置为自动。
8、在移动端上支持手势操作
在设计响应式图片库的时候,滑动操作等手势操作赋予用户更多的权力,让体验更加逼真。在移动设备上手势交互更加自然也更符合真实的交互体验。
9、在移动端上禁用lightbox效果
Lightbox效果是图片以弹出框的形式呈现出来,能随着屏幕尺寸和鼠标操作来缩放。但是在移动端上的时候,它可能会引起大量的用户体验上的问题:盖住其他的交互控件、无法退出、尺寸不合适等等。
以上就是响应式网页图片库设计的注意事项,当你开始为图片库进行响应式设计的时候,以用户为重心,小心绕过这些坑,会让你的响应式网页更优秀,也更快搞定。