跳到主要内容

基于光标的交互


简介

当用户使用指向设备(鼠标、触摸板、AR/VR手柄、隔空手势等)与应用程序进行间接交互时,光标指向的对象和光标本身应提供适当的视觉反馈以表达对象的可交互性和到达的准确性。

同时,应考虑利用光标支持精细化操作和悬浮状态的特性(相比手指触摸),以提升应用生产力、简化交互任务和增强信息展示。

光标形态

光标形态的设计遵循以下三个原则:

功能表达

当光标悬浮在特定界面对象或区域上时,可使用系统定义的标准的光标样式集合来表达其交互状态。

应用也可根据其自身具体场景自定义光标的形态。

简单性

为保证全局交互体验的一致性,应优先使用系统已定义的光标样式集合。如无必要,请勿增加新的光标样式。

对于自定义的光标样式,应尽可能简洁直观地表达在当前界面状态下用户可进行的操作和所需精度,不应在视觉上过分吸引用户的注意力。

自动隐藏和显现

对于以触摸交互为主的终端设备,如果光标在一段时间内没有移动或用户使用了触摸交互,则自动隐藏光标保证界面的干净整洁。

悬浮对象的形态

当光标进入并悬浮在界面元素上时,界面元素可通过适当的视觉和行为反馈来使其对用户聚焦和提高指向的准确率。

可交互性

界面元素需要响应光标悬停的动作,以清晰表达该元素的可交互性

在光标范式下,用户是通过将光标移动到界面元素上,然后执行对应的操作。这种情况下,需要界面元素在光标悬停的时候就反馈出其是否可交互,避免用户点击后才发现该元素不可交互而产生挫败感。

在表达界面元素的可交互性时,应考虑以下设计原则:

  1. 显著性:在悬浮态下,与普通状态和其周围的界面元素相比,拥有清晰的功能可见性。
  2. 微妙性:视觉上不应过于强调或与普通状态具有较大差别,避免干扰用户注意力。
  3. 一致性:同类型控件的可交互性表达(视觉和动效上)应具有一致性。从平板/PC向电视、AR/VR使用场景扩展时,不同设备间控件的悬浮态也应具备一定程度的表达一致性。

可交互热区

在悬浮态下,界面元素要表达其可交互的热区

图形界面中可能存在很多界面元素其视觉可见部分和实际可(触控)交互的热区相差很大。

在此类场景下,光标悬停时准确表达可交互的热区有利于用户感知元素有效的触发区域,并进而提高交互的效率。

悬浮效果类型

界面元素的悬浮态效果类型

产品具有2种默认的界面元素的悬浮态效果:浮起和背景高亮。

浮起

当光标进入对象时,对象放大;离开时,对象尺寸恢复。尺寸变化过程中辅以过渡动画使体验流畅。

浮起的效果一般适用于可见部分和实际热区大小接近、有背景填充、且在布局上与其它元素不相邻的控件,典型的控件类型包括强调按钮、导航点、勾选等。

背景高亮

当光标进入对象时,对象底部叠加颜色色块。整体上,背景高亮的效果根据控件类型可分为两类:

  • 对于视觉可见部分和实际可交互热区范围相差很大的控件,浅色的圆角矩形叠加于内容底层以高效表达其热区。此类控件通常无背景填充,典型的类型包括文本按钮、工具栏、Tab栏等。
  • 对于有明显边界的容器类控件,比如列表、卡片、菜单等,当光标进入控件时,仅改变控件背景颜色以表达其可交互性。

展示附加信息

当光标移动到界面元素上时,在以下场景中,可考虑通过显示附加信息来提升光标体验。

  1. 受限内容预览:例如在邮件、日历、备忘录等应用中,当光标悬停在内容列表/网格上时,可以通过悬浮窗显示更多的内容详情,方便用户进行快速预览和选择。
  2. 精确位置显示:例如在截图、设计、办公应用中,当光标悬停在某些对象上时展示位置、尺寸等数值,便于用户进行精细控制。
  3. 控件功能提示:如果一个界面元素其功能的自我解释性较差,则可通过文本提示进行告知。

应谨慎使用悬停展示附加信息的功能。在使用时,展示的附加信息必须是必要的或能明显提升用户体验的。在使用展示附加信息的方案之前,应优先考虑界面的清晰性、简洁性和表达性,以便用户无论是使用光标输入方式还是在直接用手指触摸交互,都可以很容易且舒适地使用应用。

精细化操作

光标交互区别于手指触摸交互的一个重要方面是光标支持精细化操作,设计师可考虑如何利用这一特性配合特定的光标形态来简化交互任务和提升生产力。

光标移动

应优化光标移动的显控比以提升其指向的速度和准确性。用户在使用光标指向目标时,可分为弹道加速和减速修正两个阶段。以鼠标为例,在弹道加速阶段,当焦点离目标较远时,用户快速移动鼠标以缩短光标与目标之间的距离,此时速度的重要性优于精度控制;在减速修正阶段,当光标离目标较近时,用户降低鼠标的移动速度,更为仔细的瞄准目标,此时精度控制重要性优于速度。