清單檢視圖示

清單檢視圖示看起來與對話方塊圖示類似,但會在光源位於物件上方的位置使用內部陰影效果。而且僅供 ListView 使用。例如「設定」應用程式。

如「提供密度專屬圖示集」所述,請為低、中和高密度螢幕分別建立圖示集。以確保圖示在可安裝應用程式的各類裝置上正確顯示。請參閱表 1 以瞭解各密度的建議完成圖示大小。另外,如需處理多組圖示的相關建議,請參閱「設計人員使用提示」。

表 1. 已完成的清單檢視畫面圖示維度摘要,適用於三個概略螢幕密度的每個圖示。

ldpi (120 dpi)
(低密度螢幕)
mdpi (160 dpi)
(中密度螢幕)
hdpi (240 dpi)
(高密度螢幕)
xhdpi (320 dpi)
(Extra-high 像素密度螢幕)
清單檢視圖示大小 24 x 24 像素 32 x 32 像素 48 x 48 像素 64 x 64 像素

最終圖片必須匯出為透明的 PNG 檔案,請勿加入背景顏色

您可以在圖示範本套件中找到在 Adobe Photoshop 建立圖示的範本。

所有 Android 版本

下列準則說明如何針對所有 Android 平台版本設計清單檢視圖示。

結構

  • 清單檢視圖示通常有 1 像素的安全邊框,但也可以針對圓形形狀的反鋸齒使用安全框區域。
  • 指定的所有尺寸都是以 Photoshop 中的 32x32 像素畫板大小為基礎。在範本的定界框周圍保留 1 像素的邊框間距。
清單檢視圖示結構的檢視畫面。

圖 1. 清單檢視圖示的安全框和填滿漸層。圖示大小為 32x32。

光、效果和陰影

清單檢視圖示是平坦的平面圖,搭配內部陰影。它們由淺色漸層和內部陰影組成,能在深色背景中脫穎而出。

清單檢視圖示的光、效果和陰影檢視畫面。

圖 2. 清單檢視圖示的淺色、效果和陰影。

1.內部陰影:黑色 | 57 % 不透明度 | 120° 角 | 混合模式一般 | 距離 1 像素 | 大小 1 像素
2.背景:黑色 | 標準系統顏色
這些圖示只會顯示在清單檢視畫面中。
注意:清單檢視圖示在 Photoshop 中是 32x32 像素的畫板,但沒有安全的畫面。

逐步操作說明

  1. 添加圖 2 中的特效來篩選出適當的濾鏡。
  2. 將大小為 32x32 的 PNG 檔案匯出為已啟用透明度的 PNG 檔案。
  3. 使用 Adobe Illustrator 等工具建立基本形狀。
  4. 將形狀匯入 Adobe Photoshop 等工具中,然後縮放至透明背景為 32x32 像素的圖片。