扁平化设计美学探讨

“扁平化设计”的使用正逐渐成为网页和UI设计近期的大趋势,同时也是时下的一个热门话题,各种探讨和学习研究纷至沓来。鉴于我本身一直钟情于极简主义,所以扁平化设计中的美学对我极有启发,特别是在近期对QuoteRobot(我在2010年与他人共同完成的一个提案书写应用)进行重新设计时。

在本篇文章中,我将与大家探讨什么是扁平化设计,并审视其他设计师对扁平化设计的看法,然后为大家提供一些能用于自己设计工作的小建议。

什么是扁平化设计?

从实践角度说,扁平化设计就是指不采用近几年流行的渐变、像素完美阴影和拟物化方法(在后面的部分会详细介绍)实现“扁平化”的界面。

Layervault的Allen Grinshtein也许算得上是“扁平化设计”一词的始作俑者。他曾在HackerNews上大为流行的一篇文章中说道:

“Web端上广受喜爱的产品都有着相似的设计审美,它们的斜面、插入阴影和投影都大致相同。对于设计师,达到这种让人“垂涎”的界面水平也许值得骄傲。但是对我们,以及作为少数存在的UI设计师来说,这就大错特错了。”

~ Allan Grinshtein (Layervault)

以Layervault为例,其设计的美妙之处在于简约,并且摒弃了我们作为设计师拼命想达到的很多额外的设计细节。我们当下奉为UI设计潮流,并广为使用的各种渐变和风格正在潜移默化的发生着改变,而对这一潮流的学习和研究将充满着趣味。

扁平化设计范例

在Squarespace的新版本中,设计师选用了一套近乎完全扁平化的界面。想来他们一定在线框图和UI上花费了大量的时间,尽管设计过程如此复杂,但导航却十分简单。

我自己虽然从来没用过LayerVault,但根据我的观察,其最新的扁平化UI很简单易用。

Facebook一直是扁平化设计审美的簇拥者——其仅在近期才刚刚开始使用少量的斜面。

“Facebook是界面向扁平化发展的一个完美范例。其主要的操作按钮虽然还留有少量的斜面,但大量的二级操作都已经完全扁平化。鉴于他们一直没有再修改界面样式,这种方法肯定是成功的。”

Ian Storm Taylor (Segment.io)

尽管Facebook近些年因为频繁修改界面而备受批评,但扁平化仍然是互联网上使用最多的网站样式,想来大众的口味是不会错的。

最新的Rdio界面也采用了扁平化和极简主义风格,并几乎完全抛弃了阴影、渐变甚至彩色。

我有幸曾为Nest的前端代码做过一些小的贡献,并被他们推出的扁平化审美完全吸引住了。这些簇拥扁平化设计的设计师对这一风格还确实热情满满。

“…作为交互设计师——我们应该热衷于自己所使用的方法,并坚决拒绝拟物化和投影一类我们已经深陷其中的玩意。”

~ Daniel Howell (Howells)

抵制拟物化

正如20世纪建筑界的极简主义运动强烈抵制先前几个世纪的建筑装饰主义一样,扁平化设计审美也可能成为对多年来网站和界面过度设计或过渡修饰的抵制运动。其中最常见的一个例子,就是Apple近年来饱受诟病的过度使用拟物化。

Apple因在日历应用中过度使用皮革材质而备受设计师的批评。

维基百科将拟物化定义为:

对原产品设计中因功能性而存在的设计要素进行模仿,并使之成为新设计中装饰性元素的一种产品设计元素。

举例来说,我们经常对用做按钮的元素应用渐变和投影效果,因为真实世界中的按钮就具有这些属性,但在计算机用户界面环境中实际上这些属性并非必要。

“一个天气类应用使用玻璃温度计的图片,这就是拟物化:玻璃在原始环境(真实世界的温度计)下是必要的,但在新的设计中却纯粹是个装饰。”

Sacha Greif

在日历应用上使用皮革材质是否真的必要?同样,对按钮应用渐变和3d边缘是否真的必要?难道不这样用户就不知道去点按钮了吗?装饰到什么程度算是必要?没有装饰就不行了吗?

“真实生活中,人在按按钮时会感觉到弹性,但是在手机或者屏幕上却没有这种物理的反馈。虽然在你脑中能够想象这种物理性,但在拟物化的现实中它并不真实存在。所以说,或者至少对我来说,拟物化在这一方面并不能达到期望的高度,这让我很失望。”

~ Allan Yu (svpply / eBay)

因此,扁平化设计完全可以成为对界面设计滥用装饰的抵制,正如极简主义抵制过去华而不实的豪华建筑风格。

功能决定形式,拥抱扁平化

20世纪建筑界的极简主义运动还产生了一些我们至今仍津津乐道的设计名言,例如“功能决定形式”、“少即是多”等等。同样,雕塑家米开朗基罗在谈到自己如何塑造其标志性的大卫像时,也有一句名言让我大爱:

“很简单。只要去掉看起来不像大卫的石头就行了。”
~ Michaelangelo)

具体运用到用户界面设计中,这通常就是说要去掉让界面贴近真实生活的内容。37signals的团队因在其产品(如Basecamp)中运用这一原则而名声大振(而且大获成功)。在扁平化设计界,“少即是多”是绝对的真理。为了表现出扁平化设计的美感,设计师必须注重于对象的功能,而不是外观。这是关键,也是线框图对设计流程如此重要的原因所在。

审美因人而异

在写这篇文章前的调研过程中,我几乎没找到任何科学论断来支持屏幕上的按钮越真实就越显得“可点”这一说法。虽然有很多证据为对比、颜色理论和层级理论提供支持,但我敢肯定的说,一个扁平化的橙色按钮和一个斜面橙色按钮放到恰当的背景下效果完全不会有差别。下面是一些其他设计师的看法:

“这就跟T台的流行趋势一样——流行起来大家就都跟风,但是作为一名设计师,你恰恰需要避免这个。”

Cemre Güngör (Branch)

“说拟物化设计差劲,就像说紫色很丑或者椭圆不适合web应用一样,完全没意义的话。”

~ Sacha Greif

“为什么要在没有证据的情况下大肆宣传某个设计美学优于其他美学?难道说为了提高美观就可以降低使用性吗?”

Geoff Stearns (formerly YouTube)

好设计就是好设计,跟审美无关

那么,如果斜面、渐变和阴影只是因人而异的东西,到底什么才是一项好的设计呢?不论你是否要用扁平化的审美,用户界面的关键都在于规划。我想扁平化的设计能够让人更加轻松的识别出一项好的设计,因为在设计与功能之间杂七杂八的东西更少。

下面是一些不错的用户界面设计建议:

一致性

使用通用的UI元素和样式可以帮助用户减少对产品的困惑,从而让应用的使用更加简单。

对比

可点击的元素应该与不可点击的元素形成对比。例如可以使用颜色、大小、位置和样式等方法进行对比。

布局

使用基于960g布局的网格是为你的设计界定某些视觉指导原则的好方法。你的眼睛会自然地跟随内容所建立起的线条和比率移动,因此,了解和使用网格是强化视觉平衡的好方法。

层级

我更倾向于把这一点看作是“用户操作”。关于这一点我有一肚子话可说,总之,把最常见的用户操作(有时也称为用例)放在显眼位置同时把不常见的操作隐藏起来是简化界面,让产品更加易用的绝佳方法。重要的东西要显眼,这是一条通用的规则。

“根据我的经验,扁平化还是“现实化”并不重要。重要的是让用户一眼就能看明白应用的层级,并能够轻松找到下一个可以操作的对象。”

Caroline Keem (writer)

目标受众
不同的目标受众会倾向于不同的审美风格。例如,建筑师、设计师和关注时尚的受众可能会簇拥扁平化设计,而孩子、小丑等其他人可能喜欢比较好玩的材质和颜色。

反馈

在进行点击时,快速、明确的反馈很重要。动画通常是提供视觉反馈的好方法。例如,在点击某个对象后旋转加载图标。有关于反馈我要说的另外一点是,需要在恰当的时机提供吸引人并且内容翔实的帮助和状态信息。

减少阻力

一般来说,减少用户实现某项目标期间的操作步骤可以打造更加流畅的体验。任何打断或额外的步骤都会降低产品的用户转化率。

鼓励探索

蓝蓝设计( www.lanlanwork.com)是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 BS界面设计、 cs界面设计、 ipad界面设计、 包装设计、 图标定制、 用户体验 、交互设计、网站建设、平面设计服务

在用户结束对界面的最基本使用后,应该在他们进一步探索后给他们展现其预期的效果作为其自主探索的奖励。

线框图

如果你想打造一套有效的扁平化设计,那么我还想再强调一次线框图和规划的重要性。确定最常见的用例,写下来,然后反复修改线框图直到一切完美。我个人喜欢在纸上做,但是现在也有很多不错的线框图工具。

“扁平化设计有着自己的位置,但是也不要忘记其只不过是众多设计美学中的一种。光泽化设计、扁平化设计、哑光设计、木质感设计等等,都只是放置在优秀信息结构和交互设计之上的样式而已。

~ Mike Cuesta (carecloud)

时间: 2024-10-08 07:54:32

扁平化设计美学探讨的相关文章

扁平化设计2.0

时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 1)没有多余的效果,例如投影.凹凸或渐变等 2)使用简洁风格的元素和图标 3)大胆丰富且明亮的配色风格 4)尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些"规范"开始松懈了

扁平化设计的历史

[摘要]"扁平化设计"是一种设计风格术语,它抛弃任何能使得作品突显3D效果的特性. 如今一提到网站设计,就会不可避免地碰到"扁平化设计"(flat design)这个词.近几年扁平化设计趋势风生水起,也受到很多大公司的青睐. 但扁平化设计来源是哪里?为什么它风靡网站设计?在设计中,我们只有知道一种风格和技术的来源以及它背后的历史,我们在使用这种美学风格时才能更加得心应手.下面让我们追根溯源,了解扁平化设计的前世今生. 究竟什么是扁平化设计 对于没接触过的人来说,&q

扁平化设计的优势

目前,在市场上的视觉设计中,扁平化的设计的占比在持续上升,这其中究竟藏着有什么样的秘密,今天就来一起探讨一下吧. 首先,研究一样东西,我觉得都要从它的历史开始,因为可以了解它,并且清楚知道它的变化在哪里. 一.扁平化的开始和发展 在很多国内的人的心里,对扁平化的认识估计就是从微软的WINDOWS 8 和 WINDOWS PHONE 等界面开始,而后苹果的产品中也开始使用这样扁平化的视觉设计,由于微软和苹果产品在市场上的占比比较高,因此也一定程度上推动了整个移动端扁平化的设计进程. 二.扁平化的定

扁平化设计的流行配色方案

扁平化设计的流行配色方案 扁平化设计从2012年开始就已经流行起来,我觉得flat design有点类似极简主义设计,同样是追求简洁.简约,不同的是,扁平化设计是一项运用简单效果,或者是刻意进行一个不使用三维效果的设计方案.一个好的扁平化设计必然不可能出现阴影.浮雕和渐变等效果. 扁平化设计看上去非常简单.直观,并且使用方便,所以在手机界面和网页设计中变得越来越受欢迎. 让我们来学习一下,如何进行扁平化设计吧. 什么是扁平化设计?<探讨扁平化设计之美><使用扁平化设计的网页设计欣赏>

扁平化2.0:扁平化设计以前从未有的6个设计风格

时至今日,扁平化已不再是流行一时的设计风潮,而是一种美学风格.扁平化大胆的用色,简洁明快的界面风格一度让大家耳目一新,当它对元素效果抛弃的如此彻底之际,它又将效果捡起来,改装成另一番模样,使得扁平化进化为扁平化2.0. 扁平化设计特质 对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征: 没有多余的效果,例如投影.凹凸或渐变等 使用简洁风格的元素和图标 大胆丰富且明亮的配色风格 尽量减少装饰的极简设计 扁平化所追随的细节依然不变,然而这些“规范”开始松懈了.随着扁平化进化到2.0时

扁平化设计发展

[PConline 欣赏]现在说起网页.UI设计,都会谈论扁平化设计(Flat Design)这个概念,一些大型公司和组织在网页设计都将风格偏向了它,而iOS 7又推上了一个高峰. 在苹果与微软的青睐与推动下,扁平化设计日益盛行,但是很少有人知道扁平化设计这个概念由何而来?为什么将这个概念用在了网页设计上?对于设计的新概念来说,搞清楚一个风格和一项技术的历史背景很重要,因为在我们觉得是否采用这个新的设计概念的时候,对它来由的了解可以帮助我们做出更明智的决定. 到底什么是扁平化设计? 对于那些从来

扁平化设计

扁平化概念的核心意义是:去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽象.极简和符号化. 例如:Windows.Mac OS.iOS.Android等操作系统的设计已经往“扁平化设计”发展.其设计语言主要有Material Design.Modern UI等. 扁平化的设计,尤其是手机的系统直接体现在:更少的按钮和选项,这样使得UI界面变得更加干净整齐,使用起来格外简洁,

扁平化设计:赶一种叫“简约”的时髦

人可以说是一种受感官支配的动物,我们被食物的香味吸引,被悦耳的音乐吸引,更容易吸引我们的是透过视觉看到的东西.因此人也可以说是一种视觉动物,我们很容易通过视觉来判断很多的东西,美丑甚至是善恶.再进一步来说,色彩是抓住我们视觉的核心. 互联网技术发达的今天,我们打开电脑.手机就能看到许多的网站.应用,最先吸引我们的应该不是它们的性能而是色彩.因此对于网站设计来说,界面色彩的设计也是不得马虎的重要环节. 说到设计,扁平化设计应该算是现下的设计热门词,无论是一个网站还是一个应用程序,扁平化和极简的设计

子数涵数&#183;UI设计——扁平化设计

一.基本资料 1.由来 扁平化设计这个概念,是由Google(谷歌)在2008年提出的:它的首个实践者是microsoft(微软),microsoft在2012年发行了win8系统,这个系统的外观主题就是扁平化设计. 2.核心 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让"信息"本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽象.极简和符号化. 3..优劣 优:降低硬件需求,延长待机时间.信息的展示更为简洁,减少了