loading...

SKIP 继续

艾易网络高端策划机构

158-3484-2555

news

新闻动态

想让产品加快性能的优化小技巧

2019-08-14

当你在打开网站的时候,在等待加载内容的时间,近半数的人最多等三秒,如果网站 不能在三秒内加载完成,那么很多人会失去耐心会选择离开网站。这对于任何行业来说,都是会损失大量的业务和体验的。

据统计,图片的内容已经占到了互联网内容的总量的62%,也就是超过一半的流量和时间都在用来下载图片。但是从优化的角度来说,图片也绝对是优化的热点与重点之一。

在我负责的项目中,不部分面向的是Web端企业级用户,由于行业的原因,我们实际用的电脑和网络的环境,远远没有大数据中电脑设备的良好的性能,且大多数的企业电脑更新换代的周期长,使大多数的员工用的电脑老旧并且性能也是特别的差。如果让产品运行使用的流畅,产品自身的性能也是特别的重要。作为产品设计师我们应该如何在不影响系统的运行的前提下,使运行更加的快,又如何能兼得美丽与才华并且又不失用户的体验呢?


什么是性能的优化?


性能的优化,简而言之就是在不影响系统正常的运作之下的前提下,使之更快的并且在更短的时间之内完成特定的功能。


优化性能的目的


对于Web产品而言:

· 要是从用户的角度去出发,优化页面可以使页面加载起来更快、对用户的响应会更及时,也能够给用户带来良好的体验。

· 要是从服务商的角度去出发,优化能够使页面请求提升服务器的性能,减少流量, 并且能够节省可观的成本。

总而言之,适当的优化不仅能够改善站点的用户体验并且能够节省相当多的资源。


我们应该如何进行优化


一:图片


  1. 仅在两个元素以上的色彩使用的元素的图片;

  2. 应用“智图”图片在压缩工具压缩图片。


二:iconfont


无图模式:在单一的色彩的图片就可以使用iconfont,一个iconfont可以替代3种状态的图片并且重复性比较高,可以无损的进行拉伸。


三:css


无图模式:圆角、阴影、渐变、简单的几何图形可以使用css的样式,要减少不必要的HTTP的请求。用css圆角替代圆角的图片,可以减少图片的使用。

图片:要了解图片的格式

图片有很多种的格式,并且自身的优缺点决定了在什么环境下使用,我们要在什么场景采取哪种图片的格式,是我们进行的第一步,我们首先从这来入手。

我们用图片的形式俩进行简单的对比

想让产品加快性能的优化小技巧

要减少图片的使用量


如果在Web上图片的调用方式是一张一张的,那么这样就会增加服务器的请求的次数。这样会降低页面的响应的速度,推荐用一下两种方法来优化图片:

css sprites,是一种网页图片的应用处理的方式,是把相关的图片整合到一张图片的文件夹下,这样图片就不会一张一张的加载出来,这是减少图片的请求方法的有效的办法。这样可以降低服务器储存和请求的压力,同时提高了页面的加载的速度,但是缺点就是维护的时候比较复杂。

Opacity,是设置div元素的不透明度的,通过不透明度的处理,在不影响用户体验和设计的目的的情况下,我们就可以使用一张图片来搞定控件的多种的状态,从而会减少使用的环境和网络的请求。那这样做的缺点就是在IE8及以下的浏览器就不支持这样的属性了。


iconfont:矢量图标库


iconfont就是把图标处理成文字在屏幕来显示,有时候的效果并没有想象的那么好,但是对于纯图片的效果还是相当的可人的。iconfont也会受着css的影响,但是要得到大范围浏览器的支持,需要生成TTF、WOFF、EOT、SVG的这四种字体。

矢量图标库还兑跨部门的协作起到了资源与信息的同步的作用,方便产品以后的维护使用。

当在移动端使用iconfont的时候,有很多超过位图的高级的特性,这些特性所带来的就是影响你的设计流程,以及产品的最终的品质。现在移动端的设计越来越复杂,因为现在有很多的不同分辨率,对于自适应的设计来讲,用矢量图标是一种不错的选择。

· 可缩放性的特征:在基于字体的icon是分辨率无关并且可以缩放到任意想要的大小,在渲染的时候会根据目标的设备来进行调整。

· 尺寸iconfont不需要根据不同的分辨率来调整图片的尺寸。

· 具有可维护性:当通过字体的文件你可以很快的组织你的icon,然后在根据自己想要的尺寸来进行调整。

· 具有灵活性:iconfont可以随意的改变颜色,大小,仅仅通过改变几行代码就可以改变颜色、大小等。

· 具有可交互性:由于灵活性能够通过代码来方便的进行操作,所以我们要在不同的状态下来显示对应的不同的效果,来创建动画。


css:网页图片应用处理方式


其实很多的样式都是通过css俩实现的,比如:圆角、渐变、阴影等,代码是属于文本,所以请求的资源比较小。但是加载的和渲染的速度是图片不可比拟的,加载每一张图片都是需要一个HTTP请求的,一个浏览器在同一个域名下请求的数量是有一定的限制的,如果超出了请求的次数,那么就会被阻塞,从而就会延长用户的感知的时间,所以我们要减少请求的次数,这样可以提高页面的速度。

css可以在任何屏幕上都会显示出良好的视觉的效果,无论是多少的分辨率。若软件具有一定的自定义外观的功能,那么css的优势就会显得更加的强大,并且修改一下属性就可以啦。如果要是在后期来维护的话,也是比较方便的。


产品要是使用iconfont+css+图片的优化


· 图片:LOGO要用智图压缩优化

· iconfont:要是单色的图标要使用iconfont。

· css:圆角、背景、有色彩的图片、背景、输入框、表格、隔行变色、圆角的按钮等。


结论:

在产品的设计的过程中,我们要慎重的选择设计的方式,要避免加载的时间过长而用户选择离开,从而影响整个产品的体验。

我们设计师在设计的时候要多多的站在用户的角度去考虑,要将用户的体验贯穿到整个产品的环节中。


小结

其实优化的方法有很多种,在本文说的只是选择了一种,我们最终的目的就是为了提高产品的响应的速度。所以要降低图片的使用的次数,要提高产品的性能。

从css的整合到优化,再到iconfont字体化的应用,在到css的呈现,我们无需增加成本或者投入人力,只是需要从方法上改变,就可以提升响应的速度了。

其实好的设计是产品成功的标准,产品的优化是从设计先开始的,我们要在接下来的工作中,也会不断的优化和运用这些方法的,我们要慢慢的总结沉淀与提升,要为产品的设计做出贡献。

ewm

有类似的需求 我们聊一聊

我也有同样的需求
载入

正在为您提交.....