Sketch：命令栏的新篇章

插入和替换组件、浏览更好的预览、更快地浏览图库等等。了解这一切是如何实现的，以及如何充分利用命令栏。

 

在Athens 发布的版本中，我们以第 100 版中引入的命令栏为基础，增加了直接从命令栏插入和替换组件的选项。此外，我们还吸取了命令栏的精华，为检查器设计了一个新的弹出式窗口，以满足更小的尺寸和上下文的需要。当然，我们还提供了更多功能：更好的预览、更快的库和组导航方式等等。

 

让我们来看看有哪些新功能，对比以前的工作流程有哪些改进，以及背后的设计原理。

 

建立在经过检验的基础之上

在第 100 版中，我们引入了命令栏：一种快速、键盘优先的方式来显示 Sketch 中的所有操作。我们对 300 多个现有操作进行了审核，添加了图标、颜色编码和其他必要元素，使它们在命令栏中大放异彩。我们编写了自定义搜索算法，因此您只需键入动作名称的一部分、缩写，甚至只需键入菜单路径的一部分即可找到该动作。我们还让它完全本地化地学习你的习惯，将你最常用的操作放在顶部。

 

不过，我们一直深知，这只是一个开始。我们一直认为，我们需要一个插入组件的界面，它能让我们更快、更轻松地浏览库，提供更有用的预览，还能用于替换组件。

 

将组件引入命令栏

在Athens中打开 "命令栏 "时，你看到的将不再是一个空的搜索栏。

 

现在您可以从命令栏插入和替换各种组件。命令栏取代了旧的插入窗口以及工具栏和检查器中的菜单，它拥有一个新的跳板，可以执行选取组件的操作。您还可以搜索这些操作，或使用菜单栏中的项目。

这些操作都会带你进入我们所说的 "命令栏 "模式。到目前为止，命令栏只有一种模式：操作模式（仍然是默认模式）。但现在，每个组件都有一个新的模式。我稍后会详细介绍每种模式，但基本上，每种模式都为你提供了一个专门用于选择特定组件的界面。为了说明我的意思，让我们来看看新的 "符号 "（Symbols）模式。

您可以通过紫色标记来判断您是否处于组件模式。

 

操作起来看起来很不一样，是吧？这里有很多东西要看，让我们一起来探索一下这个新界面，看看都有什么。你可以通过搜索栏左边的紫色小标记来判断自己是否处于不同的模式。要退出模式，可以点击它，或者在搜索栏为空的情况下按两次?键。

 

 

查找库和群组的捷径

虽然每种组件模式都有专用于其组件类型的界面，但它们都有一个重要的相似之处：顶部的路径栏。在将组件引入命令栏时，我们面临的最大挑战之一就是导航库和组。我们可以利用的空间少了很多，我们希望做出比以前的插入窗口和插入菜单更快、更省力的东西。

我们真的没有吝惜键盘快捷键。

 

路径栏中的第一项会告诉你正在哪个库中（或者是否正在查看所有内容）。你可以点击它来选择不同的库，或者按 ?F。手仍放在键盘上时，使用方向键导航到不同的资料库或其中的组，然后按 ?。要返回查看资料库中的所有内容，按 ??▲，或按??▲ 导航到所在组的父组。要导航到当前组的同级组或子组，请按 ?▼ ——这将打开路径栏中最后一项的菜单，您可以使用箭头键选择一个新组。

 

要插入任何组件，请使用箭头键选择该组件，然后按 ?。说到选择，即使你已经选中了一个组件，你也可以直接键入内容来提升搜索的精确度。如果在顶部按 ▲ 键，还可以选择搜索栏中的所有内容，开始新的查询。

命令栏会智能地记住你离开的位置。因此，即使你在画布上飞来飞去，打开和关闭命令栏，它也会记住你在哪个组，以及你选择了哪个组件。这使得插入同一组件或同一组中的多个组件变得非常容易。

 

我们知道你需要掌握很多快捷键，但一旦这些快捷键成为你的第二天性，我们希望你会同意这将使新组件模式的使用变得非常快捷。不过，如果你更喜欢使用鼠标，可以单击任何路径项打开其同级（因此也是子）组菜单，或者?单击某个项直接跳转到该组。您还可以双击一个组件，或直接将其拖到画布上。

 

 

合适的预览

在很多情况下，旧版插入窗口中的组件预览，尤其是检查器菜单中的组件预览并不是最有用的。它们要么太小，要么浪费太多空间，要么没有显示足够的元数据。在命令栏中，我们对每个组件预览进行了重新设计，以显示尽可能多的信息，让您在选择组件之前就能对其外观有最直观的了解。

从表面上看，它可能与旧版的插入窗口相似，但新的符号网格有许多改进之处。

 

符号网格更节省空间，与插入窗口中的相同空间相比，您可以多看到一列符号。事实上，我们非常喜欢它，因此也将其用于框架模板和图形模板。

 

浅色、深色或自动。现在你可以选择了！现有符号和新符号默认设置为“自动”模式。

 

现在，您还可以为符号预览设置浅色或深色背景。这个问题一直困扰着我们，也许你也一样。如果你有一个以浅色为主、背景透明的符号，你会得到一个浅色背景的预览，使你无法看清符号（深色模式也会出现类似的问题）。现在，在组件模式下，你可以选择符号是浅色背景、深色背景，还是与应用外观保持一致。

有了更多空间，文本样式的预览现在更加逼真，并能显示更多的元数据。

 

我们重新设计了文本样式预览，为使用样式的字体大小预览文本提供了更多空间（达到合理的限制）。这样就能更准确地呈现使用该样式的文本的外观。我们还包含了更多的元数据，并为其提供了更大的空间，从而减少了被截断的可能性。为了便于扫描，我们对每个预览都进行了对齐，并在其他元数据中标明了对齐方式（如果样式中包含对齐方式）。

对于文本样式，我们希望将插入窗口中小巧、难以阅读的预览效果，换成专为文本样式设计的更大预览效果。对于图层样式和颜色变量，我们要解决的问题几乎正好相反。

 

与插入窗口相比，"图层样式 "和 "颜色变量 "共享一个类似的密集双列网格，能更好地利用可用空间。以前在插入窗口中只能看到六个颜色变量，现在在命令栏中可以看到十个，而图层样式现在可以看到十二个。

 

 

使用命令栏替换组件

在此次项目中我们改进了诸多工作流程，此项是我们改进最多的，也是让我们最感到激动的。

 

在 Athens 之前的版本中，若想要替换组件，您只能使用检查器菜单，而您需要在子菜单中不停点击，如果不留神点错一步就可能要重头再来。我们一直都想替换掉这个界面，目前我们认为命令栏是一个更优的方案。

可以说，我们所做的一切都是为了实现在命令栏中插入 "组件"，这样我们就能用它替代旧的界面了。

 

要替换一个组件，您只需记住一个快捷键??R 或搜索 "替换组件 "操作。这两种操作都会打开命令栏，并直接进入当前组件所属的库或组，供你选择替换。

 

通过将组件组织成组（如具有一定大小的图标），当你想将一个组件换成另一个组件时，相关的组件就会出现。我们发现这对于替换嵌套的符号（如图标）或将一个按钮替换为另一个按钮特别有用。

 

在替换符号时，路径栏末尾有几个额外的控制按钮：

 

• 对于顶层符号，您会看到一个按钮，可以让您选择替换是使用当前符号的尺寸，还是使用自己的尺寸。如果您习惯于使用旧检查器菜单中的 "按原始尺寸交换 "选项，那么这个按钮就是，但它的命名更加清晰："保留当前尺寸"。
• 对于嵌套的符号，你会看到一个切换按钮，可以让你隐藏嵌套的符号，而不是替换它。同样，如果你喜欢使用 "检查器 "菜单中的 "隐藏图层 "选项，也可以用它来替代。

 

更换检查器中的组件

跟大家分享一个小秘密：在我们第一次尝试更新检查器时，我们就用尝试用命令栏进行组件选择了。但在试用后，以及从使用了试用版的用户的反馈来看，效果并不理想。我们希望能在当前的上下文环境中使用检查器，哪怕是用尺寸小一点的预览都可以。

 

这促使我们（再次）重新思考如何在检查器中替换组件。我们创建了一个全新的弹出窗口，它吸收了命令栏模式的精华，并将其缩小到专为检查器设计的界面中——两全其美。

 

熟悉但又不同

现在，在替换嵌套符号时，您可以在特定组内进行搜索。

 

要打开新的弹出窗口，只需点击任意一个常用的 "检查器 "按钮即可。由于可使用的空间较小，我们无法从命令栏中提取相同的元素并加以压缩。例如，路径栏就无法使用。因此，我们制作了一个别致的弹出按钮，可以起到类似的作用。

库选择器可让您快速跳转到不同的组，或查看您所在的库。

 

单击弹出窗口顶部的 "库 "选择器按钮，可以导航到不同的库或组。其他库始终位于底部，而在顶部，您可以找到所选组的父组（和库）。点击 × 或按键???▲，可以清除任何组或库过滤器。与命令栏一样，弹出窗口也会自动在当前组件组中打开，因此你能在该组中找到你想要替换的组件，那你就无需再去其他地方找了。

当你找到想要替换的组件时，只需单击一次；或使用箭头键选择它，然后按 ?。弹出窗口中没有任何动画。我们希望让用户体验到一种快速的替换过程，如果你试过后，我相信你也会同意：这种替换组件的方式真的快到飞起。

 

 

亲，我们缩小了预览图

小巧的符号预览功能还能让你仔细检查是否选择了正确的替换。

 

与命令栏不同，为了节省空间，每个组件都以列表形式显示。不过，这并不意味着我们在预览或元数据方面有所压缩。

 

现在，"符号""图层样式""框架模板 "和 "图形模板 "的预览更大、更易查看。也许最大的改进是，符号也会使用你为它们设置的背景，再也不会在模糊的浅色菜单背景上显示白色符号了。

 

在替换符号时，库选择器右侧的按钮会根据上下文发生变化，就像命令栏一样。对于顶层符号，该按钮是保留当前尺寸的切换按钮，而对于嵌套符号，它是隐藏或显示的切换按钮。

 

颜色变量在命令栏中有了全新的预览效果，十六进制和不透明度元数据也一样。

文本样式预览是目前最难缩小的弹出窗口。我们探索了几种设计，包括使用全宽的文本预览，但我们发现这些设计使得扫描列表过于困难。我们最终找到了一个平衡点，即预览仍能让你对样式有所了解，同时也为命令栏中的所有元数据留出了空间。

 

点击一下就能看到更大的预览效果

弹出式预览包含了很多细节，但它们的尺寸很小。如果你需要更大的预览，可以点击库选择器左侧的按钮，或者按 ??R打开命令栏找到相同的按钮，这样做可以保留你的搜索词。你也可以通过 ? 单击检查器按钮直接跳转到命令栏。如果你不想每次都按?键，我们有一个新的偏好设置来控制这一点："使用命令栏替换组件"。按住?键将始终执行与设置该首选项相反的操作。

 

命令栏的未来故事

如您所见，命令栏并没有停滞不前。我们的目标是改善您每天使用 Sketch 的方式，而添加 组件则让我们离这一目标更近了一步。

 

这只是命令栏第二章的内容。如果你已经试用过Athens ，你可能已经注意到我们的徽标现在在工具栏中，点击它就会打开命令栏。这是有原因的，不过下次再说吧。

 

感谢您能够阅读至此，如果您有任何问题或反馈，或者只是想分享一下您使用Athens 的情况，我们很乐意在论坛上听取您的意见。衷心感谢所有试用过测试版并分享了自己想法的用户。我们迫不及待地想看到您使用Athens 制作的作品。