织梦模板下载_织梦企业模板_网站源码下载 - AB模板网

AB模板网

响应式网站如何设计网页上的图库?

2021-09-07 00:14分类:建站教程 阅读:

 

  响应式网站最主要的特点就是简单且适应性强,页面的丰富度大多是靠图片和内容展示出来,没太多冗余的页面特效,但页面上的图片采集在一个图片库中的设计也有你不了解的需要注意的地方。

  响应式设计无疑是目前网站设计范围当中,不可忽视的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,很多争论集中在响应式网站的图片应当如何展示。继续延伸开来,那样响应式网站中的图片库应当怎么样设计呢?

  相比于单个图片,图库的展示无疑愈加复杂,牵涉到的变量更多,所以达成起来也愈加麻烦费神。下面,大家来看看假如要设计响应式的图片库,有什么值得注意的基本规则和方法。

  1、轮播幻灯片:尽可能隐藏导航

  在桌面端上导航的存在可能没什么,但在手机端上查询的时候,导航还是尽可能隐藏起来,需要的时候再显现。而诸如左右切换的按钮和标明浏览地方的圆点,最好是在光标移动上去之后再显示,如此的设计不仅能够防止用户分心,而且能防止内容和导航元素之间的冲突,减少整体设计的混乱感。

  2、防止用很多肖像类图片

  假如你设计的图片库是类似网格布局的话,你可能会尽可能挑选和横向的图片,或者方形的图像。如此的设计在兼容桌面端设计的同时,还可以让用户在小屏幕上更好地查询。人像类的图片在手机上合适纵向屏幕上浏览,假如横过来的话,图片会看上去特别小,浏览会相当不便捷。横向是最好的,假如不可以的话,用方形的图片会是非常不错的兼容性策略。一个响应式的图片库的设计需要考虑多种原因,请务必牢记用户的不同浏览场景。

  3、在手机端上支持手势操作

  触摸屏上用整理操作几乎是用户的本能了。所以,在设计响应式图片库的时候,滑动操作等手势操作赋予用户更多的权力,让体验愈加逼真。在手机上用箭头导航太过于乏味、老旧,手势交互愈加自然也更符合真实的交互体验。

  4、在手机端上禁用lightbox成效

  Lightbox成效大概是桌面端网页上最容易见到的图片浏览模式,图片以弹出框的形式呈现出来,能伴随屏幕尺寸和鼠标操作来缩放。在商品展示的页面当中,这种图片浏览模式的用特别广泛和频繁,但在手机端上的时候,它可能会引起很多的客户体验上的问题:盖住其他的交互控件、没办法退出、尺寸不适合等等。

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

  假如你用幻灯片的形式来展示很多图片组成的图片库的时候,导航就看上去非常重要了。用户一定不想在等待加载中耗费太多的时间,他们依旧会根据我们的速度点击,翻页,进入,退出,维持,等等。所以,当你要用导航元素的时候,必须要设计在让他们感觉不碍事的地方。不要让导航的小圆点盖在文本或者链接上,并且防止复杂的控制方法,如此会分散用户注意力,并让整个页面的设计都趋于复杂。可点击跳转的导航小圆点能让用户迅速跳转到他们想要去的地方,提高效率,减少无谓的消耗。当然,不要弄的太复杂!平衡非常重要!

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

  一般情况下,不相同种类型的媒体混到一块没什么问题,但用户一定不想翻看图片的时候,忽然发现下一张图片变成了视频,突如其来的声音和额外的流量消耗肯定是他们不想碰到的事情!将视频和图片分割开来,让他们知晓下面的会是什么东西,不要让意料之外发生。

  7、确保图片显示尺寸不要超越原始图片的最大宽度

  这一点非常重要,尽管非常基础,但依旧需要强调一下。图片尽可能不要去填充超越本身尺寸的空间,如此会让图片表现出象素化的失真成效。值得注意的是,不少状况下图片在手机端完全填满某个区块没问题,但在桌面端的时候,最大也不可以超越本身宽度。这好像并不难?但依旧有很多响应式页面,当你拉宽浏览器界面的时候,会有图片超出本身尺寸来显示。

  8、图片缩放

  假如你的图库中的图片要牵涉到图片缩放,那样尽可能让图片去缩小,而不是放大。甚至最好是为图片设定精确的尺寸。一般,图片缩放会用百分比来控制它的大小变化,假如你个属性被设定为根据百分比来缩放,那样其他的有关属性最好设置为自动。譬如将图片宽度设定为50%,那样高度缩放应当设定为自动。

  9、防止用图片标题

  用图片标题或者其他的附加文字会为你一个人和用户增加强量的问题。第一个问题是,它在手机端界面上会强制显现出来。在手机端有限的界面空间上,它可能会和图片挤压到一块,带来混乱的客户体验。另外一个问题是,它可能会限制你的文字用。你得想了解它如何断句,占据多大空间,在桌面端显示和在手机端显示分别是什么样,如何才正常,太多的变量控制起来会相当麻烦。图片各不相同,而文字总会莫名其妙地覆盖到某些不该覆盖到的地方。图片和文字的对比度总会伴随不一样的图片而变化,这也是麻烦的地方之一。

  结语

  小心无大错,今天说的规则并不复杂,但当你开始为图片库进行响应式设计的时候,这部分鸡零狗碎的问题开始显现,在乎想不到的地方影响整个设计和体验。以用户为重心,小心绕过这部分坑,会叫你的响应式网页更出色,也更快搞定。

郑重声明:文章来源于网络,仅作为参考,如果网站中图片和文字侵犯了您的版权,请联系我们处理!

上一篇:网站导航设计如何玩创意?

下一篇:网站设计需要需要什么 如此建网站更完美

相关推荐


关注我们

    织梦模板下载_织梦企业模板_网站源码下载 - AB模板网
返回顶部