天天看點

Android Design - 設計風格

1. 48 dp 的設計韻律

一般來說,可觸摸控件以 48 dp 為基礎機關。

Android Design - 設計風格

為什麼是 48 dp?

一般情況下,48 dp 在裝置上的實體大小是 9 mm (會有一些變化)。這剛好在觸摸控件推薦的大小範圍 (7-10 mm) 内,而且這樣的大小,使用者用手指觸摸起來也比較準确、容易。

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

  • 你設計的元素在任何螢幕上顯示時,都不會小于最低推薦值 7 mm。
  • 你可以在資訊密度和界面元素的可操控性之間得到較好的平衡。
Android Design - 設計風格

注意留白

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

例子

Android Design - 設計風格

2. Android 系統預設字型 Rotobo,限定使用以下字号

Android Design - 設計風格

3. Android 圖示

Android Design - 設計風格

由于所有圖示都需要适配不同的像素密度,這裡引入 dp 這一機關,它以中等尺寸,MDPI的螢幕為基準提供像素密度無關的表示。

Android Design - 設計風格

在設計圖示時,對于五種主流的像素密度(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 進行比對。

啟動圖示

啟動圖示在“主螢幕”和“所有應用”中代表你的應用。因為使用者可以設定“主螢幕”的桌面,是以要確定你的啟動圖示在任何背景上都清晰可見。

Android Design - 設計風格
Android Design - 設計風格
Android Design - 設計風格

大小和縮放

  • 移動裝置上的啟動圖示大小必須是 48x48 dp。
  • 在 Play 商店中顯示的啟動圖示大小必須是 512x512 像素。

比例

  • 整體大小是 48x48 dp

樣式

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

Android Design - 設計風格
Android Design - 設計風格

操作欄

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

内置的圖示應當用來表示一些确定的通用操作,例如“重新整理”和“分享”。下面的下載下傳連結提供了一個圖示包,其中的圖示可以縮放到多種螢幕分辨率,并且适合于淺色和深色的 Holo 主題。圖示包中還有沒有樣式化的圖示,可以和你自己的主題搭配,并且提供了 Adobe® Illustrator® 源檔案,你可以自己修改。

下載下傳操作欄圖示包

Android Design - 設計風格
Android Design - 設計風格
Android Design - 設計風格

大小和縮放

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

焦點區域和比例

  • 整體大小是 32x32 dp

    圖形區域 24x24 dp

樣式

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

顔色

顔色: #333333

可用: 60% 的透明度

禁用: 30% 的透明度

顔色: #FFFFFF

可用: 80% 的透明度

禁用: 30% 的透明度

Android Design - 設計風格

小圖示和上下文圖示

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

Android Design - 設計風格
Android Design - 設計風格
Android Design - 設計風格

大小和縮放

  • 小圖示大小應當是 16x16dp。

焦點區域和比例

  • 整體大小是 16x16 dp

    圖形區域 12x12 dp

樣式

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

Android Design - 設計風格

顔色

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

Android Design - 設計風格

通知欄圖示

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

Android Design - 設計風格
Android Design - 設計風格
Android Design - 設計風格

大小和縮放

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

焦點區域和比例

  • 整體大小是 24x24 dp

    圖形區域 22x22 dp

樣式

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

顔色

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

Android Design - 設計風格

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