作者。 Anton Lovchikov，界面设计师/产品设计师和Travis Turner，邪恶火星人的技术编辑

为面向用户的软件设计界面是一回事，但在为开发者将使用的工具设计界面时，有一些考虑因素应该牢记在心。请继续阅读比较，找出那些具体的内容，并学会在你的工作中轻松而快速地融入这些实用的技巧!

开发者工具有几个独特的功能，使它们与我们在登陆页面、电子商务应用、社交网络等方面看到的界面有所不同。我们在这篇文章中所涉及的案例以及我将提供的相应建议都是基于我自己处理开发者工具界面的实际经验。所以，让我们通过定义什么是和什么不是开发者工具来深入了解一下。

开发者工具的定义

我认为开发者工具是什么？广义上讲，我把它定义为任何用于创造性目的的软件（相对于为用户消费而设计的东西），这些类型的应用程序通常每天都会使用很多小时。这包括Figma、Photoshop、Blender、VSCode、AE、FontLab、Grammarly，甚至MS Word等软件。

当使用开发工具时，用户的注意力分布与使用，比方说，一个电子商务应用程序时不同。在电子商务应用中，典型的用户路径是一种循环的线性流程：用户设置一些过滤器，显示搜索结果，重复，准备好后结账。在开发工具中，用户路径似乎是 "随机 "地在面板和窗口之间来回走动--这是一个永无止境的过程，并且没有一个真正的 "最终 "目标行动，开发工具用户将执行。

从本质上讲，这意味着对于一个开发工具来说，没有 "黄金流程"。事实上，当考虑到典型的用户路径时，看似微小的边缘案例实际上可能是某个特定用户的主要案例，或者甚至是用户群中的一个健康部分的主要案例。

了解用户的任务和他们的工作环境（后面会有更多的介绍）是设计一个合适的布局的关键。如果用户在一个地方做大部分的工作（画布用于绘图，代码编辑器用于编码，编辑器用于编写文本），布局必须对应这种工作，注意在界面中突出主要的编辑器。

Xcode名副其实；代码编辑器在前面和中间。

因此，如果工作在几个编辑器之间平均分配，最好不要让一个编辑器在布局中占据主导地位。

CodePen的界面有一个平衡点，反映了用户将如何在应用程序的不同组件之间切换。

了解用户的 "背景"

上面我们提到，我们需要了解用户的任务以及他们执行这些任务的环境。让我们解释一下我心目中的 "上下文 "到底是什么。用户可以在三种情况下工作；让我们分别看看。

即时语境。这描述了用户当前的一系列细微的行动。这方面的例子可能包括修复一两个文件中的编译器错误，创建一个Figma组件，或调整MS Word中的页眉。这些操作很可能被隔离在一个单一的面板或窗口内。

中间环境。这是用户在应用程序本身中的当前任务。例如，开发一个大型的功能，创建一个由许多屏幕组成的界面，或者准备一个商业提案。有点自然的是，这比前面例子中提到的即时任务的上下文更广泛，它要求用户执行一组特定的即时上下文任务，并在它们之间进行切换。

广义情境。这描述了用户在整个工作中的任务。这可能意味着将一个功能上线到生产，获得设计的批准并将其交给开发团队，或者与客户签约并开始一个新项目。这是最广泛的背景，也是很可能需要在不同的应用程序之间切换的事情。

现在我们已经概述了这些情境的要点，让我们来看看如何为每一个情境设计最佳的体验，为这三个情境的工作提供实用的例子。

设计最佳的即时语境体验

首先，重要的是要确保你没有强迫用户为了做简单的事情而在面板和窗口之间跳跃。对于每个可能被执行的小任务，尽量将所有必要的控制打包到一个面板或窗口中。

另外，尽量减少界面内的摩擦。这意味着什么呢？例如，只要有可能，就使用单选按钮而不是下拉菜单，支持滑块和文本输入，共享与滑块绑定的值，这样用户就可以根据需要选择更精确的控制。此外，避免不必要的对话框和窗口，并注意元素的大小、间距--不要浪费空间，这迫使用户不必要地花费时间滚动。

由于用户会经常在你的界面中与面板元素互动，所以在设置它们的大小和间距时要格外小心，并尽量做出明智的判断。如果面板内容太长，用户可能会花太多时间来回滚动：这可能会导致时间的浪费，并随之导致生产力的严重损失。考虑利用面板的独立缩放的优势，就像Blender那样。

这段视频显示了在Blender应用程序中，不同的窗口如何拥有自己的独立缩放值

播放这段视频，看看独立缩放是如何运作的

使用面板页脚：它们是次要操作、状态和警告的好地方。因为它们被放置在动作的底部，所以不会使你的界面变得杂乱无章，但仍然可以根据需要使用。只要确保这些动作不干扰操作系统的Dock图标就可以了。

设计最好的中间语境体验

让用户在需要时能够同时处理几个小的上下文。这可能意味着能够在IDE中检查几个相邻的文件，或者允许鸟瞰Figma中的所有模型（这在Photoshop中几乎是不可能的，还记得那种痛苦吗？）

确保任何用于调整属性的界面都不会覆盖到实际应用这些变化的查看器。此外，尽量避免弹出式窗口；相反，将属性调整字段放在查看器旁边的面板中。

如果你不能避免弹出式窗口，请保持内容的滚动位置和最后查看的标签，以便用户在准备好的时候可以轻松地回到他们的上下文。例如，假设你想调整文本大小：想象你必须在属性列表中滚动到文本大小属性。接下来，想象一下弹出窗口本身阻挡了你想要调整的文本。你做了调整，关闭了弹出窗口，但是，文本大小仍然不对。现在你不得不重复这个过程。如果弹出窗口能准确地 "记住 "用户的工作位置，那就更好了，这样他们就不必处理这种麻烦了。

不要害怕提供各种各样的设置。即使是最微小的不便，当每天遇到数百次时，也会导致巨大的挫折感。为了遏制任何潜在的头痛，使面板可调整大小，可重新排序，并让用户能够将面板添加到布局中并关闭无用的面板。对于一个说明正确实施这一原则的好例子，我们可以再一次转向Blender。

请看视频，见证布局灵活性在野外的例子。

添加一种方法来固定不同的文件，以便快速切换。让用户有能力在他们工作的不同方面快速切换是非常重要的。想象一下一个没有标签功能的浏览器，相反，用户被迫一次浏览一个页面。按照现代标准，这肯定会被认为是最糟糕的浏览器。

也就是说，没有必要急着去尝试自己建立一个浏览器式的标签系统，因为这实际上是非常难以实现的。垂直列表对开发者来说要容易得多。作为最后的手段，你也可以把它留给浏览器来处理。只要给用户一些提示，告诉他们能够在新标签页中打开一个文件就可以了。

设计最好的广泛的上下文体验。

考虑一下大局--你的用户在日常工作中是如何使用你的应用程序的？他们是在浏览器旁边打开它吗？他们会在集成开发环境的底部打开它吗，比如控制台？或者他们把它夹在屏幕的角落里，像计算器一样。

即使产品的目标用户不是移动用户，也要考虑使用响应式布局。如果开发者决定将应用程序作为一个狭窄的窗口与其他一些应用程序一起打开，这种选择就会很方便。测试你的界面，验证它在高度有限的情况下是否运行良好，并考虑准备一个类似卡片的布局，以便用户可以把它钉在屏幕的顶部。

最后一些杂项要点

其实没有必要为了在一个日常工作中使用的工具中显示一个标志而使用宝贵的界面空间。如果你不能丢弃标志，可以考虑在其中整合一个顶层菜单（见Blender和Figma的例子）。

注意滚动条的样式和行为--会有很多滚动条的，所以值得考虑一下。看看即使是最简单的开发工具中也有多少滚动条。想象一下，如果应用浏览器的默认样式而不是你自己的样式，界面会显得多么令人不快。拟定滚动条的外观--颜色、大小和形状。此外，还要考虑它们是应该一直可见还是只在滚动时出现。

我在这里强调了滚动条，以证明它们在一个简单的界面中的存在--你的选择对最终的氛围有很大的影响。

最后，准备好将你的设计移植到桌面上。(这方面的文章很快就会出来！）。

开发一个结论

希望这个快速和肮脏的指南足以让你开始分析在界面和用户流方面存在的差异，这些差异是针对消费者的商业软件与更有 "创造性 "的专业工具，比如软件开发者每天工作的一部分。如果你自己是一个有创意的专业人士，那么你可能已经有了大量的开发者工具经验可以借鉴，所以把这些经验好好利用起来吧

意识到你的应用程序的重要功能，并在此基础上考虑到空间在界面中的分布。牢记你的用户可能正在操作的环境。专注于消除障碍和不必要的元素。多花点心思来实现生活质量功能，如定制化设置、引脚功能和UI元素，这些功能对它们的使用方式是有意义的。

---

无论你在什么情况下使用什么工具，Evil Martians都愿意帮助你如果你有一个创业公司，一个项目，一个问题：请与我们联系