平面设计美学探讨



最近,web和UI设计的一个增长趋势是使用“平面设计”,这显然是当前的一个热门话题——充满了热烈的讨论和大量的学习内容。我一直被极简主义所吸引,所以平面设计是一种美学,这激发了我的灵感,尤其是在最近重新设计QuoteRobot的时候,这是我在2010年共同创立的一款提案撰写应用程序。

在本文中,我将讨论什么是平面设计,回顾其他设计师对它的看法,并提供一些如何在自己的设计中实现它的技巧。

什么是平面设计?

实际上,平面设计意味着设计时不使用通常的渐变、像素完美阴影和近年来盛行的伪影(稍后将详细介绍),以实现看似“平面”的界面。

Layervault的艾伦·格林施泰因(Allen Grinshtein)最初可能创造了“平面设计”一词。在一篇针对HackerNews的文章中,他说…

“网络上广受欢迎的产品有着相似的设计美学,有着大致相同的斜面、嵌入式阴影和下拉阴影。对于设计师来说,实现这种“可舔”界面是一件值得骄傲的事。对于我们,以及少数UI设计师来说,这感觉是不对的“
~艾伦·格林施泰因(Layervault)

如果你看看Layervault,它的设计很漂亮,简单,甚至没有使用额外的设计细节,我们作为设计师经常努力实现。有趣的是,了解并观察我们应用的渐变和样式,这是UI设计中的一个当前趋势,一个潜在的变化趋势。

平面设计示例

在Squarespace的新版本中,他们选择了几乎完全平坦的界面。你真的可以知道他们花了多少时间来制作线框和UI,这很复杂,但仍然很容易导航。

虽然我自己还没有使用LayerVault,但据我所见,新的平面用户界面看起来非常简单,易于使用。

脸书几乎总是采用平面设计美学,只是最近才引入了一些轻微的斜面。

“脸书是界面趋向平淡的完美例子。他们的主要动作按钮仍然有一个轻微的斜面,但很多次要动作都是完全平淡的。从他们没有改变界面风格这一事实来看,它一定很管用。”
~伊恩·斯托姆·泰勒(Segment.io)

尽管他们多年来一直因对界面进行了许多更改而受到批评,但它是互联网上使用最多的网站之一,嘿,数百万人不会错的。

最新的Rdio界面是如此平坦和简约,它几乎完全没有阴影、渐变,甚至没有颜色。

在Nest的前端代码发布之前,我有幸对其做出了很小的贡献,我完全着迷于他们推出的平面美学

“……作为互动设计师,我们应该接受我们工作的媒介,并稳步拒绝我们所处的骷髅形、阴影式地狱。”
~丹尼尔·豪厄尔(豪厄尔斯)

对骨骼形态的强烈反对

正如20世纪建筑中的极简主义运动是对前几个世纪建筑过度装饰的强烈反对,平面设计美学可能是对多年来设计过度或装饰过度的网站和界面的强烈反对。一个常见的例子是SkuoMorphism的过度使用,人们最近一直在批评苹果。

由于在日历应用程序中不必要地使用了皮革纹理,苹果受到了设计师的大量批评

维基百科将skeuomorphism定义为:

产品的一种设计元素,模仿原产品设计中功能上必要的设计元素,但在新设计中已成为装饰性元素

例如,我们经常将渐变和阴影应用于原本是按钮的元素,因为现实世界中的按钮具有这些功能,即使它们在计算机用户界面的设置中是不必要的。

“因此,一个带有玻璃温度计图片的天气应用程序是变形的:玻璃在原始(真实世界的温度计)中是必要的,但在新设计中变得纯粹是装饰性的。”

真的有必要在日历应用程序上添加皮革纹理吗?同样,真的有必要让我们的按钮带有渐变和3d边缘吗,还是用户知道要点击它们?需要多少装饰?有吗?

在现实生活中,当按下一个按钮时,你可以感觉到它的给予和反弹,但在手机或屏幕上,缺乏这种物理反馈。你的大脑知道存在一种物质性,但在虚拟现实中它并不存在。因此,至少对我来说,它成为了现实不符合预期的时刻之一,这让我失望。“
~余(svpply/eBay)

因此,平面设计可能是对界面设计中过度使用装饰的反击,就像极简主义是对过去浮华的帝国主义建筑的反击一样。

形式遵循功能,拥抱平面

20世纪的建筑极简主义运动也产生了一些伟大的设计格言,比如我们今天仍在谈论的“形式遵循功能”和“少即是多”。同样,当被问及如何创作标志性的大卫雕像时,我喜欢雕塑家MichaelLangelo的这句话。

“这很容易。你只要把看起来不像大卫的石头凿掉就行了。”

在用户界面设计中,通常会去掉真正为界面带来活力的东西。37signals的团队因将这一原则应用于他们的产品(如Basecamp)而臭名昭著(并且非常成功)。在平面设计的世界里,少就是多。

为了实现平面设计的审美,我们设计师必须关注事物的功能,而不是它们的外观。这是关键,也是为什么线框对设计过程如此重要的原因。

美学是一个意见问题

在我为本文所做的研究中,我几乎没有发现任何科学研究支持屏幕上看起来像按钮的按钮是否实际上更容易点击。有很多证据支持对比度、颜色理论和继承权,但我敢打赌,当设置在适当的环境中时,一个扁平的橙色按钮和一个斜角的橙色按钮一样有效。以下是其他设计师的一些意见。

“这和T台时装没什么不同——每个人都开始做同样的事情;当它无处不在时,作为一名设计师,你必须做完全相反的事情。”
~Cemre Güngör(Branch)

说“skeuomorphism是糟糕的设计”就像说“紫色是丑陋的颜色”或“椭圆在网络应用程序中没有位置”。它根本没有任何意义。”
~萨夏·格雷夫

为什么在没有证据表明你所推广的东西实际上更好的情况下,推广某种设计美学呢?是不是让某些东西在美学上更令人愉悦,而实用性却可能下降?”

好的设计就是好的设计,不管是否美观

那么,如果斜面、渐变和阴影是一个意见问题,那么什么是好的设计呢?无论你是否要使用平面美学,用户界面都是关于规划的。我相信平面设计只是让人们更容易识别一个伟大的设计,因为设计和工作方式之间的混乱更少。

以下是一些很棒的用户界面设计技巧:

一致性通过使用常见的UI元素和样式,您可以帮助用户了解预期内容,从而使应用程序更易于使用。

对比度
可点击的元素应该对比不可点击的。这可以通过颜色、大小、位置以及样式来实现。

使用基于网格的布局(如960gs)是为设计建立一些视觉指导的好方法。眼睛自然会遵循由内容确定的线条和比例,因此理解和使用网格是加强视觉平衡的一个好方法。

层次结构我喜欢将其视为“用户操作”。我可以就此写一整篇文章,但让最常见的用户操作(有时称为用例)很容易找到,同时隐藏不太常见的操作是简化界面并使其更易于使用的一个好方法。一般来说,最重要的东西应该比不重要的东西更显眼。

我的经验是,平淡或“现实”并不重要。重要的是,在快速扫描时,层次结构很明显,用户可以轻松找到下一个可操作的项目。”
~卡罗琳·基姆(作家)

一些目标受众会倾向于不同的审美风格。建筑师、设计师和时尚良知观众可能会接受平面设计,而儿童、小丑和其他一些人可能会喜欢有趣的纹理和颜色。

反馈
当点击发生时,需要立即明确的反馈。动画是提供视觉反馈的常见方式,例如,在单击某个对象后旋转加载程序图像。与反馈相关的另一个问题是需要在适当的时候提供吸引人的、信息丰富的帮助和状态信息。

消除摩擦
通常,通过减少步骤数让用户达到目标,可以创造更流畅的体验。任何中断或额外步骤都会降低转换率。

鼓励探索
一旦用户使用完您界面的最基本功能,当他们进一步冒险时,最好以预期结果奖励他们的探索。

如果你想实现一个有效的平面设计,我再怎么强调线框和规划的重要性也不为过。找出常见用例,把它们写下来,然后重新制作线框,直到一切都有意义。我喜欢在纸上这样做,但也有很多很棒的线框工具可用。

“平面设计当然在世界上占有一席之地,但重要的是要记住,归根结底,它只是另一种美学。凹凸不平、光滑、平坦、哑光、木质等,这些都是优秀信息架构和交互设计之上的风格。”

请分享、评论和推特

如果你喜欢这篇文章,受到它的启发,或不同意,我希望你评论,分享或推特它。让我们继续讨论吧。此外,如果你要写提案,我希望你能看看QuoteRobot,在那里我是首席设计师和联合创始人。

关于平面设计的更多信息:

  • SkuoMorphism是(和不是)什么

来源:https://speckyboy.com/the-flat-design-aesthetic/

0