象形图

小巧简洁的图形资源,可增强关键网页组件,快速有效地传达理念。

Hero Image

具象、实用且几何化——我们的图标将理念提炼至最纯粹的形式,传达清晰的目的与永恒的简洁。



类型

Spaceship 图标有两种类型:常规型comp。comp 类型将常规图标与 Spaceship 图标库中的图标结合,帮助我们表达更复杂和具体的概念。










版本

所有 Spaceship 图标均有两种版本:填充型(主用)和描边型(次用)。当图标需要比周围图标、文本或 UI 组件更弱的视觉权重时,应仅使用描边型。这有助于在复杂布局中建立视觉层级。










结构

图标基于一套规则设计,从基础网格到渐变和描边参数,确保结果一致且平衡。










尺寸

Spaceship 图标设计为可缩放,保持视觉一致性并确保最佳可读性。我们的设计系统中有五种图标尺寸。










颜色

图标通常只使用单一色调。唯一的例外是 comp 类型,可以包含品牌色或通知色,相关信息请见下文。为确保 UI 场景中的一致性,图标遵循 Spaceship 设计系统的色彩规范。









默认颜色

灰色是图标的默认颜色,应用于表示消息、操作或功能。在特殊情况下,也可用于产品。描边图标仅提供默认颜色。






品牌色

当需要更强的视觉冲击力或强化 Spaceship 品牌形象时,也可用 SPS Blue、SPS Dark Gray 或白色代替默认色。更多详情请参阅色彩页面。






产品色

在产品专属场景(如产品页面、产品卡片等)中,所有当前及未来产品的图标应使用主要产品色。






通知色

这些颜色应用于强化通知信息。comp 版本仅用于通用系统消息,不应用于警告状态。







指引

以下是创建和使用图标时应避免的一些示例。



不要让常规图标的关键元素落在右下角。

不要在填充版本中使用复杂或多色渐变。


不要在 comp 类型中混用填充和描边元素。

除上述指定颜色外,填充版本不得使用其他颜色。

描边版本除默认色外不得使用任何颜色。

不要将默认色与 Spaceship 品牌主色和通知色以外的任何颜色混用。