简体中文
从代码到画布：Logto 使登录体验设计开源
我们已将登录体验 Figma 资源发布至公共领域，包括全面的身份验证流程设计以及多样的样式和组件。
Ran
Product & Design
Product & Design
我们已将登录体验 Figma 资源发布至公共领域，包括全面的身份验证流程设计以及多样的样式和组件。
在 Logto，我们相信协作和透明的力量。这就是为什么我们很高兴地告诉你，我们已将我们在 Figma 上的登录体验设计开源并供所有人使用。要访问 Figma 资源：
此设计包括两个主要组件：身份验证流程（登录体验）和样式与组件。让我们详细探索每一个。
我们精心设计了适用于移动和 PC 平台的注册、登录和首个社交登录场景的各种组合。每个场景都有相应的控制台配置，让你全面了解身份验证流程。以下是一些场景的预览：
| 注册 | 登录 | 首次社交登录 | |
|---|---|---|---|
| 用户名 | 用户名 + 密码 | 用户名 + 密码 | 社交登录 + 设置用户名 |
| 电子邮箱（最受欢迎） | 电子邮箱 + 验证码 + 密码 | 电子邮箱 + 密码 | 社交登录 + 关联邮箱 |
| 手机号码 | 手机号码 + 验证码 | 手机号码 + 验证码 | 社交登录 + 关联手机号码 |
| 混合邮箱和手机 | 电子邮箱/手机号码 + 验证码 + 密码 | 电子邮箱/手机号码 + 验证码/密码 | 社交登录 + 关联邮箱/手机号码 |
| 仅社交登录 | / | / | 仅社交登录 |
| 忘记密码 | |
|---|---|
| 混合邮箱和手机 | 通过验证电子邮箱/手机号码重置密码 |
我们的设计还包括一组简单多样的样式和组件，使你可以轻松自定义整体 UI 的登录体验。以下是你将发现的内容：
| 简介 | |
|---|---|
| 字体样式 | 我们将字体分类简化为正文、标签、标题和重点的类别。相同的字体样式用于移动和 PC 平台，确保一致性和易用性。 |
| 颜色样式 | 借助调色板和标记，你可以轻松修改主题颜色以匹配你的品牌。我们的调色板使用 Google Material Design 生成，提供了亮色模式和暗色模式，方便设计师理解。 |
| 图标 | 我们包括了涵盖广泛用例的精选功能图标，可以直接使用或轻松替换。此外，我们提供了一系列为社交登录按钮专门设计的社交媒体图标。 |
| 组件 | 我们为移动和网页平台组织了组件，包括品牌、按钮、复选框、对话框、导航、扫条、文本字段和键盘（移动）。 |
但这还不是全部！使用 Logto，你可以跳过上面的琐碎细节，并相信我们能提供无缝集成体验。在 Logto 控制台中，你可以轻松探索方法配置，并将其与品牌的 UI 相匹配。几分钟内，你就能拥有与业务完美契合的自定义登录和注册体验。
Logto 一直致力于提供开源代码服务，但你可能想知道为什么我们决定将这种开放性扩展到设计层面。
我们希望 Logto 不仅对开发人员友好，还能成为 PM 和设计师的最佳朋友。我们相信，通过在整个开发过程中培养更好的协作，可以实现更高的效率、透明度和信任。
虽然 Logto 致力于提供高效的云服务，但它起源于开源社区，并打算在长期内保持公开透明。
随着我们继续对 Logto 产品进行迭代，我们会保持 Figma 设计的更新。我们希望你能利用 Logto 为你的产品创造卓越的第一印象体验，并在品牌上留下持久的印记。
我们重视你的体验和反馈，因此请保持沟通渠道畅通。我们期待你的回音。