氯化设计界面设计中的扁平化设计与拟物化设计之探议

氯化设计界面设计中的扁平化设计与拟物化设计之探议

2013年，“扁平设计”一词在互动设计行业可以提到最多的热词。事实上早在2006年,当微软推出的一款mp3播放器zune的界面时,扁平化的设计风格已初见端倪,但由于产品本身的推广不力,尚未形成热潮。2012年,当微软公司揭开windows8的神秘面纱那一刻,其鲜明简洁的扁平化风格界面再次引起业界及用户的热议。一度推崇拟物化风格多年的苹果公司,在公司高层动荡过后,新任副总裁JohnthanIve曾表示过厌恶拟物化风格,2013年9月全新推出的ios7也正是以其全新的扁平化展示于大众,全面转化了多年来苹果公司所塑造的视觉形象。谈及扁平化设计,与之伴随的另一词汇“拟物化设计”因为与之大相径庭的设计原则与表现风格,常常被同时提及并与之比较。曾几何时,拟物化设计风格引领界面设计潮流多年,可谓风声水起,千万设计师疯狂追寻乐此不疲。而如今又为何遭受扁平化设计的冲击,甚至面临被颠覆的状况呢?一、规划地板设计(一)拟物化设计的起源所谓拟物化(Skeuomorphism),原本是希腊词汇,在wikipedia里是这样解释的:“拟物化是指对象保留了旧时特质的装饰性元素,这些元素对于当前对象的功用已不再必要。”拟物化曾一度在材料应用领域广泛使用,比如人造革,仿木纹的塑料地胶,都属于拟物化。在数字界面领域里,拟物化设计起源于图形界面(GUI)的视觉隐喻(VisualMetaphor)。往往指界面设计模仿现实物质世界中的事物,以使其外观让人感觉熟悉和亲切。比如桌面、文件、文件夹、回收站这样的概念都是基于桌面系统的隐喻。继1984年苹果公司的Macintosh推出后,这种隐喻也广泛应用于windows、MacOSX、Linux等桌面操作系统以及移动装置,并逐渐被大众所熟悉。可以说,是拟物化设计用直观易理解的物象将数字世界抽象的概念表现出来,大大加快了普通大众接受数字信息的步伐。对于那些对数字世界不甚了解的人群,拟物化设计帮助他们将虚拟世界用户不熟悉的内容与现实世界用户所熟悉的物象产生联系,使其更易理解。苹果公司的ios系统的人机界面指南里曾经说到,“当你应用中的可视化对象和操作按照现实世界中的对象与操作模仿,用户就能快速领会如何使用它。”为了让用户觉得真实亲切,拟物化设计注重视觉元素的精细、层次、用光等,以期创造出逼真的形象。(二)量不确定与嘴唇出现仿真当拟物化风格逐步在界面设计领域占据主导地位后,似乎逐步陷入一种怪圈。众多设计师投入过多精力到诸如反复修整皮革背景纹理或反复调整投影角度的工作中,反而忽略了交互行为本身。而事实上光影是否真实,质感是否逼真并不能使用户更有效率地完成任务。众多界面拟物化的滥用及过度设计,产生了很多不易用,给用户带来负担的产品。拟物化设计往往试图给予用户共鸣,如果产品的外观展现得越逼真,用户使用时越容易预先产生一种与原来对象特性相同的期待。然而由于产品特性、操作方式和原有参照物存在诸多不同,新产品无法给予用户原本期待的物理反馈。这种逼真感反而会使用户在进行操作时感到受挫或无所适从。以Quicktime4播放器界面的音量调节设计为例(图1)。传统的真实世界的播放器是用旋钮来调整音量的,用大拇指可以很容易地完成操作。可是放置在界面中的旋钮并不能有真实的触感,需要用指针艰难地向上滑动,旋钮暴露的部分很少,可能需要用户多次拖拽放才能完成操作。虽然设计者可能也认识到了这个问题,另外添加了可通过鼠标指针调整音量的功能,用户需要在旋钮附近点击并拖拽。但是这个功能常常不被用户所知,因为没有任何提示显示可以用这种方式操作。显然,从用户体验和人机工学的角度,这个旋钮的设计是失败的。在其Quicktime5版本中这个音量调节的旋钮被去掉了。因此,不论其表面看来多么逼真,质感多么接近现实,只要不能让用户觉得好用就不是个好的设计。(三)参照物的设计拟物化设计常常用一个具体的物象唤起人们对于某种经验的联想,这一具体的物象由于文化的差异性往往不能在所有地域产生同样的效果。随着科技的发展,曾经在一个时间段广泛普及的参照物本身可能已经不再是被频繁使用,甚至已经被历史淘汰,那么原有的设计也不得不相应作出调整。至今仍被广泛使用的储存图标,是一个磁盘的图形,对于很多现在的青少年,他们从未经历过那个需要用3.5寸盘储存1.44M文件的年代,对于他们来说,这个拟物已经失去意义了,他们只是在记住图形本身而已。二、扁平风格(一)智能手机、触屏在数码产品不是那么普及的年代,拥有一台电脑,一部手机或许是一种奢侈品,而不曾拥有的人如有机会把玩也会对于各个按钮或图标试试新鲜,而后再为其逼真细腻的视觉风格感叹一番。而如今随着科技的发展,智能手机、触屏对于大众已不再陌生。在人人都有电脑,人人有手机的时代,数码产品的普及已经使得一切不再新鲜,人们更倾向于数码产品是否可以快速地帮助他们达到目的,是否高效。与之同时,也已经不需要通过拟物化去降低学习成本了,拟物的使命至此已经终结。(二)拟物化风格推至排放犹如20世纪60年代,在建筑设计领域极简主义风格的兴起是源于对当时代过度装饰的颠覆一样,扁平化设计也以其简洁明了的风格一反拟物化强调效果、装饰性的特点,成为了2013年应用设计最显著的趋势。拟物化风格在主宰界面设计多年之后,大众也逐渐对其从最初的震撼吸引变为习以为常,甚至审美疲劳。风格潮流的轮回至此,将扁平化设计风格推到了风口浪尖。扁平化设计的特点:1.扁平化设计特点扁平化设计以二维形态示人,放弃一切装饰效果。和拟物化设计强调的质感光影不同,扁平化设计摒弃一切诸如浮雕、投影、高光等特效,仅以鲜明的色块和突出的文字信息呈现。2.简单的视觉表达3.强调颜色4.了解用户的需求排版不仅仅是关于视觉美学,更是一门信息组织的学问。了解用户的需求,在合适的地方以适当的字体字号呈现,展现清晰的视觉层次,帮助用户更有效的达到预期目的,会有助于提高用户体验。5.扁平化设计特点包豪斯时期米斯凡德罗所提出了“少即是多”的设计原则,扁平化设计可以说是在界面设计中充分地诠释了这一理念,即强调对于一切视觉元素做减法,避免不必要的元素出现在页面中。德国著名产品设计师DieterRams曾经提出关于“什么是好设计”的十条原则,其中一条就是“尽可能简洁的设计——少,但是更好。因为把精力都集中在最精华的部分,设计应回归纯粹,回归简约。”这样的特点也正好反映了交互设计中一贯强调的可用性原则,用户需要什么就给他们什么,过多的不必要元素的放置是在制造视觉噪声,给用户带来负担。通过比较部分苹果ios6和ios7的界面,扁平化设计的风格相对于之前的拟物化显得更加开阔和敞亮,同样的篇幅内容如果加入3d光影效果,容易显得拥挤,信息量受限。后者平面化的效果通过单纯的色彩变化,去除了视觉噪声,反而更突出了操作内容。(图2)(三)角色需要刷的网站好的设计是适合的设计。扁平化设计的视觉风格对于信息量大,层级多的网站来说非常适用,使用户可以快速清晰地找寻所需的信息。但是对于角色扮演类游戏网站,或者电影宣传网站就未必是个好的选择。这种类型的网站,更侧重于营造某种氛围,使用户沉浸其中,所以视觉的震撼是必不可少的部分。另外,一些界面中的细节,浅浅的阴影或轻微的悬浮效果对于信息分层上还是发挥了效果,若恪守绝对扁平化的风格,所有的视觉元素将会被置于同一平面,用户在使用时有可能产生疑虑,到底哪些地方可以点击。看似简单的扁平化设计其实面临的是更大的挑战。三、扁平化的表现形式由于众多强调细节层次的拟物化的涌现,使得很多时候被大众将拟物化完全等同于写实主义,认为拟物化一定是复杂繁琐的,立体的,而扁平化就是拟物化的对立面。事实上,是二维还是三维只是表现形式的差异,并不能从本质涵义上将二者对立。扁平化的表现形式虽然简洁,但从其所包含的涵义来说也未必不能是拟物的。比如在苹果ios7里的camera,clock图标,就是一个典型的扁平化的表现形式,但是其根本实质却还是拟物的。(图3)四、视觉元素要规则化设计,是为了完成任务,解决问题。可用性和用户体验比外观更重要。如何高效地帮助和指导用户完成他们想做的事,是设计的根本。用户看重的是完成任务流程的顺畅程度和完成过程中的感受。信息的组织性和展示方式很大程度决定了最终接收信息的效果。应该确保最重要的信息最先被发现。相对拟物化风格为追求逼真和细节而带来诸多视觉元素之间的复杂关系,扁平化设计风格视觉元素简洁单纯,更容易突出重点。一些界面中的细节,浅浅的阴影或轻微的悬浮效果对于信息分层上还是发挥了效果,若恪守扁平化的风格,所有的视觉元素将会被置于同一平面,用户在使用时有可能产生疑虑,到底哪些地方可以点击。解决这样的问题可以通过大小、空间、距离、色彩的对比让需要被最先关注的对象更突出。看似简单的扁平化设计其实面临的是更大的挑战。拟物化设计的必要性在设计的历史长河里,潮流终有轮回,一种风格盛行到一定程度容易使大众产生审美疲劳,在此背景下另一种与之迥异的风格凸显出来是