扁平化设计是一种流行的设计风格没有光泽或三维视觉效果在网页的图形元素中。许多设计师认为它是一个分支极简主义的网站设计.
三维效果、拟态和现实主义
要定义平面设计,我们必须定义什么是平面设计不是。平面设计通常被解释为反对3D、拟物化和写实设计风格的反动运动.一个完全平面的界面不使用任何这些样式.
三维效果
三维效果给界面带来一种深度错觉,帮助用户理解视觉层次,理解哪些元素是交互的。
- 出现凸起的元素看起来它们可以按下(用鼠标点击)。这种技术常被用作数字按钮的符号。
- 凹陷或凹陷的元素看起来可以填满了。这种技术经常被用作输入字段的符号,比如搜索工具。
从早期的图形用户界面开始,屏幕就使用了伪三维效果(阴影、渐变、高亮)来帮助用户一眼就能理解可用的操作。然而,在这些早期gui中的伪3d效果往往是咄咄逼人的,过度渲染的,并且在视觉上分散注意力。
Skeuomorphism
在数字设计中,拟态设计是一种具有不必要的、装饰性的设计特征的对象,它模仿了现实世界的先例。拟物化设计的目的是帮助用户理解如何使用一个新的界面,允许他们应用一些关于该先例的先验知识。
现实主义
现实主义是一种基于美学原因而模仿实体物品或纹理的设计风格。
拟纯常与现实主义.在网页设计中,这两种风格通常是一起出现的。主要的区别是,现实主义是一种视觉风格,使用的设计元素和纹理为了纯粹的审美目的而模仿物质世界,而skeuomorphism支持一个隐喻帮助用户理解界面。
平面设计的起源
2011年微软Metro设计语言和Windows 8的发布对平面设计的普及产生了特别大的影响。微软的设计文档将其新风格称为“真正的数字化”——这个词巧妙地抓住了扁平设计对许多设计师的吸引力。与拟物象设计不同,平面设计被视为一种探索数字媒介的方式,而不试图复制物理世界的外观。
苹果主页的扁平化为这一流行趋势的增长提供了一个有用的基准。长期以来,拟物化和现实主义一直是苹果设计的标志,直到2013年左右,它的主页才开始抵制单调的趋势。
平面设计的可用性问题
自2011年平面设计出现以来,尼尔森诺曼集团一直是一个必威在线娱乐对其固有的可用性问题直言不讳的批评.我们的主要反对平面设计就是为了追求时尚的美学而牺牲用户的需求。
多年来,使用者一直接触传统的极大的可能性可点击性,如蓝色,下划线链接和按钮上的3D效果。随着设计趋势的转变和用户接触到新的模式,一般用户的直觉能力识别相关的元素进化而来的。但用户更善于发现链接元素并不意味着他们不需要任何线索在所有。事实上,我们已经注意到,长期接触这些扁平但可点击的元素已经缓慢降低用户效率让他们更难理解什么是可点击的,什么是不可点击的。
当我们问一位22岁的加拿大人她是如何知道她可以在网站上点击什么时,她给出了以下回答:
“当它是蓝色和下划线时,这就是你最初如何知道的。你甚至可以在Word中看到。但说真的,尤其是画了下划线的时候,这很有帮助。如果是一个按钮,它不一定要写“点击这里”,但如果它写着“立即购买”或“购买”或“添加到购物车”。
这段话很好地说明了人们用来决定点击性的线索类型:
- 传统的、外部一致的符号(如蓝色、带下划线的文本或凸起的按钮)
- 让人想起传统能指的东西(如任何颜色的下划线文本或框文本)
- 上下文线索(如可操作的文本或放置在页面顶部)
如果你的组织想要过渡到一个扁平的审美,跟随我们设计可识别的可点击元素的指导方针以确保您没有造成点击不确定性。
增肥的平面设计
最近,设计师开始注意到平面设计的可用性问题。因此,一种更加成熟和平衡的扁平化设计的解释出现了。设计师们发现他们可以“真正的数字化”,并在不损害可用性的情况下探索媒体的独特机会。
这种较新的解释有时被称为“半平”、“几乎平”或“平2.0版”。这种设计风格大部分是平面的,但它利用了微妙的阴影、高光和图层来在UI中创建一些深度。
谷歌的材料设计语言是平面2.0具有正确优先级的一个例子:它使用从物理中借来的一致的隐喻和原则来帮助用户理解界面并解释内容中的视觉层次。
对于任何设计趋势,我们建议保持平衡和适度。不要为了赶时髦而牺牲可用性。不要忘记这一点——除非你在设计只有对于其他设计师,你不是用户.你的喜好和解释点击性符号的能力与你的用户不一样,因为你知道你自己设计的每个元素的目的是什么。
早期的伪3d图形用户界面和史蒂夫-乔布斯式的拟物化设计通常会产生笨重的界面。从这些过度的范围中缩小对可用性是有好处的.但是,消除视觉上的差别,产生没有符号的完全平面设计,也可能是一个同样糟糕的极端。扁平2.0提供了一个妥协的机会-不牺牲能指的视觉简洁。
如果你的UI使用平面设计,请确保遵循最佳实践以避免它的陷阱。
分享这篇文章: