Android的icon設(shè)計(jì)指南

1、Android的icon設(shè)計(jì)指南在研究Android的icon設(shè)計(jì)之前，有必要先了解Android的界面是如何適配多樣化屏幕的。適配性由于同一個(gè)UI元素（如100 x100像素的圖片）在高精度的屏幕上要比低精度的屏幕上看起來(lái)要小，為了讓這兩個(gè)屏幕上的圖片看起來(lái)效果差不多，可以采用以下兩種方法：程序?qū)D片進(jìn)行縮放，但是效果較差。為這兩個(gè)精度屏幕的手機(jī)各提供一個(gè)圖片。但是屏幕的參數(shù)多樣化，為每一個(gè)精度的屏幕都設(shè)計(jì)一套icon,工作量大并且不能滿足程序的兼容性要求，勢(shì)必要對(duì)屏幕的分級(jí)，如在160dpi和180dpi的手機(jī)屏幕上采用同一套icon,當(dāng)這套icon在240dpi效果滿足不了設(shè)計(jì)要求，就需

2、要另做一套稍大些的icon。在Android1.5以及更早的版本中，只支持3.2屏幕上的HVGA（320 x480）分辨率，開(kāi)發(fā)人員也不需要考慮界面的適配性問(wèn)題。從Android1.6之后，平臺(tái)支持多種尺寸和分辨率的設(shè)備，這也就意味著開(kāi)發(fā)人員在設(shè)計(jì)時(shí)要考慮到屏幕的多樣性。為了簡(jiǎn)化設(shè)計(jì)并且兼容更多的手機(jī)屏幕，平臺(tái)依照尺寸和分辨率對(duì)屏幕進(jìn)行了區(qū)分：三種尺寸：大，中，小。三種精度：高（hdpi），中（mdpi）和低（Idpi）。程序可以為這三種尺寸的屏幕提供默認(rèn)資源，如有需要，還可以為各種精度的屏幕提供資源。在運(yùn)行時(shí)，系統(tǒng)會(huì)根據(jù)屏幕布局加載正確尺寸或者精度的圖片。Android支持的屏幕在運(yùn)行時(shí)，程

3、序?yàn)樽罴扬@示效果提供了三種方法圖片縮放基于當(dāng)前屏幕的精度，平臺(tái)自動(dòng)加載任何未經(jīng)縮放的限定尺寸和精度的圖片。如果圖片不匹配，平臺(tái)會(huì)加載默認(rèn)資源并且在放大或者縮小之后可以滿足當(dāng)前界面的顯示要求。例如，當(dāng)前為高精度屏幕，平臺(tái)會(huì)加載高精度資源（如圖片），如果沒(méi)有，平臺(tái)會(huì)將中精度資源縮放至高精度。自動(dòng)定義像素尺寸和位置如果程序不支持多種精度屏幕，平臺(tái)會(huì)自動(dòng)定義像素絕對(duì)位置和尺寸值等，這樣就能保證元素能和精度160的屏幕上一樣能顯示出同樣尺寸的效果。例如，要讓W(xué)VGA高精度屏幕和傳統(tǒng)的HVGA屏幕一樣顯示同樣尺寸的圖片，當(dāng)程序不支持時(shí)，系統(tǒng)會(huì)對(duì)程序慌稱屏幕分辨率為320 x533,在（10,10）到（10

4、0,100）的區(qū)域內(nèi)繪制圖形完成之后，系統(tǒng)會(huì)將圖形放大到（15，15）到（150，150）的屏幕顯示區(qū)域。兼容更大尺寸的屏幕當(dāng)前屏幕超過(guò)程序所支持屏幕的上限時(shí)，定義supports-screens元素，這樣超出顯示的基準(zhǔn)線時(shí),平臺(tái)在此顯示黑色的背景圖。例如,WVGA中精度屏幕上,如程序不支持這樣的大屏幕，系統(tǒng)會(huì)謊稱是一個(gè)320 x480的，多余的顯示區(qū)域會(huì)被填充成黑色。但為了達(dá)到最佳的顯示效果，最好的方法還是設(shè)計(jì)多套圖片。那就有必要對(duì)于所有的屏幕依據(jù)精度值進(jìn)行分級(jí)（高中低），之后再設(shè)計(jì)三套icon：先為主流的中精度屏幕（HVGA）設(shè)計(jì)一套icon，確定圖片的像素尺寸。為高精度屏幕將圖片放大到1

5、50%，為低精度屏幕將圖片縮小至75%。將這三套資源放置到程序的三個(gè)文件夾下：res/drawable-mdpi/、res/drawable-hdpi/、res/drawable-ldpi/。程序在運(yùn)行時(shí)，平臺(tái)會(huì)根據(jù)屏幕的精度調(diào)取合適的icon。設(shè)計(jì)指南Android標(biāo)準(zhǔn)iconLauncherIcon是程序主界面上的功能圖標(biāo)，Android對(duì)于各個(gè)icon的風(fēng)格有一定的要求：符合當(dāng)下的流行趨勢(shì)，避免過(guò)度使用隱喻。高度簡(jiǎn)化和夸張，小尺寸圖標(biāo)也能易于識(shí)別，不宜太復(fù)雜。嘗試抓住程序的主要特征，比如音像作為音樂(lè)的icon。使用自然的輪廓和形狀，看起來(lái)幾何化和有機(jī)化，不失真實(shí)感。Icon采用前視角，幾

6、乎沒(méi)有透視，光源在頂部。不光滑但富有質(zhì)感。正確和錯(cuò)誤的icon另外，所有的icon都有文字標(biāo)簽，不要在設(shè)計(jì)時(shí)把文字也放到icon中。LauncherIcon通常是一個(gè)較大的標(biāo)準(zhǔn)圖標(biāo)中包含一個(gè)小圖標(biāo)，使用一個(gè)中性色彩和一個(gè)主要色彩，并保持高度的對(duì)比，不宜過(guò)度飽和。#FFFFFF#BFBFBF#6699FF#99CC33#FFCCOO#808030#33G6CC#OOCCOO#FF9900推薦色值尺寸和定位Launchericons要有多樣化的形狀和樣式，但又要形成統(tǒng)一的視覺(jué)風(fēng)格，其尺寸和定位也用統(tǒng)一：(FullAsset)紅色邊框?yàn)閳D標(biāo)尺寸(Icon)藍(lán)色邊框是圖形尺寸，比圖標(biāo)尺寸稍小，圖形之外

7、的空間用于顯示陰影和特殊效果。(SquareIcon)橙色邊框是另外一種圖形尺寸。兩種類型的圖形尺寸可以達(dá)到統(tǒng)一的視覺(jué)權(quán)重。Icondimensionsforhigh-density(hdpi)screens:FullAsset:72x72pxIcon:60 x60pxSquareIcon:56x56pxIconDimensionsformedium-density(mdpi)screens:FullAsset:48x48pxIcon:40 x40pxSquareIcon:38x3IconDimensionsforlow-density(ldpi)screens:FullAsset:36x36

8、pxIcon:30 x30pxSquareIcon:28x28px模板下載Android的標(biāo)準(zhǔn)圖標(biāo)模板，在此基礎(chǔ)上繪制icon,后期還要加上陰影效果。WVGA（高精度）屏幕的陰影：Effect:DropShadowColor:#000000BlendMode:MultiplyOpacity:75%Angle:90Distance:2pxSpread:0%Size:5px另外，還有Menuicon、Statusbaricon、Tabicon、Dialogicon和Listviewicon的設(shè)計(jì)教程請(qǐng)查看原文吧。非常詳盡的icon設(shè)計(jì)教程，一個(gè)程序里要放置三套icon,還有Android硬件比較好，不然內(nèi)存爆掉了。iPhone對(duì)于icon的設(shè)計(jì)建議：富有吸引力和可識(shí)別性。由于app軟件可供全球的用戶下載，所以在設(shè)計(jì)時(shí)，也要考慮到用戶不同的文化背景。程