1. 引言
微交互因具有“小而精”的特点,在设计上要求要做到尽量精简,正如Saffer所言:现代主义“少即是多(Less is more)”的座右铭也适合作为微交互的设计基本原则之一 [1] 。然而,运用如此方式描述微交互的设计概念显然过于宽泛且抽象,既有研究也未对微交互的属性特征拥有全面性的掌握。因此,有运动和变化效果的图形元素在设计手法方面尚未形成相对完整、明确或系统性的参考,而在实际执行设计工作时也常出现“依靠设计师的自身经验或习惯进行设计”的现象。虽然已有部分研究从时间、构件、情境、效果等多重面向探索了微交互在不同情境下的特点,并试图将其运用在设计实践上,但却并未基于某一维度对微交互的特征进行整理。本研究以梳理微交互的属性特征为目标,以弥补因设计师对微交互属性特征的朦胧感而导致其无法进行高效设计的痛点。
微交互虽为存在于界面中的设计细节,其介入却可带来界面“易用性”的提升,数位产品的使用也变得平易近人,而此时,“情感性”便成为更为高级的设计评估标准,Norman则认为用户在与产品培养情感体验之前,须先满足产品的易用性 [2] 。微交互是通过对静态界面施以动画效果而得以实现的过渡,不同触发方式和反馈结果的组合也为界面呈现提供了更丰富的可变性,理应可带来多重感官上的刺激。在当前的实务设计中,UX in Motion的创办人从“性质”上将微交互分为“UX原理(UX principle)”和“UI动画(UI animation)”两个类别。UX原理是借由微交互的静态视觉元素和动态变化效果提升界面易用性的方式;UI动画系指细腻的动画效果为界面带来美感上的愉悦(aesthetic pleasure) [3] 。因此,对微交互“属性”的探讨可建立在易用性和情感性两大基础上,并围绕情绪或感知的探究作为主要研究内容,为微交互的属性特征整理提供思路。
2. 从宏观到微观的界面设计策略:以微交互提升用户体验
微交互指的是借由界面上的元素运动或界面之间的演变效果所完成的内容转换,常被视是为对于“界面细节的设计” [1] 。相比于屏幕硬件或界面设计等较为庞大的议题,微交互的存在感通常显得比较弱,而学者Saffer却以小见大,强调看似微不足道的微交互在界面呈现和使用感知上的重要地位:在产品功能一致的情况下,微交互可起到主导产品整体经验、增加用户接受度以及建立品牌忠诚度的作用 [1] 。微交互作为强化界面信息传达、增加记忆点、引导用户获得更好体验的界面细节元素,可显示出其在界面整体感知中所产生的张力;而在微交互的设计实践方面,微交互也逐渐成为讨论热点:在2019~2022年Behance网站的设计趋势预测中,微交互所涵盖的动态设计(motion design)、动画设计(animation design)、动态图像设计(animated graphics design)等议题均与互动操作体验紧密关联在一起,且作为主要的界面议题被重点提及。微交互在学术界和产业界均被持续推崇和讨论,足以预见细节对界面的重要意义。
用户体验(user experience)是数字产品设计的重要策略,也是人机交互(human-computer interaction)的核心概念,其涵盖范畴虽广,但始终以用户的使用和感知为核心。数字产品的用户体验设计通常以实用性(utility)、易用性(usability)、愉悦性(pleasurability)原则为基石,也应当考量幸福、厌恶、喜欢等情绪方面的“模糊性体验感受(fuzzy experiential qualities)” [4] [5] ;而相比于泛情绪的评估方式(broad dimensions of affect),近年的研究则更加主张使用多维度的离散情绪(discrete emotions)加以衡量,以达到提高评估精准度的目的,包含从愤怒、厌恶、恐惧、焦虑、悲伤、快乐、放松、欲望等多个情绪面向的评估研究 [6] 。无论何种维度的评估都显示了“情绪要素”在用户体验上所扮演的重要角色,情绪应该成为界面设计中重点关注的对象。随著互动界面呈现效果的不断精进,用户对于优质体验的需求也在不断提升,导致设计师对界面细节的关注程度越来越高,再加上细节效果对使用情感的影响得到印证 [7] ,以上种种缘由皆对界面微交互的创造提出了需求,也为微交互和用户体验的关系钩稽奠定了基础。因此,本研究以微交互为研究对象,从不同维度进行探索和分析,以微交互的属性特征及内涵为研究目标。
作为在整个界面操作系统中的细节呈现,微交互的多重结构可为界面达成丰富功效、多元应用场景,故其所能传递的“感受”亦会具备复杂性。在设计实践时,Saffer认为可考虑从结构属性的角度将数字产品拆解为“触发(trigger)”、“规则(rules)”、“反馈(feedback)”、“回圈和模式(loops & mood)”四个小单位,并以微交互作为整体系统的建构依据 [1] [7] 。微交互的复杂结构导致不同层次的属性特征,同时亦增加了设计难度。一方面,微交互所产生的情感或因构成元素的丰富性和应用场景的多元性而与静态界面的情感存在较大差异;另一方面,微交互由多重结构与因素组成,易导致更为复杂、甚至矛盾的情感,不同的个体在接收到复杂的外在刺激时,容易产生某种或多种复杂、模糊、易变的情绪感受。复杂的情绪对于微交互具有更佳的用户体验提出了更高的要求,在设计时,应根据应用情境和使用需求进行设计元素的挑选和组合,以利提升人机界面之用户体验。
Saffer在其著作《微交互:细节设计成就卓越产品》一书中虽很少使用或提及“用户体验”一词,但始终将界面的交互方式与用户情感、内在思维关联在一起,认为微交互可激发积极的心理状态。有鉴于此,追求更佳的用户体验成为微交互设计的优先考量问题,而“如何提升用户体验”则成为微交互的主要研究议题。1970年代,网页的卷动效果由粗糙的逐行跳动变为顺畅的卷动像素,在被Lisa电脑纳入后,苹果公司又在卷轴的末尾加上可直接跳至网页开头或末位的箭头,后续又反转卷轴的操作方式并形成

Figure 1. Reverse scrolling on Windows (left) and natural scrolling on Mac (right)
图1. Windows系统的反向卷动(左)与Mac系统的自然卷动(右)
Mac系统独特的“自然卷动(Natural Scrolling)” [8] ,如图1所示。该卷动效果被认为是对微交互的精心设计而提升用户体验的经典案例,虽执行的是小范围的改善,但却反应的是设计师对用户心理和行为操作的重新认知,每一次的设计迭代都在进一步契合用户的心理实现。因此,这正印证了Saffer所提出的观点:用户对产品整体经验的产生仰赖于细节所带来的感受 [1] 。
3. 易用性与情感性的平衡:易用性是微交互用户体验设计的基础特征
易用性并非只考虑界面功能性需求,但是与产品的功能和使用体验有关。在产品的使用评估方面,易用性是产品或服务设计时所需要考量的重点,其针对某项服务的质量、可靠性、生产力的目标程度所形成的评估标准,以及目标用户在进行使用操作时对界面所做出的有效性及使用效率上的主观衡量 [9] [10] 。在使用体验方面,用户体验的主旨是建立某种心理实现,而易用性的优劣则是用户体验的重要指标,主要依托于用户对产品或服务的反复使用后而产生的感知和反应 [11] 。因此,在微交互上叠加易用性对于界面来说是一种可发挥影响力的设计工具,其明确功能定义、视觉引导、给予反馈的设计特征,可达成吸引和引导注意力、减少认知负荷和提供有效协助以产生良好的使用经验的目的 [7] [12] [13] 。
微交互属于界面设计的内容之一,理应因具有易用属性而达到提升用户体验的目的。一方面,Saffer所提出的宏观概念甚至认为微交互可以与产品的主要功能相提并论,它们是产品外观给用户传达的感觉,可以达成主导整体经验、增加接受度以及建立品牌忠诚度的作用 [1] ;另一方面,如今透过科学框架或量化研究来衡量用户体验质量是现今学术界普遍认可的方式之一,也是Saffer推崇的微交互研究方法 [1] ,可成为以微交互易用性特质提升用户体验的佐证。诸多实证研究也从科学视角对微交互在易用性方面的效用做出了验证,本研究基于设计实践提出微交互易用性特质的三大内容,分别是“适宜性”、“引导性”和“叙事性”:
(一) 适宜性:当下的使用情境是否适合加入微交互是执行界面设计时的首要问题。并非所有的界面转换都需要微交互,意即微交互的融入须对界面使用产生正向功效,不可因微交互介入反而对使用造成干扰。如图2所示,“浮动按钮(floating action button, FAB)”(Google material design中所提供的设计参考)是一个具有争议的微交互案例,Pibernik等学者认为该形式的微交互虽具有收纳的功能效果,但动态效果对小屏幕使用造成易用性方面的干扰 [14] 。因此,建议在小屏幕(如手机)的设计中延续使用静态导航式按钮,以利于发挥其易用性特质和良好用户体验的生成,换言之,否定了在小屏幕情境下使用浮动按钮来提升易用性的微交互设计方案。
(二) 引导性:微交互借由触发方式和反馈效果所产生的引导性是第二层次的易用性问题。在动态效果生成之前,界面中的静态按钮需要具有表达功能意涵、引导用户点击的作用,微交互可透过具有直觉性和吸引力的触发机制来引导用户进行界面操作,也需要考虑不同的触发位置和形式对心理状态和行为决策所产生的影响 [15] [16] 。在界面元素发生变化的过程中,微交互亦具有抓住用户视觉注意力于渐变对象上的易用性功效,动态效果透过界面演变增强界面的易用性主要体现在提升吸引力以及强化关键因素等方面。
(三) 叙事性:微交互的变化过程所产生的叙事效果或因果表达是第三层次的易用性问题。动态效果的质量影响了微交互的力量,主要表现在利用短暂变化“讲故事”的能力。动态效果除了可降低使用负荷之外 [17] ,在图像真实感、过度流畅度、互动风格三方面的表现会直接影响到用户对状态变化的理解,甚至是决策结果。因此,对于细节的精心设计可将产品的特色时刻(signature moment)传递予用户。
易用性是微交互的基础属性特质,其主要意义在于避免认知障碍、操作错误或糟糕体验,这与静态界面的设计原则保持一致。界面设计认为,易用性不佳的界面会让用户遭遇到反应延迟、操作疑惑,甚至直接产生不满的情绪,而微交互的融入加强了用户在逻辑结构、反馈内容、意义认知等方面的理解能力。例如Google帐户的信息填写界面也善用了微交互的易用性特质,利用视觉化(visualize)的输入方式达到引导使用注意力、使用输入过程中的即时反馈功能达成理解力的提升,以及通过使用支配力的提升增加预测性的作用,以上动态效果都帮助用户准确了解界面意涵,减轻认知负荷(cognitive load),以及达成强化界面信息传达的作用,与此同时,也反映了用户对简单、易懂、好操作的界面使用期待。
4. 情感化细节设计的力量:微交互引发用户的情绪共鸣与参与度
在界面设计原则中,除了界面易于使用与学习之外,还应特别注重用户的满意程度、亲和力等方面的状况。这点在Norman的情感设计理论中亦有体现,其将人类对于产品的情感划分为关注本体外观的本能层次(visceral level)、享受使用乐趣和效用的行为层次(behavioral level)、思考产品合理化和智慧化的反思层次(reflective level) [2] ,并认为使用过程中所产生的积极情绪可帮助用户学习、使用和决策。而从消费角度所反应的行为决策层面来看,用户对产品的需求已从理性转变为感性,当处于积极情绪时,用户会更倾向于对产品采用信任的态度,产品所传达的感知程度、注意能力、记忆共鸣、思维模式、想象能力等心理现象也都会表现在用户态度之上,进而引发肯定或否定的情感 [18] [19] 。因此,易用性是微交互的基础,在静态界面上适当的使用微交互对传达功能性方面具有重要作用,而情感性作为易用性的上层建筑,在当前微交互的研究中仍处于相对空缺的状态。为推进微交互的研究深度,本研究的另一重点聚焦于以易用性为基础的情感属性之探究上,从易用性的角度为微交互建立情感属性的分类,进一步归纳其可能产生的情感效应,并将之运用在实务设计之中。
用户体验是用户和产品、系统或服务在交互使用过程中所产生的感知,而以用户为中心的设计(user-centered design)被认为是从体验出发,并充分考虑感知和情感满足的设计方式之一,其特点在于有利于达成用户在知觉与意识两方面的需求与预期的体验目标。而产品细节所能传递的情感是影响使用感受的重要因素,有时甚至比实用性更为关键,正如Eames等人所言,界面细节除了能产生易用性之外,还可以产生愉悦的情感 [20] ,故界面微交互应当也包含对使用乐趣、界面吸引力等方面的评估 [21] 。当下,大多数的微交互研究仍然着重于易用性的评估,但也有少数的研究确认了微交互之触发和反馈机制对于情感的影响,而情感主要包括“情绪性”、“时间性”和“直觉性”三层次:
(一) 情绪性:微交互的介入可通过唤起使用情绪而提升参与者的感知体验效果是情感的第一层面。在线上学习界面中增加触发和反馈机制,有利于唤起学生在数字化学习过程中的互动积极性 [22] ;而前文所述的浮动按钮虽不利于易用性,但可从美学角度提升用户体验,为界面增添趣味性、创意性以及时尚感,继而令用户更加向往互动操作 [14] 。同时,该结论在穿戴式设备使用感知的相关研究上也有体现,健康信息若以动画形式呈现,会提高用户的接受度,并产生积极情绪,研究结论同时强调用户更喜欢的是动画而非图像界面 [23] 。因此,当微交互的呈现能够激发积极情绪时,用户的接受程度更高。
(二) 时间性:在设计实践中,设计者通常对物件变化或界面转场动效所花费的“时间”多加考量,其理论内涵在于微交互可帮助用户随著时间性的连续变化,建立更为合适的任务型心理模型(task-centered model)。有研究透过对比不同类型的反馈形式,证实卡通类型反馈性动画效果在页面加载(page loading)中的运用可减轻用户对等待时间的感知 [24] ,此结果与Matlin和Foley的观点一致,即在令人愉快的环境中,用户会觉得时间过的更快。在短短数秒的使用中所带来的感受,却对后续的互动参与、体验印象及使用效率都产生重要的影响。因此,“时间性”成为微交互情感性的第二层次内容。
(三) 直觉性:微交互的呈现形式可唤起用户的使用经验,所产生的“直觉性”感知成为第三层面的情感内容。多位学者已经验证了产品或服务的先前使用经验与用户感知、行为与评价等主观因素之间有显著相关性 [25] [26] ;而在数字产品的使用效率方面,具有相关经验的用户则更容易适应和驾驭各种操作任务 [27] ,且比经验较少的人操作的更好。微交互的呈现和操控若建立在过往的经验之上,其所产生的“熟悉度”或“习惯”除了会影响用户的感受和行为判断之外,还会影响用户对界面的直觉性。因此,在进行微交互设计时,设计师应充分考虑用户的界面操作经验,以利产生更佳的用户体验。
微交互透过静态和动态效果之间的相互配合达到提升体验感知的效果。由于用户在使用产品过程中因受到某种“刺激”而产生的感觉或印象,会对用户体验和使用意愿产生积极影响。部分研究也验证了微交互所传达的正面情感在提升使用主动性和持续性、降低疲惫感等易用性方面都有重要作用,甚至可激发用户的互动行为:有研究发现在界面上使用动画效果所带来的情绪效用最高,而数字的呈现形式对情绪唤起最具效力,有此结果可预测,界面的视觉化效果在唤起用户情感反应的同时,亦可增强界面之易用性。过往的研究以微交互的易用性特征为主要设计考量,试图在界面操作避免疑惑、障碍和错误为目标。但本研究认为易用性只是实现用户体验提升的基础,而情感性特征成为微交互设计中需要进一步追寻的对象,它代表了用户在心理层面对情感满足的追求,主要通过微交互的形式来有效迎合使用上的心理舒适和认同,从而达到刺激情绪和维持长期使用的目的。
5. 结论
微交互作为界面中对细节的设计,虽“小”却对用户体验具有效益。本研究以微交互设计实践的主要手法为基础,延伸至微交互的学理研究,从易用和情感两大主线对微交互的属性内容进行不同层次的梳理和剖析,其中易用性特征是微交互的设计基础,其包含适宜性、引导性和叙事性的内容,而情感性特征是易用性特征的上层建筑,涵括情绪性、时间性和直觉性质的内容。易用性具有提高效率的功效,以及情感性的感知唤起都会对用户体验具有影响力,易用性和情感性两大特征应秉持相互平衡的原则,这一结果也基本迎合了营销学中经常以“享乐”和“有效性”作为二维产品之框架。因此,在未来微交互的设计中,可考虑从易用性特质和情感性特质所包含的内容入手,以执行微交互的设计实践。
基金项目
本研究由“2023年度江苏高校哲学社会科学研究一般项目”支持,项目批准号:2023SJYB0171,项目名称:以微交互为设计核心的网购界面研究。
注释
①图1来源:网页引用, https://bootcamp.uxdesign.cc/natural-scrolling-mac-vs-reverse-scrolling-windows-e48656275081
②图2来源:网页引用,https://m1.material.io/components/buttons-floating-action-button.html#