作为Modular AI的设计主管，我的团队今年从零开始打造了许多AI产品和工作流程。虽然我多年来一直在为开发者设计，但我还是不得不快速提升对一些特定AI主题的理解，并构建我们的人设。所以我想分享一些我自己总结的最佳实践和顶级参考资料。
UI指南原则如下：- 浓缩的信息很受欢迎。与数据科学和金融科技等行业类似，这些角色更喜欢密集的数据——并且它的设计具有强大的层级结构。因此，减少边距吧！
- 解析后的元数据最为清晰。提取元数据并使其可搜索、过滤和排序非常重要。表格、侧边抽屉、标记系统——这些是主要的设计系统元素需要细化的。
- 请记住Jakob定律——用户在其他网站上花费的时间比在你自己的网站上更多。在AI领域有着强大的领导者，例如HuggingFace和OpenAI。如果他们已经建立了模式，并且没有明显的原因偏离，就遵循吧。我知道，我知道，这与基本原则相违背，但是有时需要遵循惯例。这由你们团队和路线图来定夺。
这里有几个专门针对开发者的原则，一个很好的资源是 Github 的设计系统。这里有几个专门针对开发者的原则。
- 只有快才能算真正完成
- 任何新增都会削弱其他部分的作用
- 实用性胜过纯粹性
- 易用性比简洁性更重要
- 不彻底的措施和完全没有一样糟糕
- 促进流畅
- 重视专注胜过添加功能
基于这些原则，这里有一些今年我们团队发布的关键界面。请记住，我的团队有4个人（2名设计师和2名开发人员），我们是一个快速发展的初创团队。我们的设计最初都是以最小可行产品（Minimum Viable Product, MVP）的形式发布，上线后会进行迭代，并且经常基于现有的系统从零到一快速搭建，以尽快获得外部的真实反馈。这些设计都是我和Will Rust共同完成的。设计是一项团队协作的游戏。
我将要介绍的几个屏幕如下：
作为最终用户来说，我们对聊天界面已经非常熟悉了。对于开发者来说，与大语言模型（LLM）进行对话，与在像[Chat GPT]、[Duck Assist]或[Perplexity]这样的AI平台上的用户体验非常相似。关键是简洁明了，快速给出简洁的答案。
主要的区别是，AI开发者也在评估模型的快慢、构建的便捷性、兼容情况以及部署的便捷性。
保持它像传统搜索引擎一样干净，并提供一个微妙的第二层，展示底层的操作，如链接到文档、展示模型速度的基准数据以及每令牌（token）的成本。这是我们Modular的做法。
我们使用的UI框架: https://www.gradio.app/, Mantine, Tailwind 和 Tailwind。
屏幕1 — 简单的“开始聊天吧”介绍页面，告诉用户这是哪个模型，它运行在什么硬件上，以及它处理的流量。
当然，所有功能都支持浅色模式和深色模式。这是深色模式版本的界面，我们将聊天嵌入到了我们的开发者控制台中。
屏幕2 — 聊天记录，显示基准测试数据，包括教程链接、代码链接和此模型部署步骤的下一步指引。
左：扩展的基准结果；右：汇总的基准
第三屏 — 嵌入版本。对于此版本，我们使用 RAG 技术专门对我们的文档进行了 MAX 的训练。我们最初仅将此实验面向内部用户，并计划尽快发布。
对于AI开发者来说，评估GenAI模型非常重要。这通常从浏览模型仓库开始，也被称为“模型花园”、“模型库”或“模型中心”。为了市场营销和SEO的目的，通常这个体验是无需登录的，目的是让用户看到平台支持的所有模型，并鼓励他们登录进行更深入的测试。我们的模型仓库现可访问于builds.modular.com
这里最重要的功能就是搜索和筛选。确保用户能从包含几百到几千个模型的大数据集中找到他们要找的东西。
第 2 屏幕 — 模型详情页。此页面会告诉用户我们有多少种不同型号的变体，如何快速在本地运行模型，以及如果他们想要将其部署到云端的一台 GPU 上，应该如何操作。
与模型参数规模、量化（具体指将数值范围缩小以节省存储和计算资源）、硬件兼容性方面等相关的一些有趣的技术细节（如模型参数规模、量化等）。但最终这一切都归结于整体聚类和建立正确的层级。
夏娃 Weinberg（也就是我）和 Will Rust 设计的
我这里的主要参考有Huggingface（因为他们是这一领域的领导者），Kaggle（因为它拥有一个充满活力的社区），Together AI（因为它是为企业服务的），以及Replicate（因为每天有80,000次访问量）。
一起智能.ai
像所有成功的用户界面一样，要考虑用户的心态。对于AI开发者而言，他们在思考模型时，会想到模型能完成的任务、模型的规模、表现，以及是谁开发的。
产品3：儿童游乐区
一个实验场指的是一个设计用来实验、测试和学习的环境，可以在这个环境中进行实验、测试和学习，而不必担心影响真实系统或生产环境。对于AI开发者来说，具体来说，它将包括实验AI模型、测试提示和调整参数等，无需搭建复杂的环境。
我们刚刚开始运行这个，只谈主要功能并展示一些参考。
主要特点:
- 登录并连接了计费。请注意，通常用户需要添加信用卡，因为你现在正式运行AI计算了。
- 调整滑块来控制模型的参数，甚至可以更换整个模型。
- 根据使用量计费
左：Vercel，右：Google
这完美地融入了整个控制台的体验。
产品4：开发者控制台
从布局和信息架构的角度来看，这和普通的桌面界面差不多。我们使用 tailwind、mantine 和 chartjs 这些工具来制作我们的。
我们对定制编号有点过于热情了
这里有趣味性的UI功能是数据监控仪表板。如果你曾经设计过企业级仪表板，那么其余部分其实都大同小异——角色访问控制、计费、组织层级结构，成员可以邀请其他成员，例如通知、设置等等功能。
瑞典产品5：文档资料好的，让我们来聊一聊正经事——文档！文档！设计文档是每个人最喜欢的事情 :D 这是我们这边的。这是我第一次全权负责设计一个文档网站。我们使用 Docusaurus 来构建我们的网站，并且还使用了 Algolia 搜索，它自带的界面超级好用！
就信息架构而言，我们讨论了几种方法，并最终聚焦于两个核心概念：
- 遵循用户的JTBD（他们想完成的任务）——他们按什么顺序完成这些任务。对我们来说，这些步骤的顺序是：本地测试，提供服务，部署到云端，监控系统，扩容。
- 考虑到我们的产品架构，我们的平台从底层GPU编程开始，一直延伸到云端的自动扩展，涵盖了整个流程。所以这样分类是很有道理的。
无论你选择哪一个，一个强调这一点的落地页都很重要。
我们访问量最大的页面是我们的“快速上手”页面（毫不奇怪！）。我们一直在不断优化这个页面，以实现更快的加载速度和更高完成率。
参考:
Streamlit文档用户指南 （特别是在产品功能较简单时）
而且正如我之前提到的，Algolia搜索真的很赞。我们这边的展示如下。
搜索已处理的内容
搜索页面支持在所有产品和版本中进行搜索
房产品6：食谱和代码 一、产品6：食谱和代码(Note: Given the context, the first line would be more appropriate as "# 产品6：食谱和代码". However, considering the structure of the source text and the expert suggestions, the header needs to be adjusted to avoid the real estate context. The second line provided is an adjustment considering the original form of the source text and the expert suggestion to avoid the real estate term. If strictly adhering to the expert suggestion, the translation should be:)
瑞典语到中文翻译：产品6：食谱和代码(Note: The final version should be:)
产品6：食谱和代码
食谱（或菜谱，注意这里保留英文的 'cookbooks'）是一种有点荒谬但标准化的说法，用来指代逐步说明。在最互动的形式中，它们是笔记本，每一部分都包含可执行代码。在最简单的形式中，它们仅仅是一系列说明，含有可复制粘贴的代码片段。
如我之前提到的，我们非常注重迭代开发，所以我们的最小可行产品（MVP）只是渲染一个GitHub代码示例，在右侧显示元数据。我觉得这个观众更喜欢简洁明了的内容。内容本身已经非常密集，设计不应该喧宾夺主。
这些文章的设计系统中很大一部分是关于如何显示代码，因此，建立一个有序的浅色和深色模式系统是关键所在。我们使用mantine系统来设置自定义颜色，并且你可以参考这篇文章中推荐的最佳实践来为CLI颜色方案着色：https://hamvocke.com/blog/lets-create-a-terminal-color-scheme/
设计代码风格的系统
而且不要忘了用命令行界面（CLI）玩得开心，玩玩ASCII艺术，使用清晰的进度条！对于CLI的用户体验，我会试着教我的工程师朋友十个基本的NNG原则，其中最常用的一个原则是“可见的系统状态”【注：原文链接为https://www.nngroup.com/articles/visibility-system-status/】。
终端里的进度条
例如，使用 ASCII 艺术生成器工具（网址：https://convertcase.net/ascii-art-generator/）。
接下来会怎么样？我真的很兴奋能够创建更多工作流并分享这些工作流。接下来我打算专注于具有代理功能的工作流和云端监控面板。
来自n8n的两个低代码代理工作流图像。
附加图像 — AI 技术人员原型这里是我为Modular创建的通用人物设定，作为参考来说。我们的当前焦点是解决方案构建者。
谢谢支持，敬请期待。
Eve
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
