通行密钥界面设计

注意： 本文是关于在网络上设计通行密钥用户体验的系列文章之一，该系列文章还包括通行密钥用户历程和向用户传达通行密钥相关信息。

在介绍通行密钥时加入插图和丰富的视觉元素，有助于减轻用户的认知负荷，同时支持您的内容，让体验更具吸引力且更易于理解。

设计组件

通行密钥旨在增强您现有的产品或服务，您应使用用户在您的平台上已经习惯的格式来介绍通行密钥。

例如，如果您的服务使用插页式广告向用户传达更新信息（类似于 Google 账号在登录期间向用户介绍通行密钥的方式），请考虑使用插页式广告格式来介绍通行密钥。

在 Trailblazer 应用中创建通行密钥插页式广告。

或者，如果您的平台通常通过弹出式模态框、通知栏或其他提醒样式告知用户账号变更，那么您可以使用这些熟悉的通知方法来介绍通行密钥的概念。这种方法可确保您在推出新通行密钥功能时，提供一致且人性化的体验。

在银行应用中创建通行密钥的弹出式窗口。

创建描述性通行密钥提示

对于与通行密钥相关的操作，请创建丰富的描述性提示，以便向用户传达更多信息，而不仅仅是带有行动号召的按钮。这些元素可以包括插图、标题、消息和号召性用语。

例如，在为 Google 账号创建通行密钥时，系统不会只显示“创建通行密钥”按钮，而是会显示一个插页式广告，其中包含“简化登录流程”这一号召性用语、通行密钥的简要说明以及一个包含通行密钥图标和各种设备解锁方法的插图。

Google 账号中的通行密钥创建页面

使用规范的通行密钥图标

FIDO 联盟创建了通行密钥图标，您在表示通行密钥时应使用该图标。持续使用此图标有助于用户识别通行密钥，并简化与通行密钥相关的操作。

在界面中使用通行密钥图标：

• 在初始配置或其他提示中表示通行密钥概念，以鼓励用户创建通行密钥或升级为通行密钥，从而实现更安全的登录。
• 在允许用户使用通行密钥登录的按钮或链接中。
• 在设置中，帮助识别可修改或删除的通行密钥。

您可以更改图标颜色，使其与产品、品牌或用户界面的配色方案相符。

在账号设置中显示“通行密钥卡片”

与密码（由字母、数字和符号组成的有形组合）不同，通行密钥对用户来说基本上是不可见的。在账号设置中为通行密钥卡预留空间。卡片内包含通行密钥图标、有关通行密钥的信息（例如创建时间和所用生态系统、上次使用时间）以及用于管理通行密钥的选项。如果某人有两把或更多通行密钥，则每把通行密钥都应有自己的卡片。

Trailblazer 安全设置页面中的通行密钥设置会显示每项通行密钥的详细信息。