图标有些东西让我烦恼。
看看这两个组件，有什么问题？提供 10 分。
没错！至少有两个问题：
- 左侧内边距在视觉上过大
- 间隙过松
当组合这样的组件（带有图标）时，流程通常如下：
- 嵌套图标
- 设置首选实例
- 将图标冒泡到顶层，例如交换
该问题出现的原因是...边界框。
“一致性”有意义，但在实践中可能会给一致的面向系统的设计带来复杂性。
系统中可以完美设置的 24x24 图标网格可能会对最终设计文件的像素完美性造成问题。
然后，我们被迫创建特定的空间覆盖，以应对边界框过大的情况。这是设计的发展过程，但作为设计系统的一员，您会因为“左填充 8，右填充 16”等神奇数字要求而感到困惑。
有用的是高度。有观点认为基于高度的边界框可以创建一致的触摸点大小（以实现可访问性）。这是有争议的，我知道这可能更像是一种学术思想，因为触摸点也依赖于宽度。
水平调整尺寸的可能性在于您的图标将始终嵌套，例如在具有宽度的图标按钮中。
这可能意味着图标的大小取决于系统中固有的宽度，而不是一致的 X 规则。这将消除像素覆盖的需要，并意味着图标在作为实例放置时应该“正常工作”。这当然感觉像可扩展性。
其他需要考虑的事情
继承
当在图标级别（系统内）设置固定大小时，我们会在没有背景的情况下做出未来的决策。
我们是否应该通过图标按钮来决定图标的大小，而不是在实例级别继承选择？
如果我们需要固定尺寸怎么办？
举一个常见的例子，图标按钮。您的组件很可能被设置为固定（或最小）尺寸，以满足可访问性的点击目标尺寸。
这是一个特殊情况，我们也需要图标具有固定的感知大小。但这是真的吗？尺寸不是由包裹按钮元素定义的吗？
我们可以通过将图标包装在 div（在 HTML 中）或框架（在 Figma 中）中来手动设置其垂直或水平位置。
如果我们查看图标列表之类的内容，情况也会一样，如上图所示。实际情况是，在垂直列表中，您会希望所有图标都设置为相同的宽度，而不管它们的视觉视图如何。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
