概览
参与用户自选结算方式试行计划的开发者可在提供 Google Play 结算系统的同时,测试提供备选结算系统。该计划旨在帮助我们了解为用户提供这种选择的效果。这些用户体验指南旨在确保提供一致的用户体验,并帮助用户做出明智的决策。
如果您参与该试行计划,则需要显示信息屏幕和单独的结算方式选择屏幕。信息屏幕只需在每位用户首次发起购买交易时向其显示,而结算方式选择屏幕则必须在每次购买交易前都向用户显示。必须根据以下准则为这两个屏幕实现面向用户的消息和界面规范。
![]() 开发者应用 |
![]() 面向用户的信息屏幕 |
![]() 结算方式选择屏幕 |
选择国家/地区和语言
选择用户的国家/地区和语言,以便在以下设计规范中查看对应的界面文本字符串。
- 显示所有国家/地区
- 选择国家/地区
- 欧洲经济区 (EEA)
- Australia
- 巴西
- 印度
- 印度尼西亚
- 日本
- 南非
- 美国
- 显示所有语言
- 选择语言
- 南非荷兰语
- 阿萨姆语
- 孟加拉语
- 保加利亚语
- 加泰罗尼亚语
- 克罗地亚语
- 捷克语
- 丹麦语
- 荷兰语
- 英语
- 爱沙尼亚语
- 芬兰语
- 法语
- 德语
- 希腊语
- 古吉拉特语
- 印地语
- 匈牙利语
- 冰岛语
- 印度尼西亚语
- 意大利语
- 日语
- 卡纳达语
- 拉脱维亚语
- 立陶宛语
- 马拉雅拉姆语
- 马拉地语
- 挪威语
- 奥里亚语
- 波兰语
- 葡萄牙语(巴西)
- 葡萄牙语(欧洲)
- 旁遮普语
- 罗马尼亚语
- 斯洛伐克语
- 斯洛文尼亚语
- 西班牙语
- 瑞典语
- 泰米尔语
- 泰卢固语音乐
- 祖鲁语
面向用户的信息
信息屏幕可以帮助用户了解相关更改的背景,并提供更多信息以帮助用户做出明智的选择。
何时显示
添加备选结算系统后,必须在用户开始进行首次购买交易时向其显示信息屏幕。当同一用户以后再次进行购买交易时,就不需要再显示该信息了。在用户执行明确操作以发起购买交易之后,系统应立即显示信息屏幕。
何时显示价格
必须在显示信息屏幕或结算方式选择屏幕之前,在显眼的位置向用户显示购买价格。
如何显示
信息屏幕必须显示在模态底部动作条中。模态底部动作条与模态对话框类似,它会从屏幕底部向上呈现动画效果,并固定在屏幕底部。它位于底层屏幕中的所有界面元素的上层。底层屏幕会被深色纱罩遮挡,表示它不会响应用户的任何互动。
如需详细了解模态底部动作条的设计和实现,请参阅 Google Material Design。
用户操作
当用户点按应用中用于发起购买交易的按钮或其他界面元素时,底部动作条应触发。用户可以在信息屏幕中执行三种可能的操作:
继续
点按“继续”按钮会关闭信息屏幕,并启动结算方式选择屏幕。
了解详情
点按“了解详情”按钮可在网络浏览器中打开相应的 Google 帮助中心文章。
关闭
如果用户要关闭底部动作条并返回底层屏幕,可以通过以下方式关闭底部动作条:
- 在底部动作条容器范围外的位置点按一下
- 点按 Android 系统的“返回”按钮
在用户关闭信息屏幕或点按“继续”后,无需再次显示信息屏幕。
示例:当用户在应用中点按进行购买时,该按钮会触发信息屏幕。
设计规范
信息屏幕分为 3 个组件:标题、消息和按钮。所有这 3 个组件都是必需的,其包含的文字和界面元素必须与本指南中的定义完全一致。请勿在该屏幕中添加任何其他文字或图像,但您可以在其他屏幕中添加额外的文字和图像。
- 标题
- 文字 1
- 文字 2
- 按钮
- 底部动作条
- 背景纱罩
标题
文字 |
选择国家/地区和语言
|
字体 | Roboto(适用于所有字体) |
字号 | 18sp |
字体颜色 | #202124 |
文字 1
用于突出显示重要信息要点。
文本 |
选择国家/地区和语言
|
字号 | 14sp |
行高 | 20 |
字体颜色 | #5F6368 |
文字 2
用于显示优先级较低的次要信息。
文字 |
选择国家/地区和语言
|
字号 | 12sp |
行高 | 16 |
字体颜色 | #5F6368 |
按钮 1
文字 |
选择国家/地区和语言
|
文字对齐方式 | 居中 |
字号 | 14sp |
字体粗细 | 中 |
字体颜色 | #01875F |
背景颜色 | #FFFFFF |
尺寸 | 高度:36;宽度:根据容器进行缩放 |
角半径 | 4dp |
边框 | 1dp,#DADCE0 |
关联 | 链接到 Google Play 帮助文章 |
按钮 2
文本 |
选择国家/地区和语言
|
文字对齐方式 | 居中 |
字号 | 14sp |
字体粗细 | 中 |
字体颜色 | #FFFFFF |
背景颜色 | #01875F |
尺寸 | 高度:36;宽度:根据容器进行缩放 |
角半径 | 4dp |
关联 | 链接到结算方式选择屏幕 |
底部动作条
尺寸 | 高度:可变,宽度:100% |
角半径 | 8dp、8dp、0、0 |
背景 | #FFFFFF |
内边距 | 左:24dp,右:24dp,上:32dp,下:24dp |
Z 轴高度 | 8dp |
横向
在横向视图中,底部动作条的宽度大于纵向视图中的宽度,但在其他方面都遵循相同的设计规范和功能。
底部动作条 | 宽度:最大 500dp,内边距:24dp |
标题 | 与纵向视图相同 |
消息 | 与纵向视图相同 |
按钮 | 高度:36;宽度:根据容器进行缩放 |
结算方式选择屏幕
结算方式选择界面向用户展示两种结账选项,用于完成购买交易。为了帮助用户做出明智的决策,每个结算服务选项还会向用户显示可用的付款方式。在用户做出选择后,他们将继续通过所选的结算系统完成购买交易。
何时显示
如果用户已在之前的购买交易中查看过信息屏幕,则在其执行明确操作以发起购买交易后,系统应立即显示结算方式选择屏幕。
如何显示
结算方式选择屏幕必须显示在模态底部动作条中,并遵循与信息屏幕相同的规范。
均等的视觉呈现
应以公平、均等的方式呈现备选结算系统和 Google Play 结算系统的按钮。这包括但不限于相同的按钮大小、文字大小/样式、点按目标和图标大小。请勿添加本指南中未定义的任何其他文字、图片或样式更改。
示例:当用户在应用中点按进行购买时,只有当用户已在之前的购买交易中查看过信息屏幕时,该按钮才会触发结算方式选择屏幕。
设计规范
结算方式选择屏幕包含 4 个不同的组件:标题、说明、开发者按钮和 Google Play 按钮。您必须使用所有组件,并且这些组件包含的文字和界面元素必须与本指南中的定义完全一致。请勿在该屏幕中添加任何其他文字或图像,但您可以在您拥有的其他屏幕中添加其他文字和图像。
您可以通过以下链接获取 Google Play 的可视化资源和付款图标。
示例:在纵向视图中,底部动作条的跨度应该与屏幕总宽度相等。
- 标题
- 说明
- 开发者按钮
- Google Play 按钮
- 底部动作条
- 背景纱罩
标题
文字 |
选择国家/地区和语言
|
字体 | Roboto(适用于所有字体) |
字号 | 18sp |
字体颜色 | #202124 |
说明
文本 |
选择国家/地区和语言
|
字号 | 14sp |
字体颜色 | #5F6368 |
文字链接 |
选择国家/地区和语言
|
链接目的地 | 链接到 Google Play 帮助 |
字号 | 14sp |
装饰 | 下划线 |
字体颜色 | #5F6368 |
开发者按钮
- 应用图标
- 应用名称
- 付款方式图标
- 其他指示标志
- 付款方式图标数量上限
- 宽度:360dp
- 宽度:480dp
付款方式图标
根据屏幕宽度进行缩放
按钮容器
边框 | 1pt,#DADCE0 |
角半径 | 4dp |
内边距 | 16dp、16dp、16dp、16dp |
应用图标
尺寸 | 高度:24dp,宽度:可变 |
标题
文本 | {应用名称} |
字号 | 14sp |
字体颜色 | #202124 |
付款方式
尺寸 | 高度:32dp;宽度:20dp |
角半径 | 2dp |
数量 | 上限为 5 个(如果可用的数量超过 5 个,则显示其他指示标志) |
其他指示标志 |
选择国家/地区和语言
|
字号 | 12sp |
字体颜色 | #5F6368 |
Google Play 按钮
- 图标
- 标题
- 接受的付款方式
- 其他指示标志
按钮容器
边框 | 1pt,#DADCE0 |
角半径 | 4dp |
内边距 | 16dp、16dp、16dp、16dp |
应用图标
图片资源 | Google Play Prism |
尺寸 | 高度:24dp;宽度:24dp |
标题
文本 | Google Play |
字号 | 14sp |
字体颜色 | #202124 |
付款方式
图片资源 | 链接 |
其他指示标志 |
选择国家/地区和语言
|
字号 | 12sp |
字体颜色 | #5F6368 |
横向
示例:在横向视图中,底部动作条的宽度大于纵向视图中的宽度,但在其他方面都遵循相同的设计规范和功能。
底部动作条 | 宽度:最大 500dp,内边距:24dp |
标题 | 与纵向视图相同 |
消息 | 与纵向视图相同 |
按钮 | 与纵向视图相同 |
如需进一步了解用户自选结算方式试行计划和常见问题解答,请访问我们的帮助中心。