clui：构建图形命令行

“命令行接口。一旦这就是我们所拥有的一切。然后他们消失了，取而代之的是我们认为是一个伟大的进步：GUI。 GUI是 - 并且仍然是有价值的，但他们没有扩大到今天的需求和＃39; S系统。所以现在命令行接口再次回来，隐藏在搜索名称下。现在你看到了他们，现在你不要和＃39; t。现在你再次看到它们。随着时间的推移，他们会变得越来越好：标记我的话，这是我对接口未来的预测。“ [1]

Don Norman于2008年写道。从那时起，搜索变得更强大，用户已经更依赖于它 - 在几乎每个流行的数字产品中都存在上下文感知自动完成的信息。然而，传统的CLIS由于他们的学习曲线而从未被最终用户被广泛采用。终端，命令行的主要平台，是令人生畏的，并感觉像非技术人士的黑匣子。此外，仅限文本界面是限制性的 - 它只允许通过语言而不是点击，然后播放我们习惯的手术。命令和旗帜经常有晦涩的名字，拼写错误可能导致隐秘的错误，或者更糟糕，做你没有的东西。

尽管存在这些问题，但CLIL仍然很强大。输入机制始终相同：文本。这是可预测和常数。添加更多命令从开发人员占用最小的努力。用户并未淹没信息 - 您只需在任何给定时刻指定所需的确切命令。然而，这些福利与薪酬相同，必须记住命令以效率为高效。

今天，GUI是最受欢迎的用户界面范式，因为它们会解决上述许多问题。他们使用用于日常对象的视觉隐喻我们用于：桌面，Windows，选项卡，按钮，菜单，文件和文件夹。它们直观，提供了一个小型学习曲线来执行基本操作，如通过拖放移动文件。识别图标比记住动作的名称更快。 GUI的好处源于内存识别，“......指的是我们”认识到“熟悉的事件或信息”的能力“，以及内存召回，”...指定相关细节的检索从记忆里。” [4,5]

可能不会。虽然GUI可能解决大多数CLIS存在的核心可用性问题，但它们＆＃34; ......未能扩展到今天的需求和＃39; S系统＆＃34; [2,3]。您想要为GUI添加功能的那一刻，有关将该功能的位置立即存在问题。它应该在右上角吗？左下方？ NAV栏？标签后面？在侧边栏中？徘徊在徘徊？

您最终有按钮，面板和菜单竞争UI中的空间 - 屏幕房地产。每个像素对主要特征变得越来越有价值。您不需要看看很远，以查看当您需要将数十个功能中包含到一个微小的矩形时会发生什么。

使用简单的轻量级软件有一个原因感觉就像一口气的新鲜空气。像Adobe Premiere这样的专业创意工具往往是如此包装，它们变得不懈，缓慢，丑陋和不专心。 YouTube淹没了促使初学者学习的多部分教程。 Power Users将向您展示其工作流程依赖于键盘快捷键，详细工作区设置，自定义自动化工具和插件以及帮助/搜索栏。

这不是GUI本身的问题，而是一种糟糕的产品缩放的症状，这通常可以影响GUI的密度。 GUI密度最大的问题是将新功能扔进无尽的子菜单，下拉列表，隐藏的设置页面或更糟糕的是，可怕的“更多”按钮（目前瘟疫。也是如此）。一些应用程序尝试使用渐进式披露来减轻这种UI泛滥：随着时间的推移逐渐向用户展示信息，以避免认知过载并使使用情况更清晰[6]。但是，这里的双刃剑是减少UI中的杂乱可能会使功能难以发现。 “简单的UI”并不一定意味着它很容易使用。简单倾向于应该是逐步披露的UI的紧急财产。

关于臃肿的GUI的有趣的是他们乞求搜索。一旦菜单深深嵌套并且面板泛滥你的屏幕，想要寻找一些东西感觉很自然。你不想寻找你需要的东西;你只想要它立即在你面前。然而，搜索的UX可以轻松地浏览深深嵌套的菜单似乎是一个事后。如果是与工具交互的主要方法怎么办？

许多流行的产品和服务正在开始探索此思想。在某种程度上，语音助理是我们必须合成GUI和CLIS的最接近的东西之一。输入是半结构化的自然语言（CLI启发），但输出可以是富媒体和交互式控制（GUI启发）。

当您要求Siri打开警报时，iOS将提出熟悉的GUI元素的部分以进一步互动。来源

还有类似Runner Pro for Sketch（UI设计工具）的插件，允许您快速访问信息和自动设计动作[7]。

在Repl.it，我们的目标是建立一个简单而强大的编程环境，我们每次具有才能添加的IDE功能时都会进入UI可扩展性问题。因此，当它来构建我们的管理工具时，我们决定探索一个新的UI范例。我们经常需要做简单的事情，如在数据库中更改单个值，所以通常更容易直接连接到数据库并运行一些SQL，而不是为其构建新UI。但是，这两个都是不安全的，并不享受陌生的人或CLI的任何人。所以我们问自己，“我们如何在同一界面中以GUI的可平易性结婚CLIS的简洁？”

您应该能够用鼠标使用它。这似乎对Clis作为范例矛盾，因为他们的真实权力来自使用键盘，但能够点击命令是两件事：给初学者有机会＆＃34;级别＆＃34;到键盘并使界面更加平易近。它还铺平了通过触摸和移动更可访问的编程环境的方法。

它需要可发现。这意味着背景感知自动完成，具有清晰简洁的语言，提供有关命令的正确详细信息。 CLIS中具有可发现性的主要问题是命令是不可见的。您要么需要记住该命令或使用某种形式的文档来获取访问。在Clui，命令来到你身边。

该产出应支持丰富和互动的媒体。这意味着图像，GIF，视频，图形，交互式图，按钮和表单应该能够直接集成到CLI体验中。 ASCII艺术很有趣，但文本只是它可以传达的信息。互动媒体应被视为一流的公民。

为满足这些要求，我们开始构建Clui：融合GUI和CLIS的易于扩展界面。在表面上，它很简单：输入您想要的内容，并为命令获取建议。输入完整命令时，您会收回与您所要求的内容相关的UI相关。但这里的潜力远远大得多是一个带有自动完成和按钮的CLI。最终，我们计划通过Clui进行所有repl.it可访问。

虽然我们可以首先实施数十个功能，但我们优先考虑上面列出的三个子弹。请记住，这些是原型！

能够单击命令使Clui更接近于初学者，而不是传统的CLIS。

关于Clui的一个唯一部分是任何新的UI都会自动从您提供的数据生成。这意味着添加功能与后端上添加命令一样简单。这是一个像我们这样的小团队的令人难以置信的可扩展方法，它使新功能更加模块化，更容易理解。

在高水平上，Clui真的像流程图或决策树一样运作。您从树的根目录开始，并逐一选择命令。完成树（类似于深度的第一个搜索）后，您最终会使用完整的命令。

因为树是等级的，所以您可能认为它实际上类似于一个大型下拉菜单。区别在于搜索是直接建立的导航，而不仅仅是指向和单击。可以进行的一个清晰改进是能够搜索任何子命令，而无需首先指定其父命令。这样，您可以立即访问任何深度嵌套信息，类似于Spotlight搜索。

在技​​术级别，CLUI命令在概念上类似于文件路径或URL。由于完整的Clui命令只是命令树的路径，因此每个潜在的子命令就像文件路径或URL的一部分。另一方面，标志，像查询参数一样的功能。 Clui与URL路径的类似相似意味着您可以将某人发送一个完整的可执行的clui命令作为URL。他们映射了1：1。

由于我们有一个GraphQL后端，我们知道客户端可以使用的所有潜在字段和参数。通过使用内省查询，我们生成一个命令/子命令的树，将其映射到它们各自的解析函数上。现在，要添加新的管理员命令所有那个＆＃39; s所需的是GraphQL类型上的新字段。

因此，Clui的架构使得在我们的数据基元和UI基元之间创建直接映射。例如，Booleans映射到切换或复选框，JSON映射到自动生成的表单。这意味着我们可以专注于孤立和信任的产品的特征，即Clui将帮助我们管理他们的复杂性。

统一终端，Repl，Shell和Spotlight搜索。我们希望最终将所有命令驱动的用户界面组合在一起 - 这包括导航网站，查找相关信息，动作自动化以及当然，传统的访问UNIX shell和任何语言repl。许多人对求职和壳牌之间的区别感到困惑，并且在必须切换上下文并留下一个或另一个时，高级用户通常会沮丧。在Repl.it中制作统一的Clui驱动设计模式将有助于减轻这些问题的两面。

最终用户编程。授权用户用户自定义Reple.it并使Clui工作是我们的主要目标之一。您可以轻松地想象用户能够为Base Clui命令创建别名/快捷方式。例如，Repl新Python -Invite Rachel95可以用Rachel映射到课程。这是强大的，从它们组合在一起，基本上抽象了我们的标准克卢命令库，并允许用户创建自己的伪语来命令repl.it.当您将该概念扩展到用户创建的快捷方式以包括参数化时，突然间的任何命令都像函数一样 - 并且命令之间的管道输入和输出的想法变得显而易见。用户将能够分享，混音和插入并播放整个命令存储的自动化工具和实用程序，使对每个用户真正唯一的自动化工具和实用程序。

我们＆＃39; ve开放的一些代码用于构建此系统。其中还有一个演示应用程序，显示一切如何合作。现在，Clui作为一个未开发的库，用于处理命令树 - 所以您可以带上自己的UI并将其使用JavaScript运行。例如，我们将使用Clui作为Figma插件的基础，以自动执行我们的设计工作流程的部分，类似于草图跑步者。我们很高兴看到社区（你！）可以用Clui和您的设计输入。

最终，所有用户界面 - 命令驱动或图形 - 应该传达重要的，可操作的信息，同时是人们期望他们如何表现的不完美模型。 ＆＃39;难以努力弄清楚揭露多少信息，如何公开它，何时，何地，以及原因。 虽然我们知道Clui不会是一个艰难的解释。它的UI和UX的发展向前发展，我们认为它＆＃39; LL通过许多核心设计可扩展性问题，并希望在路上摆脱一些下拉菜单。 自从我们去年发布了这篇文章以来，我们在我们的应用程序中将Clui Paradigm集成了一些进度： 在IDE内。 通知我可以搜索，查找文件，管理多人游戏，甚至启动新的replic.twitter.com/ztamt5zzpk - Amjad Masad⠕（@amasad）5月5日，2021年5月5日