標籤:
上一篇我們主要瞭解了為什麼適配,以及怎麼適配,同時給出了部分切圖規範,和在開發過程中需要的一些注意事項,這一遍主要從官方給出的指導建議出發,從視覺的角度來說說怎麼適配。
度量單位和網格48 dp 的設計韻律
一般來說,可觸摸控制項以 48 dp 為基礎單位。
為什麼是 48 dp?
一般情況下,48 dp 在裝置上的物理大小是 9 mm (會有一些變化)。這剛好在觸摸控制項推薦的大小範圍 (7-10 mm) 內,而且這樣的大小,使用者用手指觸摸起來也比較準確、容易。如果你設計的元素都至少有 48 dp 的高度和寬度,那麼可以保證:
你設計的元素在任何螢幕上顯示時,都不會小於最低推薦值 7 mm。
你可以在資訊密度和介面元素的可操控性之間得到較好的平衡。
注意留白: 介面元素之間的留白應當是 8 dp。
字型的縮放
為不同控制項引入字型大小上的反差有助於營造有序、易懂的排版效果。但在同一個介面中使用過多不同的字型大小則會造成混亂。Android 設計架構使用以下有限的幾種字型大小:
顏色
使用不同顏色是為了強調資訊。選擇合適你設計的顏色,並且提供不錯的視覺對比效果。注意紅色和綠色對於色弱的人士可能無法分辨。
藍色是 Android 調色盤中的標準顏色。每一種顏色都有相應的深色版本以供使用。
表徵圖
表徵圖就是一個表示螢幕內容並為操作、狀態和應用提供第一印象的小幅圖片。
在為應用設計表徵圖時,需要牢記裝置是多種多樣的,這就帶來了不同的像素密度(詳見 裝置與顯示 )。為了應對這一問題,提供不同尺寸的表徵圖是個不錯的主意。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
行動裝置上的啟動表徵圖大小必須是 48x48 dp。在 Play 商店中顯示的啟動表徵圖大小必須是 512x512 像素。
使用一個獨特的剪影。三維的正面視圖,看起來稍微有點從上往下的透視效果,使使用者能看到一些景深
操作欄
操作欄表徵圖是一個映像按鈕,用來表示使用者在應用中可以執行的重要操作。每一個表徵圖都使用一個簡單的隱喻來代表將要執行的操作,使用者應當一目瞭然。
內建的表徵圖應當用來表示一些確定的通用操作,例如“重新整理”和“分享”。下面的下載連結提供了一個表徵圖包,其中的表徵圖可以縮放到多種螢幕解析度,並且適合於淺色和深色的 Holo 主題。表徵圖包中還有沒有樣式化的表徵圖,可以和你自己的主題搭配,並且提供了 Adobe? Illustrator? 源檔案,你可以自己修改。
手機操作欄表徵圖大小應當是 32x32 dp。
整體大小是 32x32 dp繪圖區域 24x24 dp
象形、平面、不要有太多細節,圓滑的弧線或者尖銳的形狀。如果圖形太窄了,那麼向左或向右旋轉 45° 來填滿繪圖區域。最細的筆畫不應小於 2dp
顏色: #333333 ,可用: 60% 的透明度,禁用: 30% 的透明度顏色: #FFFFFF,可用: 80% 的透明度,禁用: 30% 的透明度
小表徵圖和上下文表徵圖
在應用的主體地區中,使用小表徵圖表示操作或者特定的狀態。例如在 Gmail 應用中,每條資訊都有一個星型表徵圖用來標記“重要”。
小表徵圖大小應當是 16x16 dp。
整體大小是 16x16 dp繪圖區域 12x12 dp
中性、平面和簡單。最好使用填充表徵圖而不是細線條勾勒。使用簡單的視覺效果,使使用者容易理解表徵圖的目的。
使用有目的的小表徵圖。例如在 Gmail 應用中,使用黃色的星型表徵圖表示重要的資訊。如果表徵圖是可操作的,使用和背景色形成對比的顏色。
通知欄表徵圖
如果你的應用會產生通知,提供一個表徵圖給系統顯示在狀態列上,表示有一條新的通知
通知欄表徵圖大小必須是 24x24 dp
整體大小是 24x24 dp繪圖區域 22x22 dp
使用簡單的平面的表徵圖,應當和應用的啟動表徵圖視覺上相似
通知欄表徵圖必須是白色的,這樣系統可以縮放和加深你的表徵圖
設計小技巧
以下這些小技巧可能對你建立表徵圖或其他圖片資源有所協助。這裡我們假定你也使用諸如 Adobe? Photoshop? 這類的位元影像或向量圖編輯程式。
儘可能使用向量圖
Adobe? Photoshop? 這類影像編輯工具允許使用者混合使用向量圖和位元影像。儘可能的使用向量圖,這樣在需要放大表徵圖時就可以避免細節上的損失。
使用向量圖的另一個好處是能更方便的在低解析度的螢幕上讓邊緣和角落與像素邊界對齊。
使用更大的畫布
為了更好的適配不同的像素密度,最好使用數倍於靶心圖表尺規寸的畫布。例如,啟動表徵圖在 MDPI、HDPI、XHDPI 和 XXHDPI 下的寬度為 48、72、96 和 144 px,使用 864x864 px 的畫板可以降低縮放表徵圖時的工作量。
縮放時,按需重繪位元影像圖層
如果需要放大的表徵圖中包含位元影像圖層,這些圖層需要進行手動重繪,以便在更高的像素密度下獲得更好的顯示效果。例如,為 MDPI 所繪製的 60x60 px 的圓,在適配 HDPI 螢幕時需重繪成 90x90 px。
表徵圖命名規範
遵守一定的表徵圖命名規範有助於表徵圖檔案的管理。我們可以為不同類型的表徵圖指定不同的命名首碼:
聊聊android適配(下)