象形图

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

Hero Image

字面化、功能化且几何化——我们的象形图将理念提炼为最纯粹的形式,传达清晰的用途与历久弥新的简洁感。



类型

Spaceship 象形图有两种类型:regular comp。comp 类型将常规象形图与 Spaceship 的 Iconography Library 中的图标相结合,使我们能够传达更复杂、更具体的概念。










版本

所有 Spaceship 象形图均提供两个版本:filled(主要)和 outlined(次要)。仅当某个象形图相比附近的象形图、文本或 UI 组件需要更轻的视觉权重时,才应使用描边版本。这有助于在复杂布局中建立视觉层级。










构成

象形图基于一套规则构建,从基础网格到渐变和描边参数,以确保结果一致且平衡。










尺寸

Spaceship 象形图在设计上可灵活缩放,既保持视觉一致性,也确保最佳可读性。我们的设计系统中有五种象形图尺寸。










颜色

象形图通常使用单一色调。唯一的例外是 comp 类型,它可以包含品牌色或通知色,更多相关信息见下文。为确保在 UI 场景中的一致性,象形图遵循 Spaceship Design System 的颜色参考。









默认颜色

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






品牌颜色

当需要更强的视觉冲击力或强化 Spaceship 品牌识别时,也可以使用 SPS Blue、SPS Dark Gray 或白色来替代默认颜色。更多详情请查看颜色页面。






产品颜色

在专用于产品的场景中(产品页面、产品卡片等),当前及即将推出的所有产品的象形图都应使用该产品的主色。






通知颜色

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







指南

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



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

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


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

除上述颜色外,不要在填充版本中使用其他颜色。

除默认颜色外,不要在描边版本中使用任何其他颜色。

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