圖像符號

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

Hero Image

簡約、實用和幾何化——我們的圖像標誌將概念提煉至最純粹的形式,傳達明確的用途和永恆的簡潔。



類型

Spaceship 圖像標誌有兩種類型:常規comp。comp 類型將常規圖像標誌與 Spaceship 圖標庫中的圖標結合,讓我們能夠傳達更複雜和具體的概念。










版本

所有 Spaceship 圖像標誌均有兩個版本:實心(主)和線框(次)。當圖像標誌需要比鄰近的圖像標誌、文字或 UI 元素更低的視覺權重時,僅應使用線框版本。這有助於在複雜佈局中建立視覺層次。










結構

圖像標誌基於一套規則設計,從基礎網格到漸變和線條參數,確保結果一致且平衡。










尺寸

Spaceship 圖像標誌設計為可縮放,保持視覺一致性並確保最佳可讀性。我們的設計系統中有五種圖像標誌尺寸。










顏色

圖像標誌一般只使用單一色調。唯一的例外是 comp 類型,該類型可包含品牌或通知顏色,詳情請參閱下文。為確保在 UI 場景中的一致性,圖像標誌遵循 Spaceship 設計系統的色彩參考。









預設顏色

灰色是圖像標誌的預設顏色,應用於訊息、操作或功能的表達。在特殊情況下,也可用於產品。線框圖像標誌僅提供預設顏色。






品牌顏色

SPS Blue、SPS Dark Gray 或白色,也可在需要更強視覺效果或加強 Spaceship 品牌識別時取代預設顏色。詳情請參閱色彩頁面。






產品顏色

主要產品顏色應用於產品專屬場景(如產品頁面、產品卡片等)中的圖像標誌,適用於所有現有及即將推出的產品。






通知顏色

這些顏色應用於強化通知訊息。comp 版本僅應用於一般系統訊息,不應用於警告狀態。







指引

以下是創建和使用圖像標誌時應避免的例子。



不要讓常規圖像標誌的關鍵元素落在右下角。

請勿在實心版本中使用複雜或多色漸變。


請勿在 comp 類型中混合實心和線框元素。

請勿在實心版本中使用上述以外的顏色。

請勿在線框版本中使用預設顏色以外的任何顏色。

請勿將預設顏色與 Spaceship 品牌主色和通知顏色以外的任何顏色混合使用。