内容
- 01.灯塔
- 02.聚合物
- 03. API资源管理器
- 04.颤振
- 05.谷歌GitHub
- 06.木偶
- 07.工作箱
- 08.代码实验室
- 09.色彩工具
- 10.设计冲刺
- 11.人+ AI指南
- 12. Google助手
- 13. PageSpeed见解
- 14. Google上的AMP
- 15. Google DevTools
- 16.材料设计
在网络上工作通常意味着您将以某种形式使用Google。鉴于Google Chrome浏览器在竞争中处于领先地位，因此设计师和开发人员需要考虑他们的项目如何与浏览器一起使用。看起来如何？它支持哪些技术，它的安全性如何，性能如何？
幸运的是，Chrome提供了各种工具来确保任何网站或应用都处于最佳状态。 DevTools使设计人员和开发人员能够深入了解网页：您可以操纵DOM，检查CSS，通过实时编辑对设计进行试验，调试JavaScript并检查性能。 （在此处了解有关如何使用这些Google网络工具的更多信息，如果您是从头开始的话，请参见我们的顶级网络建设者列表）。
但是Google不仅提供浏览器。它具有工具和资源来帮助您设计和开发生活的几乎每个方面。是否想知道如何提高性能？灯塔在这里为您提供帮助。想建立性能更好的移动网站吗？然后向AMP打个招呼。您是否要构建漂亮的PWA？然后，Flutter，Material Design和Workbox准备介入。
使用Google工具，资源，库和框架的美妙之处在于，您知道它们可以与Chrome浏览器（地球上最流行的浏览器）一起很好地工作。有关更多工具，请参见我们的Web设计工具综述。
01.灯塔
性能是网站成功的关键因素，Lighthouse是Google用于改善网页质量的工具（正确的网络托管服务也将有所帮助）。那么，您如何使用Lighthouse，它能做什么？以其最简单的形式，您可以从“审核”选项卡运行Lighthouse，并从包括性能或可访问性和SEO复选框在内的桌面或移动选项中进行选择，以生成具有建议改进的最终报告。
02.聚合物
Polymer以其与Web组件的合作而闻名，但该项目现在扩展了其功能范围，涵盖了一系列库，工具和标准。包括什么？ LitElement是一个易于定义Web组件的编辑器，而lit-html是一个HTML模板库，使用户可以用JS编写下一代HTML模板。另外，您还将找到PWA入门套件，原始的Polymer库和一组Web组件。
03. API资源管理器
Google有可供开发人员使用的大量API库，但要找到所需的东西并非易事。这是Google APIs Explorer介入的地方。有一个很长的列表可以滚动浏览，但是为了更快地访问，有一个搜索框可以过滤API列表。每个条目都链接到参考页面，其中包含有关如何使用API的更多详细信息。
04.颤振
如果您希望通过单个代码库为移动，Web和桌面构建美观的应用程序，那么Flutter可能适合您。该站点是与Flutter合作和进行构建的完整参考。还不知道该怎么办？在大量示例和教程的帮助下，该文档将用户从安装到创建。
05.谷歌GitHub
众所周知，GitHub是用于存储和共享代码和文件的托管平台/存储库。令人高兴的是，Google在平台上拥有自己的位置，可以筛选260多个存储库。使用过滤器可以减少搜索时间，并更靠近您想要使用或贡献的存储库。
06.木偶
Puppeteer内置在Node中，提供了一个高级API，使您可以访问无头的Chrome，有效地访问了没有UI的Chrome，开发人员可以通过命令行对其进行控制。那么，您可以使用Puppeteer做什么呢？有一些选项可用于生成页面的屏幕截图和PDF，自动提交表单以及创建自动测试环境。
07.工作箱
如果您希望构建PWA，那么这是一个很好的起点。 Workbox提供了一个JavaScript库集合，用于向Web应用程序添加脱机支持。一系列深入的指南演示了如何在Workbox中创建和注册服务工作者文件，路由请求，使用插件以及使用捆绑器。此外，还有一组示例缓存策略可供签出。
08.代码实验室
是否需要有关Google产品的实用指南？ Codelabs提供“指导的，动手的编码经验”。该网站整齐地分为类别和事件，可快速轻松地找到您想要的内容。它包括分析，Android，助手，增强现实，Flutter，G Suite，搜索，TensorFlow和虚拟现实。选择一个选项，并获取构建小型应用程序所需的代码和说明。
09.色彩工具
色彩工具是一种简单易用的工具，除了检查可访问性之外，还使您能够创建，共享和应用调色板。用户可以从“材质”面板中选择预定义的面板。只需选择一种颜色，然后将其应用于主要配色方案，切换到次要选项，然后再次选择即可。最后，为这两种方案选择文本颜色。或者，切换到“自定义”以选择您的颜色。然后，切换到“辅助功能”以检查所有功能是否良好，最后再导出调色板。
10.设计冲刺
Design Sprint Kit适用于那些学习如何参与或运行设计Sprint的人。它涵盖了从初学者到经验丰富的冲刺促进者的所有知识库。了解方法论或直接进入计划阶段，包括编写摘要，收集数据和研究以及进行冲刺后的工作。还包括大量资源，例如工具，模板，配方以及提交自己的方法的选项。另外，您可能需要在某个地方存储和共享资源，因此请确保您选择的云存储是正确的。
11.人+ AI指南
本指南是Google People + AI Research计划的成果，旨在为希望构建以人为本的AI产品的人们提供帮助。全面的指南分为六章，涵盖了用户需求，数据收集和评估，思维模型，信任，反馈和正常失败。每章均附有练习，工作表以及实现它所需的工具和资源。
12. Google助手
这是Google Assistant的开发者平台，提供了有关如何将内容和服务与Google Assistant集成的指南。它向您展示了如何扩展移动应用程序，如何以丰富的方式为搜索和助手呈现内容，控制灯，咖啡机以及家庭中的其他设备，以及如何为智能扬声器，显示器和电话建立语音和视觉体验。
13. PageSpeed见解
PageSpeed Insights分析Web内容，然后提供有关如何使其更快加载的建议。只需添加一个URL，单击“分析”按钮，然后等待魔术发生。查看文档，以更好地了解PageSpeed API的工作方式以及如何开始使用它。
14. Google上的AMP
AMP是Google用于创建快速加载的移动页面的工具，该页面有望（希望）达到搜索排名的首位。了解如何创建快速的，用户至上的网站，如何在所有Google产品中集成AMP，如何使用Google AMP Cache来提高AMP页面的速度以及如何将AMP页面与其他Google产品货币化。
15. Google DevTools
每个设计人员和开发人员都知道（或至少应该知道）Chrome附带了直接内置在浏览器中的一组工具。 Chrome的DevTools非常适合检查组成页面的元素，检查CSS，即时编辑页面等等。
Elements选项卡是DevTools的简介。它显示构成所选页面的HTML代码。从所选页面深入了解每个div或标签的属性，然后开始实时编辑。这非常适合尝试设计。检查布局（使用的是Flexbox还是网格），并查看带有示例的相关字体并检查动画。
在其他地方，您可以查看和更改CSS。 “元素”面板上的“样式”选项卡列出了应用于DOM树中当前选定元素的CSS规则。打开和关闭属性（或添加新值）以进行设计试验。这是确保在对实时设计进行任何更改之前确保一切正常工作的理想工具。
您还可以调试JavaScript，优化网站速度并检查网络速度。您可以使用以下快速提示来立即加快工作流程。转到“源”选项卡，单击“新建代码段”并添加常用代码。命名代码段并保存。根据需要重复。现在，您可以获取此代码段，而无需再次编写。
像每个优秀的浏览器一样，Chrome也在不断发展，每个新版本都带来了新功能。找出Chrome状态平台上发生的事情
16.材料设计
开发可能被视为Google的宠儿，但是无论您制作，创建或构建的是什么，开发都必须看起来不错，并为用户提供使他们想要使用它的体验。 Material是Google稳定版的最新成员，但它已经成为一种成熟的设计系统，成为了至关重要的设计套件。
像任何好的设计系统一样，它也有自己的一套准则，您在进入更令人兴奋的内容之前需要仔细阅读这些准则。概述如何使用不同的元素，什么是材料主题，如何实现主题以及可用性指南（包括辅助功能）。在其他地方，可以深入了解Material Foundation，其中包括设计的关键领域，例如布局，导航，颜色，版式，声音，图标，动作和交互。每个类别都揭示了其应做和不应该做的事，以及应该注意的地方。为了给出预期的想法，“布局”类别提供了以下部分：了解布局，像素密度，如何使用响应式布局，包括列，装订线和边距，断点，UI区域和间距方法，仅举几例。
在“设计”部分之后是“组件”，它提供了创建设计所需的物理构造块。这里包括什么？按钮，横幅，卡片，对话框，分隔线，列表，菜单，进度指示器，滑块，小吃栏（这些是屏幕底部有关应用程序过程的简短消息），选项卡，文本字段和工具提示。无疑是全面的组件集合。
并没有忘记开发人员，它提供了有关如何针对不同平台（Android，iOS，Web和Flutter）进行构建的详细信息和教程。最后，还有一个页面专门介绍了许多资源，可帮助您实现所选择的设计。
这篇文章最初出现在网络杂志上。 购买第326期.
