狀態欄:24dp
APPBAR(導航欄)最小高度:56dp
菜單欄高度(包含底部):48dp
柵格系統的最小單位是8dp,壹距離、尺寸都應該是8dp的整數倍。以下是壹些常見的尺寸與距離:
圖標和字體大小:
a、啟動圖標(home頁或app列表頁)整體大小為48 x 48 dp 沒有空白的區域的7”完整圖標。 當然也可以是包含空白區域的圖標等於48dp。
b、操作欄圖標,代表用戶在app中可以使用到的最重要的圖標整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp。
c、小圖標/場景圖標,提供操作或特定項目的狀態。
比如gmail app的星型標記、壹些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。
d、通知圖標
如果app有通知,要提供壹個有新通知時顯示在狀態欄的通知圖標。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。
對圖標尺寸進行分類整理,便於界面整體調壹致。
第三部分、android的按鈕和彈出層的設計規範參考。
在720 x 1280 px 的設計稿上,有兩個按鈕(比如登錄、註冊)並排壹行放置,按鈕尺寸最小範圍均為240 x 80 px ,換算為android開發單位就是 120 x 40 dp 。
Android APP設計字體單位: Sp 與 Px 的換算
sp與px的換算公式:sp*ppi/160 = px
ldpi(240*320):120
mdpi(320*480):160 ? 倍率為1
hdpi(480*800):240
xhdpi(720*1080):320
xxhdpi(1080*1920):480
xxxhdpi:640(1440*2560):4
字體規範
註釋最小字體12sp
文本字體14sp
文章標題/圖標名稱18sp
導航標題22sp
ppi為240時字體高度:
註釋最小字體:18sp
文本:21sp
文章標題/圖標名稱:27sp
導航標題:42sp
字體:
Android 系統默認的英文字體 Roboto,默認中文字體都是droid sans fallback、思源黑體
material design字體規範:英文字體使用Roboto,中文字體使用Noto。
Roboto有6種字重:Thin、Light、Regular、Medium、Bold 和 Black。
Noto有7種字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
字體配色:
顏色不宜過多,選擇壹種主色、壹種輔助色。在此基礎上進行明度和飽和度的變化,構成配色方案。
appbar背景使用主色,狀態欄背景使用深壹級的主色或20%透明度的純黑。
小面積需要高亮顯示的地方使用輔助色
其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(包括圖標和分隔線),而且透明度限定了幾個值。
黑色:[87% 普通文字] [54% 減淡文字] [26% 禁用狀態/提示文字] [12% 分隔線]
白色:[100% 普通文字] [70% 減淡文字] [30% 禁用狀態/提示文字] [12% 分隔線]
行距
用sp與px之間的關系進行換算。
元素之間間距間距:
所有可操作元素最小點擊區域尺寸:48dp X 48dp。
柵格系統的最小單位是8dp,壹距離、尺寸都應該是8dp的整數倍。以下是壹些常見的尺寸與距離:
頂部狀態欄高度:24dp
Appbar(導航欄)最小高度:56dp
底部導航欄高度:48dp
懸浮按鈕尺寸:56x56dp/40x40dp
用戶頭像尺寸:64x64dp/40x40dp
小圖標點擊區域:48x48dp
側邊抽屜到屏幕右邊的距離:56dp
卡片間距:8dp
分隔線上下留白:8dp
大多元素的留白距離:16dp
屏幕左右對齊基線:16dp
文字左側對齊基線:72dp
另外註意56dp這個數字,許多尺寸可變的控件,比如對話框、菜單等,寬度都可以按56的整數倍來設計。
還有非常多規範,不詳細列舉,遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多,距離與尺寸要相應增大。
單行、多行間距要控制下,做出規律。
標題42點(14sp) ?副標題36點(12sp)
主標題與副標題間距12sp
註釋:多行主標題行間距為8sp
標題48點(16sp) ?副標題42點(14sp)
主標題與副標題(單行)間距8sp
標題42點(16sp) ?副標題42點(14sp)
主標題與副標題(單行)間距10sp
帶分割線的列表上下間距等分,距離為16sp
不帶分割線的列表上下間距為32sp。
解釋說明類的列表項上下間距為22sp。
懸浮按鈕距離底部的距離為:18sp
文字排版
常用字號:
。12sp 小字提示14sp(桌面端13sp)
。正文/按鈕文字16sp(桌面端15sp)
。小標題20sp Appbar文字24sp
。大標題34sp/45sp/56sp/112sp 超大號文字
長篇幅正文,每行建議60字符(英文)左右。短文本,建議每行30字符(英文)左右。
心得與體會:設計時,可參照設計規範進行設計,具體到項目時可根據項目的具體情況制定規範。
嘗試8的倍數,如果不合適,在3的倍率中能夠被3整除。
設計來源於細節,再小的細節中也要分等級。
ps cc 2017
adobe xd 交互設計神器。
adobe stock?
svg格式字體
.9圖片最小點擊區域不足48dp*48dp