UI入门指南(UI Starter Guide)

14 Aug 2024

你刚刚接到任务，要在 Chrome 中实现一个新的 UI 界面。UX 设计师给了你一些模型图，而技术主管告诉你，他们预计这个任务只需要几天时间。怎么办！你从来没有开发过 UI！该怎么办呢？

深呼吸。我们在这里帮助你。希望以下内容能帮你开始。

一般原则

  1. 无知是可以的。 UI 是一个专业领域，如果你之前没有接触过它，那么你不必知道所有事情。即使你曾在其他产品或网络上进行过 UI 开发，Views 工具包也有一些差异，可能会让你感到困惑。不要花太长时间自己摸索；要尽早并经常提问，避免在代码审查时发现你找到的那个漂亮的解决方案实际上是团队试图消除的模式。

  2. 不要盲从。 就像你可能不了解一样，其他人也可能不了解：特别是你功能的设计者和 Chrome 中其他 UI 的作者。盲目跟随是危险的，所以即使你已经被告知通过了 UX 审查，也要先把你的功能发到桌面 UI 邮件列表。然后，在实现时，研究文档中的最佳实践，确保你的代码符合这些标准，即使你参考的其他代码不符合这些标准。

  3. 支持所有用户。 Chrome 在多个平台上发布，因此你自己应该尝试在多个平台上构建和测试。用户有不同的主题，所以确保你的设计在内置的浅色和深色主题以及自定义主题中都能正常工作。用户可能有不同的需求和能力，因此确保你的设计充分考虑了可访问性。

  4. 为长期构建。 Chrome 的快速发布周期部分是为了不让我们感到有压力要在准备好之前发布更改。对于工程师来说，发布 UI 并让它无人维护很容易，这会增加未来重构和样式更改的难度。因此，期望审查者设置高标准。询问如何按照 MVC（模型-视图-控制器）原则来构建你的类。为你的功能编写自动化测试，包括功能测试和像素测试。并确保你的子团队或其他子团队明确签署了对你编写的代码的所有权，并有一个分类和解决其中 bug 的筛选过程。

必要的背景知识

Views 工具包是为渲染 Chrome 的桌面平台 UI 而专门设计的。它缺乏通用 UI 工具包的许多功能，功能是根据请求添加的，而不是提前规划。随着时间的推移，可能会有更多的 UI 使用 Web 技术构建，因为 Views 创建时的一些原始设计约束变得不再适用，并且难以证明实现现代 UI 工具包重要功能（例如声明式 UI 或样式表）的工程投资是合理的。

熟悉 Views 的最佳方法是构建一个简单的 UI 示例。这应该可以让你了解系统的一些重要部分。在此过程中，如果遇到不理解的术语，可以在词汇表中查找定义（或者如果没有找到你需要的定义，可以提出请求）。

到这个时候，你应该准备好按照以下步骤开始构建你的 UI 了。

构建你的 UI

  1. 确保有一个记录了你正在构建的 UI 描述的 bug，并链接到任何相关的设计文档或模型图。 假设读者不熟悉你的子团队/产品领域，提供足够的背景信息，使新的代码审查者无需点击其他文档就能理解你试图实现的基本想法。

  2. 如果尚未发生，发送邮件到桌面 UI 邮件列表，描述拟议的 UX。 主要目的是让这个列表中有经验的人指出那些在 Chrome 中不典型或实现起来会很困难的设计；这些可能需要 UX 设计师进一步调整。如果你假设 UX 模型图是固定不变的，这个过程可能会让人沮丧，但目的是确保每个人都清楚要在做出什么取舍才能以支持所有用户且在未来可以维护的方式实现这个功能。

  3. 确保你的 UX 模型图是语义化的，而不是物理化的。 也就是说，它们应该解释一个功能的作用以及它如何与其他类似的 UI 相关联（例如，“使用标准对话框边框”或“匹配其他地方使用的单选按钮的强调颜色”），理想情况下通过引用标准化的颜色或布局名称/标记；而不是简单地给出硬编码的值（例如“16 dp”，“Google Grey 300”）。硬编码的值无法系统化，以适应不同字体大小或主题的用户，或者随时间推移 Chrome 系统化设计美学的变化。语义化告诉你如何从 Chrome 中的类中获取上下文中适当的物理值。

  4. 寻找 Chrome 中类似的 UI 实现并研究它们的工作原理，但不要盲目复制它们。 大多数 Chrome UI 都有多年的历史，并且是在当前最佳实践确立和记录之前编写的，因此虽然现有代码可以成为灵感来源，但通常需要修改才能适合重用。

  5. 添加功能标志以控制你的 UI，并在本地实现它。 一些工程师倾向于在实现每个小片段时发送 CL，而其他人则喜欢在本地完成一些基本的工作后再打磨进行审查；无论哪种方式，确保你发送审查的更改足够小以便管理，但仍然提供足够的上下文让审查者理解正在发生的事情。

  6. 在准备代码审查的 CL 时，请运行这个清单。

  7. 在认为你的功能完成之前，确保它有自动化测试。 在大多数情况下，这可以通过使用 TestBrowserUi 或适当的子类来完成；如果该功能是使用 MVC 设计原则构建的，你还可以希望对业务逻辑进行单元测试。如果可能的话，使用 Skia Gold 选择加入像素测试。

进一步资源

如果你是 Chrome 团队的新员工，欢迎！你应该已经收到了这些信息，但这里有一些可能对你有帮助的文档，以帮助你加快对 Chrome 的整体了解；这里有关于一般贡献过程的文档。

你构建的 UI 是否可以调试？是的！这里有一些工具可以帮助你。