圖示設計指南

為整個使用者介面創造一致的外觀和風格可為產品加分。簡化圖像樣式也可讓 UI 在使用者眼中更具專業感。

本文件將提供相關資訊,協助您根據 Android 2.x 架構使用的一般樣式,為應用程式使用者介面的各個部分建立圖示。遵循這些規範有助於創造完善一致的使用者體驗。

請參閱下列文件,瞭解 Android 應用程式常用圖示類型的詳細規範:

自動調整啟動器圖示
自動調整啟動器圖示是一種圖像,用來在裝置的主螢幕以及搭載 Android 8.0 (API 等級 26) 以上版本裝置的啟動器視窗中代表您的應用程式。
舊版啟動器圖示
舊版啟動器圖示是一種圖像,用來在裝置的主螢幕以及搭載 Android 7.1 (API 等級 25) 以下版本裝置的啟動器視窗中代表您的應用程式。
選單圖示
選單圖示是選項選單中的圖形元素,使用者按下 [選單] 按鈕時會看到這個選項選單。
動作列圖示
動作列圖示是圖形元素,用來代表動作列中的動作項目。
狀態列圖示
狀態列圖示的用途,是在狀態列中代表應用程式的通知。
分頁圖示
分頁圖示是圖形元素,用來代表多分頁介面中的個別分頁。
對話方塊圖示
對話方塊圖示會顯示在提示使用者進行互動的彈出式對話方塊中。
清單檢視圖示
清單檢視圖示要與 ListView 搭配使用,以透過圖像呈現清單項目,例如「設定」應用程式。

如要更快開始建立圖示,您可以下載 Android 圖示範本套件組。

使用 Android 圖示範本套件組

Android 圖示範本套件組包含一系列設計、材質和圖層樣式範本,可方便您按照本文件提供的規範建立圖示。建議您在開始設計圖示前,先下載範本套件組封存檔。

圖示範本是採 Adobe Photoshop 檔案格式 (.psd),當中會保有我們在為 Android 平台建立標準圖示時使用的圖層和設計處理方式。您可以在任何相容的圖片編輯程式中載入範本檔案,不過視您使用的程式而定,您不一定可直接使用這些圖層和處理方式。

您可以使用以下連結取得最新的圖示範本套件組封存檔:

下載適用於 Android 4.0 版的圖示範本套件組 »

如需舊版圖示範本套件組,請前往本頁面右上角方塊中的「下載」部分。

提供像素密度專屬圖示集

Android 可在螢幕大小和解析度各異的裝置上執行。為應用程式設計圖示時,請務必考慮到應用程式可能會安裝在搭載任一種螢幕的裝置上。如多螢幕支援文件所述,在 Android 平台上,您可以輕鬆讓所提供的圖示在任何裝置上正確顯示,無論裝置搭載何種大小或解析度的螢幕都沒問題。

一般來說,建議您為各種概略螢幕像素密度分別建立一組圖示,並將圖示儲存在應用程式的像素密度專屬資源目錄中。當應用程式執行時,Android 平台會檢查裝置螢幕的特徵,並從適當的像素密度專屬資源載入圖示。想進一步瞭解如何在應用程式中儲存像素密度專屬資源,請參閱適用於螢幕大小和像素密度的資源目錄限定詞一文。

另請參閱給設計人員的小提示一節,其中針對如何建立及管理適用於多種像素密度的圖示集提供了一些實用秘訣。

給設計人員的小提示

以下提供一些小提示,或許可在您為應用程式設計圖示或其他可繪項目素材資源時派上用場。這些提示假設您使用 Adobe Photoshop 或類似的光柵和向量圖片編輯程式。

針對圖示素材資源使用常見命名慣例

為檔案命名時,請試著讓相關素材資源在依字母排序時可歸入相同目錄中。具體來說,建議您針對各種圖示類型使用常見的前置字串,例如:

素材資源類型 前置字串 範例
圖示 ic_ ic_star.png
啟動器圖示 ic_launcher ic_launcher_calendar.png
選單圖示和動作列圖示 ic_menu ic_menu_archive.png
狀態列圖示 ic_stat_notify ic_stat_notify_msg.png
分頁圖示 ic_tab ic_tab_recent.png
對話方塊圖示 ic_dialog ic_dialog_info.png

請注意,您不一定要針對任一圖示類型使用相同的前置字串,這樣做只是為了方便管理。

在工作空間中依像素密度整理檔案

支援多種螢幕像素密度就表示您必須針對相同圖示建立多個版本。為確保檔案的多個版本安全無虞且易於尋找,建議您在工作空間中,建立可根據解析度整理素材資源檔案的目錄結構。例如:

art/...
        ldpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        mdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        hdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        xhdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png

這種結構與像素密度專屬結構類似,最終都會將完成的素材資源儲存在應用程式的資源中。由於工作空間和應用程式的結構類似,因此您可以快速判斷要複製哪些素材資源到各個應用程式的資源目錄。依像素密度區隔素材資源也有助於偵測各種像素密度的檔案名稱是否有任何差異;這一點相當重要,因為不同像素密度的對應素材資源必須使用相同的檔案名稱。

以下提供一般應用程式的資源目錄結構讓您進行比較:

res/...
        drawable-ldpi/...
            finished_asset.png
        drawable-mdpi/...
            finished_asset.png
        drawable-hdpi/...
            finished_asset.png
        drawable-xhdpi/...
            finished_asset.png

盡可能使用向量圖形

許多圖片編輯程式 (例如 Adobe Photoshop) 可讓您結合使用向量圖形以及光柵圖層和效果。請盡可能使用向量圖形,讓素材資源可在必要時放大而不流失細節,邊緣也不會呈現鋸齒狀。

使用向量還可讓您在解析度較低時,輕鬆將邊角與像素邊界對齊。

先在大型畫板上設計

您需要針對不同螢幕像素密度建立素材資源,因此建議您先在尺寸是目標圖示大小倍數的大型畫板上設計圖示。例如,視螢幕像素密度而定,啟動器圖示的寬度會是 96、72、48 或 36 像素。如果您先在 864x864 的畫板上繪製啟動器圖示,之後當您將畫板縮小至目標大小以建立最終素材資源時,就能更輕鬆且清楚地微調圖示。

縮放圖片大小時,視需要重新繪製點陣圖層

如果您的圖片是透過放大點陣圖層 (而非向量圖層) 的方式產生,您就必須手動重新繪製這些圖層,才能讓圖層在像素密度較高時保持清晰。舉例來說,如果您繪製了 60x60 的圓做為 mdpi 的點陣圖,則必須將其重新繪製為 90x90 的圓才能用於 hdpi

儲存圖片素材資源時,移除不必要的中繼資料

雖然 Android SDK 工具在將應用程式資源封裝為應用程式二進位檔時,會自動壓縮 PNG 檔,但建議您移除 PNG 素材資源中不必要的標頭和中繼資料。OptiPNGPngcrush 等工具可確保相關中繼資料已確實移除,且圖片素材資源檔案的大小已進行最佳化處理。

確保不同像素密度的對應素材資源使用相同檔案名稱

各個像素密度的對應圖示素材資源檔案必須使用相同檔案名稱,且要儲存在像素密度專屬資源目錄中。這樣一來,系統就能根據裝置的螢幕特徵查詢及載入適當的資源。因此,請確保各個目錄中的素材資源集都保持一致,且檔案並未使用像素專屬後綴字串。

如要進一步瞭解像素密度專屬資源,以及系統如何根據不同裝置的需求使用這些資源,請參閱多螢幕支援一文。