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

三维效应,阶阶阶段性和现实主义

要定义平面设计,我们必须定义什么平面设计不是。平面设计通常被解释为一个反动运动与3D,SkeOomorphic和现实设计风格。完全平坦的界面不使用这些样式中的任何一种

三维效应

三维效果给出了一个界面的深度幻觉,可以帮助用户解释视觉层次结构并理解哪个元素是交互式的。

  • 出现的元素提出看起来他们可以按下(用鼠标点击)。该技术通常用作数字按钮的说明率。
  • 出现沉没或空心的元素看起来他们可以填补。该技术通常用作输入字段的指示器,如搜索工具。

由于图形用户界面的早期,屏幕已经采用了伪三维效果(阴影,渐变,亮点)来帮助用户一目了然地了解可用的动作。然而,这些早期的伪3D效应往往是侵略性的,过度的和视觉分散注意力。

Windows 95对话框
此Windows 95对话框使用沉重的阴影和亮点来创建3D效果。请注意,按钮出现举起,输入字段显示尚不佳。它还清楚三个选项卡中的哪一个位于另外两个的顶部。然而,沉重的阴影可以轻松地在视觉上缺乏界面。

s

在数字设计中,偏斜设计是一种具有不必要的物体,观赏设计特征模仿现实世界的先例。SkeOomorphic设计旨在帮助用户了解如何使用新界面来允许它们应用一些先前的知识。

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

现实主义

现实主义是一种设计风格,用于以审美原因模仿物理物品或纹理。

偏斜术往往与之混淆现实主义。在网页设计中,通常在一起的两个风格一起找到。主要区别是现实主义是一种使用设计元素和纹理的视觉风格为纯粹的审美目的而模仿物理世界,虽然斯基因族支持隐喻帮助用户了解界面。

豆芽主页
像早期的Kindle消防片一样,豆芽杂货网站使用3D木质纹理,但这种设计中的现实主义仅用于审美吸引力。它不用于支持任何类型的隐喻,以帮助用户了解如何使用该界面,也不是模仿任何现实世界的前身。

平面设计的起源

2011年微软的地铁设计语言和Windows 8的发布特别有影响力,普及平面设计。微软的设计文档将其新风格称为“真实数字化” - 一句话,整齐地捕获了许多设计师的平面设计的吸引力。与SkeOomorphic设计不同,平面设计被视为探索数字媒体而不试图重现物理世界的外观的方式。

Apple的主页的平坦化为趋势普及的增长提供了一种有用的基准。SkeOomorphisphism和现实主义长期以来一直是Apple Design的商标,其主页抵制了扁平趋势,直到2013年左右。

苹果,2007年
Apple于2007年的主页(通过Warbach机器)。导航栏被设计为出现为光泽,3D选项卡。
苹果,2012年
Apple的主页2012年(通过Wardback机器)。标签隐喻已经消失,但导航栏仍然似乎有光泽和圆形(一个现实主义而不是伴侣的示例)。新的搜索工具有插入的阴影,使其显示空心(比Windows输入字段的外观更优雅的视觉效果,而是概念上同样的想法)。右下角可见的图标如此光泽,以至于它们几乎干扰了观众了解他们是什么的能力。这些按钮几乎看起来是发光的,而不是提出。
苹果,2015年
2015年Apple的主页。整个导航栏,包括徽标,完全是平的 - 没有可检测的阴影,纹理或亮点。这里没有3D,现实或伴侣效应。唯一的方法是用户可点击的“导航”选项是“惯例”:跨网页顶部的强烈彩色条带往往是一个导航栏(除了它是广告时,但这是太瘦的是降低受害者横幅失明)。

平面设计的可用性问题

由于2011年的平坦设计的出现,尼尔森诺曼集团一直是一个manbetx官方网站手机版声乐批评其固有的可用性问题。我们的初步反对平面设计这是倾向于牺牲用户为时尚美学的需求。

多年来,用户已接触到传统意义员点击性,如蓝色,带下划线的链接和3D效果按钮。随着设计趋势的转变和用户暴露于新模式,平均用户直观的能力识别链接的元素进化了。但只是因为用户在检测到链接元素时更好并不意味着他们不需要任何线索根本事实上,我们注意到这些公寓但可点击的元素的长期曝光慢慢降低用户效率通过使他们对可点击的原因复杂化,而不是。

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

“当它是蓝色和下划线的时候,这就是你最初知道的。你也看到了句子和东西。但真的,特别是当它强调时,有助于。或者如果是一个按钮,它就不必说点击这里,但如果它说,现在购买或购买或添加到购物车。“

此引用整齐地说明了人们用来确定点击性的线索类型:

  • 传统的外部一致意小器(如蓝色,带下划线的文本或凸起按钮)
  • 让人想起传统的辅助剂(例如任何颜色或盒装文本的带下划线文本)
  • 上下文线索(例如页面顶部的可操作文本或放置)
交易员Joes主页
Trader Joe的主页显示了各种可点击性指数。(1)蓝色,带下划线的文本查看全部是传统的指导因子。(2)平,红色背景链接是请联想到一个按钮,即使没有3D或现实的视觉效果。(3)主导航栏中的黑色链接仅通过展示位置和文本传达它们的可点击性。(请注意,大多数平面页面确实有一个元素的SkeOomorphism - 特色产品旋转木马下的木制架子。)

如果您的组织想要过渡到更平坦的美观,请按照我们的设计可识别可识别的点击元素的指南要确保您没有造成点击不确定性。

肥胖平面设计

最近,设计师已经开始注意到平面设计的可用性问题。结果,出现了对平面设计的更成熟和平衡的解释。设计师正在寻找它们可以是“真实的数字化”,并探索媒体的独特机会而不会损害可用性。

这种更新的解释有时被称为“半平,”几乎平,“或”平2.0“。这种设计风格大多是平的,但它利用了微妙的阴影,亮点和层来在UI中创造一些深度。

使用长阴影效果的设计师的投资组合
具有长阴影的平面设计元素,如在这个设计师的投资组合中,左右都很流行。长阴影是扁平2.0出错的一个例子 - 3D效果纯粹是审美的,不要为用户添加任何有意义的信息。值得庆幸的是,他们的受欢迎程度已经下降,但长阴影的图标仍在某些平面接口中。

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

Evernote Android应用程序
Android的Evernote应用程序是平面2.0可能好处的一个很好的例子。尽管具有大多数扁平UI,但该应用程序在导航栏和浮动+按钮上提供了一些微妙的阴影(添加新的)。它还利用卡隐喻在3D空间中将内容显示为平坦的可分性窗格。

与任何设计趋势一样,我们建议平衡和适度。不要制定设计决策,以牺牲趋势的可用性。别忘了 - 除非你设计只要对于其他设计师 - 你不是用户。您的喜好和解释点击性指标的能力与您的用户不同,因为您知道您自己设计中的每个元素都旨在做到。

早期的伪3D GUI和史蒂夫 - 乔布斯·斯基因术经常生产重,笨重的界面。从那些过度缩放的缩放是有益的可用性。但是,除去视觉区别以产生完全平坦的设计,没有意小器可能是一个同样恶劣的极端。平2.0为妥协提供机会- 视觉简约而不牺牲意义者。

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