扁平VS拟物——写在Chinamorphism诞生之前

题外话:“Chinamorphism[中式化(暂译)])”是一个全新的概念,这个理念的中心思想是:在抽象主义和写实主义之间找到一种平衡,打破扁平化和拟物化的界限,通过加入一些符合东方思想、行为习惯和审美观的东方元素,从而定义一种属于东方人的设计语言,让别人尤其是西方国家的人一看就能发出“嘿!这是东方人设计的!”甚至“嘿!这是中国人设计的!”这样的赞叹。而号召更多设计师和设计从业者在创作的时候加入东方的、中式的元素,使用并推广“Chinamorphism”这门设计语言,就是我们“九荒中设”创立之初最远大的目标。

在讨论“Chinamorphism”之前需要明确一点,我们虽不排除将来在其他领域应用“Chinamorphism”的情况,但在这里我们将要讨论的是在个人电脑、移动设备、可穿戴设备、互联网以及其他电子数码产品上使用的一门用户界面(UI)设计语言和相关的交互体验(UX),当然,我们也非常乐意见到在各行各业“Chinamorphism”都能发挥它的作用,创造出优秀的、人性化的产品。

这里需要大家先理解三个概念:抽象的(abstractive)设计具象的(concrete)设计写实的(realistic)设计,加上我们将要说的“Chinamorphism”,文章将因此分为以下四个部分:

壹·抽象的(Abstractive)设计

首先看一下维基百科里关于抽象化的定义:

抽象化(Abstraction)是指以缩减一个概念或是一个现象的资讯含量来将其广义化(Generalization)的过程,主要是为了只
保存和一特定目的有关的资讯。例如,将一个皮制的足球抽象化成一个球,只保留一般球的属性和行为等资讯。相似地,亦可以将快
乐抽象化成一种情绪,以减少其在情绪中所含的资讯量。

通俗来讲,就是一个抽取共性-抛弃个性的过程。请注意,这里的“抽象”是动词(abstract)或者名词(abstracion),而我们要讨论的是形容词“抽象的(abstractive)”这个含义。

那么,什么才是抽象的呢?

扁平化设计(flat design)就是抽象的设计

很多朋友可能会想:“这很简单嘛,扁平化是抽象的,拟物化是非抽象的!”

其实这么说并不完全,打个比方,以下两种计算器,你能分辨出哪个属于拟物化设计的范畴吗?

图1

实际上,两种都属于拟物化设计的范畴,你猜对了吗?

2014年11月,谷歌发布Android 5.0(Lollipop),并且推出了一种全新的设计语言Material Design(材质化),至此,全球IT三巨头:苹果、谷歌、微软都加入了“扁平”的大军,标志着设计“扁平”时代的到来。

然而“扁平”大潮这汹涌的势头却导致了一些滥用这门设计语言的现象,好比一个产品,从图标到按钮,从背景到动效,只要“突起来”一点就落入俗套,变得过时(out)。

诚然,优秀的“扁平”设计已经不可避免地代表了当今社绝大部分人的审美观(尤其是年轻人),但并不是每一款产品或应用都是“优秀的”。

让我们先从微软的Metro风格说起,Metro风格被大众所广泛认知,应该是在Windows 8系统上,实际上最早的Metro风格实例应该追溯到微软百科全书95,这之后包括Zune播放器、Xbox360、Windows phone 7,以及现在的Windows 8、Windows 8.1、Office 15等产品上,都可以看到Metro风格的影子。

Metro风格是由微软公司开发的,内部名称为“typography-based design language”(基于排版的设计语言),后来因为版权问题(德国有一家著名的连锁超市品牌恰好也叫Metro[麦德龙])而更名为“Modern UI”。

不过我们从它内部名称可以看出来,这门语言并不是单纯的将一个个纯色的小方块整齐排列这么简单,Metro界面强调的是信息本身,而不是冗余的界面元素,显示下一个界面的部分元素的功能上的作用主要是提示用户“这儿有更多信息”。

但Metro风格并不是“扁平”设计的始祖,Swiss Design(瑞士设计)才是,Swiss Design是一门基于排版的设计语言(是不是跟Metro风格的内部名称很像?),有时也叫做栅格设计国际主义设计,这牵扯到一些艺术设计的历史渊源了,有兴趣的朋友可以自行补充。

那么,接下来要说说苹果这朵奇葩和它的扁平化设计(Flat Design)了。为什么这么说呢?其实早在上世纪80年代,苹果的产品就呈现出一种极致的简约化风格:

图2

但要想想那可是上世纪80年代啊!正是工业革命和装饰主义大行其道的年代,社会跟艺术界普遍的审美观应该是华丽的、现实主义的装饰艺术啊!只能说乔布斯和他的设计团队迈出的尝试性的一步极其幸运地取得了不可估量的成功,虽然妥协于大众审美,在GUI的设计风格上依然使用非扁平的拟物化设计(Skeuomorphic Design),但你瞧,在微软的Metro风格大获好评之后,傲娇的苹果炒掉了Scott Forstall(软件设计师,苹果的拟物化设计风格主要设计者),换上了饱受争议的Jonathan Ive(工业设计师,苹果的扁平化设计风格主要设计者),这其中还有许多曲折离奇的故事,有兴趣的同学自行补充,总之可以这么说,如果说微软的Metro风格让世界知道了“扁平”设计,那么苹果的Flat Design就是让“扁平”设计真正成为世界通用的主流。

再后来的事想必大家都知道了——傲娇中的傲娇谷歌也发布了自己的“扁平”设计的语言Material Design。

现在我们来总结一下,Metro Design、Flat Design、Material Design这三种规范就是当今世界最流行的“扁平”设计语言,这三种规范其实有一个共性,那就是取消了诸如透视、纹理、渐变等能表现物件三维效果的装饰,所有的元素的边界都干净利落,没有任何羽化,渐变,更少的按钮和选项使得界面干净整齐,使用起来格外简洁,可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

实际上这就是“扁平”设计概念,而这种“扁平”设计的概念的学名就叫“扁平化设计(Flat Design)”,没错,这个名字和概念是由谷歌(对!警察叔叔就是他!)在2008年提出的,至于后来苹果的“扁平化设计(flat design)”其实只是”准扁平化“的,你仍可以看到带阴影的圆角按钮、渐变的背景等非扁平的元素(当然,ios8将使用一种全新的完全扁平的设计语言)。

那么我们在前头所说的:

扁平化设计(flat design)就是抽象的设计

这句话,你能理解了吗?

完全“扁平”的设计里的物件,就是一些经过高度抽象的现实中的三维实体的二维属性的表现,还记得维基百科那个例子吗?皮球经过抽象后就是一个圆,同样的道理,在完全“扁平”的设计里,现实中圆柱体(或类圆柱体)按钮经过抽象后,去除光影、透视等效果,就变成了一个圆。

这就是“抽象的(Abstractive)设计”的概念。

贰·具象的(Concrete)设计

在艺术界有两种重要的绘画表现形式,一种是抽象艺术(Abstractive Art),还有一种就是与其对应的具象艺术(Concrete Art)。同样的,在设计界与抽象的扁平化设计对应的,就是具象的拟物化设计(Skeuomorphic Design)。

区别于“写实的(Realistic)设计”,“具象的设计”是一种介乎抽象和写实之间的艺术风格,网络上并没有关于“具象的设计”的相关定义,让我们想一种办法来概括它。

首先看一下这个单词:Synesthesia,词典中的解释为:

Synesthesia 
  n. 
  共感觉, 副感觉 ,联觉
  【心理】联感(如某种颜色引起某种嗅感) 
  【生理】伴生感觉, 反射性反应 
  1. A condition in which one type of stimulation evokes the sensation of another, as when the 
hearing of a sound produces the visualization of a color.
  (联觉)一种刺激激发起另一种感觉的状态,如听到某种声音便好象看到某种颜色。
  2. A sensation felt in one part of the body as a result of stimulus applied to another, as in 
referred pain.
  (移觉)因对身体的某一部位的刺激而使身体的另一部位感到此种感觉,如在谈到痛苦时。
  3. The description of one kind of sense impression by using words that normally describe 
another.
  (通感)用通常描述另一种感觉的话来描述一种感官印象。

可以看到,在生理学(联觉)、心理学(移觉)、语言学(通感)中Synesthesia分别代表了不同的含义。联觉是人脑天生的一项特殊功能,它主要发生在生理层,主要是生理学或脑科学研究的对象;移觉主要是指人的实时心理出现的跨感官刺激——反应现象,它是人类后天社会心理的感觉自发行为,主要发生在心理层,属于心理学研究的领域;通感是人类言语行为的自觉建构,它主要发生在语言层。

我们暂时抛开用户的心智模型和生理上的巴甫洛夫效应,看看维基百科上关于通感(修辞手法)是如何定义的:

...将抽象或无生命的事物以具体事例代替...
...通感也可以被看作是一种隐喻...

如此,我们不妨假设Synesthesia在设计学上的解释为:用某一含有隐喻性或者能启发用户联想的虚拟物件,代替被喻的或者被联想的具体物件

几乎就是具象的设计的全部概念了。

为什么要说几乎呢?

因为这个概念仅仅规范了“形式(视觉)”上的具象,还不足以运用在实际的设计中,要形成一门完整的设计语言,还需要关注其在“内容(交互)”上的应用。

那么,什么才是具象的呢?

拟物化设计(skeuomorphic design)就是具象的设计

推荐先看看拟物设计在工业中的运用,这类产品最大的特点就是“仿形”——模拟物体的外形,从而营造一种貌似在使用该物体的感觉。但我们讨论的不是工业设计(尽管交互设计的前身就是工业设计),而是用户界面和交互体验设计,不过“仿形”这个词很nice!

我们看一下这个单词:Skeuomorph(s),19世纪英国考古学家H.Colley March在《装饰的意义》一文中创造了这个单词,有很多人将其译为“拟物化”,维基把它译为“仿制品”,这两种译法都不好。假如zoomorphs译为“动物形”,plyllomorphs译为“植物形”,skeuomorphs则应译为“器物形”比较恰当,不但贴近词的原意和与其它二个词关联,而且用“形”字能够指出是什么——形式,更具象,避免理解上的歧义。

需要注意的是,skeuomorphic是形容词,skeuomorphism是名词“器物主义”,当然,习惯上大家都把“拟物化设计”作为skeuomorphism的翻译了,实际上应该是skeuomorphic design才对,另外,苹果公司从来没有为其使用的设计语言命名过,ios7以前的界面使用的是“拟物化设计(skeuomorphic design)”,ios7及之后的版本使用的是“扁平化设计(flat design)”,所以这两个概念都不是苹果提出的。

但我们还是要拿苹果公司作例子。

如上所言,虽然在工业设计上仍以追求简约为主,但是在用户界面上乔奇葩一直奉行skeuomorphsim(器物主义),第一个采用了拟物化设计的苹果软件应该是最初的Mac桌面操作系统中的文件夹、磁盘和废纸篓的图标,而且最初的Mac OS上还有一个计算器的应用程序,这个程序看上去和真实的计算器也十分相似,这个计算器应用是由乔布斯自己设计的:

图3

之后重回苹果的乔奇葩带着对视觉隐喻设计独有的执着继续他的拟物化道路,包括Quick Time 4、Game Center、Notes、iBook等一系列充满现实物品质感纹理的应用让苹果公司名噪一时。在乔奇葩的带领下,苹果完成了从濒临破产到全球第一的大逆转!

图4

然而,随着乔奇葩的离世,以及包括Scott Forstall辞职在内的高层人员动荡,再到后来苹果启用Jonathan Ive重新设计了全新的、扁平化的界面,最终宣示着“拟物时代”的没落甚至消逝(注:游戏的界面比较特殊,拟物化依然更受欢迎,但不可否认一些精品级的扁平化风格的游戏也取得了不错的反响)。

总之,苹果历经“拟物时代”的荣辱兴衰,是拟物化设计的典范。

图5

我们来总结一下“拟物化设计(skeuomorphic design)”的概念:拟物化设计是指原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,通过模拟真实物体的材质、质感、细节、光亮等细节,以使新的外观让人感觉熟悉和亲切。

通俗来讲,不仅要让人看起来像是真的(视觉),而且要让人用起来也像是真的(交互)

图6

那么现在,你明白为什么右边这个计算器也属于拟物化的范畴了吗?(因为它仍然模仿了现实中计算器的许多细节,比如相似的键盘布局)

这就是“具象的(Concrete)设计”的概念。

叁·写实的(Realistic)设计

很多人(包括一些学艺术的)可能分不清“具象绘画”和“写实绘画”的区别,其实很简单,具象要求画面中的事物是可以被认出来的,但不要求一定与现实中的一模一样。写实则比具象更进一步,不但要能够被认出来,还最好能与现实中的事物相差无几。

那么怎么在用户界面和交互体验设计这块区分“具象的”设计和“写实的”设计呢?

首先我们都知道,计算机界面目前有三个阶段:字符界面(CUI)、图形界面(GUI)、自然界面(NUI),这三个界面分别对应了三种操作环境:键盘、鼠标、触摸/动作。以 DOS 为代表的字符界面现在已经淘汰,只剩下以Mac、Win为代表的图形界面和以ios、android为代表的自然界面。现阶段正是图形界面向自然界面过渡时期,可触摸屏幕和体感设备的进步让我们感受到了科技发展的力量。如今人类在人工智能、可穿戴设备、增强现实技术、裸眼3D技术等方面取得的成就更是让人惊喜,我们不禁可以大胆设想:那些科幻小说、影视作品中出现的高科技技术和产品将来有一天也会实现呢?

那么我们不妨假设有第四种可视界面“虚拟界面(Virtual UI,VUI)”,就像信息交流-交换方式所经历的“眼神-动作-声音-语言-文字-图片-视讯-全息投影”(注:全息投影是假想中的下一代信息交流-交换方式)那样,未来的“虚拟界面”利用裸眼3D技术、增强现实技术或更多我们所不知道的更先进的技术,将更真实、更拟真的操作界面呈现在我们眼前,不,那已经不再是界“面”了,那是界“体”!

对着可调节透射率的窗户挥动手臂,就像轻轻拉开“窗帘”,感受着傍晚的余晖温柔地从头顶流淌到脚下

一阵荧光闪烁,被唤醒的智能中控将iTunes播放列表以一种前所未有的清晰形式投影在身前

轻挥手指,仿佛置身音像店里翻找唱片的旧时光

抽出Tobu的Sunburst单曲“唱片”,放入“播放机”

四周曼妙的音乐奏响

如何?感受到“虚拟界面”独特的魅力了吗?

不管是扁平化还是拟物化,界面中的元素都以一种更真实、更可靠的可视化效果呈现,仿佛身临其境,仿佛就是现实。

难以用语言描述这样一种属于未来的科幻的设计概念,但这却不会阻碍我们想象的脚步,积极反对Murphy定律的小米科技如是说:“永远相信美好的事情即将发生!”

这就是“写实的(Realistic)设计”的概念。

肆·Chinamorphism

终于来到我们的主题了,“Chinamorphism”是一个全新的概念,在此不得不再引用题头说的那段话来表达我们的美好愿望:

在抽象主义和写实主义之间找到一种平衡,打破扁平化和拟物化的界限,通过加入一些符合东方思想、行为习惯和审美观的东方元
素,从而定义一种属于东方人的设计语言,让别人尤其是西方国家的人一看就能发出“嘿!这是东方人设计的!”甚至“嘿!这是中国
人设计的!”这样的赞叹。

中国是一个拥有5000年悠久历史的文明古国,这上下50个世纪的积累和沉淀下来,有无数优良传统美德和文化瑰宝,伟大的中华民族文化博大精深,许多祖宗传下来的东西理应由我们来继承和发扬。

20世纪末,在建筑设计和室内设计领域刮起了一股中国风,那就是以宫廷建筑为代表的中国古典建筑的室内装饰设计艺术风格——中式风格(Chinese Style)。气势恢宏、壮丽华贵、高空间、大进深、雕梁画柱、金碧辉煌,造型讲究对称,色彩讲究对比,装饰材料以木材为主,图案多龙、凤、龟、狮等,精雕细琢、瑰丽奇巧。

而后,在中国文化风靡全球的现今时代,中式元素与现代材质的巧妙糅合,以明清时代为代表的中式家具与金属窗棂、西式布艺床品的相互辉映,形成了一种全新的设计风格——新中式风格。

仔细区别这两种风格对理解Chinamorphsim的概念很有帮助:“中式风格”的装修造价较高,缺乏现代气息,只能在家居中点缀使用;“新中式风格”是中国传统风格文化意义在当前时代背景下的演绎,是对中国当代文化充分理解基础上的当代设计。

Chinamorphism就是“新中式风格”在UI和UX上的体现

以下有广告嫌疑,但绝非广告,介意者慎阅

我们来看一款最近十分流行的免费移动应用:「榫卯」

图7

这款由@泰格忧思设计的APP通过精美的3D动画和手绘的方式展示了包括榫卯的结构和相关知识,内容质量很不错,而更重要的是,斋主认为「榫卯」这款应用的界面设计和交互体验相当吻合“Chinamorphism”的设计理念,类似的应用还有很多,比如文化类的「胤禛美人图」「紫禁城祥瑞」「中国古典家具」,游戏类的「秋战」「岁乐纪」,工具类的「字拍 - 国风」「词Ci」等等,关于Chinamorphism的具体应用分析我们另外撰文介绍,感兴趣的同学可以先去试一试体验一下。

有人可能会觉得,以上这些应用都只是在画风上或者物件外观上使用了中国风的元素(木制品、国画、书法、水墨、汉字)罢了,这样就是Chinamorphism了吗?

说对了一部分,首先,使用中国风的元素、物体外形、画风、纹理等等视觉效果确实是Chinamorphism的理念之一,而类似于“从右到左、从上到下的竖排文字排版顺序”、“民族乐曲”、“画卷滚动操作”、“点墨晕染动画”等等属于交互部分的内容,其实也是Chinamorphism所推崇的。

然而,Chinamorphism并不是封闭的设计语言,并非从UI到UX完全“中式化”而且仅仅使用中国传统风格设计就是所谓Chinamorphsim,兼收并蓄,汲取时代流行设计的营养,打造富有中国特色的现代化设计风格,以符合当代国人的审美观为目的,才是Chinamorphism的核心所在。时代是进步的,物竞天择、适者生存,愚昧地守旧终将重蹈历史的旧辙。

改革开放以来,随着中西方文化的不断交流和深入影响,我们的国家不断接纳来自世界的先进概念和技术,国人的审美观较以前发生了很大的变化。

2004年前后,Web 2.0——“用户主导内容生成”时代到来之前,中国的互联网内还充斥着大量花里胡哨的Flash动画、繁杂的信息以及堆积紧凑的可点击内容,连界面设计的一套标准都没有,更别提什么用户体验、易用性、可寻性了。

而如今,10年过去了,Web 3.0的大潮即将袭来,日新月异的互联网络不断催生新的名词:SNS、LBS、SOLOMO、O2O、AR、NFC...伴随着移动互联网的不断更新,我们对视觉和交互的要求也不断提高,用户体验设计(User Experience Design)也越来越受到各大企业、团队和个人的关注,同时引入了许多全新的行业:用户体验设计、交互设计、用户界面设计、视觉设计、信息架构、内容优化、数据分析、产品设计...

但是在行业规范方面,数年来我们一直沿袭着国外的标准,借鉴甚至抄袭着国外的设计模式,当然,并非说这些经验不可取,而是我们觉得,东西方文化差异虽日益趋少,但仍旧有不少传统观念深植于国人的内心,另外,属于我们中国的传统文化理应由我们这些年轻的一辈来继承和发扬,我们应该有一套自己的设计规范标准和设计风格语言,于是我们勇敢想象着并且正为之努力着:

打造赋有东方神韵的界面设计风格,
提供具有中国特色的现代化视觉设计方案,
打破扁平与拟物的界限,
创造高度中式化的视觉设计语言,
以吾之眼,
洞悉未来。

这就是“Chinamorphism”的前瞻概念,更多详细介绍和定义,敬请期待下篇。

感谢阅读!


参考阅读:
Flat Design 与Skeuomorphism之间的战争——平面像素
乔布斯与拟物化设计之间不为人知的故事
拟物化设计与扁平化设计
拟物化设计要从Game Center说起:苹果设计的口述历史 (5)
如何理解和翻译苹果「Skeuomorph」的设计理念?
豆瓣分享-Skeuomorph
维基词条-汉字字体风格
百度词条-中式风格
殷双喜:写实与具象的区别
自然用户界面自然在哪儿
类似「榫卯」的中国风 App 还有哪些?这种设计风格能否成为一种设计趋势
从模仿到创新:Web 设计中的中国风

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容