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

2023-11-09 00:20

本文主要是介绍响应式网页图片库设计的基本规则和技巧,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

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

  

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

 

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

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

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

  

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

 

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

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

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

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

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

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

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

  

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

 

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

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

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

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

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

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

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

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

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

  

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

 

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

  8、图片缩放

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

  

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

 

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

  9、避免使用图片标题

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

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

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

  马海祥博客点评:

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

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

转载于:https://www.cnblogs.com/onlylove2015/p/5642300.html

这篇关于响应式网页图片库设计的基本规则和技巧的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/373229

相关文章

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,以便在文档、邮件或

Mac备忘录怎么导出/备份和云同步? Mac备忘录使用技巧

《Mac备忘录怎么导出/备份和云同步?Mac备忘录使用技巧》备忘录作为iOS里简单而又不可或缺的一个系统应用,上手容易,可以满足我们日常生活中各种记录的需求,今天我们就来看看Mac备忘录的导出、... 「备忘录」是 MAC 上的一款常用应用,它可以帮助我们捕捉灵感、记录待办事项或保存重要信息。为了便于在不同

电脑蓝牙连不上怎么办? 5 招教你轻松修复Mac蓝牙连接问题的技巧

《电脑蓝牙连不上怎么办?5招教你轻松修复Mac蓝牙连接问题的技巧》蓝牙连接问题是一些Mac用户经常遇到的常见问题之一,在本文章中,我们将提供一些有用的提示和技巧,帮助您解决可能出现的蓝牙连接问... 蓝牙作为一种流行的无线技术,已经成为我们连接各种设备的重要工具。在 MAC 上,你可以根据自己的需求,轻松地

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来!这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候,总是会被一些消息推送通知所打扰,这时候,我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯,但很容易被一些网站滥用,导致我们

MySQL基本查询示例总结

《MySQL基本查询示例总结》:本文主要介绍MySQL基本查询示例总结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Create插入替换Retrieve(读取)select(确定列)where条件(确定行)null查询order by语句li

电脑提示Winmm.dll缺失怎么办? Winmm.dll文件丢失的多种修复技巧

《电脑提示Winmm.dll缺失怎么办?Winmm.dll文件丢失的多种修复技巧》有时电脑会出现无法启动程序,因为计算机中丢失winmm.dll的情况,其实,winmm.dll丢失是一个比较常见的问... 在大部分情况下出现我们运行或安装软件,游戏出现提示丢失某些DLL文件或OCX文件的原因可能是原始安装包

Nginx路由匹配规则及优先级详解

《Nginx路由匹配规则及优先级详解》Nginx作为一个高性能的Web服务器和反向代理服务器,广泛用于负载均衡、请求转发等场景,在配置Nginx时,路由匹配规则是非常重要的概念,本文将详细介绍Ngin... 目录引言一、 Nginx的路由匹配规则概述二、 Nginx的路由匹配规则类型2.1 精确匹配(=)2

ubuntu16.04如何部署dify? 在Linux上安装部署Dify的技巧

《ubuntu16.04如何部署dify?在Linux上安装部署Dify的技巧》随着云计算和容器技术的快速发展,Docker已经成为现代软件开发和部署的重要工具之一,Dify作为一款优秀的云原生应用... Dify 是一个基于 docker 的工作流管理工具,旨在简化机器学习和数据科学领域的多步骤工作流。它