Android系統的圖標設計規範 icon 大小

目前移動平臺的競爭日益激烈,友好的用戶界面可以幫助提高用戶體驗滿意度,圖標Icon是用戶界面中一個重要的組成部分,今天我們來研究和學習一下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)。

  程序可以爲這三種尺寸的屏幕提供默認資源,如有需要,還可以爲各種精度的屏幕提供資源。在運行時,系統會根據屏幕布局加載正確尺寸或者精度的圖片。

  Android支持的屏幕

  Android程序爲最佳顯示效果提供了三種方法:

  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。

  設計指南

  Android標準icon

  Launcher Icon是程序主界面上的功能圖標,Android對於各個icon的風格有一定的要求:

  符合當下的流行趨勢,避免過度使用隱喻。

  高度簡化和誇張,小尺寸圖標也能易於識別,不宜太複雜。

  嘗試抓住程序的主要特徵,比如音像作爲音樂的icon。

  使用自然的輪廓和形狀,看起來幾何化和有機化,不失真實感。

  Icon採用前視角,幾乎沒有透視,光源在頂部。

  不光滑但富有質感。

  正確和錯誤的icon

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

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

  推薦色值

  尺寸和定位

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

  (Full Asset)紅色邊框爲圖標尺寸

  (Icon)藍色邊框是圖形尺寸,比圖標尺寸稍小,圖形之外的空間用於顯示陰影和特殊效果。

  (Square Icon)橙色邊框是另外一種圖形尺寸。兩種類型的圖形尺寸可以達到統一的視覺權重。

  Icon dimensions for high-density (hdpi) screens:

  Full Asset: 72 x 72 px

  Icon: 60 x 60 px

  Square Icon: 56 x 56 px

  Icon Dimensions for medium-density (mdpi) screens:

  Full Asset: 48 x 48 px

  Icon: 40 x 40 px

  Square Icon: 38 x 3

  Icon Dimensions for low-density (ldpi) screens:

  Full Asset: 36 x 36 px

  Icon: 30 x 30 px

  Square Icon: 28 x 28 px

  模板

  下載Android的標準圖標模板,在此基礎上繪製icon,後期機上陰影效果。

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

  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等,今後我們會再介紹。

  最後順帶介紹一點iPhone圖標的設計建議。

  iPhone對於icon的設計建議:富有吸引力和可識別性。由於app軟件可供全球的用戶下載,所以在設計時,也要考慮到用戶不同的文化背景。

  程序icon的設計

  57×57像素,直角。

  無發光效果。

  無透明度。

  將圖片命名爲Icon.png,放置在程序的資源包中,iPhone os會自動生成一個icon。

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

  參考文章:

  《Icon Design Guidelines, Android 2.0》

  《iPhone human interface guidelines》

發佈了20 篇原創文章 · 獲贊 29 · 訪問量 26萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章