1. android 平台設計規范有哪些
眾所周知,安卓系統是開源的,國內又有超多的手機廠商,小米、魅族、華為、oppo、三星等,每一個品牌有屬於自己的UI設計規范,但是我們主要分析UI界面尺寸規范。
1、字體
安卓系統中文採用的是思源黑體,英文字體為robot字體。
只使用偶數單位 24 pt,28 pt,36 pt等字體大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什麼意思?
講圖標之前先來分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次數值越大,其解析度越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系統專用的長度單位,設備獨立像素的意思。不同設備有不同的顯示效果,這個和設備硬體有關。多為圖標使用,文字則用sp(放大像素),主要用於字體顯示best for textsize。
px是像素的意思, 不同設備顯示效果相同。
安卓各屏幕密度關系如下:
垂直邊距
①狀態欄:24dp;②工具欄:56dp;③標題和列表項:48dp;④子標題:48dp;⑤內容區域間距離為8dp
6、切圖
上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關系,而xhdpi的Android手機屏幕與xxdpi的屏幕剛好是1.5倍的關系,所以iPhone 6 Plus和xxhdip也可以共用一套切圖,掌握好尺寸關系,能讓工作變得簡單很多。
7、界面適配
安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置,來優化用戶界面設計,帶來更良好的用戶體驗。
如何做到安卓界面適配呢?大家一定要很清楚的了解解析度、屏幕大小、密度的關系;明白實際密度和系統密度的關系,dp、sp、px的區別;明白dp與px的轉換。這里不做過多闡述,後期寫一篇具體的~
安卓的界面規范就講到這里,要明白設計界面規范的意義是確保設計的統一性與合理性,規范維護的是項目的統一,為了項目利益最大化,高效化。所以作為UI設計師的我們,如果一點設計規范不遵守,全靠自己想當然,那就別發給前端人員啦,他也看不懂。
2. 安卓手機設計規范
1080*1920
狀態欄: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