Android UI 设计规范,Android学习路线指南

DP/PX在线转换工具:http://pixplicity.com/dp-px-converter/

  • 字体大小单位是 sp

1.5 切图


注意:切图素材文件大小尽量保持 <= 200Kb,主要为png格式。

2. Material Design相关


Material Design,中文名:质感设计,是由 Google 推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

想要深入了解 Material Design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到90%了。实际上,Google 官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。

Material Design 中文版文档

2.1 核心思想

Material Design 的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

Material Design 是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一致。

2.2 材质与空间

  • 材质

Material Design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。

这些是纸片的魔法特性,真实纸片所不具备的能力:

  • 纸片可以伸缩、改变形状

  • 纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分

  • 多张纸片可以拼接成一张

  • 一张纸片可以分裂成多张

  • 纸片可以在任何位置凭空出现

不过,魔法纸片有些效果是禁止的:

  • 一项操作不能同时触发两张纸片的反馈

  • 层叠的纸片,海报高度不能相同

  • 纸片不能互相穿透

  • 纸片不能弯折

  • 纸片不能产生透视,必须平行于屏幕

  • 空间

Material Design引入了z轴的概念,z轴垂直于屏幕,用来表现元素的层叠关系。z值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是1dp。

所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。

注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。

2.3 动画

Material Design 重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。

  • ** easing **

动画要贴近真实世界,就要重视 easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing,要先考虑它在现实世界中的运动规律。

  • ** 水波反馈 **

所有可点击的元素,都应该有这样的反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来,体现了 Material Design 动画的功能性。

  • ** 转场效果 **

通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。

从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。

多个相似元素,动画的设计要有先后次序,起到引导视线的作用。

相似元素的运动,要符合统一的规律。

  • ** 细节动画 **

通过图标的变化和一些细节来达到令人愉悦的效果

2.4 颜色

颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。

  • 8
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android UI设计规范文档 1 设计原则 2 风格 2.1 设备和显示 Android 驱动了数百万的手机、平板和其它设备,兼容了各种屏幕宽度和比例。利用 Android 灵活的布局系统,您可以创造出从平板到手机都看起来很优雅的应用。 灵活 对您的布局进行放大、缩小或者裁减以适应不同的高度和宽度。 优化布局 在较大的设备上,善于利用大屏幕的优势。设计混合的视图以显示更多的内容,提供更简便的导航。 适用于各种设备 为不同的像素密度 (DPI) 提供不同资源 (比如drawable) ,使您的应用在任何设备上都看起来很棒。 策略 那么您应当如何开始为多种屏幕设计呢?一种方法是以一个基本的标准 (中等尺寸,MDPI) 开始,之后将其缩放到不同的尺寸。另一种方法是从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。 2.2 触摸响应 使用颜色和高亮效果来响应用户的触摸,突出显示手势的效果以及表明哪些操作是可用的。 任何时候,每当用户触摸您应用中的可操作区域,都应当给予视觉上的响应。这样可以使得用户了解他触摸了啥,并且表明您的应用一直在工作。 按钮的状态 大多数的 Android UI 元素都有内置的触摸反馈效果,包括表明元素是否可以操作的视觉效果。 交流 当您的对象需要对复杂的手势做出响应时,应当帮助用户了解该操作的结果将会是什么。例如,当您在 Android 系统“最近的应用”界面左右滑动一个缩略图的时候,它会开始变淡。这样做就使得用户明白滑动可以移除这条记录。 边界 当用户试图滑出可滑动区域的范围时,应当在边界提供视觉的反馈。例如,如果用户试图从主屏幕的第一屏向左滑动时,屏幕就会向右倾斜表明不能再往这边移动了。许多 Android 的可滑动 UI 类 (例如列表 lists 和网格列表 grid lists) 都已经内置了边界反馈。如果您需要自定义界面时,记住要提供边界反馈哦。 2.3 度量单位和网格 总的来说,可触摸控件都是以 48dp 为单位的。 为什么是 48dp? 一般情况下,48dp 在设备上的物理大小是 9mm (会有一些浮动)。这是触摸控件的推荐大小 (范围7-10mm) ,用户用手指触摸起来比较容易、且准确。 如果您设计的 UI 元素都至少有 48dp 的高度和宽度,那么可以保证:  您设计的元素在任何屏幕上显示时,都不会小于推荐的最低值 7mm。  你可以在信息密度和界面的可操控性之间得到较好的平衡。 注意留白 界面元素之间的留白应当是 8dp。 一个例子 - Examples

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值