安卓 设计-安卓手机设计规范

在讲安卓设计规范之前我们先来看看一下的问题:

*规范是什么?

*规范的目的是什么?

*怎样进行规范?

规范是什么

规范:意指明文规定或约定成俗的标准。或是按照标准,规范的要求进行操作,使某一行为或某一活动达到或是超越规定的标准。

也就是说 规范通过制定一些规定与约束 (如字体大小,界面尺寸,图标大小等) 使某一行为 (如项目开发,组件库的组件等) 达到标准 。

制定规范的目的是 确保设计的统一性与合理性 。规范维护的是项目的统一,而不是设计师个人的设计。想一想在公司里,除了设计,前有产品经理,后有程序员,还有用户,你做的东西都是要交给他们的。产品经理看你的设计是否展现了她的需求(设计内容是否包括前期讨论的内容),程序员问你要各种切图(图标、组件、布局、间距、字体大小等),用户看你的设计(颜色,图标使用的大小范围等),如果设计师完全没有规范,全凭自己的“天马行空”设计出来的东西,是会带来很大的麻烦的,举个简单的例子,切图规范,如果你的命名只有自己能看懂,那你就不要发给程序员了吧~因为发给他他也找不到哪个是哪个,这个图标应该放在哪里。你所做的设计是为了公司项目服务的,是为了客户服务的,所以你设计的东西就得满足项目中其他职位(产品经理、程序员)使用的需求,以及符合用户的使用习惯。所以 规范是为了项目利益最大化,高效化而在团队中制定成的约定。

不同的规范虽然内容不同但是包含的内容其实是差不多的,通常包括布局,颜色,图标,组件,字体这几个方面。接下来我们就来看看安卓中常见的设计规范,相信学习了之后,以后项目里的设计规范你都很清楚了,在设计中多加注意就行。一个产品设计完成之后,进行设计规范制作也是对项目总结的一个方法。能注意规范且会制定规范。

在进行app设计的时候,我们都会先建画布大小,当然是根据安卓界面尺寸来建立的。安卓手机那么多,不必每一个都记住。只要记住一两个,懂得之间的换算关系就行了。

目前安卓端主流尺寸主要是@1.5x,@2x以及@3x,记住下面三个就够用了。

@1.5x    480x854 /540x960

@2x      720x1280( 这是我最常用的界面尺寸)

@3x      1080x1920

考考你,那@1x是多少呢?

除了知道界面尺寸外,还得知道状态栏,导航栏,菜单栏的高度是多少,设计时建立好相应的参考线。

建议取用 720 ×1280 这个尺寸,这个尺寸 720×1280中显示完美,切图后的图片文件大小也适中,应用的内存消耗也不会过高。

对于图标其实在规范上面有很多要注意的,比如图标大小,图标设计,图标切图规范,这里就重点讲图标大小,之后会再讲图标设计规范。

安卓系统中,中文使用的是谷歌思源,英文使用的是Roboto。思源字体,是一种非衬线字体,Adobe称思源体为Source Han Sans,Google称思源体为Noto Sans CJK. 思源体包含7个自重,也就是7中不同粗细的字体。

对于字体或许在设计过程中你会选用其他字体,但是需要注意你所用的字体是否利于用户阅读,是否舒服等问题。

对于字体的大小,在界面设计过程中,需要统一,比如所有正文是统一大小,所有标题是统一大小。

不同风格的字体大小,给人的感觉也是不同的,我们要学会灵活应用。安卓文字单位是sp,以下文字是按照@1x倍率来规范的

在安卓中,标注距离一般用dp,标注文字用sp,而知之间的换算关系为:

1dp=(屏幕ppi/160)px

不清楚单位的,可以去找上一篇文章了解px pt sp dp ppi。

Android开发需要的设计交付物至少要有:高保真UI图,标注,切图

这是最后,也是最重要的一点,因为你所切的图是要交到程序员的手里的,他写的程序达不到你想要的效果可能就是他看不懂你给他的规范~

1.切图尺寸必须为双数

2.单像素的图会出现边缘模糊的情况

3.命名需要规范

基本上 App 的切图可分为下面几大类: 背景、按钮、图示、图片、照片、TabBar icon 等。

一般命名规范可以为:

前缀:位置 组件 用途

后缀:状态

如用 来命名 。App 里的按钮拥有 4 种属性,分别为一般normal、点击highlight、不能点击disabled、选中(selected)。

但不追求精致与完整度的话,只出一般属性按钮图档就可以了。如果是点击(hightlight)状态就可以命名为:btn-   表示取消按钮点击时图标。

就算不是按照很严格的规范来命名,至少能让程序员知道你这个图标是在那种情况下使用的图标,这就需要设计师跟程序员很好的沟通,方便整个团队的开发,提高团队的开发效率

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

1、绘装:湖南绘装网络科技有限公司旗下产品,一款手机家庭装修小助手,提供了咨询、室内设计、施工等服务,业主足不出户就可随时掌握工地细节。该软件内具有大量资深优质的设计师/工长供业主选择。

2、窝牛装修:窝牛装修是一款装修必备软件,窝牛装修中收集了很多有才华的家居设计师,展示他们的作品,列出他们的购物清单,方便用户参考。其次,该软件在某些地区推出了装修团购,还在某些地区推出了施工队报价和比价。

3、土巴兔装修:土巴兔装修app,平均立省30%装修预算,安装后,可专享“免费户型设计”服务。除此之外土巴兔装修管家革命性颠覆装修行业,业主感觉装修满意后,再付款给装修公司。

4、最美装修:最美装修app是一款免费的家装设计软件,最美装修app汇聚了海量的房屋室内装修实景图,不管是设计师还是老百姓要装修都能用得上,在最美装修app选好装修样式,直接约设计师上门装修,不用再纠结,方便省事。

5、99家居:99家居是一款手机生活家装服务软件,99家居里面拥有海量的3D真实户型,让用户随意搭配随意选择,选择适合的装修户型风格,一站式装修、购物全搞定,满足用户所有的高品质需求。

参考资料来源:

找图网-绘装

参考资料来源:

找图网-窝牛装修

参考资料来源:

找图网-土巴兔装修

参考资料来源:

找图网-最美装修

参考资料来源:

找图网-99家居