Farcaster frame 接口指南

设计优秀 Farcaster frame 体验的最佳实践

几周前，我们宣布了 Frog，这是一个用于构建 Farcaster Frames 的框架，作为我们与 Wevm 团队合作的一部分。

今天，我们很高兴开源 Frame Interface Guidelines (Fig)，该指南概述了构建优秀框架体验的最佳实践，灵感来自于苹果的 Human Interface Guidelines。

为什么我们需要最佳实践？

Frames 将任何cast转换为 Farcaster 客户端（如 Warpcast）中的嵌入式交互式应用程序，重新定义内容在社交媒体上的查看、参与和共享方式。

Frames 革新了用户在 Farcaster 中的互动，将静态帖子转变为对电子商务、游戏和其他社交体验有用的互动元素。但它们缺乏优秀的开发者体验，因此我们构建了 Frog 来帮助开发者创建优秀的 Frames。

自从发布 Frog 以来，我们意识到缺乏清晰的指南来指明哪些是框架体验的成功因素或失败因素。目前的 Frame 开发环境，尽管创新，但缺乏一致性，导致用户困惑和陡峭的学习曲线，阻碍了更广泛的采用。

那么，Fig 到底是什么？

受到 苹果 Human Interface Guidelines 作为一致且用户友好的设计标准的启发，我们构建了 Frame Interface Guidelines (Fig)，旨在建立一个通用设计框架，鼓励创造力，同时在不同框架之间保持一致的用户体验。

Fig 中的示例样式

Fig 提供了全面的设计指导，帮助设计出不仅功能齐全而且交互愉悦的 Frames。它涵盖了从布局和排版到用户互动和可访问性等更复杂的元素，确保 Frames 不仅看起来吸引人，而且在不同设备和平台上的功能也顺畅。

我们在代码库的 README 中提供了所有指导，并在一个单独的 Figma 社区文件 中提供，你可以进行分叉并进行操作。我们强烈建议你从头到尾阅读文档，并在构建 Frames 时经常参考。

Fig 中的示例模板

我怎么可以将 Fig 与 Frog 一起使用？

Frog 是我们的框架，用于构建高质量的 frames，以及用于调试和测试的开发者工具。最近，Wevm 构建了 Frog UI，这是 Frog Framework 的扩展，提供类型安全的布局和样式原语，帮助你构建可扩展且一致的动态 Frame 图像界面。

Frog 使得通过 FrogUI frame 原语（类似 SwiftUI 的熟悉 JSX 组件）很容易遵循 Fig，让你快速组合布局，并以系统化的方式管理颜色、图标和排版。

默认情况下，FrogUI 内置的系统Token和图标与 Fig 对齐——非常适合黑客马拉松或原型制作 Frames。此外，FrogUI 可以通过颜色、图标和其他样式进行自定义，以增加你品牌的独特风格。最后，FrogUI 使用响应式宽高比单位，因此如果你在 1:91:1 或 1:1 之间切换，布局和尺寸仍然看起来很好。要开始使用 FrogUI 并了解更多，请前往 frog.fm/ui。

FrogUI 的代码

我怎么可以将 Fig 与 Figma 一起使用？

我们已将以上提到的模板及字体大小和颜色的默认设置发布到 Figma Community，这些设置与 FrogUI 的默认设置良好对应。

Fig 的下一步是什么？

随着我们继续在 Fig 建立的基础上构建，我们期待通过社区反馈和不断发展的需求来充实这些指南。未来的更新将专注于增强交互性和改善可访问性，以进一步提高 Farcaster Frames 的质量。

我们鼓励开发者和设计师在他们的 Frame 项目中采用 Fig，参与其持续开发，并帮助定义加密领域用户界面的未来。访问 Fig 存储库以开始使用 Fig，在 Figma 中进行探索。

无论你是开发者、设计师还是 Frames 爱好者，如果你有兴趣合作或反馈，请与我们联系。你可以通过 achal@paradigm.xyz 或 georgios@paradigm.xyz 联系我们。你还可以在 Warpcast 上找到我们，用户名为 @achal、@gakonst、@awkweb 和 @jxom。

• 原文链接： paradigm.xyz/2024/05/fig...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～