课程咨询 :13481013014

南宁UI培训 > 达内新闻 > UI设计常识-图片文件大小
  • UI设计常识-图片文件大小

    发布:dn      来源:dn      时间:2015-11-05

  • 图片文件大小


    当我们在浏览器里输入一个网址,打开这个网页的过程其实是一个下载过程,虽然看起来和下载电影不一样,但是本质没有区别。网页加载的速度会受到很多因素的影响,比如用户的宽带速度、所处地区、网页文件大小等,这其中很多因素都不是UI设计师可以控制的,但是网页文件大小作为一个关键因素,受UI设计师的影响很大。


    举个简单的例子:有一个网站的首页平时页面大小在1M左右(这个1M大小包含了所有HTML+CSS+JS代码文件,还包含了网站上 各种banner图片和商品图片),但是某天有个新手设计师由于经验不足,给了需求方一张600K的banner图片,由于平时这个位置的banner图片基本上都是100K左右,所以这张新的banner上传上去之后,这个页面的大小马上变成了1.5M,页面大小增加了50%,用户要打开这个页面的速度也增加了,用户体验明显变差了。


    上面这个例子看起来很小儿科,但是道理很清楚,中国互联网发展到今天,虽然网速总体都变快了,但受限于宽带费用,还是有很多用户在用1M或2M的宽带,而且可能是多台电脑共享这个带宽,所以如果有UI设计师完全没有注意到这个问题的重要性,甚至对这个问题毫无概念,那只能说明这个设计师还不及格。


    所以UI设计师处理应用在Web上的所有图片时,无论是Banner还是背景还是Icon等,只要是图片,就必须用“存储为Web和设备 用格式”,首先这种方式生成的图片去除了Exif信息,JPEG格式还可以自由调整图片的品质,一般来说品质80以上都是没有必要的,因为肉眼很难分辨出差异,所以品质从70到80这个区间可以由设计师判断(特殊情况可以更低), 计师有责任在保证图片显示效果优秀的情况下尽量压缩图片大小。如果是活动页面的设计,UI设计师可能需要将整个页面用切片工具划分开来,这个时候除了考虑内容切分的合理之外,同时要考虑单张图片的文件大小,因为如果单张图片面积太大,就算把品质降下来,单张图的大小也是有可能超过500K或者更多,这样依然会影响网页加载速度,特别是图片很多的情况下。


    总结一下:
    1、图片存储必须采用“ 存储为web和设备所用格式”。
    2、存为JPEG时品质区间建议在70-80之间(特殊情况可以更低)。
    3、单张图片文件超过100K已经算大了,再高就要考虑性价比了,毕竟带宽也是要钱的。

    推荐文章

上一篇:UI设计常识(屏幕分辨率)

下一篇:ui不是简单的 icon,按钮,背景图片设计

最新开班日期  |  更多

UI培训免费训练营

UI培训免费训练营

开班日期:

第一阶段 GUI 平面设计

第一阶段 GUI 平面设计

开班日期:

第二阶段 AUI 商业美术

第二阶段 AUI 商业美术

开班日期:

第三阶段 WUI WEB界面设计

第三阶段 WUI WEB界面设计

开班日期:

  • 地址:南宁市科园大道东四路远信大厦
  • 课程培训电话:13481013014     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56