2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

雷锋网 • 8年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

【编者按】文章来自百度MUX翻译小组，应作者要求，如文章已获雷锋网授权转载，也请保留原标题。

译者注：本文译自UXPin出品的电子书Mobile Design Book of Trends 2015&2016中第二章Layered Mobile Interfaces。第一章卡片设计可参看：《2015-2016年最流行的APP设计是什么？比如，Facebook那样的》。

UXPin 这本电子书结合丰富案例讲述了2015-2016年间重要的移动设计趋势，共有6个章节：灵巧的手势操作、层级化的移动界面、隽永的字体排印、扁平化设计、愉悦的微交互、小卡片。

Google的Material Design是最有影响力的视觉设计理念之一。它用清晰的设计和可用性准则重新塑造了一种所见即所得的交互方式。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: Dropbox ）

然而Material Design的理念不仅仅局限在Google和安卓APP中。设计师们通过很多方法在使用这个设计理念。正如名字所暗示的那样，多个元素的分层叠加，就像一副牌一样，建立一种独特而又统一的体验，既实用又美观。

将元素在界面内分层的想法并不是一个新理念。然而， Material Design结合了大量具备美感和动态的体验，使得这一理念更进一步。

让我们来聊聊Material Design

在我们更进一步说明之前，先确保大家对Material Design的认知都一样。让我们回忆一下：

Material Design是Google的一种设计理念，它概括出了APP在移动设备上应该长什么样以及如何工作。它打破了一切——如动画、风格、布局，同时给出了模式、内容、可用性的准则。如Google所说——

我们进行自我挑战，为我们的用户创造出了一种视觉语言，它遵循经典的设计准则，同时结合最新的科技和创新，这就是Material Design。

Material起源于移动设备，同时可以扩展到其它设备。它立足于以下几个准则：

1、真实的视觉提示： 该设计是建立在真实的基础之上，通过纸张和墨水的实际展现得到的启发。

2、形象鲜明，意图明确： 传统的设计技术驱动了视觉效果。排版，网格，控件，尺度，色彩和图像等等这些引导着设计。元素都按照清晰的层级归属于既定空间。色彩和样式的选择更加形象鲜明。

3、动画呈现意图： Material Design中动画是一个关键要素，但它不仅仅是为了动起来。动画需要发生在一个特定的场景中，通过简单的转换来聚焦设计。运动和行为都应当是真实物理世界的实际反应。

理解触觉界面（Tactile Surface）

我们在讨论分层界面设计的时候，常常会碰到一个概念叫“触觉设计”。把它想象成好几张纸堆叠在一起，它们组成一个包含所有事物的框架。这些纸张和显示物理世界中的纸略有不同的是它们可以改变形状和形式，比如延展或倾斜，但在某种程度上又是符合真实的物理反馈的。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: Google Material Design）

触觉界面是一个内容和信息的容器。容器被设计成扁平的，边缘带有淡淡的影子，这样不同容器和层级之间得以区分。其它区分层级关系的方式，比如纹理、渐变和划分都是不必要的。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: Reddit ）

在Reddit这个APP上，你可以看出不同层级之间的分离。覆盖在主内容的灰色浮层之上，有一个明显的最顶部的菜单界面。甚至是顶部大图也包含了分层的元素和阴影来强调三维的触觉界面。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: Google Material Design）

通过触觉界面的设计可以清晰的明确内容之间的联系和功能。（每个容器通常有一项工作，比如链接或视频播放器。）这种方式也可用来定义深度，元素在容器中可层叠着展现，创造出一种近乎三维的世界。

Material Design是为自适应设计而生

层级设计本质上是为了自适应设计而生。所有的设计原则实际上都在鼓励设计师进行自适应设计（无论你更喜欢称之为自适应或响应式都可以）。

在考虑层级界面的时候，元素之间的相互关联是很重要的。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: CBS Sports）

Google提及它的标准是源自于“弹性的网格确保了不同层级的一致性的布局，尺寸的临界描述了内容如何重排在不同尺寸的屏幕，应用界面如何能能够从小尺寸扩展到大尺寸。”

2015-2016年最有影响力的移动界面设计是什么？看看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借鉴了大量扁平化和其它技法的设计理念。实际上也存在Material Design是2.0版本的扁平设计的争议，因很多视觉处理方式非常相似。

将层级化设计完全从扁平化设计中区分开来的关键点是层级化设计需要创造更多的三维空间以及光线的模拟。本质上来说，设计师回归了一些扁平设计的的设计技巧，所不同的是他们可以利用这些技巧来提高易用性，而不仅仅是美化界面。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: WordPress for Android）

层级化设计的色彩选择也非常接近扁平化设计的审美。最大的区别是Google提供了大量的可选色彩。调色板中具备明快、鲜明、高饱和度的色彩。虽然很多设计师在扁平化设计中会选择蓝色和红色，更多的界面被赋予深紫和明黄色。这可能是因为这些色调搭配白色或者黑色的文字时对比强烈、识别度高。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（Photo credit: Morning Routine）

层级化界面在也可以很好的应用在极简界面中，特别是涉及到排版的时候。有着清晰层次结构的无衬线字体是最好的选择。 谷歌建议使用Roboto作为主要字体 （有很多类型，如细体、粗体、斜体和瘦体）。这个样式可以区分字体之间的层级关系，以此在不同元素间对用户进行引导。极简主义的精髓就是，通过大小和比例的正确应用，哪怕只靠字体，也足够了。

2015-2016年最有影响力的移动界面设计是什么？看看Google就知道了

（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，那么通过应用这一准则，在外观、感觉、功能上都会有着一致的体验，而不用考虑设备的差异性。