交互设计的前世今生:了解其产生与发展

读史使人明智,这几乎可以说是真理。可以从历史中洞悉事物发展的本质。帮助我们更好的活在现在和将来。回顾交互设计的历史,了解交互设计的产生与发展,让自己在交互设计的道路上越走越好。


读史使人明智,这几乎可以说是真理。可以从历史中洞悉事物发展的本质。帮助我们更好的活在现在和将来。回顾交互设计的历史,了解交互设计的产生与发展,让自己在交互设计的道路上越走越好。

交互设计的前世今生:了解其产生与发展

上个世纪40年代,为了计算弹道轨迹,美国军方委托宾夕法尼亚大学研制超级计算机。同时参与原子弹研究的冯诺依曼(吊炸天的一个人:计算机之父)也碰到了大量运算的问题,便参与了超级计算机的研制。

1946年这台超级计算机(ENIAC)问世,这是划时代的成就,表明了电子计算机时代的到来。ENIAC虽然具有强大的计算能力(对于当时来说),但操作复杂,使用的成本依然很高。随着电子计算机的发展,美国人开始思考如何减轻人在操作计算机时的疲劳感,并发表了第一篇关于人机交互的文章。从此人机交互进入人们的视野。研究人机交互的目的是使人和计算机的沟通更直接更自然更舒适。

七十年代,随着个人计算机的出现,计算机开始面向普通消费者,而非专业计算机人士。如何站在普通消费者的视角去设计人机交流界面被提上日程,比尔·莫格里奇在七十年代后期提出了交互设计的概念,此后交互设计作为新兴学科在美国开花结果。交互设计是定义、设计人造物的行为的设计领域,这里的人造物包括各种生活用品、工业产品和各种软硬件,现在主要应用于互联网产品领域。也就是这几年国内很火的交互设计师、用户体验设计。

交互设计的概念从提出到现在,经历了三个阶段:

第一阶段:命令行界面(CLI)

如果你现在打开电脑,出现了下面这样的画面,你一定觉得绝逼是电脑坏了。但是六七十年代的人们打开电脑之后的界面就是这样的,这就是人机交互的第一个阶段:命令行界面。这个阶段唯一的交互设备是从打字机演化而来的键盘,相对电脑执行操作,只有输入相应的命令,电脑根据接收到的命令反馈结果到显示器,完成交互过程。

CLI最大的弊端就是需要用户记住各类命令行,增加了用户的记忆负担,要知道人类创造工具可是为了让自己能够更懒一点。随着时间的推移和技术的发展,CLI的交互形式逐渐退出了主流,GUI登上了历史的舞台。

但是要注意的时CLI并没有完全消亡,它在小众领域依然拥有强大的生命力。最典型的就是程序员写代码的过程,便是使用命令行界面和电脑交互。

交互设计的前世今生:了解其产生与发展

CLI界面

第二阶段:图形用户界面(GUI)

1979年乔布斯参观Xerox(施乐公司)的Alto电脑以及执行在该系统上的软件,乔帮主被其深深吸引,意识到这才是人机交互的未来。施乐公司的Alto电脑将鼠标作为指点输入设备,操作系统使用的是图形用户界面。回到苹果后,乔帮主招兵买马(其实就是挖施乐的墙角,哈~),并于1983年推出带有鼠标的LISA电脑,第二年推出升级产品Macintosh,这两款电脑可以说是电脑发展史上的里程碑,将新的交互设备鼠标和图形用户界面带到了普通消费者的面前。

CLI阶段电脑还只是在小众领域使用,LISA及Macintosh之后,电脑慢慢进入了大众的消费市场,GUI可以说是功不可没。

交互设计的前世今生:了解其产生与发展

mac电脑的GUI界面

第三阶段:自然用户界面(NUI)

不管是CLI还是GUI都要求用户必须学习软件开发者预先设置好的操作(GUI比CLI的学习成本更低),而NUI只需要用户用最自然的方式(语音、面部表情、动作手势、移动身体、旋转头部…)和计算机交流,从而摆脱键盘、鼠标。

目前我用的最多的NUI的交互形式是苹果的Siri,通过“嘿,Siri”唤醒她,然后可以用语音交流,完成诸如:向张三发送今晚八点一起吃饭的短信;今天天气如何;打开WiFi;设置闹钟……如果想进一步操作还是得回到触摸手势。但我相信将来的某一天人和机器的沟通效率会达到人和人交流的效率甚至是超过。

2015年,人工智能、虚拟现实、增强现实、语音交互、动作识别、深度学习等概念飞入寻常百姓家,Google Cardboard、Gear VR、微软HoloLens、Impression Pi等产品点绕了消费者的热情。国内厂商也不甘示弱,暴风已经推出魔晶5代,科大讯飞联手京东推出叮咚音响(主打语音交互),出门问问推出穿戴式手表,诺亦腾的动作捕捉技术正被应用到电影、体育训练、虚拟现实、医疗诊断等领域,乐视的VR头盔也已经开卖。

交互设计的前世今生:了解其产生与发展

《钢铁侠》电影中的AI界面

目前大多数交互设计还是处于GUI阶段,包括App、Web网站、Wap网站、微信内嵌的H5页面、今天微信刚开始公测的“小程序”等等。了解了这些交互设计历史之后,你有没有更好的理解交互设计,你对交互设计的未来又有什么想法?欢迎留言和我交流。

 

作者:邹志楠,个人公众号:UE修养,一枚交互设计师

本文由 @邹志楠 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26995/

(0)
CatherineCatherine
上一篇 2017-05-16 13:33
下一篇 2017-05-16 15:44

相关推荐

  • 请记住,视觉设计远不止“好看”这么简单

    设计师和理发师其实有点像,理发师基本分为三种:一种是只会搞基础发型的,比如寸头、中规中矩的长发、老太太卷头等;一种是只会剪流行发型的(这种发型师还很容易 摇身一变成为造型大师,告诉你你应该改变,应该剪目前最流行的某款发型,但实际上可能是他只擅长这款发型);还有一种是最可遇不可求的,他根据你的脸型、 性格等,用最简单的手法量身设计发型,让顾客的气质度立刻得到提升。

    2017-06-03
  • 阿里自研UED计件平台技术解析

    从天猫到菜鸟,从双11到造物节,在阿里巴巴,除了来自集团的UED团队外,还有一支700余人的外包团队,一起创造着阿里视觉神话。阿里的UED外包同学们每年会收到来自阿里巴巴集团50多个业务方提出的十余万外包需求。如何协调外包设计师与需求方之间的配合,并且给到外包同学合理结算价格,成为阿里UED外包管理的一大难点。以往,阿里巴巴也会用一些简单的需求分发系统来应对。但由于实际业务场景的复杂性,需求在分配上无法做到合理与精准。加上缺乏评价和追踪...

    2018-02-01
  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24
  • Mate S、S6 edge+用户交互设计对比体验

    每年竞争激烈的手机市场中都会带给我们消费者惊喜。在配置性能等硬实力愈发相近的情况下,各厂商在外观,材质,以及操作系统包括界面优化,交互设计等方面都下足了功夫,来为消费者提供具有各具特色的使用体验,以…

    2015-11-10
  • CDS Sketch Practise ! 今天教你画卡车!

    很多学员在一开始接触汽车设计的时候掌握不准比例的确,汽车的比例非常特殊抓不准比例草图非常容易走形我们之前的推送搬运过H-Point的车型比例讲解链接在文章底部掌握比例需要大量的练习如果你急于做项目可以先从比例易于掌握的卡车入手卡车侧视图设计手绘教程卡车的座舱可以视为一个大的体量相比较于其他车型更容易表达而且设计一个单体量车型的过程可以锻炼自己塑形和表达形体的能力是很好的汽车设计入门练习视频解析确定座舱的外轮廓用较浅的线条勾勒出来初步想法...

    2018-04-08
  • 朋友圈最近上来几个广告,导致我的朋友圈被讨论轰炸,那么朋友圈的交互设计解析你有兴趣看看吗?还有,朋友圈已死!

    1. 朋友圈的印象 2. 设计上的体现 3. 浅析设计背后原因 4.不足点分析 5.我们向微信学习什么  

    2015-01-26
  • MacBook Pro 真机上手:Touch Bar 究竟是不是好设计?

    9 年前,iPhone 的诞生,多点触控开始成为一种全新的人机交互方式。 4 年前,当一票“超极本”不加思索地把触控移植到电脑屏幕上,时任苹果工业设计师的 Jonathan Ive 说: 多点触控放在笔记本的显示屏上……不太适合。…

    交互设计 2023-03-03
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • UI设计师扔掉PS,使用Axure是怎样一种体验?

    ——我的生活将再不会像从前那样……所以,Axure……这真的仅仅只是一个做原型的工具吗?UI设计师可以完全放弃其他工具,仅仅靠Axure完成所有工作吗?这个程序有什么优缺点呢?下面我将试着回答这些问题。最近我开始放弃Adobe Photoshop转向Axure,然后发现了它除了原型制作以外的潜能,也许我的生活将有大不同。如果有时候你不得不打开PS查看位图细节,你就会知道它到底有多慢。近年来PS功能越来越丰富,当我使用了另一个看起来明显简...

    2018-04-17
  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19