自訂

自訂動作的主題可讓您更準確地反映品牌形象,並透過視覺方式呈現使用者體驗。

總覽


顏色

顏色是強大的品牌 ID。你可以自訂主要顏色和背景顏色來代表品牌。您可以使用主要顏色在視覺介面上醒目顯示重要的元件,例如資訊卡標題和任何動作按鈕。這個顏色必須是與品牌最常用的顏色。

請先選擇主要顏色。

選擇主要顏色後,請選擇主要顏色和次要文字顏色的背景顏色。

背景顏色可以做為主要顏色的較淺版本。

背景顏色可以是互補色。

為確保所選顏色可供存取,我們會在 Play 管理中心執行色彩對比度檢查,確保主要顏色和背景顏色之間,以及次要顏色和背景顏色之間有足夠的顏色對比度。 如要進一步瞭解如何選擇及協調主要顏色和背景顏色,請造訪 Material Design 網站

背景圖片

將資訊卡的視覺元素和尺寸加在資訊卡中,最有效的方式之一,就是使用圖片做為背景顏色,而非純色。選擇圖片做為背景時,請注意下列事項:
請注意,為了確保前景清晰可讀,我們會在背景圖片上套用深色防護遮罩。文字會自動改為白色。

這張基本資訊卡使用的是背景圖片。背景圖片將取代任何背景顏色,因此請選擇最符合品牌形象的選項。

圖片必須配合中性,以便透過多個對話方塊呈現所需外觀和風格。此處顯示的背景圖片同時適用於上方的基本資訊卡和這張輪轉介面資訊卡。


字體排版

字體排版可以彰顯您的品牌,同時引導使用者註意最重要的資訊。您可以針對動作中的每張資訊卡自訂最大文字 (例如標題) 來發揮最大的影響力。在這個位置,透過 Span 字型、指令碼樣式字型或粗細字型等生動的字體來吸引目光,並和次要文字產生對比。如需一般字體排版指南,請參閱質感設計基金會。

選擇可與次要文字搭配使用的字型。

正確做法:

這種字型的粗體字型和亮眼色彩讓頻道在背景中脫穎而出,進而在資訊卡標題中吸引他們的目光。

錯誤。

如果沒有這個粗細,字型就難以閱讀,難以在標題文字前將注意力吸引到標題上。


形狀

圖片形狀

圖片設計與 Material Foundation 的元件相輔相成,為圖片增添了一貫的風格。目前,您可以為視覺元件中的圖片選擇斜角或曲線形狀。選擇適合您整體品牌風格的圖片。

標誌最適合您挑選需要的形狀。在這個例子中,標誌畫質清晰且尖頂,因此圓角邊與品牌一致。

其他元件也能為你做決定。動作按鈕的圓角和標誌與圖片的邊角相符。

如要進一步瞭解如何選擇圖片形狀,請造訪質感設計網站