本文档提供了有关如何在您的网站或应用上显示“使用 Google 帐号登录”按钮的指南。您的网站或应用必须遵循以下准则才能完成应用验证流程。
我们的 Google 身份服务 SDK 会呈现“使用 Google 账号登录”按钮，该按钮始终符合最新的 Google 品牌推广指南。我们建议您在网站或应用中显示“使用 Google 帐号登录”按钮。如果您无法使用由 Google 呈现的按钮选项，可以呈现 HTML 按钮元素、下载我们预先批准的品牌资产，或者视需要创建自定义“使用 Google 帐号登录”按钮。
渲染 HTML 按钮元素
我们提供了一个 HTML 配置器，可让您自定义“使用 Google 账号登录”按钮的外观。然后，您可以下载一个 HTML 和 CSS 代码段，用于在您的网站上呈现该按钮。生成 HTML 按钮元素
下载预先批准的品牌图标
除了使用自定义图片按钮之外，您还可以下载我们预先批准的“使用 Google 帐号登录”按钮，该按钮采用 PNG 和 SVG 格式，并面向所有平台提供。提供的图片按钮支持标准模式和图标模式，包含以下样式选项：
- 主题：浅色、中性、深色
- 形状：矩形、球形
| 主题 | 按钮 | 说明 |
|---|---|---|
| 轻 |
|
标准（浅色主题）矩形“使用 Google 账号登录”按钮 |
| 深色 |
|
标准深色主题背景药丸形状“使用 Google 帐号登录”按钮 |
支持的按钮模式
| 轻 |
|
|
| 深色 |
|
|
| 自然 |
|
|
创建自定义“使用 Google 账号登录”按钮
强烈建议您使用我们的 Google 身份服务 SDK 或前面部分中介绍的任何其他选项，因为这可让 Google 用户更轻松地识别 Google 品牌。用户越容易发现操作按钮，就越有可能与之互动。
不过，如果您需要调整按钮以使其与您的应用设计相符，请遵循以下准则。
大小
您可以根据不同的设备和屏幕尺寸缩放按钮，但必须保留宽高比，以免拉伸 Google 徽标。
文字
为了鼓励用户点击该按钮，我们建议您使用号召性用语文字“使用 Google 帐号登录”“通过 Google 注册”或“通过 Google 继续”。应该明确告知用户，他们是使用 Google 凭据登录您的应用或注册您的应用，而不是在您的应用中注册或注册 Google 帐号。
颜色
按钮的默认状态如下所示。该按钮必须始终包含 Google“G”的标准颜色。
| 主题 | 示例 | |
|---|---|---|
| 轻 |
|
填充：#FFFFFF 描边：#747775 | 1px | 内部 字体：#1F1F1F | Roboto Medium | 14/20 |
| 深色 |
|
填充：#131314 描边：#8E918F | 1px | 内部 字体：#E3E3E3 | Roboto Medium | 14/20 |
| 自然 |
|
填充：#F2F2F2 描边：无描边 字体：#1F1F1F | Roboto Medium | 14/20 |
字体
按钮字体是 Roboto Medium，这是一种 TrueType 字体。如需安装，请先下载 Roboto 字体并解压缩下载软件包。在 Mac 上，只需双击 Roboto-Medium.ttf，然后点击“安装字体”。在 Windows 上，将相应文件拖到“我的电脑”>“Windows”>“字体”文件夹中。
内边距
| Android |
|
| iOS |
|
| 网站（移动设备 + 桌面设备） |
|
| 参考 |
|
“使用 Google 帐号登录”按钮中的 Google 徽标
无论文字为何，您都不能更改 Google“G”徽标的尺寸或颜色。它必须是标准颜色版本并显示在白色背景上。如果您需要创建自定义尺寸的 Google 徽标，请从下载包中包含的任意徽标尺寸开始。
错误的按钮设计
 正确做法 按钮边界和配色方案请遵循 Google Material 3 设计准则。 |
 错误做法 单独使用 Google 图标或徽标，没有按钮边界，也没有文本来指示用户操作。 |
 正确做法 对于深色、浅色和中性模式，请为 Google 图标使用 Google 品牌颜色。 |
 错误做法 使用单色版本的 Google“G”作为按钮。 |
 正确做法 选择按钮时应选择正确的颜色模式，以实现无障碍功能和同等显眼程度。 |
 错误做法 将标准颜色的 Google“G”图标放在除浅色、深色或中性之外的彩色背景上。 |
 正确做法 坚持使用具有固定内边距和尺寸的 Google“G”。 |
 错误做法 为按钮创建您自己的图标。 |
 正确做法 如果需要，可将 Google“G”单独用作操作按钮。 |
 错误做法 在按钮中单独使用“Google”一词来表示“使用 Google 帐号登录”操作。 |
有关“使用 Google 帐号登录”品牌的最佳做法
“使用 Google 帐号登录”功能和其他第三方登录选项
“使用 Google 账号登录”按钮应至少与其他第三方登录选项一样突出显示。例如，按钮应具有大致相同的尺寸，且视觉粗细也应相似。
其他准则
如果您请求额外的范围，请采用渐进式授权方式（Android、iOS、Web），请仅在用户开始与需要 API 访问权限的功能互动时，才提示用户进行授权。
如果您申请 YouTube 范围，请使用 YouTube 按钮。
如果您使用 Google Play 游戏服务，另请参阅 Google Play 游戏服务品牌推广指南。
未经 Google 事先书面同意，不得以本文档未明确说明的方式使用 Google 品牌（如需了解详情，请参阅 Google 品牌特征第三方使用准则）。