對話方塊圖示

對話方塊圖示會顯示在提示使用者互動的彈出式對話方塊中。這類模式會使用淺色漸層和內陰影,從深色背景中脫穎而出。

如「提供密度專屬圖示集」所述,請為低、中和高密度螢幕分別建立圖示集。以確保圖示在可安裝應用程式的各類裝置上正確顯示。請參閱表 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 像素的安全框。基本形狀必須符合安全頁框,但圓形形狀的反鋸齒可以重疊安全頁框。
  • 本頁指定的所有尺寸都是以 Adobe Photoshop 中的 32x32 像素畫板大小為基礎。在 Photoshop 範本的定界框周圍保留 1 像素的邊框間距。
對話方塊圖示結構的檢視畫面。

圖 1. 對話方塊圖示的安全框和填滿漸層。圖示大小為 32x32。

光、效果和陰影

對話方塊圖示為平坦且有圖片的面貌。為了在深色背景中脫穎而出,它們會使用淺色漸層和內陰影建構。

對話方塊圖示的淺色、效果和陰影。

圖 2. 對話方塊圖示的淺色、效果和陰影。

1.正面:漸層重疊 | 90°
底部:r 223 | g 223 | b 223
top:r 249 | g 249 | b 249
底色位置:0%
頂端顏色位置:75%
2.內部陰影:黑色 | 25% 不透明度 |
角度 -90° | 距離 1 像素 | 大小 0 像素

逐步操作說明

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