Material Design 学习笔记 1

首先，安利我最喜欢的手机品牌： HTC。
2012年我高中毕业的暑假，入手了第一款 Android 智能手机——HTC的one S，这是一款非常让人心动的产品，双核 + 1G内存的配置在那个时代也是仅次于诸如三星s3、HTC one X等旗舰的存在，但相比于同学手中的iOS，我们不得不承认，即使是以华丽而著称的Sense UI，也是足够的简陋，更不用说原生UI。Android 总有那么多让我不满意的地方，还好Android可以刷机，百度云ROM是我刷的第一个ROM，当然还有以后的MIUI。
好了，以上都是废话，我想表达的只是那个时候的 Android 真的很不好看，或者说。。。丑陋。
所以当Google 2013年 I／O大会公布了全新设计风格 —— Material Design，我的感觉只有“惊艳”能形容。
当然，后来由于对 Android 的执着和喜爱，我也成为了一名 Android 开发。并且在毕业设计，一款名叫《小白》的应用中把自己对Material Design 简陋的理解用了上去（真的很简陋，没有美工的痛啊…）。
刚刚进入公司的时候，公司的 Android 应用也是采用了与 iOS 相符的设计，后来新风格改版，采用了 Material Design。这次的改版也让我更加深入地去了解 Material Design 的开发，包括 Android Design Support Library 等的使用。
在学习的过程中我翻译了一篇有关于 Material Design 的文章。

译文

Material Design 的真正价值

Google 的 Material Design 在设计中是最有影响力的一种视觉理念。因为明确 了设计和可用性指南，它成为塑造人们看到并与接口交互的方式。
但是，Material Design 已经超越了 Google 和 Android 程序本身。
设计师们在很多层面使用这种设计理念——尤其是分层接口的概念。顾名思义， 也就是分层叠加多个元素。就好像一副卡片，要创造一个单一而又统一的体验，那 就是功能性和美观性。
让我们来谈谈 Material Design。
分层的概念元素在一个接口并不是一个新概念。然而,Material Design 则更进 一步,触觉体验结合大胆的和充满活力的审美。
在我们继续之前，让我们先确认一下我们在同样的页面上什么是 Material Design。让我们来看一下:
Material Design 是 Google 的一种设计理念，它概述了在移动设备上应用程序 应该如何工作。他打破了一切——包括动画、风格、布局，给了模式、组件和可用 性以指导。
Google 是这么说的:“我们挑战了自己，为我们的用户创造了一个综合好的设 计的经典原则的创新的设计语言和科技的可行性。这就是 Material Design。”
Material Design 开始于手机，但很快就扩展到其他设备上。它包括以下几个原则:
1.现实的视觉元素:设计就是基于现实，就好像在用纸张和墨水进行设计。
2.大胆的、形象的和故意的:基本设计技术驱动了视觉效果，排版、网格、空 间、比例、颜色和图像主导着整个设计，理论建立在一个用清晰的层次结构定义了 的空间上，颜色和类型的选择是大胆的而又经过深思熟虑的。
3.手势提供了意义:动画是 Material Design 的一个关键的组成部分，但它不 能仅仅为了移动而动。动画需要发生在一个单独的环境,重点设计和服务于包括简 单和容易的转换。动作和手势应该客观的反映物理世界。

理解“触觉表面”的含义

还有一个我们经常在布局接口会谈论到的事情是“触觉表面”。 我们可以想象一下很多张纸叠在一起来构造一个框架来进行设计是如何实现
的。这些纸和现实生活中的纸还是有点不同的，因为他们的形状和形式可以任意修
改——如拉伸和弯曲——但他们以一种看似真实的方式工作着。
如一篇文章《Mobile Design Trends 2015 & 2016》中提到的，把触觉表面当 做一个容器来容纳信息。在设计中容器本身是平的，但有一个淡淡的阴影来区别其 他的容器和分层。当然还有其他方法来在层级之间做间隔——比如纹理和渐变—— 当然这其实是没必要的。
以一个很好的 app Reddit 为例，你可以清晰地看见它层级之间的分隔。有一个 冒险的顶级菜单层包含着主要内容，甚至是分层的主要顶部图像包含元素和阴影强 调三维触觉表面。
据文章《Android Lollipop UI Kit》证明:一个触觉表面可以清晰地确定内容 在设计方面的功能和联系(每一个容器都有自己的本质工作，比如说一个链接或者 一个视频播放器)。这种方法同样建立了深度，因为其他容器元素是分层的，由此 创建了一个三维世界

MATERIAL DESIGN 是一个自适应的设计

分层接口的本质是为了适应设计，所有的设计指导方针实际上是鼓励设计师使用一种自适应的布局(但是，你是否喜欢自适应的布局还有待考证)。 当我们考虑分层接口的时候，考虑两个元素之间的关联是非常重要的。 Google 给出的设计标准中提到:“灵活地使用网格，可以保证布局的一致性、断点的内容在不同的屏幕可以实现回转，并且描述了 app 如何从小屏幕适应到超大 型的屏幕。”
注意事项包括:

断点:宽度包括 480, 600, 840, 960, 1280, 1440 和 1600 像素。
网格:12 列的有边缘的网格和一个基线网格。
表面行为:UI 适应屏幕的类型所以他的表面是可见或者隐藏的。
绘制:功能根据屏幕的大小，包含显示、转变、扩张、回流和分离。 这些注意事项确保了设计师的适应性接口在任何情况任何设备上可以使用。它们为设计师提供了一个基础来构建在桌面、平板电脑、手机上的布局。
MATERIAL DESIGN 和其他设计的趋势

当涉及到分层界面时，其他设计趋势也会发挥自己的作用。
Material Design 从平面美学和其他流行的技术借鉴了大量的设计理念，事实上，很多人认为 Material Design 非常接近平面设计 2.0，因为很多视觉效果非常 相像。
单独的分层界面从完全平面设计转变过来需要创造更多的三维空间和明暗度。 本质上来说，设计师们在扁平化设计上已经带回了一些经验，但有所不同的是，他 们利用这些技术来提高可用性，而不是单纯为了装饰。
分层设计的颜色最大程度上满足扁平化设计的审美，而其中最大的不同就是 Google 提供了大量的颜色选项。面板颜色是一样的——明亮、大胆以及充分的饱和 的颜色。
很多设计师在设计的时候选择了红色和蓝色进行设计，但似乎更多的部分喜欢 深紫色和黄色，这可能是因为这些颜色更容易搭配白色和黑色的文本。
接口分层在极简主义的空间里也表现的非常好，特别是在排版方面。清晰地层 级和无衬线的字体是首选。Google 建议使用 Roboto 为主要字体，它有很多选择， 从常规到粗体到斜体。
这样的多样化帮助用户在原理上进行导向。按照极简主义，只要你按照适当的 模型和比例，一种字体几乎可以做到所有的事情。
现在你已经很难找到一个网站没有全屏的图像以及进一步生动的使用分层接口 的。
比如这个 Field Trip 的 app，如上文所述，使照片最大化的发挥价值，表示 Material Design 不仅仅是使用颜色、照片和视觉冲击效果——他们都是设计的一 个组成部分。
最后，就像我们之前讨论的那样，分层接口最终表现为卡片的形式。透过实例 我们可以看到，几乎所有的设计都包含了类似于卡片的设计，从小卡片到全屏幕选 项，这些趋势携手并进。

谁是下一个?

Google 在 7 月发布了几个新的指导方针，Material Design Lite，由此，所有 设计人员都可以使他们的网站或者应用程序看起来像 Android 程序。
就像《Mobile Design Trends 2015 & 2016》一书中建议的那样，我们可能会
越来越多的看到 Android 的特点，可能甚至会在 ios 应用和别的地方。Material Design 看起来非常的不错，而且他在很多地方表现的非常好。设计者将会利用 lite 版本提供的完美指导水平。
Material Design Lite 也是一种很好的工具,可以让设计人员和开发人员想要 创建一个统一的应用体验整个 Android 和 iOS 平台时使用，让应用看起来和使用起 来有一致的用户体验，哪怕在不同的设备上面。
图层一定会停留一段时间，但是整体可能看起来会是更分层以及更少的材料。 所以那种设计会间与 Material Design Lite 和 ios 的设计标准之间。
ios 的应用 Weather Channel 已经使用了这种方法。整个应用基于卡片、色彩 和图像，在卡片的使用、图像的几何形状方面等方面理论是重叠的。因为缺乏深度 和模仿导致整个 app 看起来更加可以修改。
渐变和单色的图层也在以另一种方式增长着。Monochromatic color palettes 是一个经典的设计技术，它使得创建的元素几乎可以适用于任何类型的内容。
ios 应用 Elevate 使用了一个渐变的背景在它的设计上，它的动画和运动形态 非常符合 Material Design 的标准，当然，使用渐变色不是。这个简单的亮点使得 使得设计开始打破传统的规则而不影响其原有的功能。
设计师们会在更深的颜色和色调方面继续发扬分层接口和 Material Design。 现在多数的 app 都采用了浅色和白色的设计风格，但更多的深色风格即将出现。
Weather TimeLiness 就是一个很好的例子。简单的改变颜色就足以使这款应用 脱颖而出。它分层的风格非常明显，但深色界面使得它看起来简洁而又优雅。整个 设计看起来更饱和、缓和和具有深色的审美。
顺便说一句。今天这样的分层接口设计仍然只是一个开始，作为设计师成长的 一部分，简单的视觉风格和高可用性的设计风格仍然会继续出现，不仅仅是在 Android 上，而是会引领整个潮流。更有趣的是，分层界面的外观本身就是一个可 扩展的设计技术，在未来几年，包括极简主义和平面设计主义在内的设计风格将会 变得越来越流行。
在某种程度上，这种设计风格可能会撼动那些拟物化的设计风格很多，但那些 事情发生之前，这个概念似乎已经完全站稳了脚跟，变得真实。