Elastic EUI 图标库新增讨论：如何设计“添加图表分组”图标

在 Elastic 的 EUI 设计系统中，图标库的扩展是一个需要谨慎考虑的设计决策。最近开发团队针对 Logs+ 功能提出了新增一个"添加图表分组"（Add chart breakdown）图标的需求，这个图标将用于 Discover 字段操作，表示将选定字段作为分组维度添加到现有的柱状图中。

初始设计方案分析

最初的设计方案采用了柱状图叠加"+"号的组合形式，设计者希望通过这种视觉表达传达两个关键信息：

1. 操作对象是柱状图
2. 这是一个添加操作而非新建操作

这种设计遵循了 EUI 的设计规范，使用 Figma 插件导出 SVG 格式，技术上符合要求。从视觉识别度来看，这个设计简洁明了，能够清晰传达其基本功能。

设计优化建议

经过团队讨论，提出了几个值得关注的优化方向：

1. 语义准确性：现有设计可能被误解为"添加柱状图"而非"添加分组维度"
2. 一致性考虑：EUI 中已有表示分组维度的垂直堆叠柱状图图标(visBarVerticalStacked)
3. 未来兼容性：随着 Lens 可视化和 ES|QL 的深度集成，Discover 中的可视化操作可能会演进

最终决策与建议

基于以上分析，团队决定采用现有 visBarVerticalStacked 图标而非新增设计，主要基于以下技术考量：

1. 认知一致性：堆叠柱状图在 Kibana 中已广泛用于表示数据分组，用户已有认知基础
2. 系统简洁性：避免不必要的图标增生，保持设计系统的精简
3. 未来扩展性：当前 Discover 的可视化功能仍在演进中，过早固化图标可能造成后期维护负担

设计系统实践启示

这个案例为设计系统的维护提供了有价值的实践经验：

1. 优先复用：在添加新图标前，应充分评估现有图标库的复用可能性
2. 语义验证：不仅要考虑图标的视觉表达，更要验证其传达的功能语义是否准确
3. 演进思维：设计决策应考虑到产品功能的未来发展路径

通过这次讨论，团队不仅解决了一个具体的图标需求，更强化了设计系统维护的方法论，为未来的类似决策提供了参考框架。