探索中国CIO人才现状 | 第四季调研报告
如何在设计和性能之间建立平衡
2015-05-21  来源:techtarget

当面临要选择迷人的设计还是流畅的用户体验时,设计师和开发人员常常意见相左。

当想为应用添加新功能时,开发和运营团队也往往观点不一。领先的企业已经开始通过DevOps理念来更快更可靠地部署软件,从而解决这些分歧。在Fluent大会上,Steve Souders说,公司需要采取类似理念,让设计师参与到软件开发的过程中,从而给客户提供迷人并且性能出众的Web体验。

Souders,曾经是Google、 Yahoo和Fastly的核心性能工程师,对性能领域略知一二。最近,他合伙创办了SpeedCurve,意图架起设计师和开发者之间的桥梁。

Souders希望设计师和开发团队能够通力合作,但现状是他们之间存在着看不见的一堵墙。“我们一直在协调和探讨这种情况,如何能够把各方团结在一起,生产出有趣、引人入胜并且愉快的用户体验,”Souders说。

克服鲁莽的设计

如果不考虑性能方面的取舍, 设计师可能就会追求大胆但性能不高的设计。这样的话,即使用户体验看起来很棒,但当要花两分钟才能完成应用加载时,用户就会感到很失望。

这很重要,因为从主流网站,比如Bing的大量数据的分析中发现,收入和用户满意度会随网站延时的增加而下降。此外,谷歌最近公布的页面排名算法的主要变化是,会基于网站在不同设备上的反应速度给出打分。

打破孤岛

一种好的做法是让团队的所有成员在同一地点工作,这样他们就可以从开发新功能起始阶段就一起办公。这样做的目的是为了让所有的团队成员都参与讨论产品的哪些方面对于用户,产品经理和业务需求而言最重要。让他们从一开始就一起工作,有利于增加产品设计阶段的有效交流。“如果中途才开始这样做就会更难达到这个目标,”Souders说。

例如,New Zealand新闻网曾因要创建一个供移动设备使用的网站而咨询Souders,他们要求从移动设备推送的文章能在一分钟内发布到网站上。性能目标作为设计的一部分被特别提出。重点是要思考如何将性能目标以一种明确清晰可落地的方式表达出来,Souders说。

动态应用原型

另一个好的做法就是尽早使用原型。应该尽量避免在Photoshop上做模拟,因为这样做无法验证生产环境中应用的运行状况。Souders提倡企业应该从一开始就用代码处理模拟数据,这样能帮助所有人轻松理解应用的预期行为,并且加速问题的浮现和解决。

创建共享仪表盘也很有用。最初,原型一定是粗糙的,然后随着越来越多的设计和内容填充进来,团队将开始遇到很多问题。早期的数据指标将有助于思考出解决这些问题的方法。

规划可操作的性能预算

设计性能的预算可以反应出不同的UI元素是如何影响性能的。团队需要为此搭建性能预算跟踪系统,从而在应用程序开始超出性能预算时收到报警。Souders推荐的方法是使用Start RenderTime度量的客户仪表盘。

另一种跟踪这个过程的好方法是将页面自带的度量指标展示出来。比如,带有in-page度量指标的网站只能被使用内部IP地址检查的员工或团队成员访问。这会持续提醒大家现在的性能状况。

比起仅仅展示数字的方式,还可以使用图形小部件来渲染这些度量指标,例如使用有颜色的进度条来显示加载页面和渲染动画的各个过程所需要的时间。当某个过程的实际时间超出预期时,可以用红色来表示,也就意味着需要采取行动来改善这个过程。

Souders发现,当问题发生时,相关页面上往往会有很多的数据。当某些方面需要特别注意时可以创建书签从而在团队内共享。这可以帮助设计人员和开发人员更容易得协作,检查所有可能导致性能变差的因素。

选择合适的度量指标

衡量性能的业界标准是页面加载时间,可以使用现代浏览器内建的窗口加载处理器来测量。Souders说,这是一个很容易追踪的指标,在不同的浏览器上都以标准的方式实现,但是它并不能反应现代应用的复杂性。比如,Gmail里的这一指标低估了页面速度,而Amazon却高估了它。

Souders推荐公司考虑使用WebPage Test工具组件来收集开发设计过程中各种各样的集成性能。WebPage Test还包含一个显示页面外观的工具,该工具以幻灯片的形式显示Web页面在不同时间的外观。目前响应式设计的趋势意味着同一个网站在台式电脑,平板电脑和不同屏幕尺寸的智能手机上会以不同的形式呈现。使用幻灯片,可以轻松地比较在不同大小的屏幕上和不同的网络速度情况下网站的加载进度。

综合测量指标很适用于获得实际网页“快速而随性”的视图。同时,它也是真实用户测量的很好的补充方法。W3C的User Timing标准可以为此提供帮助。

各种各样的指标与用户体验有不同的相关度,也就带来了不同的挑战。“当你开始设计时,产品团队就需要跟踪应用中与用户关系密切的指标”, Souders说,“这让你能够专注于网站的主要方面。”