4.2 App UI设计风格

我们常说某个App很有设计感，那么，什么叫设计感呢？设计感即设计风格。我们将设计风格拆分为设计和风格来进行解释，设计是运用合理的规划把一种设想通过各种感觉形式传达出来的过程；风格则是指艺术作品在整体上呈现出来的一种具有代表性的面貌。通俗地讲，设计风格就是经过缜密思考和精心雕琢后的能够反映内在气质的个性特征。一个好的设计风格能够反映出产品的气质，瞬间打动用户，给他们留下深刻的印象；而平庸的设计不能带给用户视觉感官上的享受，即使卸载也不可惜。设计风格如此重要，本篇就来重点讲解目前主流的5种App UI设计风格，它们分别是极简主义、扁平化、Material design、拟物化和Metro UI。

极简主义

极简主义设计风格也被称为“无”设计，它追求的是“少即是多”，即用最简单的形式和最理性的设计手段创造最深入人心的艺术感受。在设计方法论上，极简主义设计风格是减法，是去伪存真，反映出道家“有无相生”的设计哲学。极简主义设计风格的目的是突出内容本身，让重要的信息及功能更容易被关注，从而让用户更加直观地进行操作。大面积的留白、严格的配色和精简的内容等，使图、文、背景主次分明，具有强烈的视觉冲击力。

柴扉App采用全局白色的背景，不通栏的大图片保持较大的边距，使得界面的呼吸感更好，并利用左右对齐和字体的变化排版，产生对称和对比的美感。把用户操作的按钮放置在界面中间，既能方便用户单手操作，又能让功能更加聚焦，一分一寸之间都蕴含着润物细无声的人文关怀。就像它的介绍一样：柴扉是一款打动人心事物的App，一首歌，一则语录，一篇文章，每天用十分钟的细碎时光，点燃内心的光明。

轻芒阅读App聚合了超过500个应用的最新内容，它采用大面积的白色背景，并利用较大的间距、字重和颜色的变化排版，既能让这么多的五花八门的应用图标和谐共处，又能保持每一个应用清晰可见的良好体验。大量的留白将更多空间留给了每天更新的10000多条内容，让用户沉浸在阅读的世界里。在轻芒阅读的界面中，几乎看不到任何分割线，精致的图标、严格的字体变化和配色，向用户传递一种明亮、清晰、精致的感觉。

白色，干净、优雅、平和而简单，在自然界象征着极致的纯净与贞洁，它没有强烈的个性，被称为“无色”。因而在极简主义设计风格中，白色是最常被运用的主色调。但是，极简主义设计风格中的“留白”绝对不是指白色，而是空间。

开眼App采用通栏的大图设计，图片之间没有任何分隔的视觉元素，字重的对比排版让内容产生主次之分，最大限度地减少视觉噪音的干扰。极简不是简陋，它的每一处细节都经过反复推敲。在发现页面，分类标签的“热门”“分类”“作者”加粗字重并在文字中间留有空格，既能让标签分布更加匀称，又能让标签不过分单薄。这种精致而又冷静的界面设计，也与开眼定位优质内容的产品理念相契合。

极简主义设计风格对产品构架产生了重大的影响，进而决定产品界面的可用性与易用性，它可以降低界面信息的承载量，并能让用户体验达到最佳。极简主义设计风格展现一种用最直接、最简单的方式将功能和内容呈现出来，剔除与内容和功能无关的干扰元素，将思想带回本真。

Rise App是一款闹钟应用，它将极简主义设计风格发挥到了极致。打开Rise的界面用户看不到任何信息，没有状态栏，没有导航栏，没有标签栏，什么都没有，空无一物，只有界面中心的当前时间和顶部的表示亮度的图标。极简的界面中隐藏着许多简单的手势操作，点击屏幕任何地方进入设置闹钟，按住“小太阳”向下滑屏调节界面暗度，向左滑切换纯黑背景，向右滑同时查看闹钟时间。

在Rise的界面中，背景不再是默默无闻的配角，而是设计的核心。进入闹钟设置界面，按住时间向上或向下推移可以调节闹钟时间，渐变的背景色随着时间的推移呈现出凌晨、日出、正午、日落等的颜色变换，使得用户不仅可以从数字上体验时间的变换，更可以通过背景色的渐变感受时光的流逝。Rise极致流畅的用户体验，遵循着人与自然的规律，在无形之中就唤醒了用户的美好情绪。

扁平化

扁平化设计风格的核心意义是，去除冗余、厚重和繁杂的装饰效果，具体表现为去掉了多余的透视、纹理、渐变以及立体效果的元素。在设计元素上，则强调了抽象、极简和符号化，并突出内容本身，更好地表达视觉层次，让用户更快地找到交互重点，剥离出不同层次的信息成为设计的中心，于是扁平化的设计就减轻了视觉压力，突出了重点，从而提升用户体验。

从iOS 7开始，苹果就已经抛弃了拟物化设计风格，走向扁平化的设计，原先的玻璃质感、高光、纹理、投影没有了，取而代之的是平面、锐利的抽象图形，这样使得UI界面变得更加干净整齐，使用起来格外简洁，从而带给用户更加良好的操作体验。

现在我们看到的大多数的iOS应用都已经完全扁平化了，但扁平化并不是完全平面化，它只是对界面进行了扁平化的处理，是为了让元素更加简洁易于辨识，避免用户因为界面繁冗而无所适从。我们随便打开一个iOS应用，它的导航栏和标签栏虽然与界面背景同处一个平面，但我们仍然能感受出导航栏和标签栏与界面背景是处于两个不同的操作层级。

种子习惯App采用卡片式的列表设计，没有增加任何质感和投影，而是利用与背景色的对比让操作列表的层级清晰可见。在种子习惯的界面设计中，看不出一丝多余的装饰元素，柔和的配色、精致的小图标和素色的文字，一切都是那么刚刚好，构成了一个安安静静的小清新应用。

Material design

Material design设计风格是Google在Android 5.0推出的全新UI设计语言，旨在解决Android平台设计风格不统一、碎片化的问题。Material design的核心理念“材质化”是基于拟物与扁平之间的设计，提取自卡片的材质和真实的光影，符合现实世界元素的物理规律与空间关系，只保留物理特效、光影和层次，既避免了拟物设计的低效问题，又解决了太扁平带来的交互层级困惑。通俗地讲，Material design是一种隐喻式的、类似于纸张的扁平化设计，悬浮在背景之上并带有投影，一旦移动它们的时候，“纸张”就会产生被划走而不是凭空消失的动画效果。

Material design的核心设计元素是卡片，通过不同卡片层级来体现信息重要度和交互层级。Material design还规范了Android的运动元素，让按钮的弹入弹出、卡片的滑入滑出以及从一个界面变化成另一个界面的方法，都是秩序的、深思熟虑过的。对于现实世界中的隐喻，Material design更加倾向于用色彩来提示，当我们按下屏幕当中的按钮时，可以看到按钮颜色迅速发生变化，向石子投入湖面一样，产生了一波涟漪，以此来向用户表明交互的反馈。Material design所展示的模板当中，最显眼的是它的小圆点FAB（Floating action button，浮动操作按钮）既是快捷功能入口，又是视觉上有趣的点缀。

虽然Material design自2014年推出至今已有两年多，但在国内并没有被大量推行起来，很多大公司Android平台的应用直接复用iOS的设计，即使小部分应用采用了Material design设计规范，其设计水准还停留在套用官方色表再加一个FAB上。究其原因，其中有历史因素也有市场因素：Material design推出的时间太晚了，iPhone牢牢占据了一半的手机市场，iOS早已深入人心；因为Android的开放性，国内手机厂商为了争夺市场纷纷各自研发了自己的UI系统；千万用户量级的应用不敢轻易改变用户的使用习惯，导致只能选择一个设计规范即iOS，同时也为了降低开发成本。

拟物化

拟物化设计风格是模拟现实物品的造型、质感、材质、纹理、光亮等，进行适当程度的变形和夸张的描绘再现。例如，电话就绘制成老式的听筒电话，设置则绘制成立体的齿轮。最初拟物化的设计出现在数码设备上，是为了降低学习成本，让用户一看就知道怎么使用它。因此最早、最常见的拟物化设计，或许就是按钮了，突起的表示可以按压，凹陷的表示已经被按了。

虽然扁平化设计风格已经成为流行趋势，拟物化设计风格也越来越边缘化，但仍然有一些工具类应用坚持拟物化的设计，因为工具本身就是现实世界里真实存在的东西，能唤起用户对现实物品的情感联结。锤子便签采用拟物化的设计，精致的木纹和米黄色的纸张，再加上细腻的质感，传递给用户一种温暖的情绪。

拟物化设计不应停留在视觉表现层面，而应该是一种交互方式。一些设计师为了拟物而拟物，忙着描绘各种逼真的细节，而忽略了拟物化的核心。例如，设计一款记事本应用非得加上皮纹的封面，难道记事本不加皮纹封面就认不出是记事本吗？当然不是。它的拟物化应表现在记事本的特性——翻页，即使是纯白的背景，只要给予了翻页的效果，用户也能感知出这是一页纸张，它和写字有关。

Metro UI

Metro UI是微软在Windows Phone 7中正式引入的一种基于排版的设计语言（Typography-based design language），强调信息本身，有利于以文字为主的界面导航。这一设计理念来源于交通局巴士站站牌、机场和地铁的指示牌——位于美国华盛顿州金县都会交通局（King County Metro）的标识设计，给了微软设计团队灵感，其风格大量采用大字体，能吸引人们的注意力。

Metro UI的设计核心是光滑、快、现代，可以令用户获取一个美观、快捷、流畅的使用体验。Metro UI是真正意义上的扁平化设计，将所有的信息都展示在一块块的色块上，让用户更多地关注内容而不是质感，保障每个Metro界面元素都是干净的、轻量的、开放的，以及快速的。Metro UI是一种界面展示技术，和iOS、Android界面最大的区别在于，后两种都是以应用为主要呈现对象，而Metro UI强调的是以信息为主要呈现对象，而不是冗余的界面元素。

早几年前在iOS上仍有一些Metro UI设计风格的应用，最令国内用户熟悉的当属Zaker，其简洁新颖的展示方式也引起了一阵Metro风潮，但随着iOS 7的盛行，这类应用再也难觅踪迹了。即便这样，它们也并没有抓住Metro UI的精髓，Metro不只是几大片色块而已，它强调带给用户一种直观、动态的视觉体验，就像机场信息牌的动态展示，随着动态的更新而随时变化。例如，Stezza就是伪Metro UI设计风格，只模仿了Metro UI的外衣，甚至在信息布局上都是非常糟糕的设计。