android 螢幕解析度問題

iPhone的icon設計就這麼簡單，iPhone的螢幕只有320×480像素，所以程式沒有適配性問題。

Android

在研究 Android的icon設計之前，有必要先瞭解Android的介面是如何適配多樣化螢幕的。

適配性

由於同一個UI元素（如100 x100像素的圖片）在高精度的螢幕上要比低精度的螢幕上看起來要小，為了讓這兩個螢幕上的圖片看起來效果差不多，可以採用以下兩種方法：

程
序將圖片進行縮放，但是效果較差。
為這兩個精度螢幕的手機各提供一個圖片。

但是螢幕的參數多樣化，為每一個精度的螢幕都設計一套icon，工作量大並且不能滿足程式的相容
性要求，勢必要對螢幕的分級，如在160dpi和
180dpi的手機螢幕上採用同一套icon，當這套icon在240dpi效果滿足不了設計要求，就需要另做一套稍大些的icon。

 

在
Android 1.5以及更早的版本中，只支援3.2″ 螢幕上的HVGA
(320×480)解析度，開發人員也不需要考慮介面的適配性問題。從Android
1.6之後，平台支援多種尺寸和解析度的裝置，這也就意味著開發人員在設計時要考慮到螢幕的多樣性。

為了簡化設計並且相容更多的手機螢幕，平台依照尺寸和解析度對螢幕進行了區分：

三
種尺寸：大，中，小。
三種精度：高（hdpi），中（mdpi）和低（ldpi）。

程式可以為這三種尺寸的螢幕提供預設資源，如有需要，還可以為各種精度
的螢幕提供資源。在運行時，系統會根據螢幕布局載入正確尺寸或者精度的圖片。

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Android的icon尺寸

在運行時，程式為最佳顯示效果提供了三種方法：

1.圖片縮放

基於當前螢幕的
精度，平台自動載入任何未經縮放的限定尺寸和精度的圖片。如果圖片不匹配，平台會載入預設資源並且在放大或者縮小之後可以滿足當前介面的顯示要求。例如，
當前為高精度螢幕，平台會載入高精度資源（片），如果沒有，平台會將中精度資源縮放至高精度。

2.自動定義像素尺寸和位置

如果程式不支援多種精度螢幕，平台會自動
定義像素絕對位置和尺寸值等，這樣就能保證元素能和精度160的螢幕上一樣能顯示出同樣尺寸的效果。例如，要讓WVGA高精度螢幕和傳統的HVGA 屏
幕一樣顯示同樣尺寸的圖片，當程式不支援時，系統會對程式慌稱螢幕解析度為320×533，在（10，10）到（100，100）的地區內繪製圖形完成之
後，系統會將圖形放大到（15，15）到（150，150）的螢幕顯示地區。

3．兼
容更大尺寸的螢幕

當前螢幕超過程式所支援螢幕的上限時，定義supports-
screens元素，這樣超出顯示的基準線時，平台在此顯示黑色的背景圖。例如，WVGA 中精度螢幕上，如程式不支援這樣的大螢幕，系統會謊
稱是一個320×480的，多餘的顯示地區會被填充成黑色。

但為了達到最佳的顯示效
果，最好的方法還是設計多套圖片。那就有必要對於所有的螢幕依據精度值進行分級（高中低），之後再設計三套icon：

先為主流的中精度屏
幕（HVGA）設計一套icon，確定圖片的像素尺寸。
為高精度螢幕將圖片放大到150%，為低精度螢幕將圖片縮小至75%。
將這三套資
源放置到程式的三個檔案夾下 ：res/drawable-mdpi/ 、res/drawable-hdpi/、 res/drawable-
ldpi/。程式在運行時，平台會根據螢幕的精度調取合適的icon。

設計指南

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Android標準icon

Launcher
Icon是程式主介面上的功能表徵圖，Android對於各個icon的風格有一定的要求：

符合當下的流行趨勢，避免過度使用隱喻。
高
度簡化和誇張，小尺寸表徵圖也能易於識別，不宜太複雜。
嘗試抓住程式的主要特徵，比如音像作為音樂的icon。
使用自然的輪廓和形狀，看起
來幾何化和有機化，不失真實感。
Icon採用前視角，幾乎沒有透視，光源在頂部。
不光滑但富有質感。

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

正確和錯誤的icon

另外，所有的icon都有文字標籤，不要在設計時把文字也放到icon中。

Launcher
Icon通常是一個較大的標準表徵圖中包含一個小表徵圖，使用一個中性色彩和一個主要色彩，並保持高度的對比，不宜過度飽和。

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

推薦色值

尺寸和定位

Launcher
icons要有多樣化的形狀和樣式，但又要形成統一的視覺風格，其尺寸和定位也用統一：

（Full Asset）紅色邊框為表徵圖尺寸
（Icon）
藍色邊框是圖形尺寸，比表徵圖尺寸稍小，圖形之外的空間用於顯示陰影和特殊效果。
（Square
Icon）橙色邊框是另外一種圖形尺寸。兩種類型的圖形尺寸可以達到統一的視覺權重。

Icon dimensions for high-density (hdpi)
screens:

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Full Asset: 72 x 72 px
Icon: 60 x 60 px
Square
Icon: 56 x 56 px

Icon Dimensions for medium-density (mdpi)
screens:

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Full Asset: 48 x 48 px
Icon: 40 x 40 px
Square
Icon: 38 x 3

Icon Dimensions for low-density (ldpi) screens:

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Full Asset: 36 x 36 px
Icon: 30 x 30 px
Square
Icon: 28 x 28 px

模板

下載Android的標準表徵圖模板，在此基礎上繪製icon，後期還要加上陰影製作效果。

WVGA (高精度) 螢幕的陰影:

螢幕解析度問題（轉載） - 雲端漫步 - 心路曆程" border="0">

Effect: Drop Shadow
Color: #000000
Blend
Mode: Multiply
Opacity: 75%
Angle: 90°
Distance: 2px
Spread:
0%
Size: 5px

另外，還有Menu icon 、Status bar icon 、Tab icon、
Dialog icon 和List view icon的設計教程請查看原文吧。

非常詳盡的icon設計教程，一個程式裡要放置三套icon，還有Android硬體比較好，不然
記憶體爆掉