圖像符號

小巧簡單的圖形資產,提升主要網頁組件,能快速有效地傳達想法。

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 品牌主色及通知顏色以外的任何顏色結合使用。