指针(iPadOS)

iPadOS 引入了动态指针效果和交互,增强了在 iPad 上使用外接设备的操控体验。当用户使用指针设备时,iPadOS 会根据当前的使用场景自动调整指针,提供丰富的视觉反馈,以及提高生产力和简化日常任务所需的精确性。

iPadOS 指针系统为用户提供了一种与应用内容交互的其他方式——它并不会取代触控。有些用户可能只使用触控操作,有的用户更喜欢将指针操作和触控操作两者相结合。让用户选择如何与应用进行交互,避免将界面设计得过于紧凑或要求用户只使用指针操作。

启用指针交互

  • 无论用户是使用触控、指针设备还是键盘,目的是为用户提供一致的体验

    用户倾向于在触控和外接设备之间流畅地切换操作,他们不想学习太多的操作模式或应用中不同的交互方式。

  • 确保当用户在其连接的设备上使用熟悉的手势操作时,应用中的所有区域都能正确响应

    例如,如果用户可以在屏幕上滑动手指来操作内容,那么考虑一下使用以下这些交互来执行相同的操作是否有意义:在触摸板上使用两个手指,用指针点击和拖动,或使用移动鼠标滚轮。

  • 当用户在与应用中对象交互时,按住自定义按键(modifier key),请确保体验一致

    例如,在拖动一个元素同时按住 Option 键,可以对该元素进行复制,那么无论用户使用触控还是指针进行拖动,操作结果都应该是一样的。

  • 只有当指针和手指操作都具有其各自价值时,才对其加以区分

    例如,使用指针时,触控条(scrubber)可以为用户提供另外一种方式来对视频的位置进行定位。在该场景下,用户通过指针或触控来拖动播放头(playhead),但可以通过指针悬停并点击的方式来对视频的播放位置进行精确定位。

  • 允许用户使用指针悬停来显示和隐藏自动最小化或淡出的控件

    例如,用户可以将指针悬停在 Safari 工具栏上来显示处于最小化状态的工具栏(当指针移开时,工具条又恢复最小化状态)。用户在观看全屏视频时, 还可以通过指针悬停来显示或隐藏播放控件。

0:00
/
  • 必要时在自定义视图中启用多选功能

    在 iPadOS 15 和更高版本中,用户可以点击并拖动指针来对元素进行多选。进行多选操作时,指针会在移动的同时形成一个矩形框,框内所包含的元素都能被选中。默认情况下,标准的非列表集合视图支持多选操作;如果希望在自定义视图中支持该交互,则需要自己实现。

指针形状与内容效果

iPadOS 将指针和它所悬停元素的外观样式和交互操作结合在一起,将用户的注意力集中在目标元素上。你可以使用系统提供的指针效果,也可以修改对其自定义来适配应用。

默认情况下,指针的形状是圆形,但当它悬停在特定元素或区域上时,它可以显示系统默认的或应用自定义的形状。例如,当指针悬停在文本输入区域上时,它会自动变成用户熟悉的“I”形图标。

0:00
/

对于内容效果,当指针悬停在其上时,指针下方的界面元素或区域也可以更改其外观。根据内容效果的类型,指针可以保留当前的形状,也可以转变为与元素样式相融合的形状。

iPadOS 定义了三种内容效果,用于将焦点放在应用中不同类型的交互元素上:高亮抬升悬停

  • 高亮效果

    将指针转换为一个半透明的圆形矩形,作为控件的背景,并包含一个柔和的视差效果。细微的高亮和移动将焦点带到了控件上,而不会分散用户对于目标任务的注意力。默认情况下,iPadOS 将高亮显示效果应用于工具栏按钮、选项栏、分段控制器和编辑菜单。

0:00
/
  • 抬升效果

    将细微的视差与高度空间相结合,让元素看起来像漂浮于屏幕上方。当指针在元素下方淡出时,iPadOS 通过将元素放大,同时在下方添加一个阴影,并在上方添加一个柔和的镜面高光,从而营造出元素的抬升效果。默认情况下,iPadOS 将抬升效果运用于应用的图标和控制中心的按钮。

0:00
/
  • 悬停效果

    是一种通用的效果,当指针悬停在一个元素上时,可以对其使用自定义的比例、着色或阴影值。悬停效果结合了应用的自定义值,将焦点带到一个元素上,但它并不改变默认的指针形状。

0:00
/

提供指针附件

指针附件是可视化指示器,帮助用户了解如何使用指针与当前界面元素进行交互。例如,指针接近可调整大小的元素时,会显示一个小箭头来表示该元素允许沿着某一轴线调整大小。

与指针形状和内容效果不同,指针附件是可以与任何指针结合,传达额外信息的次要元素。

  • 使用清晰、简单的图像创建自定义的附件

    指针附件很小,因此创建一个不需要使用太多细节又能够传达指针交互意图的图像,是很有必要的。

  • 考虑使用附件过渡来表示一个元素的状态或行为的变化

    除了指针附件的出现和消失动画外,系统还为伴随着内容效果变化的附件形状和位置之间的过渡制作了动画。例如,可以通过将指针附件从“添加”图标过渡为“禁止”图标来传达一个添加动作已经不可用。

指针磁性

iPadOS 通过模拟元素对指针的磁吸效果,来帮助用户使用指针来快速定位目标元素。当用户将指针靠近某个元素,或朝着该元素附近的方向移动时,都能体验到这种磁吸效果。

当用户把指针移到某个元素附近时,一旦进入该元素的点击热区,系统就会改变指针的形状。因为一个元素的点击热区通常超出它的可见边界,所以指针在接触到元素之前就已经开始改变形状,造成了元素被指针吸引过去的错觉。

0:00
/

当用户将指针朝着某个元素附近的方向移动时,iPadOS 会通过判断指针的移动路径来预测最有可能成为用户目标的元素。当指针的移动路径上有一个元素时,系统会用磁吸效果将指针拉向该元素的中心位置。

默认情况下,iPadOS 对使用抬升(如应用图标)和高亮(如工具栏按钮)的元素使用磁吸效果,但对使用悬停的元素不适用。因为支持悬停的元素不会改变默认的指针形状,使用磁吸效果可能会很不协调,甚至会让用户失去对指针的掌控感。

系统还将磁吸效果应用于文本输入区域内,如果用户在选择文本时无意中进行了垂直移动,磁吸效果可以避免用户跳到另一行。

支持标准指针和效果

  • 可以的话,启用系统提供的内容效果

    用户很快就会习惯这些贯穿于系统的内容效果,并通常希望这些熟悉的体验能够适用于他们使用的其他应用中。为了提供一致的用户体验,请遵循每个效果的设计意图。具体来说:

    • 对具有透明背景的小元素使用高亮效果。
    • 对具有不透明背景的小元素使用抬升效果。
    • 对较大的元素使用悬停效果,并根据需要自定义其比例、着色和阴影属性。
  • 对于标准按钮和文本输入区域,首选系统提供的指针外观样式

    当指针的行为方式符合用户的预期时,可以帮助用户给更舒适得使用应用。

  • 在交互元素周围添加填充区域(padding),创建更舒适的点击热区

    可能需要通过测试来确定一个元素点击热区的合适尺寸。如果点击热区太小,会让用户给觉得在与元素互动时操作必须格外地精确。相反,当一个元素的点击热区过大时,把指针从该元素上移开会让用户感到很费力。通常情况下,对于含有边框的元素周围添加约 12pt 的填充区域会比较合适;对于没有边框的元素,在元素的可见边界添加约 24pt 的填充区域会比较合理。

    Jietu20220420-131506

  • 为自定义的工具栏按钮创建连续的点击热区

    如果工具栏中相邻按钮的点击热区之间有间隔,当指针移动到间隔区域时会短暂地恢复到默认形状,这会分散用户的注意力。

  • 给使用抬升效果的非标准元素指定圆角半径

    通过系统提供的抬升效果,指针在淡出时会转变为符合元素外观的形状。默认情况下,指针使用系统定义的圆角半径来转换为圆角矩形。如果应用的元素是其他形状——例如一个圆——你需要为其提供半径,以便指针动画可以无缝地过渡到元素的形状。

自定义指针形状和效果

  • 对于交互行为与标准元素类似的自定义元素,应首选系统提供的指针效果

    当一个自定义元素的交互行为与系统标准元素相似时,用户通常更期望使用熟悉的指针交互来与之互动。例如,如果自定义导航栏中的按钮没有使用标准的高亮效果,用户可能会认为是哪里出了问题。

  • 在应用中保持指针效果的一致性

    例如,在一个辅助绘图类型的应用中,每一个绘画区域都应具有类似的指针交互体验,这样用户就可以把在一个区域获得的经验应用到其他区域。

  • 避免创建不必要的指针和内容效果

    当指针或其下方的界面元素的外观样式发生变化时,用户会注意到,并且期望这些变化是有用的。创造一个纯粹装饰性而不提供任何实用价值的指针效果,会分散用户的注意力,甚至令人厌烦,

  • 保持自定义指针的形状简单

    理想情况下,指针的形状预示用户在当前场景下可以进行的交互,而不会引起用户太多的注意。如果用户不能快速理解应用的自定义指针形状,他们很可能会在视图理解形状含义上浪费时间。

  • 通过显示有用信息的自定义注释,来提升指针的交互体验

    例如,当指针悬停在应用的绘图区域时,可以显示当前区域的X值和Y值。Keynote 演讲应用使用注释来显示可调整图像的当前宽度和高度。

    Jietu20220420-131525-1

  • 避免使用指针显示说明文字

    使用指针显示说明文字会让应用看起来复杂且难用。与其提供说明,不如优先考虑界面内容的清晰性与简单性,这样用户无论使用指针还是触控,都能快速学习使用应用。

  • 在自定义悬停效果时,考虑阴影、比例和元素间距之间的相互影响

    通常情况下,为那些可能增大尺寸的元素保留缩放功能,同时确保其不会挤占附近的元素。例如,缩放对于表格行来说效果并不好,因为如果要避免让相邻的行发生重叠,就无法将其展开。对于周围空间很小的元素,考虑使用包含着色的悬停效果,而不是使用缩放和阴影。请注意,不要在元素没有缩放的情况下使用阴影效果,即便是它的阴影变化暗示了抬升动作,但并没有让用户觉得有纵深感。

网页标注 https://cubox.pro/share/zsNUDL