基于中介论的动态界面设计理论和教学实践研究

罗军

摘要：动态界面一方面通过交互操作实现“工具中介”，另一方面通过“符号中介”传达意义，两者是双向互动的过程，称为“双向中介”。研究以维果茨基的“中介论”和“活动论”为理论基础，以iPad的5种代表性操作为研究对象，分另U使用“工具中介”和“符号中介”的观点分析其交互特色和符号意义。理論通过推出一款APP的原型设计应用于教学实践，证实了理论的可靠性，而具有符号意义的视觉运动能够作为打动消费者情感需求的重要设计手段。

关键词：动态界面 视觉运动 中介 符号学

中图分类号：TP311.5文献标识码：A

文章编号：1003-0069（2018）12-0102-03

Abstract： The visual motion of the motion interface affects the fluency of interaction and the user experience. To study the manifestation and function of visual movement and the significance of aesthetics and culture are beneficial to theoretically further enhancing the importance of interface design to emotional design research. Based on Vygotsky's "intermediary theory" and "theory of activity"， taking the iPad's five representative operations as the research object， the study use "tool intermediary” and "Symbolic Intermediary" perspectives to analyze its interactive features and symbols significance. On the one hand， the dynamic interface realizes “Tool Intermediary” through interactive operations， on the other hand， conveys meaning through “Symbolic Intermediary”，its the two-way interactive processes called “two-way Intermediary”. This theory introduces a prototype design application of APR It is confirmed that the theory has reliability and visual movement with symbolic meaning， which can be used as an important design method to impress consumers1 emotional needs.

Keywords： Motion Interface Visual motion Intermediary Semeioloqy

引言

“动态媒体界面”是指完全执行动态图形程序的虚拟界面（以下简称“动态界面”），自2010年以来，国内艺术设计学科对动态界面设计理论研究已取得了明显的进展，成果大多集中在网页、扁平化图形设计、手机界面等类型上，内容以探讨功能设计为主。而据近三年核心期刊检索结果，关于动态界面的研究已显示出多元化的走势，虚拟服务、多模式操控、情感化设计、文化性建构正成为新的研究热点。

我们注意到近三年成果有“一个现象”和“两个趋势”，“一个现象”是指关于视觉审美、设计理念、设计原则、用户分析等传统的大类研究仍占主流，“两个趋势”一是指越来越多的研究开始投向娱乐、民生、广告等热点产品主题，研究对象是与此密切相关的虚拟服务界面，二是指各种分散的热点研究，如多模式操控、文化性建构在跨学科理论支持下，逐渐发展壮大。

国外人文学科对动态界面的理论研究开展较早也较为活跃，与国内侧重于关注专业界面设计和热点产品开发相比，国外研究更侧重从哲学、心理学层面，探讨虚拟运动的规律及其美学价值。从研究的多样性角度看，国内艺术学科缺少这种从横向层面贯穿各种动态界面的思辨型研究，因此，丰富研究手段，拓展理论依据，揭示动态界面“运动”的视觉效应是本文的研究目的。

本研究使用哲学“中介论”研究动态界面“运动”的视觉交互意义、符号象征与隐喻，尝试突破以往主要利用艺术学方法研究动态界面的局限，试图将研究进一步引向深入。研究将把对“中介论”的分析与理论发展转变为可实施的教学手段，并借以推出一项设计教学实验，达到验证理论具有一定可靠性的目标。

一、社会文化学一般理论综述

研究的理论基础是维果茨基的“中介论”和“活动论”。“中介论”认为所有的人类活动都是通过符号、物质工具和人工制品的“中介”才能与世界发生联系，例如，心理活动以符号和语言为中介，而劳动则是以物质工具为中介。维果茨基学派的Wertsch[1]认为，任何工具与人工制品都是一种经人类文化创造和历史演化而来的“中介手段”（Intermediary Methods），他进一步细分出心理活动中存在着两种中介，一为外显的中介，即语言或符号，如：图表、地图、图解等，是经人创造，可传授推广的中介;另一种则是内隐的中介，是个体内在意识创造出来联系两个刺激物的工具，因内容高度抽象，而无法交流和传播。例如：个性化的符号标记、口诀、行话即为内隐的中介。

按沃茨的观点，数字产品及其界面是一种中介手段，对“行为”（Action）和“活动”（Activity）的设计是界面设计的中心任务，而真正理解两者，唯有将其置于特定的文化、历史和制度环境中。Wartofski[2]进一步将“中介手段”发展为“人工中介物”（Intermediary Artifacts），并将其区分为三个层级：一级制品是物质生产工具，二级制品是一级制品的产品，以艺术品为代表的是三级制品，是经主体自觉加工，想象和创造出来的精神产品，能够影响人们的世界观和实践方式。而本文研究的动态界面则是一种贯穿于三个层级的中介制品。

动态界面不仅是一种引入了多媒体标准、多模式文本语言、包含符号化的色彩、字体和运动在内，具有社交功能的人工制品，它更具有象征性，同语言符号、物质工具一样在人类活动中充当中介作用。这一特点与人机交互领域的研究视角有很大区别，后者通常从认知学和功能主义的角度分析研究界面。

一般的人机交互研究视界面为一种能执行某种功能的一级制品，其工具属性是研究出发点，研究方向通常集中在可用性和易用性上，并不关注对文化传播、符号学的研究。运动和动画甚至还被看作负面的元素，被学术研究回避。如著名的可用性专家Nielsen曾提出“减少使用动画，提高搜索与浏览效率”的观点。[3]

从近三年来文献检索情况来看，国外人文学科对界面视觉运动的关注表现在对哲学思辨、美学体验的探讨上。例如，Ryo[4]探索了界面设计的美学，类比了戏剧和舞蹈表演，认为界面运动如同肢体语言一样，不仅可以叙事，更重要的是能够传递与激发感情，因此，界面的视觉运动以及运动对用户情感的影响，两者关系不可分割，“流畅性”和“柔韧性”是两个设计评价标准。然而，Deny[5]指出，肢体动作与界面元素的运动有很大区别，后者的运动是完全程序化的。

一般认为“用户参与”（Customer Participation）是在产品或服务生产过程中顾客承担一定生产者角色的为获得情感、个人实现等心理层面需求的资源（智力、体力、资金、感情等）投入行为。如何通过界面设计方法提升用户参与？Escudem[7]认为，用户的社会文化、教育、性格背景干差万别，不可能达成一种能唤起积极心理体验的通行的设计方法，不过，他指出了“意义”和“感觉”可作为设计价值的突破口，能够唤起一定的积极的心理反应，“意义和感觉在本质上是相互联系的共同体，意义指出了感觉具有可描述性;感觉则是主体对可感知对象的评价”;Ryo[8]則认为，体验既不是人工制品的彳寺点，也不是用户的生理彳寺点，体验产生在使用过程中，并且这种主观感受不可预测，但是，设计师有责任了解用户的社会文化背景，需求和愿望，创造出有利于提升用户参与的体验环境，并对动作和动作的意义给出明确的指示。

为了阐述界面设计方法如何促进用户参与，我们需要总结界面中介的活动机制，它包括如何执行操作、如何传达符号意义两方面的内容。

二、工具中介和符号中介

为阐述界面中介的活动机制，研究首先区分了工具中介和符号中介的概念和作用。

维果茨基“活动论”认为工具是实现目的的手段，“一种实现解决方法的辅助手段”[9];维果茨基学派的列昂捷夫肯定了这个观点，他对“活动”（Activity）进行了细分，活动可分为动作（Action）和操作（Operation），工具是一系列动作和操作实施的对象。在工具和符号的作用上，维果茨基认为工具是“外向型的，它引起客体的变化;符号是内向型的，它不引起客体的变化，而是影响人的行为”。[11]本文使用的“工具中介”词，也是将界面及其运动视为一种工具。

符号即意义，符号中介的作用有别于工具中介，其重点在于沟通用户与传达意义。电影、图像、音乐等任何产品都能够传达意义，其本身也是符号。正如符号学家罗兰.巴特所言“所有的社会存在物都具有意义”。[12]符号的意义并非一成不变，而是在社会实践中不断地演变和重构。因此，产品或是界面的意义，可能因国家、群体和个体的不同，而有很大的区别。

工具与符号的区别既清晰又模糊，或者说两者根本就是一个统一体。Paul和AndSOn[13]则指出，“清晰的工具行为和符号行为只存在于理论上的直尺刻度中”，他把符号中介与工具中介之间的互动称为“综合性中介”。执此观点者还有Mir0nenk0[14]，他也认为两者不存在明显的界限。

三、双向中介的概念

“双向中介”是指动态界面既可以充当工具中介，也可以当作符号中介。根据不同的产品、用户和使用环境，界面的符号中介和工具中介作用会发生相应的变化。例如，有些界面表达的是视觉表现性、审美性、符号性，而另一些界面更强调工具性和任务性。

“双向中介”的互动关系模型（如图1），在非使用状态下，工具和符号面积相等，中间的灰色模糊边界显示了两者之间存在着一个使用行为和用户阐释用途互动过程，阐释过程伴随着使用行为而产生和延续。反映在灰色边界上，随着阐释过程和使用行为的此消彼长，灰色边界时而收缩或时而增长。

四、案例分析

本文选取了一系列代表性动态界面案例，用双向中介理论进行分析，试图发现界面的工具性和符号性之间的联系，验证并完善理论。

在众多类型的动态界面中，我们选择了iPad的界面，理由有二：1.鉴于研究主题是双向中介理论，所以案例必须同时具有工具性和符号性的特点，而iPad平台拥有丰富的资源，为研究提供了便利;2.iPad的应用界面设计长期以来被认为是行业的标杆，各种效仿源自于此，一些经典的动效简单而自然，集成了研究双向中介的种种可能性。

我们从iPad选择了5个代表性的操作案例，力图揭示iPad动效在心理学、符号学上的意义。

（一）打开与放大图片：第一个案例是iPad的相册应用，用户可以用“缩放手势”预览、打开、放大、旋转图片。根据工具中介的观点，由于iPad采用了电容触摸屏技术，支持用户使用直接和趣味性的手势进行操作。

“经验隐喻”是本文为了进一步分析动效如何向用户传达意义而使用的一个修辞学术语，“经验隐喻”的实质就是通过对一类事物的经验来理解或推理另一事物的经验，由于人的身体经验（直接经验）是一切认知的基础，以此为“中介”必然具有隐喻性。因此，“缩放手势”隐喻了人们在现实中搬运、移动、打开、拉扯物体的身体经验，使虚拟的动作成为一种工具性的操作。

（如图2）在打开与放大图片的操作中，“缩放手势”主要发挥了工具中介的作用，其结果增加了工具区域，同时收缩了符号区域。

（二）上下滑动相册界面：当手指在相册界面上下垂直方向滑动浏览日寸，界面的右下角就会出现一个灰色滑块，滑块的位置随着用户浏览位置的变化而上下变化，当浏览到达界面底部时，灰色滑块就会停止运动，如果用户仍然坚持下滑，这时不仅会感到“阻力”，而且灰色滑块还会出现向上的反弹，长度变长。

“反弹”是界面虚拟出的“力量”，隐喻的是物理中的“作用力等于反作用力”，现实中大量存在着这类体验，比如划船、用球撞击地面、跳高、打弹弓等。除此以外，iPad还把大量的现实体验搬入界面，让用户在操作中体验虚拟的物理力，使界面操作变得简单和趣味。

（如图3）“虚拟力”反映了“符号中介”逐渐强势的过程，手指下滑至界面底部，滑块停止运动，工具中介结束;继续下滑，触发符号中介，不仅感到“阻力”，而且滑块轻微“反弹”，符号中介再次提示浏览已达界面尽头。“虚拟力”并不是一种支持上下滑动的力量，其作用是借助趣味的符號语言传达“底部”的意义。

（三）打开与切换应用：这个案例与打开应用的方式，以及“多任务切换”有关。

用户打开应用只需要手指轻触应用图标即可，如果要切换至另一个已在后台运行的应用，有多种选择方式：

A.按Home键回到屏幕主页，或者在当前界面用五个手指向内做一个捏合的动作即可回到屏幕主页（相当于按一次Home键）。然后轻触应用图标。B.从iOS7开始，系统开始支持“多任务管理”一用四个手指在主屏上向上滑动，即可从下方调出多任务栏（相当于按二次Home键），然后点按应用图标。C.在打开多个应用后，四指在当前应用界面向左或向右滑动来切换多个应用。

在主页面上，四指上滑将调出多任务栏，切换应用会造成另一种运动：滑动当前应用界面向左转动，直至退后完全成为背景，同时下一个应用从屏幕右边背景转出成为前景，如此循环。从工具中介角度看，使用滑动手势切换程序，造成界面的循环转动;而从符号中介角度看，这种转动隐喻了类似走马灯的多面性。

在用户已经打开了多个应用的前提下，四指在任一界面左右水平滑动，将导致又一种空间关系的产生：所有的应用界面呈一字排开，并随着手势滑动的缓急，而周而复始地水平运动，如同处于一条传送带上。

滑动切换应用能够让用户选择“历史记录”中（按最近一次使用进行降序排序）的应用，这是iPad为一些需要在2-3个应用频繁切换的用户所提供的功能，比使用“多任务栏”更有效。但如果用户要选择的应用并非“历史记录”中应用，他就不得不浏览其他不需要的应用，反而降低了使用效率。因此，滑动切换能否让用户髙效处理任务，取决于用户的任务目标是否清晰，应用是否已在后台运行，否则，“多任务栏”是更好的选择。

从符号中介角度看，iPad在切换应用功能上呈现了两种不同的空间运动：一、使用多任务栏切换应用，“多任务栏”隐喻的是人査阅书架的动作，应用出现形式是循环地“涌现”和“推远”，但这些应用很可能不是用户所需要的，它更适合初期展开的任务;而使用滑动手势切换，它隐喻的是人随手翻阅参考书的动作，用户可以方便地看到历史记录应用的相邻关系，这种方式更适用于已经全面展开，并且有稳定的工作模式的任务。

（如图1）在这个案例中，手势操作引发了界面运动，完成了工具中介的作用，也在同时传达了运动的意义，隐喻了两种类型的空间转换，以此发挥了符号中介的功能，所以，工具中介和符号中介的作用几乎是相等的。

（四）移动和编辑应用：在iPad主界面，手指轻触应用图标约停顿一秒，图标队列便出现轻微的“扭曲”，随即一个“x”出现在图标的左上角，此时用户既可拖放并重新排列图标，也可轻触“x”删除这个图标。

在这个案例，“扭曲”的符号意义更明显，（如图3）iPad使用了“拟人”的手法——应用图标因为“害怕”被删除和移动，于是“吓得发抖”产生“扭曲”，通过幽默的动画效果向用户传达了应用可删除、可移动的意义。

（五）iBooks电纸书应用：iBooks的主界面是一个虚拟的书架，上面排放着用户下载的书籍。按左上角“Store”按钮，书架立刻翻转，显示出位于另一面的在线书店。

手势触发了书架的翻转，界面空间转入在线书店，这是一个工具中介动作，但从符号中介角度看，翻转的意义并不简单。“互文性”是本文引用的另一个修辞学术语，其本意是指各种文本之间的相互借鉴、参照和解释气此处的文本不仅是一本书，也可以是电影、图片、服装等任何待解读的媒体，比如，正文与注释和典故就是一种典型的互文关系，互文性拓展了知识的边界。在这里，翻转的书架隐喻了神秘、魔幻和深藏的财富，与用户在《蝙蝠侠》《夺宝奇兵3》等电影以及《魔兽世界》游戏中产生的密室印象建立了互文关系。而且，具有一定趣味性的动效，也有助于将用户的购物情绪维持在一个相对兴奋、好奇的状态。

五、教学实践应用

基于“双向中介”论的研究，本研究在《界面原型设计》课上推出了一项设计实验，分别对工具中介和符号中介进行验证。该课程为每年11月份开课，考虑到第二年的春节，我以“送礼”为主题，要求学生用较短的时间，提交一款基于移动平台的简易社交应用的原型设计，设计包含两个阶段，第一阶段应连贯体现四个基本工具性动作：一、添加;二、选择;三、输入;四、发送。

为了培养学生快速表达方案的能力，我示范了用定格动画来阐释原型设计的方式，旨在更直观地分析动作和运动的联系，避免学生在一开始陷入细节的设计。

（如图4）原型设计采用了iOS常见的表单界面，依次采用以下手势：

A.点击“添加”，触发了界面运动B.新界面从屏幕右边进入C.键盘从下方弹出，用户输入接收方IDD.用户输入礼物名称E.用户或点击通讯录图标，通讯录从下方弹出，可从QQ、微信通讯录中选择接收方F.用户确认选择接收方G.用户或点击礼物来源图标，购物APP从下方弹出，用户可从中选择礼物H.完毕后用户发送该礼物。

第二阶段，设计将通过表现运动的符号意义，制造趣味化的运动效果达到阐释符号意义的目的。

（如图5）：

I-0接H点击“0K”发送礼物，“发送”引起了界面的三维运动，运动将表单界面快速折叠，隐喻了寄送包裹的动作，呈现了运动的符号意义。

P、Q纸造型的树隐喻了祈愿树，礼物被放置在祈愿树下。

R.接收方转动祈愿树，选择并点击自己的礼物。

S-X礼物被选中，自动打开，接收方确认接收。这里，作为礼物的魔方具有符号意义——它可以是任何一种在线购物，例如互动游戏、音视频、电子书、电子贺卡、红包等。

结论

研究发现，案例一，手势动作直接导致相应的视觉运动，这种运动与基本的界面操作相关，主要发挥的是“工具中介”作用;案例二、四，手势动作直接导致了相应的视觉运动，但“工具中介”和“符号中介”存在着操作的先后秩序，和因停顿造成的运动中断，而符号中介在中断后都呈现了主导的作用。案例三，“工具中介”和“符号中介”几乎是同时发生的，作用相等;案例五，“工具中介”和“符号中介”的界限是模糊的，用户对动作的体验，以及对运动的符号意义的理解程度，与自身的文化背景，所积累的阅读经验有重要的关系。

研究指出了“双向中介”应用于实验和产品设计方法的可能性，促进设计师从符号和工具两方面去思考如何通过视觉运动打动消费者的情感需求。为了提升用户的参与性，设计师需要超越纯功利性的设计目标，去理解用户的使用动机与背景和所处文化背景，把界面当作一个具有丰富内涵的文化产品进行设计。正如诺曼所指出的，“一个功能出色界面很可能也是一个有趣的界面”。[15]

基金项目：本文系南京工业大学2016年社科研究基地项目“工业设计创新系统理论研究基地”阶段性研究成果（项目编号SKJD005）;2017年南京工业大学教育教学改革研究课题“以整合技能为目标的数字媒体艺术专业培养方案改革研究”[南工教（2017）115号]阶段性成果。

参考文献

[1]WertschJ.Voices of the mind：a sociocultural approach to mediated action[D].Cambridge：Harvard UniversityPress，1991.

[2]WartofskiM.Models：representation in scientific understanding[D].Dordrecht：Reidel Piiblisliing，1979.

[3][美]尼尔森：潇湘工作室译，Web可用性设计[D].北京：人民邮电出版社，2000：135.

[4][8]RyoK.Multi Modal Biometric for Theater Application-Face and Fingerprint[J].

Computers and composition，2014（4）：413，433.

[5]DenyJ.Designing guidance for interpreting dynamic visualizations：Generating versus reading explanations[J].Journal of Research in Science Teacliing.2005（2）：147.

[6]粟路軍.国外有关顾客参与的研究综述与发展方向[J].湖南财政经济学院学报，2013⑶：61.

[7]EscuderoC.Agents for the User Interface[C].Proceedings of the 1st international conference on Intelligent user interfaces.New York：ACM Press.1997：362.

[9][10][11]王光荣、郭本禹：文化的诠释：维果茨基学派心理学[D].济南：山东教育出版社，2009：87+101+123.

[12][法]巴尔特：李幼蒸译，符号学原理[D].北京：中国人民大学出版社，2008：76.

[13]PolkD，AndsonEM.Integrated Mediation[J].Computational Cognitive Science，2003（7）：357.

[14]MironenkoIA.Concerning Interpretations of Activity Theory[J].Integrative Psychological and Behavioral Science.2013（4）：376.

[15][美]诺曼：付秋芳等译，情感化设计[D].北京：电子工业出版社，2005：194.

[16]张芮.儿童教育类游戏卡通形象及界面设计初探[J].设计，2017，30⑷：137-139.

[17]孔祥富，谢胜楠.基于无意识行为在交互界面设计中的研究[J].设计，2017，30（5）：70-71.