android 质感设计,Android 高级UI1 Material Design概述

1、Material Design概述

我们挑战自我，为用户创造了崭新的视觉设计语言。与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念。这就是原质化设计(Material Design)。这份文档是动态更新的，将会随着我们对 Material Design 的探索而不断迭代、升级。

目标

我们希冀创造一种新的视觉设计语言，能够遵循优秀设计的经典定则，同时还伴有创新理念和新的科技。

我们希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则，同时支持触摸、语音、鼠标、键盘等输入方式。

设计原则

实体感就是(通过设计方式来表达)隐喻

通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。与众不同的触感是实体的基础，这一灵感来自我们对纸墨的研究，但是我们相信，随着科技的进步，应用前景将不可估量。

实体的表面和边缘提供基于真实效果的视觉体验，熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果，但同时又绝不会脱离客观的物理规律。

光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系，以及单个物体的运动。

image.png

鲜明、形象、深思熟虑

新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫，不但可以愉悦用户，而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。

Material Design设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。

image.png

有意义的动画效果

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。

动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细

2、MaterialDesign的使用及开发

谷歌开放以及收集了一些最新的开源的项目(很多是自己开发的)，汇集到最新的support兼容支持包以及最新的5.X API里面。

(preference：设置页面，可以通过配置文件达到界面设计的效果。)

1)android-support-v4:最低兼容到Android 1.6系统，里面有类似ViewPager等控件。

2)android-support-v7:appcompat、CardView、gridlayout、mediarouter、

palette、preference、recyclerView(最低兼容到3.0)

最低兼容到Android 2.1的系统，这个工程可以让开发人员统一开发标准，在任何的系统版本下保证兼容性。

(比如：Theme,value,布局，新的控件，新的动画特效实现)

所以现在ADT、AndrodStudio一般都会直接创建项目的时候就直接帮你新建或者引入了一个叫做appcompat的项目。

这里可能会碰到很多问题：

1.自动导入的appcompat-v7项目自身就是报错的，什么原因？build的版本太低了,要么是SDK很新但是兼容包没有更新。

2.appcompat-v7好不容易没报错，但是项目报错，一看控制台：报appcompat里面的某个res/values/theme/xxx属性不存在 等等问题。

什么原因？因为你引入的是很新的appcompat-v7项目，它要求必须很高的版本编译，然而Eclipse很蛋疼，在引入该项目的主项目编译的时候也必须要达到这个很高的版本---直接使用最高版本编译

现在一般做开发都是最低兼容到4.0。

SDK升级：API升级、兼容包的升级、工具升级。

3、MaterialDesign控制项目全局样式

1.引入appcompat-v7项目(包括了android-support-v7-appcompat.jar和资源文件)

AS中Module中build.gradle配置

dependencies {

implementation 'com.android.support:appcompat-v7:26.1.0'

}

2.写自己的全局样式：

@color/colorPrimary_pink

@color/colorPrimary_pinkDark

@color/background

@color/accent_material_dark

colorPrimary：主色，

colorPrimaryDark：主色--深色，一般可以用于状态栏颜色、底部导航栏

colorAccent：(代表各个空间的基调颜色--CheckBox、RadioButton、ProgressBar等等)

特别感谢：

极客学院