Android 2.0環境下的圖標設計原則

創造一個統一外觀,感覺完整的用戶界面會增加你的產品附加價值。精煉的圖形風格也使用戶覺得用戶界面更加專業。

本文檔提供了一些信息,幫助你如何在應用界面的不同部分創造圖標來匹配Android2.x框架下的普遍風格。遵守這些原則會輔助你為用戶創造一個流暢而統一的體驗。

為了使你創建圖標的工作進行的更加快速,你可以下載Android圖標模板包。 更多信息請瀏覽Android圖標模板包的使用

Android系統被設計在一系列屏幕尺寸和分辨率不同的設備上運行的。當你為自己的應用設計圖標時,必須知道,你的應用有可能在任何設備上安裝運行。正如支持多屏幕文檔中所描述,  Android 為你直接提供這樣的圖標,他們會在任何設備上正確的顯示,無論這些設備的屏幕大小和分辨率如何。

一般來說,推薦的方式是為三種普遍的屏幕密度(如表1)中的每一種都創造一套獨立的圖標。然後,把他們儲存在你的應用中特定的資源目錄下。當你的應用運行時,Android平台將會檢查設備屏幕的特性,從而加載特定密度資源目錄下相應的圖標。想要了解更多如何存儲特定密度資源的信息,請參閱創造合格屏幕尺寸和密度的辦法目錄。

Android 設備的屏幕密度基線是中等。因此,一種被推薦的為多種屏幕密度創造圖標方式是:

  1. 首先為基準密度設計圖標(看表一為實際的像素尺寸設計的圖標)。
  2. 把圖標放在你的應用的默認可繪製資源中,然後在Android 可視化設備(AVD)或者HVGA設備如T-Mobile G1中運行應用。
  3. 根據需要測試和調整你的基準圖標。
  4. 當你對在基準密度下創建的圖標感到滿意的時候,為其他密度創造副本。

    • 把基準圖標按比例增加為150%,創造一個高密度版本。
    • 把基準圖標按比例縮小為75%,創造一個低密度版本。

  5. 把圖標放入你的應用的特定密度資源目錄中。例如:

    • 中密度版本在res/drawable-mdpi/ 目錄下運行(或在默認res/drawable/ 目錄下運行)
    • 高密度版本在res/drawable-hdpi/目錄下運行。
    • 高密度版本在res/drawable-ldpi/目錄下運行。

  6. 如果需要,測試和調整高密度和低密度的圖標。

關於如何創造和管理多密度圖標集,參閱對設計師的小提醒

表 1. 對三種普遍屏幕密度中每一種密度的所需要的成品尺寸圖標的摘要

Icon Type 對於普遍的屏幕密度標準版本尺寸(像素表示),
低密度屏幕(ldpi) 中密度屏幕(mdpi) 高密度屏幕(hdpi)
啟動器 36 x 36 px 48 ​​x 48 px 72 x 72 px
菜單 36 x 36 px 48 ​​x 48 px 72 x 72 px
狀態欄 24 x 24 px 32 x 32 px 48 ​​x 48 px
標籤 24 x 24 px 32 x 32 px 48 ​​x 48 px
對話 24 x 24 px 32 x 32 px 48 ​​x 48 px
列表視圖 24 x 24 px 32 x 32 px 48 ​​x 48 px

啟動器圖標是一個圖形,代表了設備的主頁和啟動器窗口中的應用。

用戶會在點擊主頁底部的圖標中打開啟動器。啟動器打開,顯示所有已經安裝應用的圖標。他們被以格狀排列。用戶選擇一個應用,通過任何可以得到的硬件導航控制,例如軌跡球點擊啟動器圖標。

用戶也可以把一個圖標從啟動器窗口中拖出來,放在主頁上,來更方便的訪問應用。再這種情況下,系統會顯示你的應用的啟動器圖標在主頁牆紙上的映射。此渲染的映射尺寸與在啟動器中渲染的尺寸相同。

系統控制了所有啟動器圖標的縮放,所以他們被渲染為統一的高和寬。被渲染的啟動器圖標的實際像素尺寸在隨著設備屏幕的像素尺寸和屏幕密度的不同而顯示的不同。為了保證你的圖標渲染效​​果最佳,請提供為低密度,中密度和高密度屏幕製作的圖標。想得到更多信息,請參閱上面的提供特定密度圖標集或下面的為設計師的建議

風格

你創造啟動器圖標應該符合以下原則的一般風格。這個準則並不限制你可以做的圖標,而是強調你的圖標可以在其他設備上共享的普遍的辦法。圖1提供了例子。

圖 1.啟動器圖標風格的插圖

乾淨和現代:

  • 啟動器圖標應該是現代的,有時有點古怪,但是他們不應該是過時和粗糙的。如果可能的話,你應該避免過度使用象徵性的隱喻。

簡單和標誌性的:

  • Android啟動器圖標應該是自然的抽象表現;你的圖標應該高度簡化和誇張,以至於他們可以在小尺寸時合適顯示。你的圖標不應該過於復雜。
  • 嘗試用一個簡單的部分作為整體的象徵性的代表(例如,音樂圖標以揚聲器作為特徵)。
  • 考慮使用自然輪廓和形狀,包括幾何的和有機的,與現實(不是照片般的真實)映射。
  • 你的圖標不應該呈現一個對更大的圖像不正確的觀點。

觸覺和質感:

  • 圖標應該表現為不平淡的,有質感的材料。更多信息請看下面的材料和色彩。

面向前方和頂部照明:

  • Android 2.0和以後的平台的新規定: Android啟動器圖標應該面向前方,透視非常小,而且應該頂部照明。

此外,注意所有圖標應該有獨立的文字標籤,而不是把文字設計嵌入到圖標裡面,把努力用在使圖標有特色和難忘中去。要看更多Android系統下應用的啟動器圖標的案例,請參閱標準啟動器圖標

做什麼和別做什麼

以下有一些在你為自己的應用設計一個圖標的過程中“可以做的的和不要做的”例子

Android啟動器圖標是…

  • 現代的,簡約的,不平坦的,有觸感,和質感的
  • 面向前方和頂部明亮,整體而言,色彩在一定的色譜中

Android 啟動器圖標不是…

  • 過時的,過分複雜,光滑的,平坦的
  • 旋轉的, 剪裁不正的,過於深色的

Side-by-side examplesof good/bad icon design.圖 2. 啟動器中”做什麼和別做什麼”的例子

質感和顏色

啟動器的圖標應該利用觸覺,頂部照明,使用紋理材料。即使你的圖標只是一個簡單的形狀,你應該嘗試把它們當做真實世界的材料渲染。

該平台的默認應用中啟動器圖標用了以下圖3所示的材料。你的圖標可以使用這些材料也可以創建新的材料。

Android 啟動器圖標經常包括由較小的形狀組成一個較大的形狀,並結合成一個中立的形狀和一個中立的顏色。圖標可能會使用中性色彩的組合,但保持較高的對比度。如果可能的話,每個圖標不應該使用超過一個原色。

啟動器的圖標應該使用一個又限制的調色板,包含一系列中立的顏色和原色。該圖標不應該過分飽和。

推薦的啟動器圖標調色板應用,如圖4所示。你可以使用條側板中的基本顏色和高亮元素。你可以使用白色到黑色垂直線性漸變疊加一起的調色板的顏色。這產生的印像是,光從頂部照射進來,且保持顏色的低飽和度。

圖 3.你可以用它來創建你的圖標的材料的例子.

圖.從推薦調色盤中選出的基本和高亮顏色組合形成的材料的例子

當你從簡易的調色盤中取出一個高亮顏色組成材料時,你可以創造如圖5所示的材料組成。為了幫助你開始,圖標包(icons pack)包括一個Photoshop模板文件(Launcher-icon-template.psd),文件提供了默認的材料,顏色和梯度。

5.推薦圖標調色板.

尺寸和位置

啟動器的圖標應該使用不同的形狀和形式,而且這些必須縮被縮放和定位來創建一致的視覺重量。

圖6展示了圖標放置在各版本中的不同的方式。至於更詳細的描述,就是為了製造一個一致的直覺質量,並允許加入陰影,你應該使圖標比實際版本中的範圍小一些。如果你的圖標是方形或近方形,尺寸應該更小。

  • 為全版本邊界框顯示為紅色。
  • 推薦的實際圖標邊界框顯示為藍色。該圖標框的大小比完整版中的尺寸更小,以便有空間包含陰影和特殊的圖標處理。
  • 對於方形圖標,推薦的邊界框是橙色顯示的。為正方形圖標框比較小是因為要在兩種類型的圖表中建立同樣的視覺重量。

  1. 高密度屏幕(hdpi) 的圖標尺寸:

    1. 全版本: 72 x 72 px
    2. 圖標: 60 x 60 px
    3. 正方形圖標: 56 x 56 px

  1. 中密度屏幕(mdpi) 的圖標尺寸:

    1. 全版本: 48 x 48 px
    2. 圖標: 40 x 40 px
    3. 正方形圖標: 38 x 38 px

  1. 低密度屏幕(ldpi) 的圖標尺寸:

    1. 全版本: 36 x 36 px
    2. 圖標: 30 x 30 px
    3. 正方形圖標: 28 x 28 px

圖 6. 圖標版本範圍中圖標的尺寸和位置.

使用啟動器圖標模板

Android的圖標模板包2.0是一個包含默認圖標的材料和顏色調色板的模板。該模板為psd格式,方便Photoshop或相似的圖像編輯器編輯。

To get started, fir要開始使用,首先下載 Android的圖標模板包2.0.

一旦你下載了模板包,解壓縮,並在Adobe Photoshop或類似的圖片編輯器中中打開Launcher-icon-template.psd ,注意調色板的材料和顏色。您可以使用該模板創建一個啟動器的圖標作為起點。

在創建您的圖標之後,你可以按照以下規範添加陰影效果,作為你創造的合適的圖片大小。

WVGA (高密度) 屏幕的陰影:

  1. 效果: 底部陰影
  2. 顏色: #000000
  3. 混合模式: 多重
  4. 不透明度: 75%
  5. 角度: 90°
  6. 距離: 2px
  7. 擴展: 0%
  8. 尺寸: 5px

HVGA (中密度) 屏幕陰影:

  1. 效果: 底部陰影
  2. 顏色: #000000
  3. 混合模式: 疊加
  4. 不透明度: 75%
  5. 角度: 90°
  6. 距離: 1px
  7. 擴展: 0%
  8. 尺寸: 3px

當添加了陰影,圖標製作完成後,輸出一個格式為PNG的透明文件,以確保您的圖標在高密度屏顯示大小為72 x72像素和在中密度屏顯示大小為48 x48像素。關於為什麼你應該為高,中,低密度的屏幕提供不同的啟動器版本,參閱支持多種屏幕.

菜單圖標

菜單圖標是一個圖形元素,當用戶按下菜單按鈕時在向用戶顯示菜單,在彈出菜單裡顯示。他們是平面展示的。菜單圖標元素不能表現為3D或者透視的。

正如提供特定密度圖標集中所描述的,你應該為低,中,和高密度的屏幕製作相應的圖標集。這可以確保你的圖標在一系列安裝你的應用的設備中正常顯示。見表1 所建議的為每種密度所創造的圖標尺寸。此外,請參閱對設計師建議 中關於如何使用多組圖標。

結構

  • 為了保持一致性,所有的菜單圖標必須使用相同的原調色板和相同的效果。欲了解更多信息,參閱菜單圖標顏色調色板
  • 菜單圖標應包括圓角,要保證邏輯正確。例如,在圖7中,合理表現圓角的部分是房頂而不是建築餘下的部分。
  • 所有這個頁面上的特定尺寸是建立在一個48×48像素的畫板,6像素安全邊欄的基礎上的。
  • 圖標菜單效果(外發光)在燈光,效果,陰影 中被描述,它在必要時可以與6px安全邊欄重疊。而基礎形狀必須始終留在安全邊欄內。
  • 最後的圖形必須導出為一個透明的PNG文件。
  • 在Adobe Photoshop中製作的菜單圖標模板可以在圖標模板包中得到。

A view of menuicon structure.

圖 7.

菜單圖標中的安全欄和圓角 。圖標尺寸是48×48.

燈光,特效和陰影

菜單圖標是平的。輕微凹陷和一些其他特效,如下所示,可以創造縱深感。

A view of light, effects, and shadows for menu icons.

圖8.菜單圖標的燈光,特效和陰影.

1. 前部: 從原色調色板中挑出顏色填充漸變
2. 內投影: 黑色 | 20 % 不透明度

角度90° | 距離 2px

大小 2px

3. 外發光: 白色 | 55% 不透明度

擴展 10% |大小 3px

5. 內斜角: 深度1%

角度 90° | 高度 10°

發光白色70%不透明度

陰影黑色 25% 不透明度

顏色調色盤

Color palette, white 白色

r 255 | g 255 | b 255

用於外發光和斜面的高光。

Color palette, medium gradient 漸變填充

1: r 163 | g 163 | b 163

2: r 120 | g 120 | b 120

用作顏色填充。

Color palette, black 黑色

r 0 | g 0 | b 0

用於內部陰影和斜面的陰影。

步驟

  1. 使用工具如Adobe Illustrator創建基本形狀。
  2. 導入到一個像Adobe Photoshop的工具,把它放置在48×48像素的透明的背景的圖像上。注意安全欄。
  3. 增加如圖8所描述的效果。
  4. 導出一個48×48像素的透明PNG格式的圖標。

“做這些和不要做這些”

在為你的應用做菜單圖標時,下面是一些“做這些和不要做這些”要考慮的例子。

狀態欄圖標用來在狀態欄中展示你的應用中的通知,他們與菜單圖標非常相似,但是更加小,對比度更高。

正如提供特定密度圖標集中所描述的,您應該為低,中和高密度的屏幕製作獨立的圖標集。這可以確保你的圖標在一系列安裝了你的應用的設備中顯示正常。見為每個密度屏幕所建議的尺寸。此外,請參閱對設計師的建議中關於如何創建圖標集的描述。

結構

  • 圓角必須始終被應用到基礎的形狀中和狀態欄圖標細節中,如圖9所示。
  • 所有這個頁面上的特定尺寸是建立在一個25×25像素的畫板,2像素安全邊欄的基礎上的。
  • 狀態欄圖標可以在必要時與安全欄左右重疊,但絕不能與安全欄的頂部和底部重疊。
  • 最後的圖形必須導出為一個透明的PNG文件。
  • 在Adobe Photoshop中製作的菜單圖標模板可以在圖標模板包中得到。

A view ofstatus bar icon structure.

圖 9.

狀態欄圖標中的安全欄和圓角 。圖標尺寸是25×25.

燈光,特效和陰影

狀態欄圖標略有凹凸感的,高對比度的,繪製的圖形可以加強對小尺寸的清晰度。

A view oflight, effects, and shadows for status bar icons.

圖10. 狀態欄圖標的燈光,特效和陰影.

1. 前部: 用原色板種顏色漸變填充
2. 內部斜角: 深度 100% | 方向 向下

尺寸0px |角度 90° |

角度 30°

高光 白色 75% 不透明度

陰影 黑色75% 不透明度

3. 細節: 白色
4. 缺失細節: 色板中灰色漸變

+ 內部斜角: 平滑| 深度1% | 方向向下| 大小0px | 角度117° |

海拔 42° | 高光 白色70% | 無陰影

顏色調色板

只有狀態欄圖標相關的手機功能使用全彩色,其他所有狀態欄圖標應保持單色。

Color palette, white 白色

r 255 | g 255 | b 255

用於圖標內部細節和斜面的高光。

Color palette, grey gradient 灰色漸變

1: r 169 | g 169 | b 169

2: r 126 | g 126 | b 126

用於圖標內部缺失細節。

Color palette, fill gradient 填充漸變

1: 1 r 105 | g 105 | b 105

2: r 10 | g 10 | b 10

用於顏色填充.

Color palette, black 黑色

r 0 | g 0 | b 0

用於斜面的陰影。

步驟

  1. 在Adobe Photoshop的以及類似的工具中,創建25×25像素的透明背景的基礎形狀的圖像。考慮到安全邊欄,保持上下2個像素的空白。
  2. 增加如圖9所示的圓角。
  3. 增加如圖10所示的燈光,特效和陰影。
  4. 輸出一個PNG格式的透明圖標,大小為25×25 px。

“做這些和不要做這些”

在為你的應用做狀態欄圖標時,下面是一些“做這些和不要做這些”要考慮的例子。

標籤圖標是用來表示在一個多選項界面裡的單獨的標籤元素的圖形。每個標籤圖標有兩種狀態:未選中和選中。

正如提供特定密度圖標集中所描述的,你應該為低,中,和高密度的屏幕製作相應的獨立圖標集。這可以確保你的圖標在一系列安裝你的應用的設備中正常顯示。見表1所建議的為每種密度所創造的圖標尺寸。此外,請參閱對設計師的建議 中關於如何使用多組圖標。

結構

  • 未選定的標籤圖標和菜單圖標具有相同的填充漸變和特效,但沒有外部發光。
  • 被選擇的標籤圖標,看上去像未選擇的標籤圖標,但有一個暗淡的內部陰影,且和對話圖標有著相同的前部漸變。
  • 標籤圖標有一個1像素的安全邊欄,且安全邊欄只應該和抗混淆圓形的邊緣重疊。
  • 此頁面上指定的所有尺寸都基於一個大小為32×32像素的畫板。在Photoshop模板內,對邊緣欄保持1像素的填充。
  • 最後的圖像必須導出為一個32×32像素的透明PNG文件。
  • 在Adobe Photoshop製作的標籤圖標模板可以在標籤模板包中得到。

A view ofunselected tab icon structure.

圖11. 未選中的標籤圖標的安全邊欄和填充漸變。圖標大小為32X32。

A view ofselected tab icon structure.

圖12. 已選中的標籤圖標的安全邊欄和填充漸變。圖標大小為32X32。

未選中的標籤圖標

燈光,特效和陰影

未選中的標籤圖標看上去像以選中的標籤圖標, 但是有一個微弱的內部陰影, 而且和對話圖標有著相同的前部漸變。

A viewof light, effects, and shadows for unselected tab icons.

圖13. 未選中的標籤圖標的燈光,特效和陰影.

1. 前部: 漸變  | 角度 90°

底部顏色: r 223 | g 223 | b 223

頂部顏色: r 249 | g 249 | b 249

底部顏色 位置: 0%

頂部顏色位置: 75%

2. 內部投影: 黑色| 10 % 不透明度| 角度90° 距離2px |大小2px
3. 內斜面: 深度1% | 方向向下| 大小0px | 角度90° | 高度10°

高光 白色 70% 不透明度

陰影 黑色 25% 不透明度

步驟

  1. 用如Adobe Illustrator或類似的工具創建基本圖形。
  2. 導入到Adobe Photoshop或類似的工具中,把它在32×32像素,透明背景的圖片中合適放置。
  3. 如圖13,用合適的濾鏡增加特效
  4. 把圖標導出為一個32×32像素的PNG透明文件。

被選擇的標籤圖標

已選擇的標籤圖標和菜單圖標具有相同的填充漸變和特效,但沒有外部發光。

A view oflight, effects, and shadows for selected=

圖14. 被選擇的標籤圖標的燈光,特效和陰影.

1. 前部: 全漸變.
2. 內部投影: 黑色 | 20% 不透明度 |

角度 90° | 距離 2px |

大小 2px

3. 內斜角: 深度1% | 角度  | 大小0px | 角度90° |

高度 10°

高光 白色 70% 不透明度

陰影 黑色 25% 不透明度

Color palette

Color palette, fill gradient 填充漸變

1: r 163 | g 163 | b 163

2: r 120 | g 120 | b 120

在未選擇的表現圖表上填充顏色。

步驟

  1. 用如Adobe Illustrator或類似的工具創建基本圖形。
  2. 導入到Adobe Photoshop或類似的工具中,把它在32×32像素,透明背景的圖片中合適放置。
  3. 如圖14,用合適的濾鏡增加特效
  4. 把圖標導出為一個32×32像素的PNG透明文件。

對話圖標顯示在彈出對話框中,並提示用戶交互。為了在黑色背景中突出,他們用光線漸變和內部投影效果.

正如提供特定密度圖標集中所描述的,你應該為低,中,和高密度的屏幕製作相應的獨立圖標集。這可以確保你的圖標在一系列安裝你的應用的設備中正常顯示。見表1所建議的為每種密度所創造的圖標尺寸。此外,請參閱對設計師的建議 中關於如何使用多組圖標。

結構

  • 對話圖標有一個1 像素的安全邊欄。基本圖形必須在安全邊欄內部合適放置, 但是抗混淆的圓形可以和安全邊欄重疊。
  • 此頁面上指定的所有尺寸都基於一個Adobe Photoshop中建立的,大小32×32像素的畫板上的。在Phontoshop模板中,對邊欄保持保持1像素的填充。
  • 最後的圖片必須導出為一個透明的PNG文件。
  • 在Adobe Photoshop製作的對話圖標模板可以在標籤模板包中得到。

A view of dialogicon structure.

圖15. 對話圖標安全邊欄和填充漸變.圖標大小is 32×32像素.

燈光,特效和陰影

對話圖標是平的且面向前的圖片.為了在黑色背景中突出, 他們用了光線漸變和黑色投影。

A view of light,effects, and shadows for dialog icons.

圖16. 對話圖標的燈光,特效和陰影.

1. 前部: 漸變疊加 | 角度  90°

底部色彩: r 223 | g 223 | b 223

頂部色彩: r 249 | g 249 | b 249

底部色彩位置: 0%

頂部色彩位置: 75%

2. 內部投影: 黑色 | 25% 不透明度 |

角度 -90° | 距離 1px | 大小 0px

步驟

  1. 用如Adobe Illustrator或類似的工具創建基本圖形。
  2. 導入到Adobe Photoshop或類似的工具中,把它在32×32像素,透明背景的圖片中合適放置。
  3. 如圖16,用合適的濾鏡增加特效
  4. 把圖標導出為一個32×32像素的PNG透明文件。

列表視圖圖標看起來像對話圖標, 但是他們用了一個光線來源於物體上方的內部投影特效。他們也只用在列表視圖中。在包括Android市場應用主屏和在地圖應用中的導向屏中使用。

正如提供特定密度圖標集中所描述的,你應該為低,中,和高密度的屏幕製作相應的獨立圖標集。這可以確保你的圖標在一系列安裝你的應用的設備中正常顯示。見表1所建議的為每種密度所創造的圖標尺寸。此外,請參閱對設計師的建議 中關於如何使用多組圖標。

結構

  • 列表視圖圖標通常有一個1 像素的安全邊欄。抗混淆的圓形可以和安全邊欄重疊。
  • 此頁面上指定的所有尺寸都基於一個Adobe Photoshop中建立的,大小32×32像素的畫板上的。在Phontoshop模板中,對邊欄保持保持1像素的填充。
  • 最後的圖片必須導出為一個透明的PNG文件。
  • 在Adobe Photoshop製作的列表視圖圖標模板可以在標籤模板包中得到。

A view of listview icon structure.

圖17. 列表視圖圖標的安全邊欄和填充漸變. 圖標大小is 32×32。

燈光,特效和陰影

列表視圖圖標是平的且面向前的圖片.為了在黑色背景中突出, 他們用了光線漸變和黑色投影。

A viewof light, effects, and shadows for list view icons.

圖18. 列表視圖圖標的燈光,特效和陰影.

1. 內部投影: 黑色| 57 % 不透明度| 角度120° | 混合模式正常| 距離1px | 大小1px
2. 背景: 黑色 | 標準系統顏色

這些圖標只在列表視圖中使用。

注意: 列表視圖圖標在Photoshop中32×32像素的畫板中放置,沒有安全邊欄。

步驟

  1. 如圖18,用合適的濾鏡增加特效
  2. 把圖標導出為一個32×32像素的PNG透明文件。
  3. 用如Adobe Illustrator或類似的工具創建基本圖形。
  4. 導入到Adobe Photoshop或類似的工具中,把它在32×32像素,透明背景的圖片中合適放置。

這裡有一些提示,在你為你的應用創建圖標或其他可繪製版本的時候有用。這些提示假設您使用的是Photoshop或類似的光柵圖像編輯程序。

用常用的命名習慣為圖標版本命名

嘗試命名文件,當他們按照字母排序的時候,有關的版本將​​會在一個目錄內聚集在一起。特別是它有助於為每個圖標類型的使用共同的前綴。例如:

版本類型 前綴 例子
圖標 ic_ ic_star.png
發射器圖標 ic_launcher ic_launcher_calendar.png
菜單圖標 ic_menu ic_menu_archive.png
狀態欄 ic_stat_sys or ic_stat_notify ic_stat_notify_msg.png
標籤圖標 ic_tab ic_tab_recent.png
對話圖標 ic_dialog ic_dialog_info.png

請注意,你不需要使用任何類型的共享前綴— 這樣做只是為了您的方便。

為製造多密度版本圖標,建立一個空間儲存文件

為不同屏幕密度發展多個版本集意味著製作文件的多個尺寸副本。為了保持文件多個副本的安全和更容易被發現,我們建議您在您的工作空間創建一個目錄結構,來組織文件版本。例如:

assets/...

     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

這種結構與特定密度結構相同,你可以在你的應用源文件中存儲最終的版本。因為你的工作空間的結構與應用的結構類似,您可以迅速確定哪些版本應該複製到每個應用源文件目錄下。為不同密度製作的獨立版本可以使你根據密度檢測不同的文件名,這非常重要,因為為不同密度製作的對應的版本必須有同樣的文件名。

為了做比較,下面是一個典型的應用資源的目錄結構:

res/... 

    drawable-ldpi/...

         finished_asset.png

     drawable-mdpi/...

         finished_asset.png

     drawable-hdpi/...

         finished_asset.png

首先製作中密度版本

r.由於中密度是Android的基線,因此你的設計工作應該從製作中密度版本開始。見上面的表1,為不同圖標類型的實際像素尺寸。如果可能,使用矢量圖形或在Photoshop建立路徑,使其更容易修改版本尺寸。

原文過長,無法粘貼進來,還有六分之一尚未完成……

原作者:

來源Icon Design Guidelines, Android 20

譯者糖梨

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.