手机基础UI场景的触感设计规范

RichTap团队
2022年02月21日
139分钟阅读
UI交互

 

当全屏手机普及到各层级市场,除了视觉和听觉反馈外,振感技术利用人们的触觉来增强与屏幕界面交互的体验,使“人机对话”上了新层次。

然而,新技术被大量使用的初期往往没有没有系统性的指导与规范,容易产生感官错乱、体验繁杂等问题,给用户的使用和整体振感体验带来了困扰,为了使不同平台、不同设备的触觉体验给用户良好共性认知和交互体验。根据丰富的设计经验、体验研究和市场反馈,Richtap就手机操作基础场景给出触感设计指向。本文就将从用户操作场景角度将振感效果分类,分析反馈层级,整理制定基本的振感规范。

设计原则

振感作为一种全新的交互语言,可以给用户更丰富、细腻、多层次的产品体验。当用户操作系统时,系统在重点操作时会播放振感,以突出每一个相对重要的操作反馈,加强用户的操作体验。触觉还可以增强触摸手势和交互,例如滚动选择器或切换开关等。振感通过触摸用户界面向用户传递和加强信息来增强整体用户体验,常与音频和视觉元素相结合,以补充互动,可以提供有凝聚力和引人注目的体验。

  • 操作系统振感设计基本原则

关联性

触感是一种全新的交互语言,是以触觉反馈技术来增强人们与设备或界面交互时的感知体验。触感反馈与用户行为发生的时机有着强烈的关联性。这种关系对应着类物理世界的感知。

当触感反馈与用户行为有明确,且即时的关联时,会顺应用户对于反馈的常规感知,并符合他们的心理预期,用户对于这样的触感反馈会有较低的理解成本,并对此有清晰的理解和认知;反之,如若触感与交互不能从类物理世界感知的维度建立强关联,就很容易给用户带来困惑,这样的触感将指代不明、感知模糊,增加理解成本。

层级性

层级性对应着交互行为和反馈中的主次关系。层级设计是信息结构的逻辑客观存在,它一定程度上反应的是实现逻辑。由于人类的注意力有限,为了使用户在数秒内获取信息重点,通常在信息设计时,需要判定信息的价值、突出主体,让用户在最短时间内获取核心内容。

同理,在设计触感时,因考虑其背后信息的逻辑,将属性差异通过触感传达强弱层次,并在短时间内准确、有效地抓住用户注意力,直击用户期待的触觉反馈。若在触感设计中不能通过主次对比性来表现层级性,用户则可能在众多反馈中忽略或错过重要信息,并产生杂乱的触觉体验。

通感性

这里的通感是指将视觉、触觉、听觉等多模感官互相融合、交错,形成一种更丰富、且富有层次的综合体验。目标是保证整体性的同时,最大限度地实现多感官体验交汇融通,同时确保视觉、音效、节奏、触感等感官体验的匹配不背离和谐与同步的大原则,最终形成的一种比单模场景更为丰富、有层次、有质感的场景式体验,在虚拟世界中给用户带来物理世界的拟真体验。

艺术性

触感的艺术性是利用有组织的触感设计,表现抽象的情绪或隐喻,并升华出心理意象。如同文学是语言的艺术一样,振感是触感艺术的一种体现方式和表现语言,同样具有创造性和感染力。也可能引起形而上的视听意象,产生丰富而生动的联想和想象,进而体验到作品中的抽象情感和意境,获得其艺术美感。

Generated

 

  • 操作系统振感设计示意图

各频次触感:

Generated

 

安卓平台通用功能类别触感大致分布:

(*仅展示振感效果的相对关系,可具体效果根据实际需求适当调整)

Generated

 

 

设计规范

  • 按钮

在“去实体按钮”的背景下,如何让用户对操作有意识?在静音状态下如何做到有效的操作反馈?按钮在手机操作中占有很大的比重,如返回上一级、关闭、打开菜单、Home、切换到app后台、播放等都属于按钮范畴。然而由于交互层级的不同和操作手势的差异,其背后的振感也会有相应的变化。

单击按钮

单击按钮是指点快速击操作按钮,如保存设置、打开菜单、确认拨号等具体的按钮。根据层级,将振感分为:大按钮、小按钮、特殊按钮。单击按钮的振感总体特征是干脆、短促,一级主按钮通常会略强,带有一些警示性;小按钮则相对轻快。其他按钮会根据其功能性、重要性、警示度等维度做定制化处理。

功能 定义描述 场景例举 振感特征
大按钮 指界面主要操作按钮,属较低频操作项 开机引导 低沉,强
小按钮 指界面辅助操作按钮,属高频操作项 系统导航下拉菜单中的功能开关 轻快,短促
特殊按钮(关机) 长按手机侧边的电源键即可触发关机/重新启动界面,属低频操作项 开机,关机、重新启动、SOS 浑厚,强
特殊按钮(单个删除) 单个文件或app删除 相册中删除一张图片 低沉,飞走
特殊按钮(批量删除) 多个文件/图片同时一键删除 相册中删除多张图片 飞走,轻微颗粒感

滑动按钮

滑动按钮通常是在系统设置中出现,通过滑块左右滑动来表示功能开关,因此振感中也会有滑动触感的体现。

Generated

功能 定义描述 场景例举 振感特征
滑动按钮 指系统中的滑动选项开关,属高频操作项 打开WI-FI、飞行模式开关 滑动过程,顺滑,末端卡停
  • 键盘

按键区分为数字键盘和输入键盘。点击反馈可以清晰的让用户感知到输入是否成功。由于数字键盘常用于开机密码,信息重要,输入量较小,因此其输入振感会强于普通键盘。普通键盘常会有大量输入,在交互过程中,不适当的振感会使用户注意力偏差,干扰感官,使交互体验杂乱。所以其振感的设计总体趋于干脆和轻量化。

功能 定义描述 场景例举 振感特征
数字键盘 数字键盘 密码解锁、计算器输入 短促、弹润
计算器清零 计算器清零差异于数字键盘,表提示 计算器输入清零 略重于数字键盘、快
普通输入键盘 常规输入键盘 文本输入 轻、细
仿真机械键盘 特效输入键盘 文本输入 键程拟真
  • 手势

用户通过在触摸屏上执行手势与设备互动,并引发与内容的密切个人联系,并增强直接操纵屏幕对象的感觉。

由于用户熟悉标准手势及其音效,所以在应用程序的振感设计中,手势振感应与音效和行为匹配,以免在操作过程中产生违和感和混乱的感受。

划动

在手势应用中,划动最为常见,包括上划进多任务、左右滑动快捷操作、应用显示模式等多种用途。由于划动手势在系统应用中高频出现,为了在操作过程中不过度打扰,又同时兼顾有效的交互反馈,大部分振感选用较轻、较圆润的触感,给以细致、贴心的体验。

功能 定义描述 场景例举 振感特征
上划进入多任务1 上划屏幕底部,进入app多任务后台,类返回机制,属高频操作项 上划手势,当多任务后台有内容时 轻,钝
上划进入多任务2 上划屏幕底部,进入app多任务后台,属较低频操作项 上划手势,当多任务后台为空时 两次,钝
上划(单个删除) 单个文件或app删除,属高频操作项 在app后台界面中,杀掉一个后台运行的应用 圆润,飞走
左右划动 返回上一级,属高频操作项 在设置Wi-Fi界面想要返回到设置主列表 轻,钝
划出便捷sidebar面板 划动屏幕侧边。划出侧边栏,属高频操作项 划出侧边栏 轻,圆润
应用分屏 两个app同时在屏幕上显示运行,属低频操作项 当应用分屏显示时,用户可以滑动应用间的分隔栏,自行设定两应用在屏幕中所占的比例。当滑动到1/2、1/3时会有提示 清晰、短促
单手模式切换 大屏幕手机会有单手模式,属低频操作项 特定手势划动屏幕,激活单手模式 圆润

长按

长按指用户长时间点击一个文件或屏幕超过0.5秒,例如:长按桌面屏幕,进入桌面管理界面。又如,用户在浏览相册列表时,长按某一图片激活图片管理功能。总体振感干脆利落。

功能 定义描述 场景例举 振感特征
长按 (重) 长时间点击一级操作超过0.5秒 长按桌面屏幕,进入桌面管理界面 短促,强劲
长按 (轻) 长时间点击二级操作超过0.5秒 长按文件进行分享或删除操作 较轻快,短促

滑块/缩放/滚轮

滑块是一种水平轨道,用户可以用手指滑动,在最小值和最大值之间移动。随着滑块值的变化,会有不同刻度的界面变化。

在手机操作中有多种滑块/滚轮的变形式,如目录检索、时间刻度、相机对焦等齿轮/滚轮拨动组件,根据不同层级的重要性和用户潜在需求,初步制定不同的振感。振感会根据用户的操作频率连续出现,直到极值提示。

功能 定义描述 场景例举 振感特征
轻滚轮 轻微提示 相机对焦,图片水平矫正 轻感知
重滚轮 大颗粒度的选择滚轮 日期选择 清晰
滚轮 相对精密的细节滚轮 计时器的分秒位时间选择拨片、音量、屏幕亮度 轻,细
滚轮极值 当滚轮滑动到最强和最弱时 音量最低时,激发静音 差异于滚轮振感,作提示功能
  • 通知

通知类振动相对点击类和手势类振动可有更大的创新空间,铃声、充电等场景可实现定制化,用户可根据自己的偏好选择。通用提示振动为操作固定范式,有利于增强用户的记忆度,帮助用户形成惯性思维。

积极提示

功能 场景例举 振感特征
积极提示 手机解锁成功 清脆
铃声 来电铃声、闹钟等 按铃声特点或节奏定制
充电 表示手机正在充电 按充电动画定制

错误提示

功能 场景例举 振感特征
错误提示 手机解锁失败 振两次,类似错误提示的音效

(*错误提示根据动画或音效可定制效果)

  • 其他

过多的振感会使用户感到繁杂,可考虑交互层级,简化振感。

功能 场景例举 振感特征
通用信号-重 锁屏打开相机/手电筒、切换 低沉、圆润
通用信号-中 信息通知左右拖拽,划出操作选项 清脆
通用信号-轻 拖动app进文件夹、复制黏贴 轻、微感知

上述文中提到的手机UI振动效果,可通过联系RichTap商务获取相应效果包。

联系邮箱:bd@richtap-haptics.com.