扁平化设计是一种流行的设计风格没有光泽或三维视觉效果在网页的图形元素中。许多设计师认为它是一个分支极简主义的网站设计

三维效果、拟态和现实主义

要定义平面设计,我们必须定义什么是平面设计不是。平面设计通常被解释为反对3D、拟物化和写实设计风格的反动运动.一个完全平面的界面不使用任何这些样式

三维效果

三维效果给界面带来一种深度错觉,帮助用户理解视觉层次,理解哪些元素是交互的。

  • 出现凸起的元素看起来它们可以按下(用鼠标点击)。这种技术常被用作数字按钮的符号。
  • 凹陷或凹陷的元素看起来可以填满了。这种技术经常被用作输入字段的符号,比如搜索工具。

从早期的图形用户界面开始,屏幕就使用了伪三维效果(阴影、渐变、高亮)来帮助用户一眼就能理解可用的操作。然而,在这些早期gui中的伪3d效果往往是咄咄逼人的,过度渲染的,并且在视觉上分散注意力。

Windows 95对话框
这个Windows 95对话框使用了重阴影和高光来创建3D效果。请注意按钮是如何凸起的,而输入字段是如何凹陷的。这三个标签中的哪个在其他两个上面也很清楚。然而,浓重的阴影很容易使界面在视觉上失去吸引力。

Skeuomorphism

在数字设计中,拟态设计是一种具有不必要的、装饰性的设计特征的对象,它模仿了现实世界的先例。拟物化设计的目的是帮助用户理解如何使用一个新的界面,允许他们应用一些关于该先例的先验知识。

Kindle Fire
在亚马逊Kindle Fire平板电脑的早期型号中,基于android的操作系统采用了仿形书架设计,配有3D书架和木材纹理。书架隐喻的目的是帮助用户将以前关于书架的知识(作为存储和组织物理媒体的地方)转移到数字环境中。架子和木材纹理与系统的功能无关,但应该加强隐喻。亚马逊后来从UI中删除了拟物化书架设计。

现实主义

现实主义是一种基于美学原因而模仿实体物品或纹理的设计风格。

拟纯常与现实主义.在网页设计中,这两种风格通常是一起出现的。主要的区别是,现实主义是一种视觉风格,使用的设计元素和纹理为了纯粹的审美目的而模仿物质世界,而skeuomorphism支持一个隐喻帮助用户理解界面。

豆芽主页
和早期的Kindle Fire平板电脑一样,Sprouts的购物网站也使用了3D木材纹理,但这种设计的真实性只是为了美观。它不支持任何类型的隐喻来帮助用户理解如何使用界面,也不模仿任何现实世界中的前辈。

平面设计的起源

2011年微软Metro设计语言和Windows 8的发布对平面设计的普及产生了特别大的影响。微软的设计文档将其新风格称为“真正的数字化”——这个词巧妙地抓住了扁平设计对许多设计师的吸引力。与拟物象设计不同,平面设计被视为一种探索数字媒介的方式,而不试图复制物理世界的外观。

苹果主页的扁平化为这一流行趋势的增长提供了一个有用的基准。长期以来,拟物化和现实主义一直是苹果设计的标志,直到2013年左右,它的主页才开始抵制单调的趋势。

苹果,2007
2007年(通过WayBack Machine)苹果主页。导航栏的样式显示为光滑的3D标签。
苹果,2012
2012年苹果的主页(通过WayBack Machine)。标签的隐喻消失了,但导航栏仍然是光滑而圆润的(这是现实主义而非拟物化的一个例子)。新的搜索工具嵌入了阴影,使其看起来是空的(这比17年前Windows输入字段的外观更优雅的视觉效果,但概念上是相同的)。右下角可见的图标是如此的光滑,以至于它们几乎干扰了查看者理解它们是什么的能力。这些按钮看起来几乎是在发光,而不是凸起。
苹果,2015
2015年苹果的主页。整个导航栏,包括logo,是完全平坦的-没有可察觉的阴影,纹理,或高光。这里没有3D、逼真或拟形效果。用户知道导航选项是可点击的唯一方法是约定俗成的:网页顶部的强烈颜色条纹往往是导航条(除非是广告,但这条太细了,不会成为受害者横幅失明).

平面设计的可用性问题

自2011年平面设计出现以来,尼尔森诺曼集团一直是一个必威在线娱乐对其固有的可用性问题直言不讳的批评.我们的主要反对平面设计就是为了追求时尚的美学而牺牲用户的需求。

多年来,使用者一直接触传统的极大的可能性可点击性,如蓝色,下划线链接和按钮上的3D效果。随着设计趋势的转变和用户接触到新的模式,一般用户的直觉能力识别相关的元素进化而来的。但用户更善于发现链接元素并不意味着他们不需要任何线索在所有。事实上,我们已经注意到,长期接触这些扁平但可点击的元素已经缓慢降低用户效率让他们更难理解什么是可点击的,什么是不可点击的。

当我们问一位22岁的加拿大人她是如何知道她可以在网站上点击什么时,她给出了以下回答:

“当它是蓝色和下划线时,这就是你最初如何知道的。你甚至可以在Word中看到。但说真的,尤其是画了下划线的时候,这很有帮助。如果是一个按钮,它不一定要写“点击这里”,但如果它写着“立即购买”或“购买”或“添加到购物车”。

这段话很好地说明了人们用来决定点击性的线索类型:

  • 传统的、外部一致的符号(如蓝色、带下划线的文本或凸起的按钮)
  • 让人想起传统能指的东西(如任何颜色的下划线文本或框文本)
  • 上下文线索(如可操作的文本或放置在页面顶部)
Trader Joes主页
Trader Joe 's的主页显示了各种各样的点击标志。的蓝色下划线文本查看所有是一个传统的能指。(2)平面上的红色背景找到链接让人联想到按钮,即使没有3D或现实的视觉效果。(3)主导航栏中的黑色链接仅通过其位置和文字来传达其可点击性。(请注意,这个几乎是平面的页面确实有一个拟态元素——特色产品传送带下的木架。)

如果你的组织想要过渡到一个扁平的审美,跟随我们设计可识别的可点击元素的指导方针以确保您没有造成点击不确定性。

增肥的平面设计

最近,设计师开始注意到平面设计的可用性问题。因此,一种更加成熟和平衡的扁平化设计的解释出现了。设计师们发现他们可以“真正的数字化”,并在不损害可用性的情况下探索媒体的独特机会。

这种较新的解释有时被称为“半平”、“几乎平”或“平2.0版”。这种设计风格大部分是平面的,但它利用了微妙的阴影、高光和图层来在UI中创建一些深度。

一个设计师的作品集使用长阴影效果
在这位设计师的作品集中可以看到,带有长阴影的平面设计元素在2013年左右流行起来。长阴影是平面2.0出错的一个例子——3D效果纯粹是美学的,没有为用户添加任何有意义的信息。幸运的是,它们的受欢迎程度有所下降,但带有长阴影的图标仍然在一些平面界面中使用。

谷歌的材料设计语言是平面2.0具有正确优先级的一个例子:它使用从物理中借来的一致的隐喻和原则来帮助用户理解界面并解释内容中的视觉层次。

Evernote Android应用程序
适用于Android的Evernote应用程序就是平面2.0可能带来好处的一个很好的例子。尽管有一个基本平坦的UI,应用程序提供了一些微妙的阴影导航栏和浮动的+按钮(添加新)。它还利用卡片隐喻在3D空间中将内容显示为平面的、可分层的窗格。

对于任何设计趋势,我们建议保持平衡和适度。不要为了赶时髦而牺牲可用性。不要忘记这一点——除非你在设计只有对于其他设计师,你不是用户.你的喜好和解释点击性符号的能力与你的用户不一样,因为你知道你自己设计的每个元素的目的是什么。

早期的伪3d图形用户界面和史蒂夫-乔布斯式的拟物化设计通常会产生笨重的界面。从这些过度的范围中缩小对可用性是有好处的.但是,消除视觉上的差别,产生没有符号的完全平面设计,也可能是一个同样糟糕的极端。扁平2.0提供了一个妥协的机会-不牺牲能指的视觉简洁。

如果你的UI使用平面设计,请确保遵循最佳实践以避免它的陷阱。