创建出色 CLI 应用程序用户体验的 3 个步骤

以下是我在 CLI 项目中获得成功用户体验的关键因素。

Business woman on laptop sitting in front of window

图片来源：

图片来源：Mapbox Uncharted ERG， CC-BY 3.0 US

当我和一位队友在会议室交谈时，我们的经理带着其他开发团队成员走了进来。门砰地一声关上，我们的经理透露他有一个重大消息要宣布。在我们眼前展开的是我们将要开发的下一个项目——一个开源 CLI（命令行界面）应用程序。

在本文中，我想分享我在开发过程中学到的东西，特别是希望在开始开发 Datree 的 CLI 之前就了解到的东西。也许下一个人可以使用这些技巧更快地创建一个出色的 CLI 应用程序。

我叫 Noaa Barki。我做全栈开发人员已经六年多了，我来告诉你一个小秘密——我有一种超能力：我的兴趣和专长平均分配在后端和前端开发之间。我根本无法在两者之间做出选择。

因此，当我的经理透露关于我们未来 CLI 的消息时，后端开发人员的我非常兴奋，因为我从未创建过 CLI（或任何开源项目）。几秒钟后，前端开发人员的我开始想，如何在 CLI 应用程序中构建出色的用户体验？

由于 Datree CLI 帮助工程师防止 Kubernetes 错误配置，我的用户主要是 DevOps 和工程师，所以我采访了我所有的 DevOps 朋友，并在网上搜索了关于一般 DevOps 角色的信息。

我们最喜欢的开源资源

以下是我提出的步骤

设计命令
设计用户界面
提供向后兼容性

步骤 1：设计命令

完成战略流程后，就该设计命令了。我认为 CLI 应用程序就像魔术盒——它们拥有以神奇方式工作的强大功能，但前提是你必须知道如何使用它们。这意味着 CLI 应用程序必须直观且易于使用。

我的 CLI 命令六大原则

以下是我设计和开发 CLI 命令的六大原则和最佳实践

1. 输入标志与参数

必填字段使用参数，其他所有字段使用标志。例如，datree test 命令会打印策略结果，假设您希望用户能够将输出打印到特定文件中。如果您使用 datree test {pattern} {output-file}，则很难从读取执行的命令中理解哪个参数是模式，哪个参数是文件路径。

例如，以下命令就会出现这种情况：datree test **/* **.YAML。但是，如果您使用 datree test {pattern} -output {output-path}，则会清晰得多。

注意： 报告显示，大多数用户认为标志更清晰。

2. 枚举样式与布尔标志

最好使用枚举样式标志而不是布尔样式标志，因为这样您（开发人员和用户）需要考虑命令中标志存在或不存在的所有组合。枚举样式标志是假定值的标志。枚举样式标志使实现 Tab 键自动完成变得容易得多。

3. 使用熟悉的语言

请记住，CLI 更多是为人类而不是机器构建的。为您的命令和描述选择真实的语言。

4. 命名约定

使用以单数形式和动词-名词格式命名的 CLI 命令。这允许像祈使句或请求一样读取命令，例如：计算机，启动应用程序！

尽量减少您使用的命令总数，不要急于为新命令引入新动词。这让用户更容易记住命令名称。

5. 提示

提供绕过提示选项。如果需要提示才能完成命令，则用户无法编写命令脚本。为了避免用户感到沮丧，简单的 --output 标志可以成为允许用户解析输出并编写 CLI 脚本的宝贵解决方案。

6. 命令描述

根命令应列出所有命令及其描述。为所有命令提供命令描述（或完全不提供描述），选择您希望其适应的屏幕宽度（通常为 80 个字符宽度），并以小写字符开头。此外，不要以句点结尾，以避免不清晰的换行符或丢失的句点。

步骤 2：设计用户界面

现在您对用户有了明确的定义。您还计划和设计了命令和输出。接下来，是时候考虑使 CLI 应用程序美观、易于访问且易于学习了。

如果您仔细想想，几乎每个应用程序都必须在用户的入职和旅程中处理 UX（用户体验）挑战。Web 应用程序 UX 的如何部分要明显得多，因为您有许多组件库（例如 material-UI 和 bootstrap）可以更轻松地采用标准样式指南和功能流程。但是 CLI 应用程序呢？CLI 界面是否有任何设计约定？如何创建美观且易于访问的 CLI 功能设计？有没有办法使 CLI UI 像 GUI 一样友好？

CLI 应用程序的 UI 和 UX 三大最佳实践

1. 使用颜色

颜色是吸引用户眼球并帮助他们更快地阅读命令和输出的好方法。最推荐的字体颜色是品红色、青色、蓝色、绿色和灰色，但不要忘记背景颜色可以提供更多变化。我鼓励您使用黄色和红色，但请记住，这些颜色通常保留用于错误和警告。

2. 输入-输出一致性

在整个应用程序中保持输入和输出的一致性；这鼓励了可用性，并允许用户快速学习如何与新命令交互。

3. 参数排序

根据参数与命令操作的相关性选择参数的位置。考虑 NestJS 的 generate 命令 nest generate {schematic} {name}，它需要 schematic 和 name 作为参数。请注意，动作 generate 直接指向 schematic，而不是 name，因此 schematic 作为第一个参数更有意义。