comment 0

what do we want people to feel (2)

现在再讨论拟物化,显得有些过气了。

说到拟物,总会有人拿它和扁平化做对比。这其实是可笑的事情。

因为,对于界面设计来讲,界面从来都是拟物化的(Skeuomorph)。而扁平化设计则是另外一个东西:Flat design。把他们两个拿到一起对比,就好比在讨论雷锋和雷峰塔谁是主流,那不扯淡么。

先从界面的发展说起吧。计算机用户界面经历了几个时代:计算机诞生之初的批处理时代、命令行用户界面、图形用户界面、自然用户界面。

在批处理时代,用户必须适应计算机,用户界面被认为是开销,软件设计就是用来尽可能减少这种开销的。这是因为,计算机的计算能力,在当时是十分昂贵和稀缺的资源。这个时期的用户界面,信息输入是通过穿孔卡片,输出多是使用打印机。而穿孔卡片的制作是比较花时间的,换句话说,输入输出并不是实时的,快的话几个小时,慢的话需要几天。好在穿孔卡片可以复用。

随着视频显示终端的出现,计算机用户界面开始进入的命令行界面时代,在1969年之后,UNIX的命令行界面一直影响到今天。命令行界面,输入输出的延时比批处理时代小了很多,这时候,它开始允许用户实时改变想法,软件也就可以探索以前不可能的交互方式。

但是命令行界面要求用户记忆大量命令,需要花费大量的时间成本去掌握。

在视频终端出现的时候,就有一个很大的问题:缺乏一个很好的输入设备来适配他的图形显示能力。在早期,人们做了很多的尝试,光笔、图形版、操纵杆等,都不能令人满意,主要是因为,这些设备很难在像素级的单位上做颜色的图形操作。后来,Douglas Engelbart发明了鼠标,这使得直接操作屏幕变得可行。

1973年,alto电脑在施乐诞生,它配有一个5键键盘和一个3键鼠标,并第一次推出了图形用户界面。

在1981年,施乐推出了施乐之星。它搭载了一个1027*768分辨率的显示器,并配有现代雏形概念的用户图形界面,开始有图标、文件夹、窗口、对话框、双击操作。当然,alto是没有零售的,它被捐给了各个研究机构。同时,在这一年,IBM这个以前做商用制表机、打孔机的巨头开始第一次推出个人电脑。IBM进入PC市场,这件事情大大推动了计算机的发展。

1983年,Apple lisa诞生,并且开始有下拉菜单、垃圾桶。Lisa的发布会,乔布斯还专门邀请了盖茨,这让盖茨看到了新的机会。盖茨那时一边空手套白狼向IBM贩卖DOS,一边给Apple开发office。

1985年,Microsoft推出Windows 1.0,它像一个学生作品,有着极其简单的图形界面(看看下面的图片,有没有office2013的感觉?)。

1987年,Apple推出macintosh Ⅱ,开始支持256色彩显示,桌面icon支持彩色,同年,Microsoft退出windows 2.0,支持窗口重叠、对话框。

1988年,Next电脑问世,它是面向商用市场和高等教育机构的图形工作站,支持3D效果控件,窗口形态日趋完善。乔布斯那时被赶出了Apple,创办了NeXT,后来Apple收购了NeXT,NeXT的技术被重新带回到了MaC上,不过这几年的折腾给MS带来了巨大的发展机会。

1990年,Windows 3.0发布,图形界面已经开始像模像样了,诸多应用程序开始有了windows 95的雏形。

1995年,Windows 95发布,在Windows 95里,文件和文件夹以icon的形式放在桌面上,驱动器放在一个叫“我的电脑”的文件夹里,提供邮件菜单对文件的处理,通过“新建”来创建一个文件模板,这些都是第一次出现在Windows 95里,Windows 95对微软来讲是一个划时代的产品,它也取得了商业上的巨大成功。如同iPhone 4对Apple的意义一般.
随后的历史大家都很清楚了。

界面发展简明史
界面发展简明史

界面为什么会这么发展?

批处理时代,人们需要实时相应,需要及时修改程序,于是就出现了命令行;

接着,人们需要减少记忆、需要直接操作、需要所见即所得,随后出现了图形用户界面;

但是,人们希望更加易学、更加效率、更加直接,于是出现了当前的自然用户界面雏形:触摸操作、语音识别、手势操作等更加符合人自然操作的交互方式。

正如普罗泰戈拉所说,人是世间万物的尺度

同样,人也是界面的尺度。计算机用户界面一路发展过来,一直都是以人的需求为驱动,界面变得越来越简单,越来越符合人的认知。

所谓界面,就是连接人和计算机的一个接口(PS:这个接口不单纯是屏幕上显示的界面,各种硬件交互接口,如鼠标、键盘、操控面板都是广义的用户界面)。人是生活在真实世界里的,人对实物的认知也是基于真实世界的经验。而计算机一直是一个数字世界,那个世界是抽象的、数字化的、充满逻辑的。

而界面从诞生之初就开始一直朝着符合人认知的方向发展,也一直在模仿真实世界。

人机界面
人机界面

 

我们回头看看1983年苹果的lisa界面,它就是这样一个模仿真实办公环境的概念:它有桌面、文件、文件夹、垃圾桶。这些都是模仿真实世界的,换个词来讲,也就是拟物化。

所以,当你在模仿真实世界里物体的形态时,就已经是在拟物了。拟物的好处就在于,即便你是第一次看到这个界面,你一眼就能看懂。因为界面呈现了你真实的认知经验,所以容易让你理解。所以,下图的两个icon,实际上都是拟物的。

图片来自腾讯CDC,多研究些问题,少谈些主义
图片来自腾讯CDC,多研究些问题,少谈些主义

这时,你应该已经注意到了,所谓的拟物化,不单单是指在肌理、光影上模仿真实的世界,实际上,它还应该有着更广泛的模拟范畴:形态、速度、质量、软硬、远近、关系等真实世界的物质属性,它们给我们带来的感受,大多数都可以去模仿。

只是,随着硬件限制的不断减少:屏幕细腻程度提升、显示技术进步、计算性能不断进步,这些更广泛的拟物也在得到实现。

当我们不再把注意力放在肌理光影上时,我们就发现,界面开始在其他方向上做尝试,开始关注页面的逻辑关系、转场过渡、元素动效等。

我们对比iOS7和iOS6中的选择器控件,可以看到,他们在静态的视觉表现上差异很大,但是,他们都是拟物的。它们都模仿了滚轮的效果,只是在表现手法上有所区别:

右边通过光影的方式表现了滚轮圆弧的感觉,但上面的文字却是平的;

左边通过透视、运动关系来表现这种圆弧的关系,特别是在做滚动操作时,配合声音、加速减速效果,这种交互过程带来的拨动感觉更加明显。从这种广义的拟物来讲,iOS7比iOS6更加拟物了。

iOS 7 vs iOS 6
iOS 7 vs iOS 6

再举一个例子:

如图1,一根静态的线,我们能获得的信息有:线的长度、宽度、颜色、在界面中的位置、与背景的关系。

但是,当这根线运动起来,比如,像图2那样旋转起来,这时,我们就会得到一个感受:这根线硬的。

类似的,如图3,如果这根线像这样运动,那么,我们会得到的感受是:这根线是软的。

线的感受
线的感受

换句话说,当这根线动起来的时候或者和人有交互时,它不同的运动情况会给我们带来不同的感受,这些感受可以帮助我们去对界面内容有认知。

这时,我们再去看Designed by Apple这段视频时,我们可以感受到,它通过最简单的点、线表达了各种复杂的关系与感受:轻重、远近、虚实、质感等。而这些,也是Apple的设计师一直在思考的事情:what do we want people to feel ?

如果说Google的梦想是整合世界上的一切信息,那么Apple或许是想把整个宇宙重构,然后再给你呈现一个熟习的新鲜世界。

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注