suriel. 2017-07-31
网站建设
鞍山响应式网站设计中的图片库设计
与单个图像相比,图库无疑更为复杂,涉及的变数也较多,因此麻烦也更多。那么鞍山响应式网站设计中的图片库该如何设计呢?接下来,让我们来看一下设计响应式图片库时应该注意的一些基本规则和技术。
尝试隐藏导航
桌面上可能没有什么可导航的,但是当你查看移动终端时,尽可能的导航或隐藏,当你需要的时候显示出来。如左右切换按钮和指示点的位置浏览,最好是在光标移动显示,这样的设计不仅可以避免分散用户的注意力,而且可以避免内容和导航元素之间的冲突,减少混乱感的总体设计。
避免使用大量肖像画
如果设计一个类似于网格布局的图片库,您可能会尝试选择和交叉图片或正方形图像。这种设计与桌面设计兼容,同时允许用户在小屏幕上更好地查看。手机上的图片类型的肖像适合垂直屏幕浏览,如果交叉,图片会特别小,浏览会相当不方便。水平是最好的,如果不是,使用正方形图像将是兼容性的好解决方案。响应式图片库的设计考虑到许多因素。一定要记住用户的不同浏览场景。
支持移动终端上的手势
在触摸屏上使用清洁操作几乎是用户的本能。因此,在设计响应图片库时,像滑动操作这样的手势给了用户更多的力量,使体验更加真实。在移动设备上使用箭头导航太枯燥和陈旧,手势交互更自然,更现实。
禁用移动终端的lightbox效果
灯箱的效果可能是最常见的图片浏览桌面网页模式。图片显示在弹出框中,缩放屏幕大小和鼠标操作。在产品展示页面中,这种图片浏览方式特别广泛和频繁,但在移动终端中,可能会引起很多问题:封面上的用户体验和其他交互控件不能退出错误的大小等。
不要炫耀低调的导航元素
如果使用幻灯片来显示大量图片库,导航尤为重要。用户当然不想花太多的时间来等待负载。他们仍然按自己的速度按、翻转、进入、退出、保存等等。因此,当您想使用导航元素时,必须设计使它们感觉到的方式。不要让小的导航点覆盖文本或链接,避免复杂的控件分散用户的注意力,并使整个页面的设计复杂化。点击跳转导航小点,让用户快速跳转到他们想去的地方,提高效率,减少不必要的消费。当然,不要太复杂!平衡是最重要的!
不要把图片和视频混在一起。
通常,不同类型的媒体混在一起没有问题,但是当用户不想看图片时,突然发现一张图片变成了视频,突然的声音和额外的流量消耗肯定是他们不愿意触摸的东西!把录像和图片分开,让他们知道接下来会发生什么,不要让事故发生,确保图像显示大小不大于原始图片的最大宽度。这是很重要的,虽然很基础,但仍然需要强调。尽量不要填充超过空间的大小,这样图像会显示像素失真的效果。值得注意的是,在许多情况下,图片完全填充在一个块的移动端,没有问题,但在桌面方面,最大不能超过它自己的宽度。它看起来并不难,但是仍然有很多响应页面,当你有一个宽的浏览器界面时,就会出现超出其大小的图片。
图片缩放
如果你的图库中的图像需要放大,那么尽量缩小图像,而不是放大图像。最好为图片设置精确的尺寸。一般来说,图片大小调整使用百分比来控制它的大小变化。如果您的属性设置为缩放,则其他相关属性最好设置为自动设置。例如,如果图片的宽度设置为50%,那么高度刻度应该设置为自动。
浏览次数: 563 次
文章评论: