设计原则

synced passkeys有 10 项设计原则和 3 项内容原则。为了帮助确保您的最终用户体验易于使用,请让您的团队熟悉这些原则。

UX 原则

FIDO Alliance design guidelines for passkeys principle 1 prompt to create passkeys alongside account related tasks

当人们已经处于账户管理的思维模式中时–比如账户创建、账户恢复或作为账户设置的一部分–他们更有可能将创建密钥的选项视为对网站体验的相关提升,而不是对完成购物等其他核心网站任务的不受欢迎的干扰或障碍。 在登录过程中提示创建密码的功能表现不佳。

FIDO Alliance design guidelines for passkeys principle 2 associate the unfamiliar passkeys with the familiar

2.将不熟悉的事物(密码)与熟悉的事物联系起来。

通行密钥 是一个新术语、一个新的视觉符号,也是消费者的新身份验证方法。 在可能的情况下,通过将通配符与熟悉的概念、视觉效果和经验联系起来,帮助他们理解通配符的性质和价值。 例如,人们对生物识别体验非常熟悉。

FIDO Alliance design guidelines for passkeys principle 3 use proven passkeys messaging and icons before and after os dialogs

3.在操作系统对话框前后使用行之有效的密码信息和图标。

在触发密码键盘操作系统对话框之前,显示与当前任务状态相关的密码键盘信息、图标和操作。 在 passkeys OS 对话框完成或退出后,使用消息和图标显示任务的状态。 这在依赖方(RP)网站和操作系统对话框之间进行了 “握手”,并阐明了操作系统和 RP 如何通过通行密钥共同优化账户访问和安全性,这有助于建立人们对通行密钥新概念的信任和兴趣。

FIDO Alliance design guidelines for passkeys principle 4 allow freedom and choice related to passkeys

为了让消费者能够掌控自己的体验,并对品牌产生信任感,请提供与创建和管理密码相关的明确选项。 允许他们使用或不使用密码创建账户。 允许他们在重置密码时创建新密码,或创建密码匙。

FIDO Alliance design guidelines for passkeys principle 5 follow accessibility principles before and after the use of passkeys

5.使用密码匙前后都要遵循无障碍原则。

通行密钥 以用户可感知的方式呈现给用户时,密钥最容易获得,可以使用辅助技术进行操作,并且对于在使用密钥的整个工作流程中具有各种功能需求的用户来说是可以理解的。 遵守辅助功能准则,例如残障人士可访问 FIDO 部署的准则和基础 Web 内容辅助功能准则 (WCAG)。

FIDO Alliance design guidelines for passkeys principle 6 use a passkey hero prompt consistently across the customer journey

6.在整个客户旅程中始终使用密码英雄提示。

为 passkeys 创建一个 “英雄”,其中包括特定的符号、标题、信息和行动号召。 在客户旅程中与账户相关的时刻,始终使用完整的英雄内容。 例如,使用完整的英雄与只使用 “创建密码 “按钮相比。

FIDO Alliance design guidelines for passkeys principle 7 persist helpful information about passkeys

7.持续提供有关密码匙的有用信息。

在人机界面中保留有关密码匙的有用信息,无需额外点击即可查看。 例如,即使创建了密钥,也要在账户设置的英雄信息中保留密钥 “什么 “和 “在哪里 “信息。 默认显示文本,不要在额外点击下隐藏文本。 这里还有一个例子:因为应该让人们选择禁用密码匙,但他们可能不明白没有密码匙他们将如何登录,所以在 “禁用密码匙 “链接旁边加上简短的说明,说明禁用密码匙的作用。 在人机交互界面中坚持这一描述。 例如,不要把这些信息放在只有在悬停时才会显示的工具提示中。

FIDO Alliance design guidelines for passkeys principle 8 make passkeys a primary option in account settings

8.将密码匙作为账户设置的主要选项。

将通行密钥的显示和交互模式与个人账户设置中的其他身份验证项目(如用户名、密码或 2FA)的显示和交互模式相匹配。 例如,如果“帐户设置”中的其他登录选项标有 H2 标题,则“通行密钥”也标有 H2 标题。

FIDO Alliance design guidelines for passkeys principle 9 display passkeys cards with meaningful content to give shape to passkeys

9.展示有意义的 “通行证卡片”,赋予通行证以意义。

密码是字母、数字和符号的有形组合,而数字密码则不同,人们基本上看不到密码。 在账户设置中显示通行卡功能。 卡内包括密码匙图标、信息和选项,这些都能激发人们的信任感,并让人们放心,他们的密码匙是激活的、可用的和可管理的。 如果某人有两个或更多密码,则每个密码都有自己的卡片。

FIDO Alliance design guidelines for passkeys principle 10 plan your ux in accord with your unique security and business needs

10.根据独特的安全和业务需求规划用户体验。

这些指南侧重于具有 synced passkeys的 FIDO 独有的 UX 概念。 您将在本作品中看到各种形式的身份证明和非 FIDO 身份验证示例。 本指南无意规定身份证明或其他非 FIDO 身份验证机制的安全准则,因为这些准则对每个 RP 而言都是独一无二的,并以其自身独特的业务需求和安全政策为基础。 在整个指南中,请注意这个符号 [ i ],它表示您自己的安全政策和业务驱动因素在哪里起作用。


内容原则

我们的用户体验原则如何应用于内容设计和策略? 我们强调这三大原则,以指导您的 passkeys 内容。 我们还附上了建议,显示了我们在研究中使用的语言。 您可以借用我们测试过的内容,也可以根据贵公司的风格、声音和语调进行调整。

1.将 passkeys 语言与他们熟悉的词语配对。

通行密钥 对许多用户来说是一个新概念。 通过展示通行密钥与他们已经使用的其他方法之间的关系,帮助他们理解这种新登录方法的价值。 例如,“使用通行密钥,您无需记住复杂的密码”或“通行密钥 是您使用指纹、面部或密码创建的加密数字密钥”。

2.在操作系统对话框前后使用清晰的 “握手 “信息。

在操作系统对话框之前发送清晰的 “创建账户 “或 “创建密码 “信息,并在对话框之后发送确认或成功信息,让用户对操作系统密码体验充满信心。 这可以让用户放心,贵公司正与操作系统携手合作,使用密码保护他们的账户。

3.在整个客户旅程中使用通行证信息。

在体验和界面的多个区域使用密码提示和信息,鼓励用户在客户旅程中与账户相关的时刻(账户创建、恢复和设置)尝试使用密码。 从清晰标注的 “创建密码 “按钮,到详细的 “为什么”、”是什么 “和 “在哪里 “的密码信息,不一而足。

创建账户示例内容

FIDO Alliance ux guidelines for passkeys handshake
在帐户创建期间,在操作系统对话框之前和之后使用的“握手”消息的屏幕截图。
FIDO Alliance Figma UI 套件中提供了这些屏幕的可复制内容和可重复使用的设计资源。

在帐户恢复期间因忘记密码而创建密钥

帐户设置

Subscribe to the FIDO newsletter

Stay Connected, Stay Engaged

Receive the latest news, events, research and implementation guidance from the FIDO Alliance. Learn about digital identity and fast, phishing-resistant authentication with passkeys.