社区课程活动导航作者申请报告
CxHub客户体验社区-用户研究、体验爱好者学习交流社区,专注客户体验(CX)研究。
社交媒体
官方合作伙伴
联系我们
联系邮箱:longguofu1024@gmail.com
公司地址:深圳市宝安区华联城市全景 G 座1117
网站首页友情链接关于我们商务合作隐私政策
© 2025 CxHub | 粤ICP备18009813号-6
社区课程活动导航作者申请报告

用户界面之外:触感体验

关注 CxHub编辑部 好文分享一起成长

本文转载自:WeDesign

使用数字产品时你是否有种不真实感和虚拟感?数字内容的多样化虽然丰富了我们的生活,却也让我们逐渐脱离了现实世界。相较于视觉和听觉,触觉作为一种根植于人类本能的感官,能更迅速地将我们与现实世界联系起来。本文将探讨触感反馈如何融入到产品设计中。

1 为什么关注触感

随着数字化生活方式的普及,我们每天花费在屏幕前的时间日益增加,在光滑的手机屏幕上与他人互动、获取信息。从文章到音频、短视频、直播,数字内容的形态日益丰富,却让我们离真实世界越来越远。数字化的生活方式带来便利的同时,我们对现实世界的感知和体验也在减弱,而触感是一种物理属性的回归。

人类能感知到的触感反馈主要有振动、纹理、温度、压力和电触觉等,而我们日常使用的智能设备主要是给予振动的反馈。借助振动,移动应用有机会模拟更真实的物理体验,增强用户与数字界面之间的互动。

2 触感的表达

在手机上滑动开关时时,会有模拟真实开关的触感;在使用密码解锁屏幕错误时,会有手机被上锁的直观感受。这些丰富的触觉效果在我们的手机上是如何被表达?

触感的分类

iOS把触感反馈归类为瞬态事件 (Transient Event) 和持续事件 (Continuous Event)。

  • 瞬态事件:短暂且紧凑的触感反馈,通常模拟轻敲或脉冲的感觉。

  • 适用于快速的动作响应,如轻触屏幕上的按钮。

  • 持续时间较短,给人一种即时的反馈感。

  • 持续事件:提供较长时间或持续的触感反馈,类似于持续振动的感觉。

  • 适用于模拟连续的动作或效果,例如长时间的警报或游戏中模拟汽车引擎

  • 让用户感受到一个动作或过程的持续性,适用于需要长时间反馈的场景。

简而言之,瞬态事件表达行为的即时性,可用于指示任务的完成状态,例如常见的按钮。而持续事件可用于表达操作需要较长时间的反馈或是拟持续发生的效果,比如在健康类应用中进行呼吸训练时,用持续的振动来引导用户保持正确的呼吸节奏。

触感的语义表达

在移动应用中,触感反馈主要是通过马达的振动来实现的。从物理学的角度来看,这种振动可以被抽象成一种波形的表达。通过调整锐度(Sharpness)和强度(Intensity)这两个关键的参数,我们可以向用户传达不同的信息和感觉。简单来说,锐度较低时,触感更加柔和和圆润;锐度较高时,触感则更加清脆和清晰。同时,强度的增加会使得触感更加强烈。


▲可视化不同锐度带来的触觉感受

通过进一步调整参数,我们可以更精准地影响用户接收到的触感,感知硬度、粗糙度、速度以及弹性等不同的特性。使用组合的波形,可表达的丰富的触感语义。正如下图所示,通过组合的波形表达,小球在不同材质表面上滚动时会产生的不同触觉感受。


▲图片来自RichTap:使用组合的振动波形表达不同的触觉感受

常见的触感语义

iOS提供了一系列预设的触感反馈模式:通知 (Notification) 、 冲击 (Impact) 和选择 (Selection)。而这些预设的模式中也表达着我们常见的触感语义,以通知 (Notification) 和冲击 (Impact)举例:

  1. 通知 (Notification):

  • 成功 (Success):使用上升的语义传达操作或任务完成。

  • 警告 (Warning):使用下降的语义传达操作或任务产生某类警告。

  • 失败 (Error):使用交错的语义传达操作或任务失败。

例如邮件发送成功时,伴随的振感便是成功 (Success) 模式。

  1. 冲击 (Impact):

  • 轻型 (Light):轻量级的用户界面元素之间的触碰,如视图滑入到位。

  • 中型 (Medium):中量级的用户界面元素之间的触碰。

  • 重型 (Heavy):重量级界面元素之间的碰撞,如重物掉落。

  • 坚硬 (Rigid):坚硬硬或非弹性用户界面元素之间的碰撞。

  • 柔软 (Soft):柔软或弹性用户界面元素之间的碰撞。

常见的例如邮件或新闻类应用下拉刷新时伴随的振感,使用的便是冲击 (Impact)模式。 

3 设计触感体验

在移动应用领域,用户日常接触的触感反馈从使用场景可分为:

  • 通知型:来自系统的反馈,吸引用户注意力,提示系统信息或通知消息。常见的有新消息的通知、密码输入错误等;

  • 交互型:用户操作的反馈,通过更明确的指引,提示因果关系和提升交互效率。常见的有按钮、键盘等;

  • 模拟型:触感反馈结合视觉动效/音效,提升数字行为的趣味感,模拟虚拟物件的真实感(形状、材质、质量),提供更沉浸的体验。;

  • 无障碍型:为视障/听障用户提供更友好的使用体验,拓展产品功能的适用人群和场景。

设计师应关注如何有效地使用触感反馈为用户提供实用和情感上的价值,以下围绕「交互型」和「模拟型」触感反馈展开讨论。

1、交互型:提供更明确的指引

  • 提升产品可供性

当界面元素无法明确提示用户该如何使用功能时,借助触感提升功能的可供性。(可供性由心理学家James Gibson提出,功能可供性是指对象的特征表明可以用来做什么,提示用户如何与其互动)。例如iOS 原生键盘长按「空格」时,通过触感反馈提示文本定位的功能已被激活。

在使用公众号文章编辑功能时,长按文中的文本会触发隐藏的编辑选项,此时振动可提示功能已被激活。由于长按操作可能会使手指覆盖部分文字,导致用户难以清晰看到文本,同时用户可能对长按的具体时长缺乏准确感知,而触感反馈恰好能够弥补这一点,为用户提供即时的指示。

触感反馈也可以引起用户的注意力,强化提示作用。评论时,点击头像可以切换评论的身份(微信身份或视频号身份),触感反馈与动态效果相结合,加强了用户对账号切换成功的认知,降低误操作率。

在与他人通过微信进行语音聊天时,用户往往专注于语音的输入,可能会忽视界面上的提示信息,从而造成误操作。在语音发送界面,当用户轻触屏幕的不同功能区域时,会收到相应的触觉反馈, 提示触发了不同的功能(左侧按钮:取消,右侧按钮:语音转文字)。

  • 提示交互层级

(1) 页面间的递进,区分空间关系

用户完成一个任务往往涉及到多个页面之间的流转,除了明确的页面间界面样式的差异,触感可以隐性提示所处的空间正在发生变化,例如在微信首页下滑进入多任务管理时,轻钝的振动告知进入多任务管理页面。

(2) 强化操作的主次关系

在页面内,用户可能需要执行多个不同的操作,可考虑使用差异化的触感反馈从而强调主次关系。以数字键盘的使用场景为例,主要操作包括「输入数字」、「删除」和「确定结果」。对于这三种操作基于递进关系如果能提供差异化的触感反馈,可以进一步区分操作的重要程度,从而提升效率。

  • 辅助用户完成精准操作

触感反馈能够辅助用户进行更精细的操作,通过即时的物理反馈帮助他们感知到精确的位置。比如,在iPhone上设定闹钟的起床时间时,当用户滑动选择时间,会感受类似转动刻度盘的振感,这种“刻度感”的振动让使用者能够更准确地调整时间。

用户使用iPhone拍照时,可能需要将手机调整至完全水平的状态以获得最佳拍摄效果。在调整过程中,轻微的振感结合辅助线的变化,辅助用户更精确地识别手机何时达到水平状态。

  • 结合手势交互

在触屏时代,手势操作已经成为我们与设备互动的重要方式。触感反馈与手势操作之间有着天然的协同关系,它能够提供更加直观的物理反馈,让交互过程变得更加自然。在使用手势操作时,我们也可考虑利用触感反馈,向用户传递更多的信息。常见的手势与触感反馈结合的例子如下:

手势

场景示例

触感提示的信息

点击 (Tap)

  • 点击页面内的大/小按钮 

  • 设置项的开关

操作结果

双击 (Double Tap)

  • 对内容进行双击点赞 

拖拽 (Drag)

  • 通讯录标签进拖动管理

操作处于进行中

滑动 (Swipe)

  • 亮度/音量调节的最大值&最小值

  • 信息流/动态流下拉刷新

  • 滑动选择器

操作的边界阈值

双指缩放 (Pinch)

  • 将图片放大至最大尺寸/将图片缩小至最小尺寸

长按 (Long Press)

  • 长按桌面应用进行桌面管理

  • 长按视频进行加速播放

可对目标操作编辑

2、模拟型:提升产品使用的趣味感

触感反馈可以增强数字互动的愉悦感,可以从以下2个角度来实现:

  • 映射现实中的行为

将用户在数字世界中的行为与现实中的动作相匹配,选择那些能够引起共鸣的熟悉场景,从而激发用户情感上的共鸣。在Medium应用中,长按文章的「鼓掌」按钮会触发一连串的振动,像是在模拟现实生活中拍手鼓掌的动作。


▲Medium 长按「鼓掌」

在Glow应用中,当用户获得勋章并在虚拟罐中滚动时,精细的触感反馈模拟出了勋章的锯齿边缘以及玻璃的质感,仿佛真实勋章被投入玻璃罐中。


▲Glow 达成勋章
  • 融合多感官

视觉和听觉作为我们的主要感官,当与振动反馈相结合时,能够创造出更加丰富的感官体验。例如,在iOS 18中新增的音乐触感反馈功能,通过与音乐节奏同步的振动效果,让用户能够更加生动地感受音乐。

在微信直播间内,当用户不断地点击屏幕右下角的「喜欢」按钮,触发一连串表情动画的同时,也会伴随着连续的振动反馈,这种视觉与触觉的结合强化了互动感。

4 实践建议

  • 使用一致的触感语义建立用户心智

使用标准的UI控件优先使用系统默认和一致的触感参数,包括开关、滑块到选择器等,保证用户认知的连贯性。避免使用反向的语义,给用户造成困惑。例如把表示成功(Success)的触感反馈用于表达任务的失败。

  • 满足个性化需求

为满足多样化的用户群体和应用场景,提供个性化的触感反馈设置是必要的。研究指出,随着年龄的增长,人指尖的敏感度会逐渐降低,一套固定的参数无法满足所有用户的需求。鉴于不同用户对触觉反馈的敏感度和接受度存在差异,提供调节功能以满足更多用户。例如,iOS系统就提供了让用户根据个人偏好调整触控反馈时长。

  • 实现触感效果

在iOS系统中,除了系统预设的触觉反馈模式,Core Haptics框架还支持更高级的自定义。通过Programmatic Haptics,开发者可以精细调控触觉反馈的强度和锐度,实现个性化的触觉效果,同时也支持通过File-based Haptics将预设的触觉效果以JSON格式文件导入设备进行调用。设计师可以利用如Haptic Hub这样的工具,在无需编写代码的情况下,便捷地设计和感受实际效果。


▲Haptic Hub (iOS)

除了iOS的Apple Haptic and Audio Pattern (AHAP),不同安卓系的手机厂商也有自己的触感解决方案。实践时需测试真实效果,考虑不同机型的效果兼容处理。

  • 谨慎地使用触感反馈

触感反馈作为视觉和听觉的补充可以丰富体验,但是过度地使用则会适得其反。同时需要考虑使用触感反馈时振动马达对其他传感器模块的影响,确保不会扰乱相机、陀螺仪、麦克风等正常工作。例如AR(增强现实)类应用使用到的陀螺仪,可能因强烈的振动干扰其读数能力,导致应用性能下降。

5 展望触感体验

可以预见随着社会和技术的发展,触感体验将为用户带来更多价值。

  • 更精细的触感表达

随着技术的不断进步,从转子马达(ERM)到线性马达(LRA)的演变,这使得触感反馈的传递变得更加精准和细致。在享受了更为丰富的触觉体验,尤其是在移动游戏应用中体验到更加沉浸式的触感效果(如赛车游戏中模拟的汽车加速和碰撞),用户的期望也随之提高,对于常规的触感反馈已不再感到满足。

  • 更真实的虚拟体验

我们周围越来越多的物品转变为了虚拟形态,比如数字钱包、数字货币、虚拟勋章,甚至数字人。这一趋势似乎不可逆转,但与此同时,人们对于真实感的追求也在与日俱增。触感反馈模拟现实世界的物理特性,从而提升数字互动的真实感。

  • 物理交互的回归

在近年来的消费电子产品领域,从智能手机到智能手表,各大厂商正致力于通过增加实体触感按键来优化用户体验。这种实体用户界面(TUI)的设计减少了用户的认知负担,更贴近用户在现实中的行为习惯。

  • 无障碍领域的潜力

对于视觉障碍者使用语音交互功能时,常受环境噪音干扰,影响体验。触感反馈不仅清晰指示用户操作,还在UI控件和内容传达上提供更多可能性。小米设计团队提出,通过为不同按钮和内容设计独特的振感,辅助视障用户更直觉地理解用户界面。

细微的振动反馈在用户体验中扮演的角色比我们预想的更为重要。它能够增强产品的可用性和提升用户的愉悦感,使每一次互动都变得更加令人期待。期待更多设计师能够重视并参与到触感的设计,探索更多创新的可能性。

参考文献:

[1]Playing haptics | Apple Developer Documentationhttps://developer.apple.com/design/human-interface-guidelines/playing-haptics

[2] Material Designhttps://m2.material.io/design/platform-guidance/android-haptics.html#usage

[3] Exploring Touch Screen Technology: A Comprehensive Guide https://dev.to/adityapratapbh1/exploring-touch-screen-technology-a-comprehensive-guide-160b

[4] The Tactile Era: 10 Principles for Haptic Design | Punchcuthttps://punchcut.com/perspectives/10-principles-for-haptic-design/

[5] RichTap_智能设备触感解决方案_触感功能开发设计_高级触觉反馈应用_高品质振感马达

[6] https://medium.muz.li/haptic-ux-the-design-guide-for-building-touch-experiences-84639aa4a1b8

[7] Revolutionizing Digital Interaction: The Rise of Haptic https://hypersense-software.com/blog/2024/07/15/haptic-technology-user-experience/[8] https://medium.com/@kaylejad/haptics-and-ai-feeling-something-that-isnt-really-there-541abb5b2392

本文仅代表作者观点

如需转载,请注明来自 WeDesign

触感体验
交互体验
用户体验设计
版权声明:本文为 CxHub 作者【 CxHub编辑部 】的原创文章,转载请联系作者。
该文观点仅代表作者本人,CxHub客户体验社区平台仅提供信息存储空间服务。
复制文本链接
CxHub编辑部
17文章
24读者
体验无界 共享未来! 🙋🏻‍♂️🙋🏻‍♀️联系编辑部,请添加微信:paggy6523
全部评论
热门
最新
请先登录后评价
关注作者,不错过精彩内容