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

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


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

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

上个世纪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

相关推荐

  • 转场动效的5个核心规则

    本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

    2017-04-27
  • UI设计案例分析:现代互联网和移动应用中出现的一些优秀的用户界面模式

    在这篇文章中,来自UXPin(一款用户体验设计的应用程序)的Chris Bank为我们带来了最近在现代互联网和移动应用中出现的一些优秀的用户界面模式,并将通过实例展示如何将这些出色的UI设计模式应用到其他的网站和应用中。

    2017-06-05
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 交互设计GSM数据模型浅析

    交互设计GSM数据模型浅析GSM Data Model Analysis Of Interaction Design你是否记得:“那年那天那间会议室,激情四射,实际是射击狮与产品狗在设计方案上斗的你死我活”你是否还记得:“老板、甲方、PM对你的质疑:设…

    2017-08-04
  • 1.6万字诚意之作|如果你想成为一名交互设计师,这篇文章值得慢读

    关于交互设计,这是一篇很全很全很全(重要事情要说三遍)的科普文章。作者写了1.6万字,实在是诚意之作。如果你打算走进交互,此文值得真的真的真的(重要事情要说三遍)值得一读^_^ by 小编目录导读:
    1. 交互设计概念
    2. 交互设计输出物
    3. 交互设计相关理论
    4. 交互设计流程及方法
    5. 交互设计常见案例分析
    6. 交互设计规范及趋势
    7. 交互设计师进阶之路举个例子就是:小明饿了,他需要填饱肚子(目标),他跑到楼下的餐馆进行点餐、吃饭、结账(任务),吃完了出门的时候推门(行为)出去,然后过马路回家。交互指的是产品与它的使用者之间的互动过程,而交互设计师则是秉承以用户为中心的设计理念,以用户体验度为原则,对交互过程进行研究并开展设计的工作人员。——百度百科①初级交互设计师<10k:俗称「线框仔」,出没于小公司和外包公司,没有设计决策权,专门配给不会画图的产品经理使用。门槛低,只需要熟练使用原型软件,会看着其它APP抄设计即可。无发展前途,看到此类岗位请远离。
    ②中级交互设计师10k-15k:除了画线框图外参与一定的产品层面的工作,有一定设计决策权,通常为知名院校应届毕业生,可以对设计决策提出异议,但不一定被接受。
    ③高级交互设计师15k-25k:通常可以参与整个产品的概念过程,工作职能与产品经理更为接近,有更多的设计决策权,通常工作经验超过2年,可以和产品经理、视觉设计师、用户研究员及开发人员进行「激烈讨论」,并有能力维护设计师的尊严。
    ④资深交互设计师>25k:通常出没于BAT、财大气粗的创业公司及设计咨询公司。有着丰富的成功设计案例,通常工作经验超过5年,有主流大公司工作经验,有大型项目的设计管理经验,业内有一定名气。
    ——以上分级,参考寺主人在知乎的回答《如何成为交互设计师?》“你在设计的生涯中,有没有用到或者总结出哪些设计方法?”“以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。”“关于弹窗中的“推荐选项”应该放在左边还是右边,分了两种情况:如果推荐选项有破坏性,那么应该放在左边。如果没有破坏性,则应该放在右边。但到了iOS10的时候,却变成了推荐选项都应该放在右边。”

    2017-05-06
  • 用户体验地图

    利用用户体验地图实现产品的情感化设计;先来看一张图:我们可以将用户体验地图分为三个区域,其中:# ZONE A 提供了对地图的界定;# ZONE B 是视觉化的用户体验过程;# ZONE C 描述了用户的痛点;我们通过拆分各个区来实现一个用户体验地图的构建;A区:1 : 表示一个角色,即体验的用户是谁,或者说你的产品的目标客户群体是什么样类型的人;2 :表示待调研的场景,即在用户什么情景下会使用你的产品;B区:3 :可分段的体验过程,即...

    2018-03-28
  • 深度长文|如何输出一份让团队满意的交互设计交付物

    本篇是系列小结的第二篇,简单总结一下自己对如何提高交互文档质量的一些思考。

    2017-05-16
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • Axure RP 8软件安装视频教程

    Axure RP 8下载地址:链接:https://pan.baidu.com/s/1smi2vvf密码:l2oj安装中有问题请咨询私人微信:152374906801、双击打开此文件2、点击next3、选择i  agree然后点击next4、点击bowse更改存储位置建议不要放在C盘然后点击next5、点击next6、点击next7、等待安装8、取消勾选Run Axure RP 8,然后点击Finish9、打开软件的安装目录把复制的la...

    2018-03-04
  • 实践分析产品第一天

    【分析思路】 首先要明确,产品是面向用户的,当分析一个产品的时候,我们要先以用户的角色按照设计师的引导整体走一遍,也就是遍历每一个操作,每个设计师都会有一条设计主线,把杂乱无章的功能点根据用户的期望及…

    交互设计 2015-08-25