辅助工具栏的恰当应用领域能协助采用者加速功能定位并认知设想，从而推动采用者快捷地进行下一步棋操作方式，提高采用者的最后采用新体验。那么在辅助工具栏结构设计中，是不是什么样技术细节是结构斯特默能注意的？又或者是不是什么样基本功是能利用的？责任编辑译者便归纳了10个基本功，一起来看一看吧。

辅助工具栏是任何结构设计系统必不可少的一小部分。采用辅助工具栏的主要原因是协助采用者加速认知设想，实现加速导航系统，解决心理障碍，最后提高采用者新体验。

辅助工具栏作为一种结构设计辅助工具，在UI/UX和正方形结构设计师中最畅销。那些细微的结构设计原素对每一人来说都是单纯简练的，那些特点突显了它们通用型位数词汇的地位。

在这首诗中，我重新整理了10个单纯又关键的基本功帮你结构设计出更专精的辅助工具栏。

一、体积规范化

最轻的辅助工具栏大小不一一般来说是12 x 12px。以那个体积为依据，标准规范化中绝大多数其他体积只是通过将之前的体积翻番而产生的。

关键提示信息：当你结构设计辅助工具栏时，关键的是要按100%显示的比例去结构设计，使辅助工具栏轻松画素并弱化画素块查阅准确度。

二、保持画素轻松

轻松画素辅助工具栏在萤幕上要呈现出刁钻和明晰的轮廓和花纹。如今，高清晰度显示屏和角膜显示屏正显得愈来愈好，所以在没多久的今后，对画素轻松辅助工具栏的需求可能会减少。但就目前来说，让你的辅助工具栏具有可扩展性、积极响应性和网络连接更多电子设备是非常关键的。

1. 画素分层翻转

使直角部分完全明晰，并增加抛物线和梯形的明晰度。（杏花注：尽量的使轮廓单面）

3. 轻松视角

有视角的线更模糊。创建辅助工具栏的最佳视角是45°，因为形成一个角的画素彼此对称。

3. 边缘明晰

直角必须占据其边缘上最暗的4个画素。这样线的边缘看起来更明晰。

三、注意粗细和间隙

为了让辅助工具栏看起来整洁一致，关键的是要记住轮廓宽度和间隙大小不一。这条规则我认为是必须遵循的:所有轮廓的宽度都是相同的。

理想情况下，线宽和间隙大小不一也应该相等。

然而，有时候你必须打破那个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时，它就会发生。比如条形码那个例子来说，我故意使辅助工具栏内的线宽和间隙大小不一不均匀，以表示条码的特点。

四、统一圆角

在UI结构设计中，对象(包括辅助工具栏)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时，规则很单纯：在正方形和圆角之间进行选择，并对所有的辅助工具栏应用领域相同的属性。

为什么它如此关键?一致性是UI/UX结构设计的关键原则。一个可用和采用者友好的结构设计总是提供一致的新体验。在下面的例子中，你能看到打破那个原则是如何影响视觉感知的。

五、视觉平衡

在电脑上看起来轻松翻转和平衡的东西，在你的眼睛看来可能并不一样。

当我们把大小不一相等的正方形和圆放在一起时，我们会有一种不对劲的感觉，圆似乎比正方形小。为了使我们的花纹在体积上看起来相同，我们应该使圆更大(或减少正方形的体积)。

那个原则也适用于辅助工具栏的结构设计和采用。有些辅助工具栏的一侧可能较重。试着调整它们一两个点，直到整体翻转看起来恰当。在下面的例子中，你能看到突出显示的辅助工具栏看起来很大，尽管它与其他部分的大小不一相同。为了平衡那个集合，我们需要通过缩小辅助工具栏的大小不一来调整突出显示的辅助工具栏。

（杏花注：那个原则很多人应该都知道，但我发现也是在整套辅助工具栏的结构设计中最难出现的问题，当把辅助工具栏汇总在一起的时候，那个问题尤其需要重视。）

六、视觉翻转

我们经常在结构设计软件中采用中心翻转，这种方法没有错。但当涉及到技术细节时，比如辅助工具栏结构设计，我们需要相信自己的眼睛，打破数学法则，以增强原素的平衡。

让我们以播放按钮作为展示。那个例子很单纯，但非常能说明问题，因为花纹越不对称，需要改进的缺陷就越明显。

七、保持单纯和直接

我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是，绝大多数系统在保持单纯的情况下工作得最好。采用者越难认知某样东西并与之互动，它就越具有通用型性。

（杏花注：KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限，杏花帮大家找了一篇参考文献

它如何适用于辅助工具栏结构设计?

1. 别采用文字

文本和辅助工具栏的绑定减少了辅助工具栏的通用型性。此外，小体积的文本是可读性很差。如果一定要文本作为支持原素，采用辅助工具提示信息和辅助工具栏旁边的标签。

2. 不要过度结构设计

不必要的复杂性阻碍了合理的表达，应该避免。过载的结构设计会将采用者新体验变成一场噩梦。

3. 避免不必要的原素

只要确保每一辅助工具栏在整体环境中是可认知和明晰的就行。（杏花注：比如已经是在邮件客户端中，就不需要再额外增加表示邮件的辅助工具栏部分）

关键提示：在辅助工具栏结构设计中合理地采用KISS原则，也不要把事情做得太单纯，否则会影响功能。一个优秀的辅助工具栏应明晰简练。

八、辅助工具栏规范化框架

辅助工具栏规范化框架一般来说是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来结构设计辅助工具栏。但是，那个规则非常灵活，只是作为参考，方便辅助工具栏的结构设计在视觉上平衡。所以，如果你觉得你的辅助工具栏不完全匹配那个框框，但看起来完全恰当——相信你的眼睛！

框架是结构设计的“容器”。框架规范化了一个统一的范围来结构设计辅助工具栏，这背后有一些原因：

1. 大小不一

由于其几何花纹，所有辅助工具栏都具有不同的高度和宽度。为了在我们的结构设计中统一辅助工具栏体积，我们应该将它们放置在大小不一始终相同的框架中。

2. 输出

框架内的辅助工具栏与视觉中心对齐，这经常被开发人员忽略，因为他们经常根据实际的中心来调整辅助工具栏，而没有注意到差异。这就是为什么用框架输出辅助工具栏是至关关键的，当你按那个框架输出辅助工具栏时，能保证视觉结构设计时想要的视觉中心。

3. 效率

如果采用Figma，能通过创建组件来节省时间。能采用实例加速地将一个辅助工具栏替换为另一个辅助工具栏。

九、设置好辅助工具栏的关键词

如果你要打算做辅助工具栏资源库的话。要想到当结构雕塑家在库中搜索辅助工具栏时，会遇到什么样挑战？他们的痛点是什么？他们的需求是什么？要回答那些问题，请设身处地为采用者着想。

1. 不要让采用者思考

例如，如果他们不知道自己想要找到哪种花卉辅助工具栏，那么就让他们看到一系列选择:鲜花项链，室内花卉，植物商店等。

2. 展示关联图标

例如，如果采用者想在相同的主题或类别中找到辅助工具栏，他们能加速地检查包含那个特定辅助工具栏的完整集合。

3. 采用标签

采用者可能很难找到合适的词进行搜索，或者可能希望看到所有类似的补充选项，从中选择最合适的。例如，当一个辅助工具栏的实际名称是“兰花花瓣”，你仍然能找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫

十、SVG和PNG辅助工具栏的区别

最后应该导出SVG或PNG格式？这是一个关键问题。让我们来比较一下格式:

我个人的选择是采用SVG辅助工具栏，因为它能节省很多时间。但是，一定要小心缩小复杂的花纹，并记住旧的浏览器可能不支持SVG格式。

十一、总结

到这里你应该已经学会了这10个辅助工具栏结构设计要点，在你的辅助工具栏结构设计中采用那些规则，相信会让你的辅助工具栏显得更加专精！

杏花注：辅助工具栏结构设计是一个结构雕塑家的基础能力，在杏花看过的无数份作品集中最普遍的问题也就是辅助工具栏结构设计。今天这首诗虽然非常基础，但千万别小看它，用这10条基本功重新审视自己的辅助工具栏作品，相信会有新的收获！

原文译者：Karina（责任编辑翻译已获得译者的正式授权）

原文：

译者：杏花Sky，公众号：杏花译结构设计；人人都是产品经理专栏作家，腾讯高级视觉结构雕塑家。

责任编辑由@杏花sky 翻译发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表译者本人，人人都是产品经理平台仅提供信息存储空间服务。