大师分享解读设计风格的变迁史.docxVIP

大师分享 解读设计风格的变迁史 英文： nngroup 作者： KATE MEYER 概述：扁平化设计是从 2012 年开始风行的一种网页设计风 格，在今天仍被广泛应用在方方面面。然凡事过犹不及，在 某些时候这种风格会造成严重的可用性问题。其中之一便是 行动按钮的可见性缺失。扁平化 2.0 则能为我们解决这类问 题。 何谓扁平化设计？光泽、三维视觉效果不俱存的图形元素便 是。很多设计师都倾向于把它当做极简网页设计的一个分支。 立体效果、拟物化设计、现实主义 在明确扁平化设计之前，我们先来看一下有哪些元素是和其 绝缘的。扁平化设计通常被认为是和那些立体效果、拟物化 设计和现实主义唱反调的一种风格。在一个纯粹的扁平化设 计里你绝不会见到上述元素。 立体效果 立体效果能在界面上制造深浅不一的感觉，这能帮助用户理 解视觉层级以及哪些元素是可以互动的。 上浮的元素看上去就好像是可以被按下去的（用鼠标）。这 上浮的元素看上去就好像是可以被按下去的（用鼠标） 。这 种设计通常被应用在按键上。 陷的元素看起来就好像能够被填塞。这通常被应用在输入 框里，比如搜索框。 鉴于早期的图形化用户界面中，立体效果被大肆用在所有地 方，这还包含了阴影、渐变和高光等一系列的效果，其目的 是为了让用户能第一眼就识别出行动按键。然而，早期的 GUI 把这些伪 3D 效果应用得太过火了，在视觉上造成了相 当的干扰，并极富侵略性。 Windows 95 的对话窗口使用了 大量的阴影和高光来创建 3D 效果（注意这些按键的上凸和 输入框的下凹） 。同时我们也能清晰地看到上方的三个 tab 中哪个盖在最上面。然而，过量的阴影很容易让界面从视觉 角度失去吸引力。 拟物化设计 在数码设计中， 拟物化设计就是那些模仿现实世界事物“非必 要”及“装饰性”的设计特征。拟物化设计是为了利用用户于现 实世界的惯性思维来快速理解如何使用一个全新的界面。早 期的亚马逊 Kindle Fire 平板电脑， 使用了拟物化的书架设计， 可以看到其中形似立体书柜的背景和木质的纹理。如此隐喻 能帮助用户把他们对现实生活中书架的理解（可以存放、整 计与系统的功能性毫无关联，却能强化该隐喻。不过亚马逊 在之后的 UI 版本中剔除了拟物化的书架设计。 理书籍）沿袭到虚拟情境中。虽然这个架子和木质纹理的设 理书籍）沿袭到虚拟情境中 。虽然这个架子和木质纹理的设 现实主义 现实主义是一种以艺术的角度模仿现实事物或纹理的设计 风格。 它通常和拟物化设计被混为一谈。其主要的区别在于拟物化 设计提供隐喻的方式帮助用户理解界面，而现实主义是一种 纯粹以美学目的利用设计元素和纹理来模仿现实事物的视 觉风格。就像早期的 Kindle Fire 平板电脑一样， Sprouts 的 网站也使用了立体木纹设计。然而，这种现实主义的设计只 是为了让其在美学上具备吸引力，而非包含任何帮助用户理 解如何使用该界面的隐喻，它也没有去刻意模仿现实世界中 的任何事物。 扁平化设计的诞生 2011 年微软的 Metro 设计语言和 Windows8 的推出对扁平 化的推广起到了推波助澜的作用。微软的设计文档把它的新 让大量设计师设计风格称为“ authentically digital 让大量设计师 抓住了扁平设计的精髓。与拟物化设计不同，扁平化设计并 不需要借助复制现实事物的外形，这对于很多人来说是一种 全新的设计语言。 从苹果网站的逐渐扁平化就能窥探到这个设计风格的流行 程度。拟物化设计和现实主义曾一度是苹果设计的标配，这 种坚持一直持续到 2013 年，然后一切都变了。来看看苹果 2007 年时候的网站， 注意那个带有高光的立体标签导航栏。 2012 年的时候苹果的网站上隐喻的标签导航不复存在，但 仍然采用了高光加圆角的设计 （注意这是现实主义而非拟物 虽然设计 ）。通过在搜索框里添加阴影让它有种凹陷的感觉， 虽然 这从视觉效果上来说确实要比 Windows 这从视觉效果上来说确实要比 Windows 七年前的输入框 看起来优雅不少，但它们本质上是一样的。右下角的那几个 图标采用了非常夸张的高光处理，或许是为了让用户能 理解它们各自是做什么的。苹果 理解它们各自是做什么的。 苹果 2015 年的主页。包括 Logo 在内的整个导航栏都变得扁平了——无阴影、无材质、无高 光。没有了立体、现实主义和拟物化的效果。用户现在识 光。没有了立体、现实主义和拟物化的效果。 用户现在识 别这是个导航栏的方式是通过潜移默化的思维定式： 于网页顶部的深色条状物不是导航栏还能是什么？（恩对， 也有可能是广告， 但这家伙实在是 太细了， 这点在 nngroup 之前的一篇关于 banner 盲点的文章里有提到过）扁平设计 的可用性问题 自从扁平化在