赞助商
立即赞助

用一篇超全面的干货,帮你掌握产品的「触觉设计」

产品设计3年前 (2021)发布 流光
2.4K 0 0

我们的触觉

「她滑滑的,明亮着,像涂了‘明油’一般,有鸡蛋清那样软,那样嫩」,这是朱自清的散《绿》中对梅雨潭的一描写。「滑」、「软」、「嫩」是对触觉赋予意蕴的独特表达,这些我们一旦听到就会在脑海里浮现画面,这样的描述是来自于生中无数次触觉带给我们的独特体验。

人体的五种感觉中,触觉与其他感觉相比与我们身体的接触面广,人体全身下都触觉信的接收器。尽如此,人类的触觉能够传递的信息限的,通常触觉传递的信息只视觉信息的 1 %。不过,触觉给人类的感体验又不可或缺的,如果它的存,我们日常活中与实体互动的过程将变得索然无。科技产品也如此,无论 VR 体感游戏机还日常使用的手机,通过振动的触觉反馈起到了画龙点睛的作用。

什么是触觉反馈

触觉反馈,通常通过硬件的振动模拟人的真实触觉感受,通常应用于用户随身携的手持、穿戴、触摸设备,也始规模应用于体感游戏、4D 视频内、机器人、医疗领域,可以补充视觉音频反馈的不足,增强互动效果,提升用户体验

根据触觉技领域的创新公司意森的用户反馈调查显示,用户使用触觉体验的游戏后,给予了游戏多的面价,并且活跃分享意愿明显提高。随硬件厂商对用户体验的愈发重视,触觉设计在产设计中得到更多应。接来会向大介绍移  App  产是如何配合硬件设计优质的触觉体验。

iPhone 的振动模块

软件的体验升级需要依赖硬件的断迭代。iPhone 的振体验一直被户叹已,这源自于与苹果对户体验的极致追求,即使在大多数户看来无痛痒的振功,苹果一直进行断升级迭代,振模的性,带来更舒适的体验。

 iPhone 振动模块的升级过程中,苹果不断增振动模块体积,从转子马达到线性马达的新换让震感越越细腻,如下图所示。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

△ 图内硬件图片自知乎用户「云子可信」

到后来, iPhone 7 / 7 plus 上全新线性 Tapitic Engine 问世,iOS 10 动接口开发者开放,如此高配线性提供细腻反馈不使 iOS 系统 更具技与艺术融合美,更是赋能大量第三应用,调用此功能第三应用可以自定义地使用动反馈来提高品体验。

可能有些读者会疑惑,全新的 Tapitic Engine 振动模式和以往有什不同之呢?先回忆一下在以往各种机的振动给带来的体验,基本都是嘈杂的声音加上酸麻的,体验非常拙劣。而 Tapitic Engine 实现了在不发出声音的情况下提供更细腻舒适的振动体验,如下图。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

另外振动给另一个负面响就是其干扰性,大多数其机提供的振动并没有进行间和度的,这带来的问题是无论在何种景下,机都会给同的振动反馈,没有进行任何景的细。比如对于危险操作可能需要长久度大的反馈,而一些轻量化的提示只需要轻的振动即可,但是由于硬件的限制,大部安卓机都是一视同仁。而拥有 Tapitic Engine 的 iPhone 则可以定义三种不同的度、不同次数和间,还可以穿插度使用模拟更多景,后文会详细介绍相关应用。

安卓手机的振动模块

刚才提,绝大多数的安卓机型不可以对振动的度进行定义,因此不管在系统软件还是第三方软件中,如果景需要振动辅助,基本都是振动麻的一声「嗡」就不了了之了,机如果在上这种劣质的振动甚至能把机震得掉地上。只有少数有极神的安卓厂商会在振动体验上不遗余力,向苹果齐,但由于大部第三方应用开发者难以针对各个安卓机型不同的硬件振动模块进行适配,所以大部安卓机型上的第三方 App 如果需要振动都是调用一度,仍然未对振动度做景细,体验依然不尽人。

触觉设计的用途

尽管触觉传递的息远远少于视觉和听觉,但通常也不会将触觉作为传递息的主要段。只将其作为视觉反馈和听觉反馈的一种补充和配部。备的振动模块产生的触觉反馈,可以有效提高交互的易知性,并赋予产品生命力,增用户的情化体验。

1. 交互反馈

更敏感反馈

我们在使用电子设备时获反馈三形:视觉反馈,听觉反馈,触觉反馈。触觉比视觉和听觉传更迅速被用户感知,由于以体为介质,触觉反馈会为表皮以及肌感受进刺激,此其要比视觉与听觉更加敏感和强烈。

可以将这种性应用相应的产品计中,比如多产品的下拉刷新都从之前的文字提示改为了振动提示,可以使用户更快速地获得反馈。当用户下拉的距离达临界值并触发振动后,用户受振动后就刷新了,而不用再使用「继续下拉刷新、释放刷新」等冗余的文案来提示用户,如下图的下厨房应用。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

强化物理动作

苹手从 iPhone 6s 升级到 iPhone 7 最大变化是经典 Home 键从可以按下去实体键变为了虚拟键。刚开始很多粉担心可能生体验下降问题,是经过使用后才发现虚拟按键加上升级线性提供震感,逼真地模拟了真实按压触感,乃至很多用户反馈说使用了 iPhone 7 很久时都以为 Home 键仍然是可以按压实体键。

振动反馈还可以给输入法应用带来真实的敲击,来马萨诸塞大学的一研究显示,虚拟键盘如果加入振动反馈,可以提升用户输入的准确度。

弥补异常情况下的反馈

由于网络延迟,用户进行某些操作后可能需要等待一段间才能收反馈,如果间过久,用户会怀疑是操作不当,但如果加入振动反馈,会在其反馈息出现前消用户的顾虑。

下图,乎的鼓掌功能。用户点击鼓掌,通常客户端请求服务端的数据显示已点赞的状态,个程受到用户网络状况的影响。果网络状况差,用户不能及时从屏幕获取视变化的反馈,就怀疑自己是不是没有点击到正确的热区或者操不当,因此用户能进行重复点击从而影响验。但若加振动反馈,用户在点击鼓掌,首先一定收到振动反馈,因为振动反馈不受到网络的影响也不延迟,之即使视反馈有许延迟也不让用户怀疑是自己点击失误。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

2. 情感化设计

人容易对熟悉的事物产生好。在产品计中,经常使用日常生活中常见的视觉形象和声音进行隐喻关,用户建立情结。触觉也不例外,日常生活中各种各的现实物体都会给带来不同的触觉受。器按钮的阻尼、节日烟花爆炸传递的震、拨动齿轮带来的摩擦等等都是现实界之间的触觉交互。iPhone 的线性马达提供的不同等的振动反馈可以充地模拟并给带来逼真的触觉体验。

关情感化设计,里有216个案例:https://www.uisdc.com/topic

面就向大介绍一些将触觉设计于情感设计中的一些精案例。

单一强

前给大到,iPhone 手机自 iPhone 7 开始开放了振接口,可供第方应开发者调,中有种强可供择,分别是 Light、Medium 和 Heavy 。单一强指的是,某个功只使了中一个振强来设计。

如下图的荔枝的私人 FM 功能,当我们拨动齿轮时,振动模块就会伴随我们拨动的手指产强度 Medium 的振动反馈,模拟实活中的真实体验。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

多强组合

多强组合指的是,某个功使了 Light、Medium 和 Heavy 种强进行组合使,从而模拟变的振效果。它单一强的体验更丰富,而且通过设计者巧妙的构思来的同的组合形式,它可模拟各种独心裁的表现效果。

了研究不同产品振动的反馈感受,我体验了很多产品,但论将振动反馈运用到极致的,不得不提 QQ 的戳一戳功能,它振动的时间节点、强度与每一帧的动画效果匹配的,其设团队的匠独具,可见一斑。了直观让家感受振动变化,以戳一戳中的「招」例制作了效果图给家展示概的振动强度随时间变化过程。下图中,动画的过程可以拆解 招的能收集、招发射、招撞墙、屏幕摇晃,分别对应不同的振动强度,使得体验极真实令人惊喜。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

当我们使用 iMessage 发送短信时,如果选择了花特效,短信发出的一瞬间,全屏幕就会布满骤然绽的花。令人惊喜的,线性马达此时行小小的振动模拟出花的爆裂感,仿佛花就我们手里绽一般。

用一篇超全面的干货,帮你掌握产品的「触觉设计」

不仅仅述案例,通过振动的触觉反馈应用设层面给我们了巨的象空间。枪击,抛硬币,鼓点,齿轮,,再加视觉听觉的配合,给了用户身临其境的体验。

配问题

由于之提到过的安卓机型割裂严重,些旗舰安卓机型的振动模块体验优质,但部分安卓手机的振动还差强人意,因此部分第三方应用发者难以针对各安卓机型不同的硬件振动模块行配,所以部分安卓机型的 App 如果需振动都调用原始的振动模式,这种模式的体验感很差,与 iPhone 的 Tapitic Engine 分级振动体验不可同日语,因此即使某场景需振动满足感化需求,一般况下安卓端也不会加入的,比如荔枝 FM 的私人 FM 功能中的振动、QQ 的戳一戳中的振动都只 iOS 端了配,安卓端的。

如何设计

1. iOS

在日体验 App 产时,我们可会发现,在同样的 iPhone 机上,有的 App 中某个功的振反馈细腻舒适,但有的 App 的振反馈的强很合时宜且体验感差。这里可存在设计师与开发人员的沟通问题,设计师并没有先搜集资了解 iPhone 的振有多种强择,只是简单地开发人员将某个功入振反馈,于是开发人员任意择了一个振强就草草上线。最终,导致设计来的振反而降低了体验。优秀的设计需要平稳的落地,在我们决定要为某个功设计振后,我们要成步骤。

  • 选择振动强度;
  • 确定振次数;
  • 如果振动多次,确每两次之间的间隔时间;
  • 确定是否循环。

如果设的振动多强度组合,好将述参数确后以可视化的形式(如表格)交接给发人员,方便其理解。由于部分发人员可能并未深入了解 iOS 的振动模块的调用实方式,因此了各设师朋友能够加畅与发沟通,我文章后面了 iOS 调用振动的相关码,家可以将相关码直接发给发给发人员供参考使用。我录列举了三种震动方式,其中的「 UIImpactFeedbackGenerator 震感」就文提到的可以自义三种强度的方式,推荐家使用,录里还列举了每种振动方式的支持机型系统、优缺点我的人建议。

2. 安卓

由于安卓自义系统过多,且硬件之间差异过,第三方应用发者难以额外花费时间精力去配不同安卓手机硬件,因此通常只使用默认的振动调用方法。因此与发程师交接时,一般我们只需后三。

  • 确定振次数;
  • 确每两次之间的间隔时间;
  • 确定是否循环。

结语

电子产每一次的硬件迭代总是会给设计师带来巨大的想象空间,作为设计师,我们需要在技术日月异的时代断开拓视野,拓展设计的边界。同时是由于技术的进步,可本的技术实现方案在未来的某个时间就被淘汰和抛弃,希望大对本持判性态,对章可的疏漏予指,我将及时更或更正。在这里感谢公司的 iOS 开发小伙伴的支持,牺牲休息时间与我一起检验各种实现方案带来的同震感,本的严谨性。

(附) iOS 振动调用代码

1. UIImpactFeedbackGenerator 震感

用一篇超全面的干货,帮你掌握产品的「触觉设计」

代码

微弱短-Light

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleLight];
[generator prepare];
[generator impactOccurred];

中等短振-Medium

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleMedium];
[generator prepare];
[generator impactOccurred];

明显短振-Heavy

UIImpactFeedbackGenerator *generator = [[UIImpactFeedbackGenerator alloc] initWithStyle: UIImpactFeedbackStyleHeavy];
[generator prepare];
[generator impactOccurred];
2. 长振动震感

用一篇超全面的干货,帮你掌握产品的「触觉设计」

代码

AudioServicesPlaySystemSound(kSystemSoundID_Vibrate);
3. 3D touch震感

用一篇超全面的干货,帮你掌握产品的「触觉设计」

代码

Peek 触

AudioServicesPlaySystemSound(1519);

Pop 触感( Peek 震感强,且「UIImpactFeedbackGenerator震感」中的 Heavy 还强烈)

AudioServicesPlaySystemSound(1520);

三连续短(三 Peek 触感连续动)

AudioServicesPlaySystemSound(1521);

参考资料:

  • 《微交互》 作者: 塞弗 (Dan Saffer)
  • 《 iOS 关于Taptic-Engine震动反馈深入解析》 作者:深蓝_S
  • 《如何评价 iPhone 上的振动反馈?》中「云可」的回答,作者:云可

欢迎关注作者微信公众号:「贝林设计站」

用一篇超全面的干货,帮你掌握产品的「触觉设计」

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一、移动互联网开启了新金融时代 为了探索移动互联网的普及以及用户对金融服务的需求变化,在2017年腾讯用户研究与体验设计部...
服务设计
对话不仅是简单的信息互通。 在对话中,我们会分享各自对话题的自然假设。我们知道谈话应该如何展开。我们也会对参与者对谈...
对话式交互
编者按:定价页面中,具体的设计细节其实对于用户购买和销售的转化有着直接的影响,怎样设计才会更有有效?今天这篇来自Proof...
定价策略
传统意义上以人为中心的设计,过分简化了人和技术之间的关系。是时候采用更加细致的分类和方法来进行描述了。 在 FastCompan...
以人为中心
中国年轻人创意狂欢绵延 14 天的造物节在杭州锅炉厂落下帷幕,1000+ 造物节定制新物种造物节盛会集结! 2019 年的造物节已经...
体验设计
编者按:本文是设计类高分书籍《破茧成蝶:用户体验设计师的成长之路》的读书笔记重点摘抄,适合设计新人快速入门用户体验设...
用户体验
如何为创意插上理性的翅膀,滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。 前言 新年刚过,元宵即临,开工...
交互设计
@Jenny黄静雯 :​​​在App大版本的迭代中,免费试用作为小模块,交互逻辑不变,仅做视觉层面的优化。然而在视觉优化过程中,免...
App改版