[美]JennyPreece《交互设计》作品简介与读书感悟

本文已在《装饰》杂志2015年第1期公开发表,文章探讨的是交互设计研究思路的转变。这一转变不仅适用于交互设计,也适用于服务设计、工业设计等相关门类的设计,反映的正是当下对于设计的认知走向深化的普遍现象

本文已在《装饰》杂志 2015 年第 1 期公开发表,文章探讨的是交互设计研究思路的转变。这一转变不仅适用于交互设计,也适用于服务设计、工业设计等相关门类的设计,反映的正是当下对于设计的认知走向深化的普遍现象。

引用格式:辛向阳。交互设计:从物理逻辑到行为逻辑 [J]. 装饰,2015 (1).

交互设计:从物理逻辑到行为逻辑

企业回首先,两者的定义不同。 UI 设计的定义:UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI 设计分为实体 UI 和虚拟 UI ,互联网常用的 UI 设计是虚拟 UI,UI 即 User Interface (用户界面)的简称。 交互设计的。

Interaction Design: from Logic of Things to Logic of Behaviors

辛向阳

摘 要:交互设计改变了设计中以物为对象的传统,直接把人类的行为做为设计对象。在交互行为过程里,器物包括软硬件只是实现行为的媒介、工具或手段。交互设计师更多地关注经过设计的、合理的用户体验,而不是简单的产品物理属性。人、动作、工具或媒介、目的、和场景构成交互设计的五要素。传统理解的设计,强调物的自身属性合理配置,是“物理逻辑”。而合理组织行为,可称为行为逻辑。交互设计过程中的决策逻辑主要采用行为逻辑。

《数字媒体艺术简史》李四达 清华大学出版社 《人机交互》董建明 清华大学出版社 《交互设计》 詹妮·普瑞斯(Jenny Preece) 著 机械工业出版社 《电影是什么?》[法] 安德烈·巴赞 江苏教育出版社 《影视批评》陈犀禾/。

关键词:交互设计、交互行为五要素、行为逻辑、物理逻辑

经过前几年的广泛关注和不断实践,国内学术界和行业对交互设计理念的理解和方法的运用已经初显成效。尤其是当百度、淘宝、支付宝、微信、小米等一批从单一产品到整个产业链的新兴商业生态逐渐成熟的时候,设计师所服务的产业环境、工作中所关注的产品属性、设计流程以及成果评价标准都和五年前我们熟悉的实体产品设计大相径庭。在我们反思设计对象本体属性(what)、改变设计流程(how)、重新确定判断标准(why)之前,有一件很重要的事情需要阐明,那就是交互设计的对象以及设计过程中的决策逻辑。

一、交互设计的对象:行为的设计

交互设计作为正式的研究方向早在上个世纪六十年代就开始了。早期的交互设计主要关注的还是人与机器、尤其是与计算机的交互,其主要的目的是通过提供简单易懂的操作界面使计算机和其他新兴的数字产品能够为更多的普通用户所接受。随着信息技术的不断成熟,交互设计与视觉设计,互联网行业的发展以及用户体验对消费决策影响力的不断增强,一时间,交互设计几乎覆盖了包括信息技术、互联网、物联网、服务与体验等不同领域、不同行业的产品研发。然而,作为一种有着广泛应用的理念和方法,交互设计依旧缺少一个相对稳定的理论框架概括其研究本体、描述它的决策规律。

1、“行为的设计”与“物的设计”之区别

设计在传统意义上一般被理解为造物,也就是对物的设计。交互设计则不同,是在创造“行为”,它也需要物,但只是把物当作实现行为的媒介。

以手机为例。手机作为被消费者广泛使用的一个软硬件一体、产品与服务结合的通讯和社交产品,它的用户体验常常被交互设计师津津乐道,也往往是手机品牌和服务供应商重点关注的内容。iPhone 通常被认为是交互设计成功的典范,虽然很少有人能够清楚地描述出 iPhone 的交互形态或者它有别于其他手机的交互特点,但我们可以从下面一个简单现象中获得很多启示。不管是设计师还是普通用户有了自己的 iPhone 之后,都一定会关注其中的种种界面,并喜欢向朋友和家人演示这些界面。从滑动开启界面、图片放大、自动转向、CD 唱片的翻转等等。再回想一下 Motorola V3 推出时的情形,从公司自身到设计师再到用户,他们津津乐道的是V3薄薄的黑色金属翻盖式外形。随后推出的 V3 继续保持原有的造型,并引入了不同的色彩。这个看似平常的现象,它为我们提供了认识交互设计的重要线索。人们描述 Motorola V3 的时候,都是把它作为成功的工业设计的案例来着重描述其物理属性,诸如形状、尺寸、结构、色彩、质感等。但是,人们在描述 iPhone 时,却很少去试图描述其物理属性,而是选择去演示某个事件,譬如说浏览图片或播放音乐。

图 1 诺基亚和三星手机用户可用性对比

同样是调整屏幕的亮度,在外形也很相似的情形下,苹果的 iOS 操作系统和 Android 系统为用户提供的路径却完全不同(如图 2)。图中不同颜色的线条是在实际用户测试中,用户尝试过的路径。显然,iOS 的路径更加便捷明了。Android 系统虽然提供了更多的可能路径,却使用户在选择过程中耗费更多的时间,犯错误的机会也相应增加了。

《数字媒体艺术简史》李四达 清华大学出版社 《人机交互》董建明 清华大学出版社 《交互设计:超越人机交互》 詹妮·普瑞斯(Jenny Preece) 著 机械工业出版社 辅导资料笔记有:《数字媒体艺术概论》《数字媒体艺术基础》《。

图 2 iOS(左)和Android操作系统(右)调整屏幕亮度路径对比

前述 iPhone 和 Motorola V3 的用户关注点对比、诺基亚与三星的用户可用性对比、iOS 和 Android 操作系统的对比,应该说很清晰地揭示了交互设计和传统产品设计的本质区别。交互设计改变了以往工业设计、平面设计、空间设计中以物为对象的传统,直接把人类的行为做为设计对象。在交互行为过程里,器物包括软硬件只是实现行为的媒介、工具或手段。交互设计师更多地关注经过设计的、合理的用户体验,而不是简单的产品功能。这样,消费者获得的不只是单一的产品,而是以产品作为媒介的一个完整的服务平台。交互设计和产品设计的区别如图 3 所示。[2]

图 3 产品设计与交互设计的对比

2、交互行为的五要素

早在 20 世纪九十年代初,Richard Buchanan 教授就清晰地把交互设计的对象定义为行为,“creatingand supporting human activities through the mediating influence of products”(通过产品的媒介作用来创造和支持人的行为)。[3]遗憾的是,虽然这个定义明确地指出了交互设计的对象是人的行为,而且这个定义也成功地指导了卡耐基梅隆大学的交互设计学科的发展,但是这个定义并没有被更多的人、更准确和深入地理解。很多的人都把注意力放在用户界面,也就是媒介的影响上(the mediating influence of products),而忽略了行为(activities)本身。

当行为过程作为设计对象的时候,其属性不再是传统工业设计通常关注的诸如功能、结构、材料、色彩等物理属性。交互(interaction)是因为有了“动作”(action)和相应的“反馈”(reaction)才形成了一个回合的交互行为。这里的动作一般是指有意识的行为,当然也就有了执行动作的人、行为的目的、实现动作的手段或工具(可以是软硬件,也可能是身体的某个部位,甚至可能是外在的环境媒介)、行为发生的场景。暂且把人、动作、工具或媒介、目的、和场景界定为交互设计的基本元素或行为五要素(图 4)。五要素的提出是受了文艺理论家肯尼斯.伯克(Kenneth Burke)戏剧五位一体和“同一”理论的启发[4]。如果说,通过改变材料、色彩、结构或功能可以获得一个新的工业产品的概念,那么一个新的交互设计概念则往往需要从重新确定参与者、定位行为动机、规划行为过程、谋求新的手段、营造新的场景和环境等角度来入手。

图 4 交互行为的五要素

二、从物理逻辑到行为逻辑

当设计师需要把人、动作、工具或媒介、目的和场景等五要素合理地整合到一起,去完成一个任务并使用户获得良好体验感受的时候,他所遵循的逻辑规律一定有别于产品设计师,后者考虑的主要是如何合理地运用结构、材料和色彩等物理属性去实现产品的某项功能。

1、Yahoo 和 Flickr 主页界面对比

让我们再看两个互联网服务的对比,Yahoo 网站和 Flickr 网站(图 5)。为了组织复杂的信息,Yahoo 主页至少同时使用了“LATCH(位置 Location、字母 Alphabet、时间 Time、分类 Category、层级 Hierarchy)方法”、信息组织方法中的分类法(顶部和左侧的信息或服务板块)、层级划分(正中的视频和右上角“热点话题”)和按时间顺序排列(中间偏下的“所有新闻”)。当然了,这些还不是 Yahoo 主页信息组织的所有方法。作为九十年代中期起步的搜索引擎和门户网站,为了满足人们获取信息的需求,精心组织信息和相应的服务成为了 Yahoo 主要的任务。在这里信息的组织(比如说 LATCH 方法的运用)和展现(排版、视觉呈现等)类似于传统的实体产品设计中对产品功能、结构、造型、材料、色彩的优化组合,因为设计师相信经过合理组织的信息和服务是 Yahoo 为互联网用户服务的基础。接下来看Flickr网站。Flickr主页的设计则采用了完全不同的思路,中心位置“Upload”、“Discover”和“Share”三个醒目的入口显然不是按照图片的某种分类方法而设定的三个图片信息板块[5],它们的出现是因为用户三种典型行为。来到 Flickr 的人首先想到的是我可以做些什么,“上传、寻找还是分享?”,而不是浏览 Flickr 里提供了什么样的图片。在这里,用户的行为成为了设计的对象主体,各种用户的不同行为通过用户研究以典型用户行为呈现在主页上,最大限度地契合了主流用户可能的、理想的行为路径。

图 5 Yahoo 与 Flickr 主页对比

(图片来源:网络截图)

2、行为逻辑与物理逻辑

如果把 Yahoo 和 Google 同样作为搜索引擎的互联网服务对比,两种不同思维逻辑带来的差异更是显而易见。当 Yahoo 希望把所有复杂的信息按照合理的方式呈现给用户的时候,它依赖了很多组织信息的方法和工具。同时,用户也需要在 Yahoo 的信息架构不同层级里去发现自己需要的信息。而 Google 则是采用行为逻辑,它的一键到达的模式无疑从行为角度讲是最经济合理的。很难说某一种逻辑思维有更多的优势,角度不一样,得出来的结论可能不一样。

让我们看另外一个例子,是关于办公室广泛应用的复合复印机的用户体验测试。这里我们选择的是柯尼卡.美能达 Bizhub 751 型复合复印机,实验由香港理工大学交互设计研究生谢彬欢在笔者的指导下完成(图 6)。可以肯定,美能达的设计师和工程师一定最大限度地、合理地利用了各种复杂的机械、电子构件,配合相应的软件,在相应的成本区间内,很好地同时满足了商业用户的复印、扫描、装订等多种复杂任务。其造型想必也充分考虑了现代办公室的风格。尤其当我们把它和早期的复合复印机相比,它的功能更强大、体积更小、性价比更高。单纯考虑柯尼卡.美能达 Bizhub 751 的功能、结构、造型,甚至价格等物的属性,应该说它很好地符合了它作为商品的物理逻辑,是一个成功的设计。然而,当我们开始考虑用户的使用体验时,很多用户发现如果缺乏使用经验或没有经过指导,即便是一个很简单的任务也可能变得非常复杂(图 7)。图 7 里,3 种颜色代表了 3 个测试用户,他们都被要求完成同样一个简单的 A4 纸双面复印的任务;每一个灰色或有颜色的小方块代表了一个操作界面上的按键,其中有颜色的小方块是被测试用户点击过的按键;每一根线条代表了从一个按键到另一个按键的路径底部的横轴代表了时间,时间轴上的“X”表示了任务失败的路径。从图中繁复的路径和众多被点击的按键,可以想像操作者当时的困惑和无奈,也就是说,一个原本功能完善、结构合理的机器,如果从使用行为,尤其是任务流程的角度看,它没有能够很好地满足行为逻辑的要求。

图 6 柯尼卡.美能达 Bizhub 751 型复合复印机

[美]JennyPreece《交互设计》作品简介与读书感悟

图 7 使用柯尼卡.美能达 Bizhub 751 型复印机的用户体验测试

1、美的力量绝不亚于思维的力量。一个再深刻的思维都可能变为常识,只有一个东西是永不衰老的,那就是美。2、秋天的白云,温柔如絮,悠悠远去,梧桐的枯叶,正在秋风里忽闪忽闪地飘落。3、这一幢幢房子,在乡野纯净的天。

3、功能型用户界面设计和行为型用户界面设计

[美]JennyPreece《交互设计》作品简介与读书感悟

按照 Yvonne、Sharp 和 Preece 的说法,用户和硬件产品或软件产品的交互可以分为四种模式,命令式(instructing)、对话式(conversing)、操纵式(manipulating)和探索式(exploring)。[6]用户界面又往往根据界面的技术实现手段分为图形用户界面、实体用户界面、自然用户界面等等。

从前面对比分析的物理逻辑和行为逻辑来划分,界面还可以分为功能型用户界面和行为型用户界面。前者用物理逻辑组织界面,以满足功能实现为主要目的;后者则强调用户体验,用行为逻辑来组织界面。

图 8 是同一款冰箱分别用物理逻辑和行为逻辑设计的不同用户操作界面比较(因为保密原因,部分细节这里不便展开)。图中左边是围绕物理逻辑的冰箱功能型用户界面信息架构,右边是在满足同样功能的前提下,按照行为逻辑理念重新设计的行为型信息架构。粉色和橘色的折线分别代表了两个典型任务在实际测试中基于不同信息架构上的操作路径。尽管两个不同界面的设计过程中都采用了几乎同样的用户研究方法,也同样针对典型用户分析了典型任务流程,并由此获得了任务流程中的所有功能节点,也就是反映到界面信息架构上的不同操作图标。显然,原本的设计把所有的功能节点,按照功能点相互之间的技术属性合理地整合在了一个简洁信息架构里;重新设计之后的信息架构明显要比原先的架构复杂,因为它并没有对不同任务路径中相同功能节点进行整合,而是保留了所有典型路径的完整任务流程,从而不可避免地造成了同一个功能节点在不同任务流中的多次重复。从某种意义上讲,或者说从功能属性自身分类或技术实现手段的合理性(包括后台程序的难易程度)角度来说,原先的信息架构可能是更合理的,从理论上这样的功能型用户界面能够满足完成所有任务的顺利完成,但是它要求用户在反复实践中学习和熟悉不同功能节点在信息架构中的分布。一个原本简洁的信息架构由于它和用户的使用习惯并不吻合,使得用户在完成一个任务的时候往往需要在不同的功能板块、不同的信息层级之间跳跃。另一方面,看似复杂的行为型信息架构,由于它的组织原则结合了典型任务的典型路径,实际使用的时候,它的路径更直观、便捷。其实,这个简单的案例还反应了不少交互设计师常常忽略的一个现象,那就是用户在使用过程中是不可能在大脑里呈现出一个完整的信息架构层级的,他也很少会通过全面了解信息架构然后进行操作的。用户在每一个决策的时刻,呈现在他面前的往往是一条路径上的简单选择,包括退出。也就是说,信息架构自身的复杂程度和用户使用的复杂程度是由不同的逻辑思维判断的。

图 8 智能冰箱功能型用户界面和行为型用户界面信息架构对比

结语

行为逻辑的提出旨在为交互设计方法的构建提供一个理念层面的支撑,并希望为区分功能型用户界面设计和行为型用户界面设计提供一些线索。这里有几点补充说明。

首先,由于从用户行为本身受场景的、情感的、人为的、社会的等多种不确定因素的影响,因此,行为逻辑的提出并非期待寻找行为流程自身的某种科学的甚至机械式的逻辑联系,而是强调以行为作为界面设计的本体,对界面设计的考量依照具体任务的流程合理性和用户体验来衡量。作为一个新的设计理念,行为逻辑可以指导设计方法,尤其是从情景设计到用户界面信息架构的转化。“讲故事”之所以成为交互或用户体验设计常常使用的方法,目的也在于通过设计故事在合适的“场景”、运用合适的“手段”、合理地组织“人”以及他们的“行为”,从而实现某种合理的“目标”,这是演示交互设计成果的方法。行为逻辑的提出有助于丰富设计理念和方法,但并不否定物理逻辑以及在物理逻辑思维指导下的各种设计方法。哲学概念的作用往往在于为解决困惑提供思想工具,而不是阐述原本就未必存在的真理。

最后,交互设计作为一个重要的设计领域,发展自己的语汇是必不可少的。单纯作为研究方向,交互设计可以追溯到上个世纪六、七十年代,然而,很多从事交互设计实践的人还无法用准确的语言描述交互的概念、判断交互设计结果的好坏。发展设计语言不是单纯的理论研究,而是在充分实践基础上,通过抽象,获得可以解释设计现象并为设计实践服务的概念。Donald Norman 教授引入“Affordance”概念,解释了很多看似简单,却又常常无法用传统设计语言描述的设计现象,他的研究为交互设计准则贡献了很多有用的语言或哲学概念。交互五要素、行为逻辑等概念的探索目的也在于通过丰富设计概念为设计实践服务。

* 本文相关基金项目

1、国家社会科学基金艺术学一般项目“基于国际前沿视野的交互设计方法论研究”(12BG055)

3、江苏省哲学人文社科基地“产品创意与文化研究中心”项目

[美]JennyPreece《交互设计》作品简介与读书感悟

2、江南大学自主科研计划重点项目基金“服务设计在公共事务管理中的应用研究”(JUSRP51326A)

注释

[1] 用信息架构可视化进行用户可用性分析是辛向阳教授在香港理工大学担任交互设计课程 主任时发展的方法,部分研究成果在 2010 年第四届全国新媒体艺术系主任(院长)论坛“研 究生课程大纲设计”、2010 年广州交互设计体验日“被忽略的交互本质”、2011 年交互设计国 际大会(香港)“信息与决策”等场合发表。

[3] Richard Buchanan,“Design as Inquiry: The Common,Future and Current Ground of Design.”In Future Ground: Proceedings of the International Conference of the Design Research Society,November 2004. Edited by John Redmond,et al. Monash University,Melbourne,Australia. 2005.

[4] Burke Kenneth,“Introduction: The Five Key Terms of Dramatism” from A Grammar of Motives. University of California Press,Berkeley,1969.

[5] 图中展示的是 2013 年 5 月改版前的主页。现在的主页和改版前虽有不同之处,但不妨碍 以老版本作为案例说明这篇文章所需要说明的问题。

[6] Yvonne Rogers,Helen Sharp,and Jenny Preece,Interaction Design: Beyond Human-Computer Interaction,Third Edition,John Wiley & Son Ltd,2011. P47.[7] 参见 Graham,George,“Behaviorism”,The Stanford Encyclopedia of Philosophy (Fall 2010 Edition),Edward N. Zalta (ed.)

[8] 参见 Norman,Donald. The Psychology of Everyday Things. Basic Book,1988.

© 2019 辛思想 | 获取授权方可转载

「辛思想®」是 XXY Innovation 旗下,围绕辛向阳教授的前沿设计思想传播平台,用思想引导目标,用知识启迪智慧。通过知识创造与思想传播,启发社会领袖、企业管理者和行业精英发现新的意义,为企业和社会创造深度价值。

上一篇 2023年03月04 01:42
下一篇 2023年05月31 06:26

相关推荐

  • 插画培训班学费多少,40岁插画师生存现状

    图片来源@视觉中国文|锌刻度,作者|孟会缘,编辑|李觐麟年轻人还在做速成变现的美梦“都说隔行如隔山,但是你离商业插画只差一门适合你的课程距离。”正如这则极具诱惑力的广告,0基础商业插画小白训练营凭“0

    2023年02月23 202
  • 敬礼的人怎么画,敬礼的人怎么画

    为庆祝即将到来的新中国成立七十周年大庆,敬礼的人怎么画,同时深化辖区未成年人思想道德建设,增进未成年人爱党、爱国、爱社会主义的情感,阿拉善北路社区党支部在钢铁路街道党工委的领导下,联合回民区图书馆及辖

    2023年02月15 223
  • 怎么画油画,简单小油画风景

    很多绘画爱好者尤其自学油画的朋友往往上来就直接描绘细节,其实这是不对的,这里小编不是说画的方式不对,如果对于专业画家是可以通过直接画法来完成作品的,但是由于初学者无法同时兼顾造型和颜色等相关技巧最后导

    2023年02月08 259
  • 琵琶多少钱,一般高档琵琶多少钱

    近年来,市场上兴起了一种叫枇杷芒的水果,长的非常像枇杷,不少网友疑惑枇杷芒是枇杷还是芒果?下面就详细的来了解一些这种奇特的水果吧!枇杷芒是枇杷还是芒果:枇杷芒多少钱一斤:根据2020年末12月的价格,

    2023年02月19 246
  • 怎样画彩虹,画一个美丽的彩虹

    彩虹,其实只要空气中有水滴,而阳光正在观察者的背后以低角度照射,便可能产生可以观察到的彩虹现象,彩虹最常在下午,雨后刚转天晴时出现,这时空气内尘埃少而充满小水滴,画一个美丽的彩虹,天空的一边因为仍有雨

    2023年01月01 256
  • 怎么画五角星,缠绕五角星画法

    1、打开UG10.0软件,新建一个模型文件,然后保存为:UG10.0如何新建窗口2、执行【草图——XY平面】,缠绕五角星画法,直接进入草图,激活多边形命令,画正五边形,辅助画五角星,点击完成,退出草图

    2023年02月03 246
  • 飞鸟怎么画,简笔飞鸟

    鸟语花香,让人心旷神怡,今天我们将分享14种漂亮小鸟的创作步骤,感兴趣的朋友跟着学起来哦!任何艺术都离不开生活和大自然,艺术的灵感都是来源于生活和大自然。鸟是花鸟画中的主角,它使画面产生动态,更丰富整

    2023年06月05 243
  • 锤子怎么画,锤子怎么画又简单又霸气

    今天老师来教大家用UG来绘制一个羊角锤效果图如下下面我们开始教程一首先画出锤子的头部,二然后给锤子的头部加上阴影线条,三接着画出锤子把儿,4最后给锤子加上颜色建模步骤:首先绘制草图,大致如下锤子画法如

    2023年06月04 228
  • 小朋友怎么画,画一个古风小女孩

    在应试教育的环境下长大的80后、90后们,尤其渴望自己的孩子能有更全面、更综合的发展。望子成龙的家长们对孩子素质教育的重视程度日渐增长。越来越多的家长开始关注孩子的艺术启蒙,各项才艺的启蒙年龄也越来越

    2023年02月03 233
  • 击鼓骂曹是谁,京剧击鼓骂曹唱词全本

    史上十大作死男:祢衡,发明了击鼓骂曹,狂拽炫酷不怕死,一路火花带闪电今天我们就不讲历史上厉害的人物了,说的太多了,就说点儿作死搞笑人物!请允许我用讲段子的方式写这期吧,京剧击鼓骂曹唱词全本,这一共有十

    2023年05月02 273
  • [德]赫达·哈默尔摄影《南京》作品简介与读书感悟

    普拉哈拉德和哈默尔,1908年生于德国斯图加特的赫达,自小热爱摄影。1933年,她来到中国,拍摄了大量中国北方的风光、文物古迹、民俗照片,名气渐增。那年夏天到冬天,赫达在南京拍摄了近千幅照片。1945

    2022年12月17 217
  • 传单怎么设计,传单怎么设计有吸引力

    一张编排得当、设计完美的版面可以给人美的享受,可以使设计在效果和功能上事半功倍。一本富有特色的宣传册可以长时间留存在人们的脑海里。宣传册作为以表现视觉形象为主,在编排上强调大气、讲究品位。抓住消费者的

    2023年05月10 283
  • 瓶子怎么画,简单的瓶子怎么画

    色彩塑料瓶学习水粉画可以更好地认识色彩,而水粉画中,最重要的便是调色的问题,不同水粉颜料的调配比例,简单的瓶子怎么画,能产生出不同程度的水彩效果。画塑料瓶,这种介于不透明和半透明之间的静物,有助于水粉

    2023年02月10 249
关注微信