设计原理

设计是一门让人感觉很抽象的艺术。设计需要从两个方面来考虑问题:

  • 实用:体现在功能上和交互性上;
  • 美观:体现在界面的布局,色彩的搭配,字体的运用上;

对于我们的安卓应用来讲,设计的目的就是要体现需要显示给用户看的内容的价值,将用户所有的注意力都吸引到要呈现的内容之上。

对安卓应用来讲,这些内容无非就是:文字和多媒体(视频、图片等等)。

在这里游戏就不是我们讨论的范畴了。

围绕内容,Google为此提出了一套针对于此的设计原则。

Material Design简介

Material Design是Google专门为安卓应用开发而规定的一套设计语言

Material Design提出以前,安卓系统当中存在过两种不同的设计风格,每种风格都有暗Dark亮Light两种表现形式。例如,

  1. 安卓系统最早问世的时候,界面风格是这样的,

     old_theme
  2. 后来在经历到安卓3.0点时候,设计了Holo主题,

     holo_theme

需要注意的是,当时这两种风格只能被称作安卓应用的主题,还没有上升到设计语言的高度。因此当时的应用,交互界面被设计的千奇百怪,拿着安卓手机,打开不同的应用(除了Google原生的应用),感觉很不协调。例如应用A的新建按钮放在左上角,而应用B的新建按钮又放在右下角,虽然可以这样设计,但是用户的使用体验不一致。

为了减少这种设计分裂的问题,Google从安卓5.0起,就提出了名叫Material Design设计语言,倡导各位App的设计者,根据Material Design规范中的建议来开发应用,不要都去自创门派。

这套规范就规定了应用的,

  1. 实用性-交互方式;
  2. 美观-布局、配色等等

为了与Material Design配合,从安卓5.0开始,Google中安卓系统当中增加了Material主题。因此系统当中形成了原始主题、Holo主题、Material主题三者并存的状态。

从安卓5.0开始,Google强烈建议大家按照Material Design进行开发了。

 matiaral_theme

当然这个规范也只是个建议,开发者实在不去使用,Google也没有办法

为了让Material Design的设计规范能容易的被程序开发者实现,Google在开发工具上也给出了相应的支持,从界面布局的设计到控件的使用,都提供了全套的支持。我们讲在后面程序开发的部分,对这些技术支持进行详细的介绍。

Material Design的理念

Material Design存在以前,我们已经经历过了拟物设计。最早的iOS系统就是拟物设计典型的代表。

 original_design

后来出现了扁平化设计,将以前立体的设计都拍扁,平摊在屏幕之上。

 flat_design

后来Google为了保持扁平化设计简洁,增加交互的立体感,提出了Material Design

Material Design是基于印刷品的理念来设计的。真实世界中,我们依靠阅读获取大量知识,Google将我们的屏幕想象成印刷着各种内容的载体。书是一页一页的,对应着屏幕上呈现内容的每一个区域,每个内容区域就是一种材质。它们就像一张张纸片,通过纸片摆放的位置、纸片间的运动,展示应用中不同的功能。

例如,通过两张纸片通过阴影的效果,反应了它们在3D空间中的位置关系,

 material_relations

对位于不同层次的一张纸片来说,它的移动不会影响到另外层次的纸片。

因此可以想见,采用Material Design的应用,界面的层次感应该是呈堆叠状的,

 material_stack

因此我们说MaterialDesign扁平化位置关系结合了起来。

Google给Material-纸片定义了一些基本的特点:

  1. 每一张纸片的厚度都是1个单位(就是1dp,dp的概念我们将在后面详细介绍);

     material_thick_1dp
  2. 纸片之间都有z轴方向上的位置关系,有阴影效果;

     material_relations
  3. 纸片上显示的内容是直接印在纸片上的,没有厚度,内容显示的区域限定在这张纸片之上;

     material_surface
  4. 纸片上下层关系一旦确定就不能变化了,不允许纸片上下移动时的穿透;

     material_never_through
  5. 纸片的形状和大小是可以变化的;

     material_sizechange
  6. 纸片不能被折叠

     material_never_fold

设计的秘诀

当设计师拿到框线图之后,就需要使用Material Design的设计语言来改造。所以,对于刚接触设计的我们来讲,要首先要学习的就是Material Design的种种套路。

不要被Material Design的概念吓唬到,将它分解成我们熟悉的内容,逐个掌握它的设计精髓。

内容的展示

Material-纸片,是用来展示具体内容的。

这涉及到了,

  • 字体的选择、字体大小的设置、文字内容的排列方式。
  • 图片的大小区域、展示方式。

逻辑的体现

配色以及纸片的位置关系,是用来体现内容与交互之间逻辑关系的。

这涉及到了,

  • material纸片配色。
  • 界面模块的布局方式。
  • 系统图标的样式、放置规则。
  • 动画效果的设定。
  • 声音、震动等辅助效果的使用。