6
| 本文作者： 百度MUX | 2016-01-08 10:29 |
【编者按】文章来自百度MUX翻译小组，应作者要求，如文章已获雷锋网授权转载，也请保留原标题。
译者注：本文译自UXPin出品的电子书Mobile Design Book of Trends 2015&2016中第二章Layered Mobile Interfaces。第一章卡片设计可参看：《2015-2016年最流行的APP设计是什么？比如，Facebook那样的》。
UXPin 这本电子书结合丰富案例讲述了2015-2016年间重要的移动设计趋势，共有6个章节：灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化设计、愉悦的微交互、小卡片。
Google的Material Design是最有影响力的视觉设计理念之一。它用清晰的设计和可用性准则重新塑造了一种所见即所得的交互方式。
（Photo credit: Dropbox）
然而Material Design的理念不仅仅局限在Google和安卓APP中。设计师们通过很多方法在使用这个设计理念。正如名字所暗示的那样，多个元素的分层叠加，就像一副牌一样，建立一种独特而又统一的体验，既实用又美观。
将元素在界面内分层的想法并不是一个新理念。然而， Material Design结合了大量具备美感和动态的体验，使得这一理念更进一步。
在我们更进一步说明之前，先确保大家对Material Design的认知都一样。让我们回忆一下：
Material Design是Google的一种设计理念，它概括出了APP在移动设备上应该长什么样以及如何工作。它打破了一切——如动画、风格、布局，同时给出了模式、内容、可用性的准则。如Google所说——
我们进行自我挑战，为我们的用户创造出了一种视觉语言，它遵循经典的设计准则，同时结合最新的科技和创新，这就是Material Design。
Material起源于移动设备，同时可以扩展到其它设备。它立足于以下几个准则：
1、真实的视觉提示：该设计是建立在真实的基础之上，通过纸张和墨水的实际展现得到的启发。
2、形象鲜明，意图明确：传统的设计技术驱动了视觉效果。排版，网格，控件，尺度，色彩和图像等等这些引导着设计。元素都按照清晰的层级归属于既定空间。色彩和样式的选择更加形象鲜明。
3、动画呈现意图：Material Design中动画是一个关键要素，但它不仅仅是为了动起来。动画需要发生在一个特定的场景中，通过简单的转换来聚焦设计。运动和行为都应当是真实物理世界的实际反应。
我们在讨论分层界面设计的时候，常常会碰到一个概念叫“触觉设计”。把它想象成好几张纸堆叠在一起，它们组成一个包含所有事物的框架。这些纸张和显示物理世界中的纸略有不同的是它们可以改变形状和形式，比如延展或倾斜，但在某种程度上又是符合真实的物理反馈的。
（Photo credit: Google Material Design）
触觉界面是一个内容和信息的容器。容器被设计成扁平的，边缘带有淡淡的影子，这样不同容器和层级之间得以区分。其它区分层级关系的方式，比如纹理、渐变和划分都是不必要的。
（Photo credit: Reddit）
在Reddit这个APP上，你可以看出不同层级之间的分离。覆盖在主内容的灰色浮层之上，有一个明显的最顶部的菜单界面。甚至是顶部大图也包含了分层的元素和阴影来强调三维的触觉界面。
（Photo credit: Google Material Design）
通过触觉界面的设计可以清晰的明确内容之间的联系和功能。（每个容器通常有一项工作，比如链接或视频播放器。）这种方式也可用来定义深度，元素在容器中可层叠着展现，创造出一种近乎三维的世界。
层级设计本质上是为了自适应设计而生。所有的设计原则实际上都在鼓励设计师进行自适应设计（无论你更喜欢称之为自适应或响应式都可以）。
在考虑层级界面的时候，元素之间的相互关联是很重要的。
（Photo credit: CBS Sports）
Google提及它的标准是源自于“弹性的网格确保了不同层级的一致性的布局，尺寸的临界描述了内容如何重排在不同尺寸的屏幕，应用界面如何能能够从小尺寸扩展到大尺寸。”
（Photo credit: Google’s Material Design Guidelines）
注意事项包括：
• 临界尺寸：宽度包括480、600、840、960、1280、1440、1600像素
• 网格：12栏布局，包括模块宽度和间距(8、16、24、40像素)，以及基线网格
• 界面行为：UI自适应屏幕的规格，可切换或隐藏
• 模式：功能模块是基于界面尺寸的，包括显示、变形、扩展、集合和划分。
设计师可以更容易的确保他们的界面可以在任何情况下适应任何设备。他们提供了一种规范来帮助设计师构建台式电脑、平板电脑和手机的界面布局。
创建层级化界面的时候，其他的设计趋势同样可以发挥作用。Material Design借鉴了大量扁平化和其它技法的设计理念。实际上也存在Material Design是2.0版本的扁平设计的争议，因很多视觉处理方式非常相似。
将层级化设计完全从扁平化设计中区分开来的关键点是层级化设计需要创造更多的三维空间以及光线的模拟。本质上来说，设计师回归了一些扁平设计的的设计技巧，所不同的是他们可以利用这些技巧来提高易用性，而不仅仅是美化界面。
（Photo credit: WordPress for Android）
层级化设计的色彩选择也非常接近扁平化设计的审美。最大的区别是Google提供了大量的可选色彩。调色板中具备明快、鲜明、高饱和度的色彩。虽然很多设计师在扁平化设计中会选择蓝色和红色，更多的界面被赋予深紫和明黄色。这可能是因为这些色调搭配白色或者黑色的文字时对比强烈、识别度高。
（Photo credit: Morning Routine）
层级化界面在也可以很好的应用在极简界面中，特别是涉及到排版的时候。有着清晰层次结构的无衬线字体是最好的选择。谷歌建议使用Roboto作为主要字体（有很多类型，如细体、粗体、斜体和瘦体）。这个样式可以区分字体之间的层级关系，以此在不同元素间对用户进行引导。极简主义的精髓就是，通过大小和比例的正确应用，哪怕只靠字体，也足够了。
（Photo credit: Field Trip）
现在你已经很难找到一个没有全屏图像功能的APP了，层级界面进一步强调了图像的生动和指向性。
上面是 Field Trip APP，它使大部分图片都有明确的指向，说明了Material Design不仅仅是通过颜色，图片和特效来加强视觉冲击力，它们都是整体设计的必备元素。
最后，层级界面可以完美地卡片化，这在之前的章节已经说过了。纵观所有的案例，几乎都包含了卡片要素。从小卡片到全屏选项，这些都是一起进化的。
接下来呢？
2015年6月，谷歌发布了一些新的设计准则Material Design Lite，任何网页和APP都可以遵循这个准则，来做的看起来更像安卓APP。我们应该从中汲取一些东西，即使是iOS APP或者非APP。
Material Design很好看而且在很多领域效果很好。设计师想要实际应用，而Lite版本提供了完美的层级指导。Material Design Lite 也是一个对开发者和设计师很好的工具，如果想要开发一个跨安卓iOS平台的APP，那么通过应用这一准则，在外观、感觉、功能上都会有着一致的体验，而不用考虑设备的差异性。
层级化的概念肯定会被保留下来，但是整体看上去会更“非层级化”一些，少一点质感，这样设计风格就可以介于Material Lite和iOS标准之间了。
（Photo credit: The Weather Channel）
Weather Channel iOS APP已经应用了这个策略。APP将卡片、颜色和图片都层级化了。其中设计概念重合最多的地方是在卡片的应用和几何图形的布置上。“Less Material”的设计主要是减少应用深度和阴影，这样看起来更扁平更精简。
渐变和单色层是另一种形式的层级界面，可以持续的延伸层级。单色色板是一个经典的设计技巧，可以很容易地创建色彩锐利的组件，以适应几乎任何类型的内容类型。
（Photo credit: Elevate）
Elevate iOS APP使用了渐变背景结合层级化卡片。这个动效是非常符合Material Design风格的，但渐变的使用却很特别。这个简单的变化体现了设计师在兼顾到更多方面的功能时，开始打破层级界面的视觉规则。
设计师持续使用更深的颜色和色调到层级界面和Material Design 概念中去。现在大部分APP都应用了白色和浅色的方案，但是更深的颜色已经开始流行了。
（Photo credit: Weather Timeline）
Weather Timeline就是一个很好地例子。这个简单的色调变化已经足以从同类APP中脱颖而出了。它依然使用了固有的层级，但是应用了更深的色调，看起来更简单优雅。整个设计的都是不饱和的色调和谐的深色方案。
如今层级界面的趋势才刚刚开始。
简单的视觉风格和更易用的设计风格开始逐渐融合，然后随着设计师的成长开始逐渐落地。更有意思的是层级界面看起来更像是最近几年流行的设计风格的一种延伸，比如扁平化和极简化。
在某些点上，趋势有可能会回摆到拟物风格上，但是在那之前，Material Design的概念还是有立足点的。Design faster wireframes & prototypes with UXPin(free trial)
[ 干货：资源和工具 ]
3．“How Material Design Sparked Evolution of Web Design” by Material Design Blog
5．Downloadable Material Design Color Palette Swatches
6．"The Interface Layer: Where Design Commoditizes Tech" by Scott Belsky
7．Material Up: Daily Design Inspiration
8． Material Design Icon Template Download
10．Material Design Typography Classes
11．Angular Material vs. Material Design Lite
Via：Mobile Design Book of Trends 2015&2016
本文来自百度MUX翻译小组，雷锋网发布，译文仅作学习用途，如有其它用途请联系原作者。
Keep calm and be awesome
雷峰网原创文章，未经授权禁止转载。详情见转载须知。
