响应式网站制作已经是现在当之无愧的规范配置了,网页的长宽和网页中的图片和图库的响应式设计,是其中的重点难题。它们是网页中最容易见到,也是最直观可见的元素。打开一个漂亮精致的网站,若其中的图片和图库看着如何都和页面不匹配,这种情况恐怕是最叫人抓狂的了。
假如要设计好响应式的图片和图库,以下七个建议可能帮助到你。
1、考虑高宽比
对于绝大部分的网站而言,图片展示的地方都非常相近,大同小异。而设计师的任务,是要确保网站伴随屏幕和设施变化的时候,图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失帧。
2、尺寸和比率的一致性
响应式设计就不可以不说断点。为了照顾不一样的屏幕,大家需要将图片裁剪成不同比率不同尺寸的大小,而这也直接影响着整个设计与开发的设计步骤。
每张图片都应当被裁剪为适当的尺寸,并且放置在理想的地方上,确保它们会以用户期望的样子呈现出来。
3、用轮播图或者图库
轮播图控件和图库控件是网站中最容易见到的图片载体,并且也可以愈加自如的管理图片。特别是当你用了那些比较著名或者适配范围比较广的第三方控件的时候,控制图片元素的粗活重活基本上都会被这类控件接手过去。
4、尽可能防止用图片说明(Captions)
虽然图片说明可以叫你的图片的信息愈加丰富,但它会很直接地影响到网页的运作。尽可能防止用它们,假如实在是需要,尽可能用其他的方法来呈现。
图片的Caption属性加入之后,确实能在桌面端拥有好的渲染成效,但小屏幕上常常问题不断。由于这种小问题而让用户没办法忍受并且离去,并不合算。
5、图片和视频混用要小心
假如网站中同时存在图片和视频类的多媒体,用户和设计者应该都是可以同意的,甚至很多用户已经习惯了如此的设计。
但应该注意的是,即使是在同一个页面中,也尽可能不要让图片和视频同时存在于同一个控件或者区块中。或许如此看着非常炫酷,或许一部分图片和视频可以搭配起来,但更多的视频和图片非常难在尺寸上维持一致,致使总会有一部分图片或者视频会留下空白和间隙。
最好的策略还是将两者分拓展示,防止了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素,而图片和视频尤甚。
6、削减非必须的元素
虽然轮播图和图库控件很好使,但很多设计师常常会往其中添加很多垃圾的内容,最容易见到的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。如此的例子不胜枚举。
通常情况下,用户其实是熟悉怎么样同轮播图这种控件进行交互的。除非你的设计和大家的认知有着巨大的差异,以至于需要用其他的导航方法来引导用户。
尽可能只保留用户需要的元素,把事情简单化,不要给予太多的选择。其实简单化之后的设计可以提高你的实际转化的比例。
7、只用高素质的图片
虽然这个道理不言自明,但它仍然需要反复提醒。假如你没高素质的图片,那样还不如干脆不要用图片得了。目前,高素质、高分辨率的图片比以往任何一个年代都看上去必需和要紧。用户不会花浪费时间间去看一个图片素质低下的网站。大伙的屏幕都已经是视网膜屏幕了,低素质的图片在这种屏幕上看上去愈加没办法直视。既然大伙都在追求顶尖的视觉成效,那样高素质图片无疑是必需品。
当然,找图片也是一项很重点的技能。
名字栏目响应式网站制作中怎么样适当的应用图片设计