安卓手机设计规范

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容