本文档提供了有关如何在您的网站或应用上显示“使用 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 G 图标](https://cdn.statically.io/img/developers.google.cn/static/identity/images/g-logo.png?hl=zh-cn)
错误的按钮设计
![]() 正确做法 按钮边界和配色方案请遵循 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 品牌特征第三方使用准则)。