从用户输入网址、点击按钮或是从下拉列表中选择一个条目到页面响应之间的延迟,会影响他们对网站的印象。100 毫秒以内的延迟用户几乎感觉不到,而100~300 毫秒的延迟就会被明显地察觉到。300~1000 毫秒的延迟会让用户感觉到计算机正在工作,但如果延迟超过1000 毫秒,用户的心智就会开始切换到其他事情上去了,俗称溜号。 这些数字很重要,因为整体来说我们所设计的网站正包含越来越丰富的内容:大量的动态元素、庞大的JavaScript 文件、漂亮的动画、复杂的图形等。你可能会关注于优化设计和布局,但这些都是以页面速度为代价的。有些响应式设计的网站会非常不负责任地使用大量用来适配小屏幕所需的HTML 标记和图片,无意之中强迫用户加载了非必要的资源。 设计师在实现响应式Web 设计的同时,已经决定了在不同的屏幕尺寸中如何显示内容。这些决定会显著地影响页面加载时间,而响应式Web 设计为在设计流程中考虑性能提供了一个非常好的契机。 回顾一下你近期的设计。你使用了多少不同的字号?用了多少图片?图片多大,采用的是什么图片格式?你的设计对HTML 标记和CSS 的结构有何影响? 设计师的决策通常决定了网站建设的其他方面。在设计初始阶段需要做出以下决策。 • 颜色和渐变,影响图片格式的选择,是否需要透明度,需要创建多少CSS 精灵图,以及需要使用多少CSS3 属性。 • 布局,影响HTML 结构、类和ID 名称、设计模式的复用能力以及CSS 的组织形式。 • 字体,影响包含的字体文件的大小和数量。 • 设计模式,影响可以在整个网站中复用和缓存的内容,资源何时以及如何加载,以及未来设计师和开发者进行修改的难易程度。 这些决策通常在产品流程的初始阶段就确定下来了,因此对最终的页面加载时间有很大的影响。下面通过例子来说明。假设我们有一个标志,想要叠加在div 上并有淡蓝色的背景,如图1-3 所示。 图1-3:这个示例标志的背景是透明的,叠加在一个div 上,背景为淡蓝色 透明和叠加的需求会影响图片文件的类型和大小。如果设计师在设计阶段考虑页面加载时间,会思考以下问题:“如果我将图片输出为没有透明度的JPEG 或PNG-8 格式将会如何?如果我在PNG-8 文件中使用亚光的淡蓝色将会如何?这对性能将有何影响?” 我们可以测试一下,看看输出为JPEG 和PNG-8 版本的文件大小,如图1-4 至图1-7 所示。 图1-4:原始的带有透明度的PNG-24:7.6 KB 图1-5:纯色背景的PNG-8:5.0 KB 图1-6:亚光的PNG-8:2.7 KB 图1-7:75% 质量、纯色背景的JPEG:20.2 KB 在测试中我们发现,纯色背景和透明度会导致不同格式的文件大小不一。在第3 章中我们将会介绍更多关于图片优化的内容,以及不同选择之间的优劣。 我们有一个良好的契机来尝试潜在的性能优势,度量不同的设计选择对性能的影响。在第3 章中,我们将介绍如何选择和压缩各种图片格式,第6 章中我们会介绍如何在时刻记住页面加载时间的前提下,在设计过程中进行性能的度量并迭代。 新设计和重新设计的网站,其性能都会被这些决策所影响。每一个已经存在的网站都可以进行优化并测试性能。曾经有一个网站,我通过清除非必 需的CSS、优化图片、颜色标准化和重新认真地组织网站模板中的资源, 将加载时间减少到原来的一半。我通过着重减少冗余的HTML 和CSS 来减小HTML、CSS 和图片文件的体积,而不是重新设计整个网站。 在第4 章中你可以阅读到更多关于如何通过优化HTML 和CSS 来优化性能的内容。 即使你的工作职位并不包含设计师这个字眼,如果你负责网站的视觉和体验的决策工作,你的决策就会直接影响网站的性能。性能是大家共同的责任,团队中的每一个人都会影响性能。在做设计决策时考虑性能将对用户产生非常重要的影响。平衡视觉美感和性能在设计流程中应该是首要的任务,在第7 章中会介绍相关内容。这同时也是组织内各部门进行合作的一个好机会,设计师和开发人员协同工作来创造非凡的用户体验。 在下一章中,我们将介绍页面加载速度的基础知识,包括浏览器如何获取并渲染内容。理解用户的浏览器如何同服务器上的文件通信,网站文件的大小如何影响页面加载时间,以及用户对网站性能的看法,将大大有助于你设计网站,并实现美观和性能的平衡。
速度与激情——1.3 设计师对性能的影响
书名: 速度与激情
作者: [美] Lara Callender Hogan
出版社: 人民邮电出版社
副标题: 以网站性能提升用户体验
译者: 赵望野 | 刘 帅
出版年: 2016-9
页数: 160
定价: 49.00元
装帧: 平装
ISBN: 9787115434135