马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > 响应式网页图片库设计的基本规则和技巧

响应式网页图片库设计的基本规则和技巧

时间:2016-03-24   文章来源:马海祥博客   访问次数:

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

相比于单个图片,图库的展示无疑更加复杂,牵涉到的变量更多,所以实现起来也更加麻烦费神,接下来,我们来看看如果要设计响应式的图片库,有哪些值得注意的基本规则和技巧。

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

在桌面端上导航的存在可能没什么,但是在移动端上查看的时候,导航还是尽量隐藏起来,需要的时候再显现。

响应式网页图片库设计的基本规则和技巧-马海祥博客

而诸如左右切换的按钮和标明浏览位置的圆点,最好是在光标移动上去之后再显示,这样的设计不仅可以避免用户分心,而且能避免内容和导航元素之间的冲突,降低整体设计的混乱感(具体可查看马海祥博客《常见的七种响应式导航设计模式的优点和缺点》的相关介绍)。

2、避免使用大量肖像类图片

如果你设计的图片库是类似网格布局的话,你可能会尽量挑选和横向的图片,或者方形的图像,这样的设计在兼容桌面端设计的同时,还可以让用户在小屏幕上更好地查看。

响应式网页图片库设计的基本规则和技巧-马海祥博客

人像类的图片在手机上适合纵向屏幕上浏览,如果横过来的话,图片会显得特别小,浏览会相当不方便。

横向是最佳的,如果不行的话,使用方形的 图片会是很好的兼容性方案,一个响应式的图片库的设计需要考虑多种因素,请务必牢记用户的不同浏览场景。

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

触摸屏上使用收拾操作几乎是用户的本能了,所以,在设计响应式图片库的时候,滑动操作等手势操作赋予用户更多的权力,让体验更加逼真。

在移动设备上使用箭头导航太过于乏味、老旧,手势交互更加自然也更符合真实的交互体验(具体可查看马海祥博客《基于滑动维度的交互设计变化》的相关介绍)。

4、在移动端上禁用lightbox效果

Lightbox效果大概是桌面端网页上最常见的图片浏览模式,图片以弹出框的形式呈现出来,能随着屏幕尺寸和鼠标操作来缩放。

响应式网页图片库设计的基本规则和技巧-马海祥博客

在产品展示的页面当中,这种图片浏览模式的使用尤其广泛和频繁,但是在移动端上的时候,它可能会引起大量的用户体验上的问题:盖住其他的交互控件、无法退出、尺寸不合适等等。

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

如果你使用幻灯片的形式来展现大量图片组成的图片库的时候,导航就显得尤为重要了,用户肯定不想在等待加载中耗费太多的时间,他们依然会按照自己的速度点击,翻页,进入,退出,保持,等等。

所以,当你要使用导航元素的时候,一定要设计在让他们觉得不碍事的地方,不要让导航的小圆点盖在文本或者链接上,并且避免复杂的控制方式,这样会分散用户注意力,并让整个页面的设计都趋于复杂,可点击跳转的导航小圆点能让用户快速跳转到他们想要去的地方,提升效率,降低无谓的消耗,当然,不要弄的太复杂,平衡最重要!

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

通常情况下,不同类型的媒体混到一起没啥问题,但是用户肯定不想翻看图片的时候,突然发现下一张图片变成了视频,突如其来的声音和额外的流量消耗绝对是他们不愿意碰到的事情。

将视频和图片分割开来,让他们知道接下来的会是什么东西,不要让意外发生。

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

这一点很重要,尽管很基础,但是依然需要强调一下,图片尽量不要去填充超过本身尺寸的空间,这样会让图片表现出象素化的失真效果(具体可查看马海祥博客《JPG、PNG和GIF图片的基本原理及优化方法》的相关介绍)。

响应式网页图片库设计的基本规则和技巧-马海祥博客

值得注意的是,很多情况下图片在移动端完全填满某个区块没问题,但是在桌面端的时候,最大也不能超过本身宽度,这似乎并不难,但是依然有许多响应式页面,当你拉宽浏览器界面的时候,会有图片超出本身尺寸来显示。

8、图片缩放

如果你的图库中的图片要牵涉到图片缩放,那么尽量让图片去缩小,而不是放大,甚至最好是为图片设定精确的尺寸。

响应式网页图片库设计的基本规则和技巧-马海祥博客

通常,图片缩放会使用百分比来控制它的大小变化,如果你个属性被设定为按照百分比来缩放,那么其他的相关属性最好设置为自动,比如将图片宽度设定为50%,那么高度缩放应当设定为自动。

9、避免使用图片标题

使用图片标题或者其他的附加文字会为你自己和用户增加大量的问题,第一个问题是,它在移动端界面上会强制显现出来,在移动端有限的界面空间上,它可能会和图片挤压到一起,带来混乱的用户体验。

另外一个问题是,它可能会限制你的文字使用,你得想明白它怎么断句,占据多大空间,在桌面端显示和在移动端显示分别是什么样,怎么才正常,太多的变量控制起来会相当麻烦。

图片各不相同,而文字总会莫名其妙地覆盖到某些不该覆盖到的地方,图片和文字的对比度总会随 着不同的图片而变化,这也是麻烦的地方之一。

马海祥博客点评:

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

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/1473.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 响应式   网页设计   图片  

上一篇:十个简单而有创意的网站导航设计案例
下一篇:简约页面设计风格的相关技巧有哪些?

您可能还会对以下这些文章感兴趣!

  • 响应式设计时代该如何进行网站设计

    响应式网站设计可以说是一个全新、未知的领域,所以响应式网站设计者需要不一样的设计思路:要针对内容进行设计,一个成功的网站设计源自精雕细琢,但当进行响应式网站设计时候,我们会发现针对普通网站设计的经典方法已无法适用了,我们进行的Web设计均是针对默认的屏幕大小……【查看全文

    阅读:699关键词: 响应式   响应式设计   网站设计   日期:2015-11-22
  • 如何设计响应式网页中的图片和图库

    响应式网页设计已经是如今网站当之无愧的标准配置了,我们需要响应式的技术来应对日渐碎片化的屏幕尺寸,网页设计师也力图做好这件事情,而网页中的图片和图库的响应式设计,也是其中的重点难点,它们是网页中最常见,也是最直观可见的元素。打开一个漂亮精致的网站,然……【查看全文

    阅读:1161关键词: 响应式   响应式网页   图片   图库   响应式设计   网页设计   日期:2016-11-18
  • 如何利用“自适应网页设计”实现不同的设备上呈现同样的网页

    据百度官方最近发布的《 2013年中国网站运营发展趋势报告 》中数据表明,2012年,PC端网站增速较大,数量较2011年增加29%;PC无线化速度加快,12年PC网站无线化比例达到40%。网络的普及,也逐步的带动了PC网站的发展。而人们上网的方式也变的多样化了,其中比较值得关注……【查看全文

    阅读:7893关键词: 自适应网页设   网页自动调整   日期:2013-02-17
  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:644关键词: 响应式   响应式页面   日期:2016-09-25
  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1049关键词: 设计师   设计技能   日期:2014-11-07
  • 现阶段网页设计潮流的趋势和风格

    一个优秀的网站设计师设计出来的网页要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。如今随着互联网技术的不断革新,也带动了设计行业的的迅猛发展,这使得设计师和开发者有了……【查看全文

    阅读:1003关键词: 网页设计   网页设计潮流   网页设计趋势   网页设计风格   日期:2013-11-09
  • 响应式网站页面的设计需求和设计流程

    根据统计,到2015年,移动互联网的用户数量将会超过桌面用户,除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加,在这种形势下,怎样让我们的网站尽量兼容各种类型的设备,并确保优良的用户体验,这将是越来越重要的问题,通过响应式的设计开发方……【查看全文

    阅读:3888关键词: 响应式   响应式设计   网站设计   日期:2015-12-16
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52191关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1110关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 基于网站色彩设计对用户体验影响的研究

    色彩,对于人类而言,始终属于自然界最神奇的奥妙之一,永远都在激发着我们的好奇心和创造力。在我们生活中无论何时何地,充满着各种多采多姿的色彩,哪里有光,哪里就有颜色。有时我们会认为颜色是独立的:天空是蓝色的、植物是绿色的、而花朵是红色的。但事实上,其实……【查看全文

    阅读:1849关键词: 网站色彩设计   网站设计   用户体验   网站色彩   色彩影响   日期:2013-10-10
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

如何利用极客精神优化网站的网络组件和代码 一个完整的企业网站首页应该具备什么因素?