Material Design-Android 设计简介

知识点

1. 理解 Android 的屏幕
2. 熟悉 Android 的布局和主题样式设计
3. 理解 Material Design 的定义和概念

参考资料

udacity-在 Android 应用中使用材料设计

概述

---

了解 Android 设计的工作原理，然后再以材料设计（Material Design）的视角探究 Android 设计的关键性工作原理 Android 5.0 中的新视觉语言。

Android 屏幕

---

总的来说，想要设计美观的按钮、文本和图形，除非你了解呈现它们的屏幕。

可以参考以下这两篇文章，对 Android 屏幕有一个具体的认识。

Android 支持多种屏幕第一篇

Android 支持多种屏幕第二篇

主要就是理解 Android 的密度无关像素（dip/dp），密度桶（density buckets）即Android 设定的几个密度组（mdpi、hdpi、xhdpi 等）。

Android Asset Studio
，这个工具可以快速的生成一套各种密度的图标，非常有用。

Android 布局

---

UI 布局也叫做“视图层级结构”（view hierarchy）的嵌套树。这个树形结构定义了从根视图到叶视图的 UI 整体结构。我们在应用屏幕中见到的每一项内容，都是这个层级结构的一个视图。

盒子模型

如何确定元素尺寸和它们在屏幕上的位置？

这就要引入一个概念“盒子模型”（box model）。Android 中的所有 UI 元素都有一个最小的矩形空间，用来包裹对象，我们称之为“内容范围(content bounds)”

何时使用内边框或外边框？或者何时共同使用它们？

关键一点就是，如果你希望空间成为对象的一部分就需要使用内边框。如果不希望空间成为对象的一部分，就使用外边框。

何时成为对象的一部分？

如果你想增大可触摸区域或对象背景，就使用内边框。反之使用外边框。

元素之间的外边框可以将各元素独立开来，使它们不在其它元素的点击区域内。我们这里是没有边框的概念的，尽管你能够运用边框，但这些通常是通过背景图像实现的。更多内容可以参考 W3C(组织) 盒模型。

核心布局管理器

核心布局管理器（the core layout managers）, 如帧布局、线性布局和相对布局等。

帧布局

对它范围内的视图进行排列的方式是层层叠加，每个视图都有一个对齐的位置或者填充父类帧布局的宽度或高度的拉伸度，帧布局是呈现重叠（overlapping）内容的好办法。

线性布局

在单一方向上排列子类，比如垂直线性布局从上至下排列子类。

相对布局

根据每个图标的相对位置或布局范围内的相对位置来排列视图。虽然十分强大，但也会有一些性能问题（performance implications）,所以尽量不要使用这个布局，特别是在你层级的根目录附近。

网格布局

在网格内排列子类，在每个子类的网格内有既定的行或列时，它们可以在任意方向上被自动排列。如果你希望沿着多个轴对齐内容，比如同时在网格内进行纵向和横向的对齐。

ScrollView

只有一个单一的子类（one single child），scroll its contents,either up or down。

确定布局

根据我们的业务需求，对界面的布局有一个形象的认识。

Material Design 是什么？

---

Material Design 是一个 cross platform visual（跨平台视觉）, motion and interaction design （动画和交互设计）体系。

它利用我们在物理世界的经验，使得 UI 变得生动和直观。引进了物理世界的概念比如光、影和呈现出来的体积。

它借鉴了 print design （印刷设计）的灵感，使 UI 变的简单和美观。

Material Design 的四个主要概念

---

有形平面（Tangible surface）是我们能够触摸输入并与之进行交互的平面；

大胆的图形设计（Bold graphic design），向伟大的排版和印刷布局致敬；

有意义的动作(Meaningful motion)，指导并鼓励用户；

自适应设计(Adaptive design)，无论屏幕大小，看起来都非常棒的 UI。