樣式

如要打造賞心悅目且一致的使用者體驗,有效設定小工具樣式至關重要。本節將說明定義顏色和字體排版的重要概念和技術,以便建立最實用且引人入勝的 Android 小工具。

顏色

使用顏色傳達風格並傳達意義。為小工具顏色設定適當的顏色非常重要,不但要確保容易閱讀、個人化,還能展現應用程式的品牌識別。

使用 Material Design 顏色角色和符記,遵循無障礙功能對比指南,並支援動態色彩功能,例如使用者產生的顏色以及深色或淺色主題。

詳情請參閱 Material Design 顏色指南

動態主題

從 Android 12 開始,小工具可針對按鈕、背景和其他元件使用裝置主題顏色。這樣做可讓不同小工具、主畫面圖示和桌布的視覺一致性,進而為 Android 使用者提供更流暢的使用者體驗。使用所提供的顏色符記可確保您的小工具能夠正確整合於不同裝置製造商提供的裝置主題,以及使用者設定的動態主題。

圖 1:小工具顯示顏色符記的圖片。

淺色和深色模式

深色模式是裝置 UI 的低光源版本,以大部分深色介面顯示顏色。有越來越多使用者改用深色模式 改善電池續航力和視力舒適度如果小工具無法根據深色模式進行調整,其顯示位置可能會變色,並可能讓使用者感到困擾。

圖 2:處於淺色模式的左側畫面,右側為深色。

字體排版

字體排版可讓內容清晰易讀。請利用字型大小和粗細,建立清晰的階層,引導使用者註意最重要的元素。注意行距和字母間距 (核心) 以提升可讀性,特別是在小工具受限空間內顯示較小的文字時。

階層圖

系統會以字型粗細、大小、行高和字母間距的差異傳遞階層。更新後的類型量尺將文字樣式分成五種角色,並依據其用途命名。顯示、廣告標題、標題、副標題和內文這五種文字樣式這些新角色適用於各種裝置,因此在各種用途中都能提供更簡便的應用程式。

圖 3:顯示不同字體比例的小工具。