菜单 关闭

平面设计:manbetx官方网站手机版它的起源,它的问题,为什么Flat2.0更适合用户?

通过 凯特·莫伦9月27日,二千零一十五

总结:平面设计是manbetx官方网站手机版一种网页设计风格,在2012年左右流行起来。它在今天仍被广泛使用,它的过度使用会导致严重的可用性问题。平面设计引入的最大可用性问题之一是缺乏可点击元素的符号。manbetx官方网站手机版平面2.0可以提供更好的选择。


平面设计是manbetx官方网站手机版一种流行的设计风格定义为没有光泽或三维视觉效果在网页的图形元素中。许多设计师manbetx官方网站手机版认为它是极简主义网页设计manbetx官方网站手机版.

三维效果,偏序现象,现实主义

定义平面设计,manbetx官方网站手机版我们必须确定什么是平面设计manbetx官方网站手机版不是。平面设计通manbetx官方网站手机版常被解释为反对3D的反动运动,歪形的和现实的设计风格manbetx官方网站手机版.完全扁平的界面不使用任何这些样式.

三维效应

三维效果给人一种界面深度的错觉,它可以帮助用户解释视觉层次结构并理解哪些元素是交互的。

  • 出现凸起的元素看起来它们可以被按下(用鼠标点击)。这种技术经常被用作数字按钮的能指。
  • 看起来凹陷或中空的元素看起来它们可以被填满。这种技术经常被用作输入域的能指。像搜索工具。

从早期的图形用户界面开始,屏幕采用了伪三维效果(阴影,梯度,突出显示)帮助用户了解可用的操作。然而,在这些早期的gui中,伪三维效果往往是攻击性的,过火,视觉上分散注意力。

Windows 95对话框
此Windows95对话框使用重阴影和高光创建三维效果。请注意,按钮如何显示为凸起,输入字段如何显示为凹陷。还可以清楚地看到,这三个选项卡中的哪一个位于其他两个选项卡的顶部。然而,浓重的阴影很容易使界面在视觉上失去吸引力。

拟物化

在数字设计中,manbetx官方网站手机版双向设计是一个没有必要的对象,manbetx官方网站手机版模仿现实世界先例的装饰manbetx官方网站手机版设计特征。skeuomorphic设manbetx官方网站手机版计旨在帮助用户理解如何使用一个新的界面,允许他们应用一些关于这个先例的先验知识。

亚马逊
在亚马逊早期的Kindle Fire平板电脑中,基于Android的操作系统采用了skeuomorphic书架设计,manbetx官方网站手机版配有3D搁板和木材纹理。书架隐喻旨在帮助用户将以前关于书架(作为存储和组织物理媒体的场所)的知识转移到数字环境中。书架和木材纹理与系统功能无关,但应加强隐喻。亚马逊后来从用户界面上删除了skeuomorphic书架设计。manbetx官方网站手机版

现实主义

现实主义是一种设计风格,出manbetx官方网站手机版于美学的原因模仿物理项目或纹理。

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

Sprouts主页
就像早期的Kindle Fire平板电脑,Sprouts杂货网站使用3D木材纹理,但这种设计的现实主义只是为了美观。manbetx官方网站手机版它不支持任何隐喻来帮助用户理解如何使用界面,它也没有模仿任何现实世界的前身。

平面设计的起源manbetx官方网站手机版

2011年微软发布的Metro设计语言和Windows8在推广平面manbetx官方网站手机版设计方面尤其有影响力。微软的设计文档把它的新风manbetx官方网站手机版格称为“真正的数字”,这一短语巧妙地抓住了平面设计对许多设计师的吸引力。与双向设计不同,manbetx官方网站手机版平面设计被manbetx官方网站手机版认为是一种探索数字媒体的方法,而不是试图重现物理世界的外观。

苹果主页的扁平化为这一趋势的流行度的增长提供了一个有用的基准。skeuomorphism和realism一直是苹果设计的商标,manbetx官方网站手机版直到2013年左右,它的主页一直抵制这种平缓的趋势。

苹果二千零七
苹果2007年的主页(通过回程机器)。导航栏的样式将显示为有光泽,3D标签。
苹果二千零一十二
2012年苹果的主页(通过回程机器)。标签暗喻消失了,但是导航栏仍然显得光泽度和圆润(一个现实主义而不是双向变形的例子)。新的搜索工具具有嵌入阴影,使其看起来像中空的(比17年前Windows输入字段的外观更优雅的视觉效果,但概念上是一样的)。在右下角可见的图标非常有光泽,几乎干扰了观看者理解它们是什么的能力。这些按钮看起来几乎是发光的,而不是提高。
苹果二千零一十五
2015年苹果的主页。整个导航栏,包括商标,完全平坦-没有可检测的阴影,纹理,或强调。没有3D,现实的,或者这里的双向效应。用户知道导航选项是可点击的唯一方法是按惯例:网页顶部的一条颜色强烈的条纹往往是一个导航栏(除非它是一个广告,但这个太薄了,不可能成为受害者广告盲点

平面设计的可用性问题manbetx官方网站手机版

自2011年平面设计问manbetx官方网站手机版世以来,尼尔森诺曼集团manbetx官网手机登陆对其固有可用性问题的直言不讳的批评.我们的平面设计的主要反对意见manbetx官方网站手机版它倾向于为了时尚的美学而牺牲用户的需求。

多年来,用户已经接触到传统意符可点击性,比如蓝色,带下划线的链接和按钮上的三维效果。随着设manbetx官方网站手机版计趋势的转变和用户接触到新模式,普通用户的直觉能力标识链接元素已经进化了。但仅仅因为用户更擅长检测链接元素并不意味着他们不需要任何线索。完全。事实上,我们已经注意到,长期暴露在这些平坦但可点击的元素中缓慢降低用户效率把他们对什么是可点击的和什么不是的理解复杂化。

当我们问一个22岁的加拿大人,她怎么知道自己可以在网站上点击什么,她给出了以下答案:

“当它是蓝色和下划线时,你最初就是这样知道的。你甚至在文字和东西上都能看到。但真的,尤其是当它有下划线时,这有帮助。或者是按钮,不用说点击这里,但如果它说,立即购买或购买或添加到购物车。“

这句话清楚地说明了人们用来确定点击率的提示类型:

  • 传统的,外部一致的符号(如蓝色,带下划线的文本或凸起的按钮)
  • 使人想起传统的能指的东西(如任何颜色的带下划线的文本或带方框的文本)
  • 上下文线索(如可操作的文本或页面顶部的位置)
交易员Joes主页
TraderJoe's的主页显示了各种可点击性标志。(1)蓝色,带下划线的文本查看全部 是传统的能指。(2)平坦的,红色背景发现 链接就像一个按钮,即使没有3D或逼真的视觉效果。(3)主导航栏中的黑色链接仅通过其位置和文本来传达其可点击性。(请注意,大部分是平的页面有一个skeuomorphism元素——特色产品传送带下的木制货架。)

如果你的组织想要转变成一种更为平庸的审美观,跟随我们可识别点击元素设计指南manbetx官方网站手机版以确保不会造成点击不确定性。

育肥平板设计manbetx官方网站手机版

最近,manbetx官方网站手机版设计师已经开始注意到平面设计的可用性问题。因此,一个更成熟和平衡的解释平面设计已经出现。manbetx官方网站手机版manbetx官方网站手机版设计师发现他们可以“真正数字化”,在不影响可用性的前提下探索媒体的独特机会。

这种新的解释有时被称为“半平”、“几乎平”或“平2.0”。这种设计风manbetx官方网站手机版格大多是平的,但它利用了细微的阴影,亮点,以及在用户界面中创建深度的图层。

使用manbetx官方网站手机版长阴影效果的设计师作品集
带有长阴影manbetx官方网站手机版的平面设计元素,从这个设计师的作品中可以看出,manbetx官方网站手机版2013年左右开始流行。长阴影是Flat2.0出错的一个例子——3D效果纯粹是美学效果,不会为用户添加任何有意义的信息。谢天谢地,他们的人气下降了,但在某些平面界面中,阴影较长的图标仍在使用中。

谷歌材料设计manbetx官方网站手机版语言是Flat2.0的一个例子,具有正确的优先级:它使用从物理中借用的一致的隐喻和原则来帮助用户理解接口和解释内容中的视觉层次结构。

Evernote Android应用程序
Android版Evernote应用程序就是Flat2.0可能带来的好处的一个很好的例子。尽管用户界面基本上是平的,这个应用程序在导航栏和浮动+按钮上提供了一些细微的阴影(新增)。它还利用卡片隐喻将内容显示为平面。三维空间中的可分层窗格。

与任何设计趋势一样,manbetx官方网站手机版我们建议保持平衡和适度。不要做出牺牲可用性的设manbetx官方网站手机版计决策。别忘了-除非你在设计manbetx官方网站手机版只有对于其他设计师-您不manbetx官方网站手机版是用户.您的首选项和解释可点击性符号的能力与您的用户不同,因为您知道您自己设计的每个元素的目的是什么。manbetx官方网站手机版

早期的伪三维图形用户界面和史蒂夫·乔布斯风格的双向变形经常产生沉重的,笨重的界面。从这些过度中缩小比例对可用性很好.但是,消除视觉上的差异,以产生完全平坦的设计,没有标志,可能是一个同样糟糕的极端。manbetx官方网站手机版Flat2.0提供了妥协的机会-视觉简单,不牺牲符号。

如果您的用户界面使用平面设计,manbetx官方网站手机版确定你遵循最佳实践以避免它的陷阱。