Designing Websites for Performance 如何设计高性能网站 Lynda课程中文字幕

Designing Websites for Performance 中文字幕

如何设计高性能网站 中文字幕Designing Websites for Performance

设计性能网站探索快速模式，提示和技巧的网页设计师
在本文中，Brian Wood向您展示了如何优化和最小化Web图形的大小，实现流畅，无缝的浏览体验
了解字体如何影响页面性能，如何使用可扩展性和较小文件大小的矢量图形，以及用于Web图形的最佳文件格式和压缩方法

您好, 欢迎来到设计Web性能。我叫Brian Wood。
在本课程中, 我们将在设计中查看设计师可以做什么, 以便稍后帮助Web性能。
当我说表演时, 这意味着什么？
那么, 我们正在努力使我们的网站尽可能的小, 并尽可能快地下载, 因为有这么多的设备, 互联网速度和网络, 这些天, 性能是关键。
想想这个：据一项研究, 40％的人放弃了需要3秒钟以上的网站。
现在这可能看起来很疯狂, 但我确定你发现自己坐在那里, 等待一个网站, 最终如果没有加载足够快, 你可以继续前进。
那么他们刚刚失去了一个客户, 或至少有人来看他们的内容, 对吧？
如果您的网页载入速度太慢, 而且性能并不是最佳的, 那么真正可以说明成功和失败之间的区别。
如果你只是在一个关于你的猫的网站, 你如何衡量成功可能不同于说, 一个电子商务网站, 你想卖的产品或服务, 这是你的生活。
当我们建立网站时, 我们会不断测试和调整, 看看我们能够快速下载它们。
有很多不同的方法来做到这一点。
我在这里打开Chrome浏览器, 我要去Lynda.com, 我也有一些名为Web Developer Tools的东西。
这只是许多方法或许多方法可以看到加载多长时间的一种方式。
这有点简化了, 因为在性能, 加载时间, 各种各样的事情上, 这里有很多事情。
优化我们的网站绝对是我们作为设计师和开发人员最关心的问题之一。
所以作为设计师, 我可以做些什么来帮助网站表现？
我很高兴你问。
在设计您的网站时, 无论是从UI UX原型开始, 还是直接进入Photoshop, 无论您打算做什么, 我们都会注意一些事情来设计性能。
首先是字体。
我们将讨论使用字体的一些最佳做法。
图标字体, 我们今天有其他东西, 使事情加载更快, 因为它们实际上是字体的图标。
使用矢量图形设计, 特别考虑SVG, 我们可以做些什么来帮助我们创建这种类型的内容。
对于图像而言, 使用一些最佳格式, 何时何地。
我们可以做更多的事情, 进一步优化我们的图像。
而且, 我总是喜欢与人分享一些网页设计技巧。
我最后提到的是, 如果你正在和一个开发人员合作, 请务必让他们早日参与到你的过程当中。
无论您是线框, UI UX原型, 线框原型, 在Photoshop中直接设计。
但是, 您决定做到这一点, 确保让他们及早参与, 因为他们可以提出潜在的业绩问题。
如果您决定在第一页上运行动画, 并且动画是超级复杂的, 那么他们可能会告诉您, 我们需要简化这里, 因为下载问题。
这是人们看到的第一件事, 我们可能无法在移动设备上, 因为人们正在查看这些网络并下载性能。所以这绝对是要考虑的。
这是人们来说的一件事情, 设计师知道代码吗？我不能打开蠕虫病毒。
在我看来, 我相信设计师应该知道代码, 应该知道什么代码可以做, 不同的技术, 如jQuery, 他们可以做什么, 他们是什么。
你知道事情如何工作。
也许不是编码他们本身, 但作为一个设计师, 你有一个想法是什么进入了很多这样的方式。
事实上, 如果我们要做一个动画, 我们需要一个JavaScript库？
这是一个被广泛使用的, 有人可能已经缓存？
这些都是需要考虑的事情。
所以让我们跳进去, 我们来看看我们的第一件事情：字体。
本课程视频下载地址:如何设计高性能网站