Google 设计师分享: 7 个您需要收藏的设计资源
作者 / Ryan Warrender, Product Partnership and Design, Google
我的职业生涯大体上是在做两件事情: 设计网络体验，然后找机会把它打磨得更好。我有幸曾经与很多行业中的顶尖 Web 开发团队合作，其中每个团队都有独特的需要解决的项目问题，以及解决问题时面临的资源限制。所以有些时候，想打造直观、可靠、快速和引人入胜的 Web 体验似乎显得十分困难。如今在网络上有不少免费的资源和工具出现，这也让今天的设计师们轻松不少。我希望本文里分享的这些资源和工具能尽可能地帮助到您和您的团队。
1. Web.Dev & 2. Lighthouse
△ Lighthouse 生成的性能表现报告
如果您光是打开自己的页面时就很花时间，那想要高效地进行改进就无从谈起了。有时候，想要找到特定页面渲染缓慢的原因可能是十分困难的事。改进的最佳方法是退后一步，用另一种视角来进行观察。Web.Dev 适用于每个 Web 开发团队。Web.Dev 的核心是 Lighthouse，这是一个开源的自动化工具，旨在提高您的网页的质量。您可以针对任何页面运行 Lighthouse 检查。此工具提供有关性能、可访问性、渐进 / 异步式 Web 应用等方面的详细报告。
您的团队应考虑设置跨需求 / 高效率运行的相关指标，并直接将 Lighthouse 里给出的建议添加到产品的 Todo 事项中。如果您的产品路线图上包括了提升性能表现这一项 (如果没有，请务必加上)，那么这个工具就会成为您最好的朋友。如果您仍然需要更多资源和知识来进一步提高网站速度，Google 也有给出一份非常完整的检查清单:
推荐考虑的性能指标:
< 2s - First Content Paint (FCP)
< 3 - Speed Index (SI)
< 5 - Time to Interactive (TTI)
哪些人会需要这个工具？
所有人。产品经理、工程师、设计师、营销人员。
Web.Dev
https://web.dev/
Lighthouse
https://developers.google.cn/web/tools/lighthouse/
Google 知识库 - 如何提升性能表现
https://developers.google.cn/web/fundamentals/performance/speed-tools/pdf/Infographic-How_To_Think_About_Speed_Tools.pdf
3. Gallery
想要设计一个成功的网站，很关键的一点是获得同行和用户的反馈。Gallery 简化了产品设计时的组织和协作流程。这个由 Material Design 驱动的项目是任何 UX 设计师必备的工具。该协作工具可以让您快速有效地上传设计作品，获取反馈并进行迭代。UI 非常容易使用，特别是当您是 G Suite 用户的时候。另外，Gallery 在 Android 和 iOS 平台上都可以使用。
哪些人会需要这个工具？
设计师和产品经理
Gallery
https://material.io/tools/gallery/
4. Workbox
想要构建一个渐进 / 异步式的 Web 应用 (Progressive Web App, PWA)？Workbox 可以让您轻松上手。伴随着 PWA 强劲的发展势头，开发者们正在寻找构建最佳 Web 应用的方法。Workbox 拥有细致的逐步代码教学以及大量最佳实践指南。如果您是开发者，并且考虑将站点更新为 PWA，那么 Workbox 可以说是不二之选。
哪些人会需要这个工具？
产品经理和工程师
Workbox
https://developers.google.cn/web/tools/workbox/
5. Material Design 颜色工具
正打算进行设计改版？或者打算设计新网站？我强烈建议您使用 Material Design Color Tool。这个工具允许您为 UI 创建、共享和应用自定义的调色板。只需输入一个十六进制颜色，它就可以提供完整的包含深色 / 深色等变调的颜色方案。该工具不仅可以帮助您提升品牌形象，还可以确保您的作品能够符合可访问性最佳实践。这个简单有效的工具让您可以轻松地在 Android、iOS 甚至 CodePen 上共享设计成果。另外，如果打算从颜色进阶到样式风格设计的话，我还强烈推荐 Material Theme Editor。
哪些人会需要这个工具？
设计师
Material Design Color Tool
https://material.io/tools/color/#!/
6. Data Studio
对用户行为以及其产生的数据的充分解读，是精确改善产品的重要前提。另外，迭代 Web 体验需要整个团队共同努力。Data Studio 可以轻松提取出有意义的用户互动数据，而且我自己就看过很多用 Data Studio 打造的精彩的自定义数据报表，比如 Frictionless E-commerce Mobile Dashboard (由我的同行 Damla Cakirca 制作)。Data Studio 允许您为任何团队成员创建定制视图以及添加注释，以便解读数据。它还允许您轻松从电子表格、分析报告、Google Ads 等数据来源导入数据。
虽然听起来很强大，但 Data Studio 的最大优点依然是简单，无论您在团队中的角色是什么，您都可以将原始数据转换为富有洞察力的指标和视点。更棒的是，做到这些压根不需要学习编写代码和查询语句。
哪些人会需要这个工具？
所有人。产品经理、工程师、设计师、营销人员。
Data Studio
https://marketingplatform.google.com/about/data-studio/
Frictionless E-commerce Mobile Dashboard
https://datastudio.google.cn/reporting/1hSATNz_FDxweWwZu59luH-fQSp93xtLm/page/nQN
7. CrUX Dashboard
Chrome User Experience Report (CrUX) Dashboard 是一份综合的用户交互数据报告。报告中包含的所有性能数据均来自您的站点的真实用户，这些数据来自已经选择同步其浏览历史记录，并启用了统计数据反馈功能的 Chrome 用户。此工具基于 Data Studio 构建，可以自动同步最新的用户数据，且能够轻松自定义，并与团队中的每个人共享。当然，想要与您的竞品网站进行数据对比也毫无问题。
哪些人会需要这个工具？
产品经理和工程师
CrUX Dashboard
https://developers.google.cn/web/updates/2018/08/chrome-ux-report-dashboard
希望上面分享的这些资源和工具可以简化您的工作流程，并帮助您的团队更好地共享项目目标。如果您在进一步优化性能、可用性和可访问性方面有任何想法或者疑问，请在评论区和我们分享。
推荐阅读