Android Design - 設計風格

1. 48 dp 的設計韻律

一般來說,可觸摸控件以 48 dp 爲基礎單位。

爲什麼是 48 dp?

一般情況下,48 dp 在設備上的物理大小是 9 mm (會有一些變化)。這剛好在觸摸控件推薦的大小範圍 (7-10 mm) 內,而且這樣的大小,用戶用手指觸摸起來也比較準確、容易。

如果你設計的元素都至少有 48 dp 的高度和寬度,那麼可以保證:

  • 你設計的元素在任何屏幕上顯示時,都不會小於最低推薦值 7 mm。
  • 你可以在信息密度和界面元素的可操控性之間得到較好的平衡。

注意留白

界面元素之間的留白應當是 8 dp。

例子

2. Android 系統默認字體 Rotobo,限定使用以下字號

Android 系統默認字體

3. Android 圖標


由於所有圖標都需要適配不同的像素密度,這裏引入 dp 這一單位,它以中等尺寸,MDPI的屏幕爲基準提供像素密度無關的表示。

在設計圖標時,對於五種主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)應按照 2:3:4:6:8 的比例進行縮放。例如,一個啓動圖標的尺寸爲48x48 dp,這表示在 MDPI 的屏幕上其實際尺寸應爲 48x48 px,在 HDPI 的屏幕上其實際大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其實際大小是 MDPI 的 2 倍 (96x96 px),依此類推。

提示: 雖然 Android 也支持低像素密度 (LDPI) 的屏幕,但無需爲此費神,系統會自動將 HDPI 尺寸的圖標縮小到 1/2 進行匹配。

啓動圖標

啓動圖標在“主屏幕”和“所有應用”中代表你的應用。因爲用戶可以設置“主屏幕”的壁紙,所以要確保你的啓動圖標在任何背景上都清晰可見。

大小和縮放

  • 移動設備上的啓動圖標大小必須是 48x48 dp

  • 在 Play 商店中顯示的啓動圖標大小必須是 512x512 像素

比例

  • 整體大小是 48x48 dp

樣式

使用一個獨特的剪影。三維的正面視圖,看起來稍微有點從上往下的透視效果,使用戶能看到一些景深。

 

操作欄

操作欄圖標是一個圖像按鈕,用來表示用戶在應用中可以執行的重要操作。每一個圖標都使用一個簡單的隱喻來代表將要執行的操作,用戶應當一目瞭然。

內置的圖標應當用來表示一些確定的通用操作,例如“刷新”和“分享”。下面的下載鏈接提供了一個圖標包,其中的圖標可以縮放到多種屏幕分辨率,並且適合於淺色和深色的 Holo 主題。圖標包中還有沒有樣式化的圖標,可以和你自己的主題搭配,並且提供了 Adobe® Illustrator® 源文件,你可以自己修改。

下載操作欄圖標包

大小和縮放

  • 手機操作欄圖標大小應當是32x32 dp

焦點區域和比例

  • 整體大小是 32x32 dp

    圖形區域 24x24 dp

樣式

象形、平面、不要有太多細節,圓滑的弧線或者尖銳的形狀。如果圖形太窄了,那麼向左或向右旋轉 45° 來填滿圖形區域。最細的筆畫不應小於 2dp。

顏色

顏色: #333333
可用: 60% 的透明度
禁用: 30% 的透明度

顏色: #FFFFFF
可用: 80% 的透明度
禁用: 30% 的透明度

小圖標和上下文圖標

在應用的主體區域中,使用小圖標表示操作或者特定的狀態。例如在 Gmail 應用中,每條信息都有一個星型圖標用來標記“重要”。

大小和縮放

  • 小圖標大小應當是 16x16dp

焦點區域和比例

  • 整體大小是 16x16 dp

    圖形區域 12x12 dp

樣式

中性、平面和簡單。最好使用填充圖標而不是細線條勾勒。使用簡單的視覺效果,使用戶容易理解圖標的目的。

顏色

使用有目的的小圖標。例如在 Gmail 應用中,使用黃色的星型圖標表示重要的信息。如果圖標是可操作的,使用和背景色形成對比的顏色。

通知欄圖標

如果你的應用會產生通知,提供一個圖標給系統顯示在狀態欄上,表示有一條新的通知。

大小和縮放

  • 通知欄圖標大小必須是24x24 dp

焦點區域和比例

  • 整體大小是 24x24 dp

    圖形區域 22x22 dp

樣式

使用簡單的平面的圖標,應當和應用的啓動圖標視覺上相似。

顏色

通知欄圖標必須是白色的,這樣系統可以縮放和加深你的圖標。























4. 圖標命名約定

遵守一定的圖標命名約定有助於圖標文件的管理。我們可以爲不同類型的圖標指定不同的命名前綴:

圖標類型 命名前綴
圖標 ic_ ic_star.png
啓動圖標 ic_launcher ic_launcher_calendar.png
菜單圖標和操作欄圖標 ic_menu ic_menu_archive.png
狀態欄圖標 ic_stat_notify ic_stat_notify_msg.png
標籤選項卡圖標 ic_tab ic_tab_recent.png
對話框圖標 ic_dialog ic_dialog_info.png




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章