在引入通行密钥时结合使用插图和丰富的视觉元素,也有助于减轻用户的认知负担,并为您的内容提供支持,同时使体验更具吸引力且更易于理解。
设计组件
通行密钥旨在增强您的现有产品或服务,您应以用户在您的平台上熟悉的格式提供通行密钥。
例如,如果您的服务使用插页式广告来向用户传达更新(类似于 Google 帐号在用户登录期间向其介绍通行密钥的方式),不妨考虑使用插页式广告格式来介绍通行密钥。
![使用标题为“使用通行密钥更快速地登录”的卡片的 TrailBlazer 着陆页](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-landing-page.png?authuser=9&hl=lv)
或者,如果您的平台通常通过弹出式窗口模式、通知栏或其他提醒样式向用户通知帐号更改,请采用这些熟悉的通知方法引入通行密钥的概念。这种方法可确保在您发布新的通行密钥功能时提供一致且人性化的体验。
![提示用户使用通行密钥设置更快、更安全的密码的弹出式窗口。](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-pop-up.png?authuser=9&hl=lv)
创建描述性的通行密钥提示
对于与通行密钥相关的操作,请创建能够向用户传达更多信息的丰富描述性提示,而不是只使用带有号召性用语的按钮。这些元素可能包括插图、标题、宣传信息和号召性用语。
例如,在为 Google 帐号创建通行密钥时,只有“创建通行密钥”按钮的插页式广告会带有“简化登录流程”的号召性用语、通行密钥的简要说明、一张包含通行密钥图标以及解锁设备屏幕的各种方法的插图。
![Google 账号页面的屏幕截图,其中包含通行密钥选择启用消息。](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/passkey-creation-page.png?authuser=9&hl=lv)
使用规范的通行密钥图标
FIDO 联盟创建了一个通行密钥图标,您在表示通行密钥时应使用该图标。持续使用有助于识别通行密钥并简化与通行密钥相关的操作。
![规范的通行密钥图标。](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/canonical-passkey-icon.png?authuser=9&hl=lv)
在界面中使用通行密钥图标:
- 在新手入门流程或其他提示中显示通行密钥概念,以鼓励用户创建通行密钥或升级到通行密钥,以提高登录安全性。
- 提供可让用户使用通行密钥登录的按钮或链接。
- 在“设置”中,以帮助识别可以修改或删除的通行密钥。
您可以更改图标颜色,使其符合产品、品牌或界面的配色方案。
在帐号设置中显示“通行密钥卡”
密码是字母、数字和符号的真实组合,而通行密钥在很大程度上对用户是不可见的。请在帐号设置中为通行密钥卡片专门留出空间。该卡片中包含通行密钥图标、通行密钥的相关信息(例如创建时间、在哪个生态系统中创建)、上次使用通行密钥的时间,以及通行密钥管理选项。如果有人有两个或更多通行密钥,则每个通行密钥都应有自己的卡。
![“开拓者安全设置”页面中的通行密钥设置屏幕截图。](https://developers.google.cn/static/identity/passkeys/ux/user-interface-design/images/trailblazer-security-settings.png?authuser=9&hl=lv)