关于图标设计的一些思考
在设计图标组件时，你是否遇到过类似的问题？来看这两个组件，有什么不对劲的地方？
两个浅蓝色组件，内含图标和一个文本字符串 “标签”。左边的组件有一个水平的 3 点图标，右边的组件有一个垂直的 3 点图标。实际上，这里至少有两个问题：
- 左侧图标的填充在视觉上显得过大。
- 间隙太松，导致布局不够紧凑。
前两个组件的视觉效果，黄色注释指向推文中描述的问题在创建包含图标的组件时，通常的流程是：
- 嵌套一个图标。
- 设置首选实例。
- 将图标提升到顶层，以便进行实例交换。
该视图显示了将图标嵌套到另一个组件中的过程。它还显示了对图标的两个重写，一个显示原始的水平三点图标，另一个显示垂直三点图标。边界框的问题
然而，这种方法容易出现边界框带来的问题。
从“保持一致性”的角度来看，边界框是有意义的，但在实践中，它可能会给系统化设计带来额外的复杂性。例如，在系统中可以完美设置的 24×24 图标网格，到了最终设计文件中，却会出现像素对齐的问题。
一组黑色背景的图标。图标展示了两次，一次是普通图标，另一次是红色背景和边框图标。之前使用过的 “更垂直 ”图标有一个黄色箭头指向边界框空间，并标有 “毛 ”字。当边界框过大时，我们不得不创建额外的空间覆盖。这是光学设计的必然结果，但对于设计系统的管理者来说，“左填充 8，右填充 16” 这样看似随意的数值要求，往往会带来困惑。
问题图标在边界框内的情况与解决方案（在组件内的图标周围创建自定义填充）的比较。基于高度的边界框
高度是一个值得关注的因素。一种观点认为，基于高度的边界框可以确保一致的触摸区域，以提升无障碍性。这一点仍然存在争议，因为触摸区域不仅取决于高度，还受宽度影响。
另一方面，从水平尺寸的角度来看，图标通常是嵌套的，比如嵌套在带有固定宽度的图标按钮中。这意味着，图标的大小应当由系统中固有的宽度决定，而不是受固定的 X 规则约束。
这样的方式可以减少像素覆盖的问题，并确保图标在实例化时能“正常工作”，带来更强的可扩展性。
显示建议的布局–水平边界框设置为图标的宽度，而不是一致的宽度。这意味着水平和垂直三点图标的实例都能在原始组件中找到，而无需手动调整间距。继承与固定尺寸的问题
在设计系统中为图标设置固定尺寸，类似于在缺乏上下文的情况下做出未来决策。那么，图标的大小应该由图标按钮决定，还是在实例级别继承设定？
如果我们需要固定尺寸，比如在图标按钮的情况下怎么办？通常，按钮组件会被设置为固定（或最小）尺寸，以满足无障碍设计的要求。
在这种情况下，我们是否也需要为图标设定固定大小？还是说，大小应该由其外部的包裹按钮元素决定？
横向显示两幅插图的注释。左图在 Figma 中选择了一个图标按钮组件，自动布局中的宽度和高度设置用红色箭头标出，显示它们被设置为 “环抱内容”。右图显示的是 Figma 中的大纲模式，图标按钮内选择了图标本身。高度和宽度设置上有一个红圈，表明它们被设置为固定大小。解决方案：使用容器包裹图标
为了确保光学尺寸的稳定性，我们可以在 HTML 中使用 div，或在 Figma 中使用 frame 来包裹图标，并手动调整其垂直或水平位置。
在图标列表中，这一点尤为重要。例如，在垂直列表中，我们通常希望所有图标都具有相同的宽度，而不考虑其具体的光学视觉效果。在这种情况下，包装容器可以充当一个“安全网”，确保图标在不同场景下依然保持一致性。
图例显示了一个带有虚线伪边界框的图标列表组件。
结论
在设计系统中，图标的边界框、尺寸继承、以及无障碍性都是需要权衡的关键因素。理解这些问题，并在合适的场景中采取适当的策略，能帮助我们打造更加一致且灵活的设计系统。
文章图片来源于：https://medium.com
作者：Luis Ouriach
翻译：马克笔设计留学
