天天看點

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

 目前移動平台的競争日益激烈,友好的使用者界面可以幫助提高使用者體驗滿意度,圖示icon是使用者界面中一個重要的組成部分,今天我們來研究和學習一下android系統的圖示設計規範。在探讨android的icon設計之前,我們有必要先了解android的界面是如何适配多樣化螢幕的。

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

  适配性

  由于同一個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系統的圖示設計規範 icon 大小

  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 大小

  android标準icon

  launcher icon是程式主界面上的功能圖示,android對于各個icon的風格有一定的要求:

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

  高度簡化和誇張,小尺寸圖示也能易于識别,不宜太複雜。

  嘗試抓住程式的主要特征,比如音像作為音樂的icon。

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

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

  不光滑但富有質感。

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

  正确和錯誤的icon

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

  launcher icon通常是一個較大的标準圖示中包含一個小圖示,使用一個中性色彩和一個主要色彩,并保持高度的對比,不宜過度飽和。

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

  推薦色值

  尺寸和定位

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

  (full asset)紅色邊框為圖示尺寸

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

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

  icon dimensions for high-density (hdpi) screens:

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

  full asset: 72 x 72 px

  icon: 60 x 60 px

  square icon: 56 x 56 px

  icon dimensions for medium-density (mdpi) screens:

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

  full asset: 48 x 48 px

  icon: 40 x 40 px

  square icon: 38 x 3

  icon dimensions for low-density (ldpi) screens:

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

  full asset: 36 x 36 px

  icon: 30 x 30 px

  square icon: 28 x 28 px

  模闆

  下載下傳android的标準圖示模闆,在此基礎上繪制icon,後期機上陰影效果。

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

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

  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軟體可供全球的使用者下載下傳,是以在設計時,也要考慮到使用者不同的文化背景。

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

  程式icon的設計:

  57×57像素,直角。

  無發光效果。

  無透明度。

  将圖檔命名為icon.png,放置在程式的資源包中,iphone os會自動生成一個icon。

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

  iphone的icon設計就這麼簡單,iphone的螢幕隻有320×480像素,是以程式沒有适配性問題。

  參考文章:

  《icon design guidelines, android 2.0》

  《iphone human interface guidelines》

繼續閱讀