浅谈扁平化设计的优缺点与发展趋势(上)

W-design2017.09.14

不论你从事平面设计、网页设计、UI/UX设计、前端设计…只要你是设计师,你不可不知从2013年后火速窜起改变整个资讯产业使用者界面的「扁平化设计 (Flat Design) 」 ,是如何撼动整个世界,甚至是改变你的工作型态与产业!

你有没有发现,2013年后许多网页、APP、甚至系统界面,都开始改用色彩缤纷、简约的风格,就像把所有物件通通压扁在画面上,这就是红极一时的扁平化设计 (flat design),新一代界面设计的趋势。

不单单只是资讯产业,连许多知名厂商的LOGO 也开始改头换面采用扁平化的潮流,像是Netflix、ebay、Spotify、Twitter、Audi、Citroën…等

然而也有人认为这样的改变变得没特色,比如说Instagram 的logo 就变得十分不显眼。

在资讯的推波助澜下,你有发现许多行业的设计趋势与消费者习惯的转变,潜移默化地受到科技化(Informatization)的影响吗?


什么是扁平化设计?

那么,解释一下到底这个很夯的扁平化设计是什么呀?
其实从上面一些案例你应该有隐约感觉到一些共通之处,扁平化设计就是,去除阴影 (shadow)、渐层 (gradients)、装饰 (decoration )、反射光泽 (shiny)等3D要素,通常使用高亮度的色彩 (bright color) 搭配无衬线字体呈现出简约现代风格。

噢!所以你是说扁平化设计是2013年后才有的东西吗?
哦不!当然不是了,先让我们把时间拉回100年前…


扁平化设计的开端

19世纪英国女王维多利亚在位统治时期称为维多利亚时代,那个时期的建筑风格就称为维多利亚风格 (Victorian Style),是个日不落国、英国钱淹脚目的黄金年代,外观华丽而细致,就算到了今天你还是能看到许多保存完整的建筑物。

嗯,就是那种你出国绝对会和它拍照的美丽建筑。

知名建筑像是英国国会大厦


然而好景不常,1920经过一次世界大战的洗涤后,人们对维多利亚风格感到厌倦,与每下愈况的生活简直形同对比,让人感到华而不实。

于是德国建筑师Walter Gropius 在1919 年成立了国立包豪斯学校,不过在1933年被纳粹压迫而关闭,因为Gropius在学校宣传共产主义思想。

谁也没想到,这个短短成立不到15年的学校竟然深深影响了往后世界的艺术、工业设计、平面设计、室内设计、现代戏剧、甚至是现代美术等领域上!

仔细看看包豪斯学派(又称包豪斯主义,The Bauhaus Style)的主张:
Form Follows Function: 设计的构成必须反映出功能,效用放第一位;
Truth to Materials: 尽量呈现该素材的特性;
The Less is More: 简约、功能性的美学,去除无谓的装饰;
包豪斯简约实用的设计理念可以说是和扁平化有异曲同工之妙。


包豪斯家具


包豪斯建筑


扁平化设计的起源

时间来到1950年代,瑞士发展出了国际印刷风格 ( International Typographic Style or International Style),又称瑞士风格 (Swiss Style),相较于包豪斯主义,瑞士风格继承其特性,不过着重在印刷、字体等平面设计上。


可以看看swissted 这个网站,收集了许多瑞士风格的海报作品

1957年,瑞士设计师 Max Miedinger 与 Eduard Hoffmann 设计出「Helvetica」的无衬线字体,Helvetica 在拉丁文中有着「瑞士」之意。

可以说是瑞士风格的代表作品,追随着现代主义观点,认为应该让读者在阅读时能专注于文字所表达的内容,而不会关注文字本身所使用的字体,至今为全世界商标设计运用最为广泛的一款字体。


有许多知名企业的logo字体正是使用了Helvetica


额外补充:Arial 为1982 年 Monotype 公司出品的字体,因搭配微软作业系统而迅速普及,不过一般人很容易将两者混淆。

如果说包豪斯的设计理念影响了扁平化,那瑞士风格可以说是孕育扁平化的摇篮,人们普遍认为瑞士风格对扁平化设计理念的影响是最为深远的。

俗话说十年风水轮流转,瑞士风格在普及一段时间后就开始衰退了,没有什么潮流是一成不变的,1970年代后出现一种反对现代主义的「后现代风格 (Postmodernism) 」,带有叛逆风格地对字体和排版进行切割、重构,呈现充满活力的样貌。

后现代风格家具,是不是和包豪斯风格差很多呢?


后现代风格建筑,十分醒目,很难让人不多看一眼

所以说,扁平化设计的「前辈」被打的嫑嫑的,时至今日,他又是怎么忽然起死回生呢?


扁平化设计的过渡期

UI 设计界过去几年持续争论的一个大议题– 那就是使用者界面究竟该「拟物化(skeuomorphism)」还是「扁平化 (flat design)」?

回顾电脑时代的时候,Windows 界面设计采用拟物化,比如说资源回收桶是模拟真实世界型态的样貌3D立体化,文件与电脑图示也都有着阴影与细节。

好吧!你可能觉得很丑不好看,那我们换成软体美学设计翘楚Apple的Mac OS X

底下有着玻璃式的图像倒映,所有图示依然做的栩栩如生,不论是时钟、指南针、放大镜或齿轮。

不过如果你有注意的话,会发现Apple的产品采用包豪斯设计,有着洁白、简约、俐落的线条。

你是不是觉得奇怪,为什么Apple明明很早以前外型就采用包豪斯设计,可是在软体界面上却是用拟物化设计呢?

你还有印象的话,应该记得前六代的iOS系统


我看过一派有趣又富有哲理的论点,认为拟物化设计是人类认知学习的过渡期产物,就像20世纪初的量产汽车外观也十分类似原本人们旧有习惯的马车。

在人们尚未学习到新知识的时期,考量到原本使用者的习惯,用他们熟悉的事物来接触新知,降低学习曲线与使用者门槛,20世纪末人们学习使用电脑时便是先接触了拟物化的设计,在2007年开始接触智能手机时,很理所当然的会把过去的习惯带入,就像以前操作电脑一般,而事实上,所谓的「智能手机」本来就是一部小型掌上型电脑。

而过一段时候后,使用者习惯新事物的习惯后,就可以朝真正合适的方向发展,就像后来的汽车即使不在设计的像马车外观,人们也能够接受。

另一派则认为纯粹是该时代发明人对科技的水平与想像就是如此,而且也被过去的思维与习惯所限制住,然后在不断渐进的过程中慢慢改变原本的设计;在2007年的时候根本还没出现扁平化设计这个名词。

这两派论点并没有答案,但是Apple 同时运用拟物化与包豪斯设计为自己写下科技业的传奇一章。


本文载自mydesy,仅供交流学习

转载请注明出处


「Gray Design」致力于品牌形象 ∕ APP ∕ 字体设计


网站建设公司首选华仕尊城设计http://www.w-vi.com

浅谈扁平化设计的优缺点与发展趋势(上)-网站建设

2017-09-14 22:09:00

您现在的位置:首页网站建设浅谈扁平化设计的优缺点与发展趋势(上)

不论你从事平面设计、网页设计、UI/UX设计、前端设计…只要你是设计师,你不可不知从2013年后火速窜起改变整个资讯产业使用者界面的「扁平化设计 (Flat Design) 」 ,是如何撼动整个世界,甚至是改变你的工作型态与产业!

你有没有发现,2013年后许多网页、APP、甚至系统界面,都开始改用色彩缤纷、简约的风格,就像把所有物件通通压扁在画面上,这就是红极一时的扁平化设计 (flat design),新一代界面设计的趋势。

不单单只是资讯产业,连许多知名厂商的LOGO 也开始改头换面采用扁平化的潮流,像是Netflix、ebay、Spotify、Twitter、Audi、Citroën…等

然而也有人认为这样的改变变得没特色,比如说Instagram 的logo 就变得十分不显眼。

在资讯的推波助澜下,你有发现许多行业的设计趋势与消费者习惯的转变,潜移默化地受到科技化(Informatization)的影响吗?


什么是扁平化设计?

那么,解释一下到底这个很夯的扁平化设计是什么呀?
其实从上面一些案例你应该有隐约感觉到一些共通之处,扁平化设计就是,去除阴影 (shadow)、渐层 (gradients)、装饰 (decoration )、反射光泽 (shiny)等3D要素,通常使用高亮度的色彩 (bright color) 搭配无衬线字体呈现出简约现代风格。

噢!所以你是说扁平化设计是2013年后才有的东西吗?
哦不!当然不是了,先让我们把时间拉回100年前…


扁平化设计的开端

19世纪英国女王维多利亚在位统治时期称为维多利亚时代,那个时期的建筑风格就称为维多利亚风格 (Victorian Style),是个日不落国、英国钱淹脚目的黄金年代,外观华丽而细致,就算到了今天你还是能看到许多保存完整的建筑物。

嗯,就是那种你出国绝对会和它拍照的美丽建筑。

知名建筑像是英国国会大厦


然而好景不常,1920经过一次世界大战的洗涤后,人们对维多利亚风格感到厌倦,与每下愈况的生活简直形同对比,让人感到华而不实。

于是德国建筑师Walter Gropius 在1919 年成立了国立包豪斯学校,不过在1933年被纳粹压迫而关闭,因为Gropius在学校宣传共产主义思想。

谁也没想到,这个短短成立不到15年的学校竟然深深影响了往后世界的艺术、工业设计、平面设计、室内设计、现代戏剧、甚至是现代美术等领域上!

仔细看看包豪斯学派(又称包豪斯主义,The Bauhaus Style)的主张:
Form Follows Function: 设计的构成必须反映出功能,效用放第一位;
Truth to Materials: 尽量呈现该素材的特性;
The Less is More: 简约、功能性的美学,去除无谓的装饰;
包豪斯简约实用的设计理念可以说是和扁平化有异曲同工之妙。


包豪斯家具


包豪斯建筑


扁平化设计的起源

时间来到1950年代,瑞士发展出了国际印刷风格 ( International Typographic Style or International Style),又称瑞士风格 (Swiss Style),相较于包豪斯主义,瑞士风格继承其特性,不过着重在印刷、字体等平面设计上。


可以看看swissted 这个网站,收集了许多瑞士风格的海报作品

1957年,瑞士设计师 Max Miedinger 与 Eduard Hoffmann 设计出「Helvetica」的无衬线字体,Helvetica 在拉丁文中有着「瑞士」之意。

可以说是瑞士风格的代表作品,追随着现代主义观点,认为应该让读者在阅读时能专注于文字所表达的内容,而不会关注文字本身所使用的字体,至今为全世界商标设计运用最为广泛的一款字体。


有许多知名企业的logo字体正是使用了Helvetica


额外补充:Arial 为1982 年 Monotype 公司出品的字体,因搭配微软作业系统而迅速普及,不过一般人很容易将两者混淆。

如果说包豪斯的设计理念影响了扁平化,那瑞士风格可以说是孕育扁平化的摇篮,人们普遍认为瑞士风格对扁平化设计理念的影响是最为深远的。

俗话说十年风水轮流转,瑞士风格在普及一段时间后就开始衰退了,没有什么潮流是一成不变的,1970年代后出现一种反对现代主义的「后现代风格 (Postmodernism) 」,带有叛逆风格地对字体和排版进行切割、重构,呈现充满活力的样貌。

后现代风格家具,是不是和包豪斯风格差很多呢?


后现代风格建筑,十分醒目,很难让人不多看一眼

所以说,扁平化设计的「前辈」被打的嫑嫑的,时至今日,他又是怎么忽然起死回生呢?


扁平化设计的过渡期

UI 设计界过去几年持续争论的一个大议题– 那就是使用者界面究竟该「拟物化(skeuomorphism)」还是「扁平化 (flat design)」?

回顾电脑时代的时候,Windows 界面设计采用拟物化,比如说资源回收桶是模拟真实世界型态的样貌3D立体化,文件与电脑图示也都有着阴影与细节。

好吧!你可能觉得很丑不好看,那我们换成软体美学设计翘楚Apple的Mac OS X

底下有着玻璃式的图像倒映,所有图示依然做的栩栩如生,不论是时钟、指南针、放大镜或齿轮。

不过如果你有注意的话,会发现Apple的产品采用包豪斯设计,有着洁白、简约、俐落的线条。

你是不是觉得奇怪,为什么Apple明明很早以前外型就采用包豪斯设计,可是在软体界面上却是用拟物化设计呢?

你还有印象的话,应该记得前六代的iOS系统


我看过一派有趣又富有哲理的论点,认为拟物化设计是人类认知学习的过渡期产物,就像20世纪初的量产汽车外观也十分类似原本人们旧有习惯的马车。

在人们尚未学习到新知识的时期,考量到原本使用者的习惯,用他们熟悉的事物来接触新知,降低学习曲线与使用者门槛,20世纪末人们学习使用电脑时便是先接触了拟物化的设计,在2007年开始接触智能手机时,很理所当然的会把过去的习惯带入,就像以前操作电脑一般,而事实上,所谓的「智能手机」本来就是一部小型掌上型电脑。

而过一段时候后,使用者习惯新事物的习惯后,就可以朝真正合适的方向发展,就像后来的汽车即使不在设计的像马车外观,人们也能够接受。

另一派则认为纯粹是该时代发明人对科技的水平与想像就是如此,而且也被过去的思维与习惯所限制住,然后在不断渐进的过程中慢慢改变原本的设计;在2007年的时候根本还没出现扁平化设计这个名词。

这两派论点并没有答案,但是Apple 同时运用拟物化与包豪斯设计为自己写下科技业的传奇一章。


本文载自mydesy,仅供交流学习

转载请注明出处


「Gray Design」致力于品牌形象 ∕ APP ∕ 字体设计


网站建设公司首选华仕尊城设计http://www.w-vi.com

深圳网站建设首选华仕尊城  http://www.w-vi.com

W design values every chance to work with you.