UI的进化在线视频

这一节我们来介绍一下UI的发展历程

那么我们通过回顾界面设计的历史

来加深对界面设计的理解

大家看一下这张图表

这张图表显示了界面设计的一个

简单的一个历程

界面设计是随着计算机的发展

而发展起来的一个行业

那么当计算机刚刚出现的初期阶段

界面设计是处于无人机交互

或者是间接交互的一个历史时期

那么随着键盘鼠标和显示器的发明

我们进入到一个图形用户界面的

这样一个阶段

那么这一个阶段呢

从少数只有专业人员才能使用的

这样的一种情况走出来

走向大众的应用

那么随着技术的不断的发展

我们可以看到

界面设计又出现了很多新的形式

比如说姿态界面眼动界面

语音界面等等

那么这种界面的形式会越来越丰富

也越来越自然化

那么我们先从计算机的诞生开始说起

这个是第一代的电子管数字机

那么这是最早的计算机

那么这些复杂的设备呢

当时只能是在实验室里

供少数研究人员科学研究使用

这个是1958年到1964年的一个

晶体管数字机

那么它的操作界面已经简化了很多

那么不再需要很多人同时操作

界面上的这个接线电缆

也被数字按钮替代

我们看到的这个是打印机

打印机是1868年发明的

那么当时的打印机呢

它只是一个辅助设备

并没有跟计算机直接连接起来

那么这种打印机呢

它是和专用的纸带或者卡片穿孔机

等等这种设备连接起来

通过敲击键盘为纸带或者卡片穿出孔

供计算机识别

那么这个就是当时的穿孔机设备

那么这个是穿孔卡片

那这种穿孔卡片呢

它是通过孔的排列来编码

它有点像盲文

计算机通过识别孔的不同排列

来获得它的指令

那么这个时候

人机交互它是间接和非实时的

这些穿孔纸带呢

只有计算机才可以识别

那要想知道这个指令

输入的是否正确

它必须经过一个输入打孔识别运行

这样一个过程

那么如果输入有错误

那是很难被人发现的

那在这样的一个效率下呢

其实计算机当时对人们的用处不是很大

它只是摆在实验室里面

供研究人员使用

屏幕的出现呢

使这个人机交互呢发生了一个转折

我们看到的这个界面呢

是命令行界面

英文叫command-line interface

键盘和显示器

它成为此时计算机的标准配置

命令行界面

它是人机交互的一个重大转折点

它让人们可以用自己理解的语言

来和计算机交流

可以在键盘上敲击指令

那么屏幕上呢

马上就会出现你键入的字符

可以直接看到敲击的指令

当敲入回车键时

屏幕上就会显示执行的结果

当时的命令行的这个电脑呢

它可以进行文字的输入

图表图形的绘制

还有动画甚至是游戏的制作

命令行界面用的是basic语言

如果想要让计算机工作呢

还必须要学习这门编程语言

随着芯片技术的发展呢

它的零件也越来越小

价格呢也能被市场接受

那么当时乔布斯看到了

这个计算机的发展潜力

他和合伙人一起呢在家中的车库里

攒了第一台的计算机

这台计算机就是apple

当时的售价是500美元

虽然只卖出200台

但是他却带来了

个人电脑开发的一个潮流

那么这是apple第二代的计算机

那么这个计算机

已经把键盘作为它的标准配置

键盘和电脑是一体化的设计

那么这个Apple II

成了当时所有的以命令行交互的计算机中

最杰出的一个作品

这是1981年IBM开发的个人计算机

这个计算机

后来被正式命名为 IBM PC

它捆绑了微软的basic软件

还有后来被称为PC的杀手级应用

VisiCale 电算表软件

那么appleⅡ 和 IBM PC

最终获得了很大的商业成功

那么它们的共同点呢就是

这个纸带设备完全被键盘和打印机

还有CRT显示器取代了

而且都采用了非常优秀的软件

降低了学习的门槛

非专业的用户呢

也能够通过简单的培训学会使用

鼠标是一个非常伟大的发明

它可以让操作者

可以快速移动到屏幕的任何的位置

去编辑你想编辑的内容

他选择起来比键盘更方便

而且鼠标上还有一个按键

可以直接调出菜单

点击按键进行操作

移动鼠标就可以绘图

那么这种鼠标的感觉更接近

人们用纸和笔的感觉

所以 其实鼠标的发明和出现

并且和计算机相连接

让人机界面产生了一个新的突破

那就是GUI用户图形界面

这个图形用户界面英文是

graphic user interface

我们看到的这张图呢

是1981年施乐公司用的第一个图形界面

它看起来比前面的这个MS-DOS

这种命令行界面更加直观

而且令人耳目一新

所见即所得

那么使用者不用再学习

复杂的basic语言了

它搭载的很多软件呢也更加实用

也就是正是这样的一些特征

让电脑从实验室走了出来

然后进入到了一个个人计算机的领域

那么大家看到的这个界面

当时还是有很多很多的创新的

这个界面第一次提出了窗口图标

菜单和点击的概念

而这类界面呢

也是后来被称为WIMP

也就是这个WIMP呢

就是Window Icon Menu Pointer的

首字母的缩写

那么从这张图里面呢我们可以看到

这个窗口的概念

在当时是非常具有创新性的

它解决了用户呢

同时处理多个任务的问题

比如说我想一边浏览图片

一边编辑文档那么一边听音乐

但是只有一个屏幕你怎么办呢

那么采用多窗口的这种方法

这个问题就解决了

那我可以在不同的窗口

看到不同的内容

我可以同时处理不同的任务

每个窗口又可以随意地放大挪动缩小

甚至隐藏

那么它满足了

我想同时处理多个任务的需要

另外呢

图标也是组织管理信息的一个

非常好的一个办法

它让界面非常简洁

因为每一个图标

它代表的是一个信息组

和一个功能组

那么点击这个图标

就会进入到这个信息组或者功能组

那么菜单呢同样也是

界面上一个非常好用的发明

那么它也使这个庞杂的这种信息功能

做了一个非常大的简化

我们看到的这个就是

苹果的Lisa第三代的电脑

那么这个电脑不但外观更美观

而且关键是它最大的创新

是在于它的人机界面

Lisa这个界面的开发呢

花费了大约三年的时间

我们看到这个图呢

就是Lisa的这个当时的图形用户界面

这在当时确实是非常令人耳目一新的

因为它的整个的这个屏幕

显得更干净整洁

而且呢有很多漂亮的图标

字体也可以替换

而它设计了一个顶层的菜单

这个菜单集合了所有重要的操作

那么用这个下拉式的菜单呢

还解决了二级分类的问题

因为这台电脑它面向的是办公人群

所以我们看到这个界面上呢

有很多和办公相关的隐喻

比如说文件夹 垃圾桶

尤其是垃圾桶的设计

它让这个文件的删除变得更简单

还留有余地

因为你如果想删除文件

删除之后呢它就会放到垃圾桶里

但如果你删错的话

你还可以从垃圾桶里

把这个文件捡回来

那么之后呢每一代的苹果界面

都会经过一些改进

比如说像1986年的这个界面

那么当时呢已经出现了

最前沿的彩色显示的技术

苹果公司当时为了体现它的先进性呢

它把logo也改成了有彩色条纹的苹果

它的界面已经有了淡淡的色彩

那么我们看到这个色彩呢

能让界面显示更丰富的信息

不过当时呢由于受到了显示技术的限制

颜色的分辨率还是比较低的

那么这个界面呢还略显粗糙

但是之后呢

随着这个彩色显示技术的成熟

这个时期的电脑呢也更加的强大了

它搭载的软件也更加多元化

而且呢为了进一步的简化这个操作呢

苹果又对界面做了很多新的

这个革新和改变

比如说这个它增加了一个

底部的导航栏

而这个底部导航栏呢

是进入常用软件的一种快捷方式

那么它可以提高你

打开软件的一个效率

那么我们看这个当时微软的界面呢

它是把这个软件的快捷菜单呢

直接放到了桌面上

那我们没有这个操作的时候呢

我们觉得这种方式也很简单

那如果有一些打开的窗口呢

它就会遮挡这些快捷方式

所以呢这个对比之下

我们看到这个苹果的这个

底部的这种快捷栏的这个设计

还是非常有优势的

大家看到这张图呢

实际上也是当时的一个创意

这是微软曾经设计过的一个拟物的界面

它的名字叫Bob

它的目标呢其实是想让计算机

具有情感化的这个特征

而且让人们降低对电脑的这种恐惧

这种隐喻的界面其实看起来也挺漂亮

但是呢它因为采用了大量和功能

没有关系的这个视觉元素

让界面显得非常拥挤

而且它限制了有用信息的这个呈现

反而增加了认知的负担

人们很难从这上面找到需要的内容

它的使用效率也非常不高

因此呢这种界面很快就被淘汰掉了

所以我们从这个例子里面也看到呢

其实这个界面设计呢

最具有优先级的一个权重

其实就是效率和功能

那么在1996年呢乔布斯重回苹果以后呢

开发了mac os X操作系统

那么它给人们耳目一新的感受

那这一个笑脸的设计

其实是非常有创意的

因为它拉近了人和电脑的距离

当你启动电脑的时候

如果你看到了这个笑脸

那么就说明这个电脑一切正常

它去掉了这个过去的电脑

在开机的时候出现的很多无关的信息

提升了用户的体验

Mac OS X界面的开发呢

还用了这个3D水晶质感的图标

和半透明的窗口

虽然这样给这个技术呢

带来了巨大的挑战

但是因为苹果对用户体验的关注

也让它赢得了更多的用户

在这个版本的这个界面上呢

苹果在 Dock 栏上

也做了很多的改进

它不但更加美观还更加活泼

因为这个时候苹果电脑的定位呢

已经不再是办公人群了

它已经摒弃了那种

中规中矩的这种办公的界面的这种设计

而大胆的采用了活泼的水晶图标

还有带有阴影的这个立体效果

那么给 Dock 栏增加的这种

动态设计呢

也增加了用户操控时候的愉悦感

这种互动方式曾经一度成为

PC用户羡慕的这个对象

我们在这个界面里面还能看到

这个半透明菜单

和半透明的对话框的设计

那么这也大大提高了它的易用性

减少了对下方信息的一种遮挡

也增加了这个界面的层次感

我们看到的这个界面呢

是这个我的桌面的一个拷屏

它是最新的OS操作系统

我们看到这个新的系统它有什么变化呢

我们可以看到它变得更加扁平化

因为曾经有立体感的这种 Dock 栏呢

也变得更加平实了

为什么要这么改呢

其实从视觉效果上来看呢

以前的 Dock 栏更加美观呢

所以这就涉及到了一个

设计的一个取舍的问题

取舍的优先级是什么呢

占第一位的不是美观

而是功能和效率

所以呢这个在以前应用程序比较少

所以 Dock 栏做成这种立体感的样子

还没有太大的问题

而现在呢我们的电脑上装的软件

和程序越来越多

那么 Dock 栏就显得十分的拥挤

那么它的使用效率

就成为了最关键的因素

那么这也就是为什么新的MAC系统

把这个 Dock 栏

做了一个扁平化处理的原因

那么我们看看这张图

它是1996年Palm Pilot 1000

这种平板电脑

它是世界上第一款的掌上电脑

当时它配备了这个触控笔

和手写输入法

这边速度和准确性也很高

而且在当年呢

还获得了PC Computing的

这个年度易用产品mvp奖

这个产品它面向的是商务市场

不过由于缺乏配套内容而淡出

但是这个触控笔的界面呢

其实解决了一个在小屏幕上

进行选择和输入的问题

这款电脑它是移动界面最早的例子

这在当时也算是一个创新了

那么我们看到的这个ipod的产品呢

是2001年苹果公司设计制造的

它不仅外观漂亮

容量也非常高

还有非常完善的程序

和创新的操作方式

它除了这个可以播放mp3以外呢

还能当这个高速移动硬盘使用

而且能显示联系人日历

阅读电子文本

聆听这个有声电子书

那么它有别于这个普通的mp3

因为它还可以联网

绑定了一个音乐服务

这个当时呢是非常了不起的一种创新了

另外它的这个Click Wheel

这种选取盘的界面非常有特色

我们看到右侧的这个呢

是新款的iPad

它与旧款相比呢

选取盘的设计呢更加的简洁易用了

即使在移动的环境也可以单手操作

当然apple的呢

由于它这个人性化的这种设计

也为这个苹果公司呢

带来了非常丰厚的利润

2007年呢苹果公司正式发布了

它旗下的第一款手机iPhone

那这款手机的设计

完全颠覆了人们对传统手机的印象

那我们看看下面这张图

那么同年代的手机呢

当时还都是这个样子的

那么它们外观造型各异

但是呢都是有一堆键盘来用于输入

而且屏幕呢也比较小

那么第一款iPhone呢

它从外观上和界面上

都非常简洁美观

它的正面只有一个按键

界面呢还沿用了OS系统

界面的水晶质感

软件图标采用了拟物化的设计风格

而且首次采用了手指触控

比较大的图标和间隙呢

让手指的操控呢也更加方便

不容易产生误触

那iPhone手机呢

还首次用了陀螺仪传感器

那么这个传感器呢可以感知

你手持设备的方向

自动将界面调整为横向或者纵向

那这款手机除了可以打电话以外呢

还搭载了很多实用的软件

比如说拍照 文档编辑 地图 邮件等等

它在功能上也比这个Palm Pilot 呢

更加强大

更像一台可以移动的微型电脑

但是它的界面却非常的简洁

而且适合单手操作

可以说这款手机呢

是当时开启了移动界面的一个时代

并且让这个手指触控的这种方式

成为了一个行业的标准

那我们看到在iPhone推出以后呢

当各个其它的手机厂商呢

也纷纷的效仿

那么我们看到的目前的这个手机呢

都是大屏手机

那手机在外观造型上呢

也越来越没有太多的变化了

而更多的这个主要的更新呢

体现在性能界面和它的服务上

另外移动互联网呢

也让手机成为连接

各种应用的这个终端设备

也成了除办公以外

用户最依赖的信息工具

它的用户体验也越来越依赖于界面

内容和服务的设计

所以在移动时代

界面设计比以往任何时候

都显得更加重要

那么现在呢我们的周边的移动设备

除了功能越来越强大以外呢

这个随着蓝牙和智能计算

等等技术的发展

那么各种具有信息处理能力的设备

都能够相互连接起来

那么这又开启了一个

智能互联的一个时代

那么它的特点呢是智能互联终端

种类也越来越丰富

软件功能多样化

外部硬件和服务也多样化

同时屏幕的尺寸和操控方式

也更加多样化

那么在这种形势下呢

原来我们认为习以为常的界面和交互方式

实际上已经越来越多的注入了新的元素

我们从前面对界面设计历史的回顾当中呢

不难看到界面设计

一直处于一种动态变化当中

改变的动因有两个

一个是技术一个是人

那这种人机交互和智能技术的发展呢

它致力于让机器能更好地理解人

让人能更容易操控机器

来达到自然交互的目的

比如说微软开发的这个

Surface智能桌面

它探讨了自然交互的各种可能

它集合了手指触控和物理识别

它可以多人双手拖拽看到的内容

所有这些操作都是基于人的直觉

没有菜单没有特别的指令

机器就会识别你的手势

进行智能判断

来实现你想要做的事情

这就是自然界面

也是未来界面发展的一种趋势

那么我们看到这个

任天堂的 Wii 游戏呢

已经是在践行自然界面的理念了

因为它首次运用了体感交互方式

可以让机器感知人的身体姿势

再用这样的交互的输入呢来驱动游戏

这种自然交互的方式呢

可以使全家老幼

都很容易地参与到游戏中来

也让游戏呢不再只是动一动手指

而成为全身的一种运动

它把游戏和健身联系起来

不仅如此

它还支持多人的游戏模式

那么在这种游戏方式下呢

可以拉近家庭关系 亲子关系

我们看到的这个互动吧台呢

也是自然交互界面应用的一个例子

另外我们看到这个在驾驶的过程中呢

驾驶员的注意力只能是窗外

那么我们看到这样的界面呢

它是通过一个投影机

把这个信息叠加在这个

窗外的这个现实的环境当中

那么这种界面又称作为

混合现实的这个界面

这种方式呢可以让驾驶员呢

更加集中注意力在驾驶本身上

但是呢又不影响他的这个导航和引路

不知道大家有没有听说过这个脑机界面

这种头戴式的设备呢

是可以探知脑部神经的活动

让人脑的神经发出的信号来指挥机器

人们要做的只是集中注意力去想

想做什么

那目前呢这种界面

还可以识别一些简单的指令

比如说前进后退

当然这个技术目前呢

主要还用在游戏 心理治疗

还有辅助这个身体缺陷人群

等等这方面

我们看到这个产品呢

它是 MIT 开发的可触界面

或者可以称为叫物理界面

它的英文呢叫Tangible User Interface

简称叫TUI

它通过组合不同的电子积木

来实现这个相应的功能

我们看到的这张图呢

它显示了这个图形用户界面

和物理界面就是TUI的这个差别

我们看到的上方两张图呢

是传统的图形用户界面

这个图形用户界面

人们必须坐在电脑前面

通过键盘鼠标来进行输入

而下面呢是这个TUI

也就是物理界面

那么这个信息呢存储在

一个一个类似于

积木的这样的一个模块当中

那么人们可以通过摆放这个积木呢

摆放这些模块来进行操作

所以TUI呢相比之下

是一种更为自然的一种交互方式

这是一款桌面机器人它叫Jibo

Jibo它会通过扭动

还有这个面部的这种动态符号还有声音

进行表达和人交流

他也能跟家人进行视频通话

讲故事 报新闻

还教你加工食材

还能自动拍照

本质上呢他是和手机和电脑差不多

只要有网络能实现的功能和服务

也有很大的空间

它的最大特点呢

就是语音对话和自然界面

人们和这个机器人的沟通

几乎是没有难度的

因为它就在扮演某个人

某个永远不会厌倦不会累

不会抱怨的一个陪伴者

这几年呢VR非常火

目前在游戏和展示方面的应用呢

比较多

虚拟现实VR

它的英语全称是virtual reality

它是通过立体视觉的一个系统

营造一种沉浸式的感受

这种头戴设备呢

可以捕捉眼球和头部的运动

让画面呢跟着头部来移动和交互

同时这种界面还支持

手势和肢体动作的交互

让人和虚拟世界呢

产生了非常深度的连接

去年国外社交网站上

有一个最热门的话题呢

就是Pokeman Go

这是一款AR增强现实游戏

这个游戏的任务呢是捕捉小精灵

这个AR界面和VR是不同的

AR增强现实呢

它是指在真实的环境里面

叠加数字化的内容

它避免了VR造成的这种眩晕感

Pokeman Go呢它的译名是小精灵

是一款只能在户外玩的游戏

因为它绑定了真实的地理位置

这个小精灵会和真实的世界

一起出现在屏幕当中

而且它还可能出现在任何你走过的地方

这个游戏呢让人们的户外活动

增添了很多的惊喜和新鲜感

那么我们前面介绍了这个

界面设计历史和发展趋势

从这里面呢我们可以看到界面设计

它是一个动态发展的这样一个领域

那么它只负责一件事

就是人机

或者是人 机 人之间的这种交流

简言之它就是对人如何输入

那么机器如何反馈这样一个过程

进行的设计

判断界面设计好坏的标准

就是用户体验

总之

做好界面设计一是要了解人

二是要了解技术

好 谢谢观看