首页 > 新体验 > 设计沙龙 > 交互设计
  • 苹果TOUCH BAR 官方人机交互指南(附设计模板)

    adinnet/2016-11-14 14:29/交互设计

    Touch Bar 是2016款 MacBook Pro 键盘上方的一条 Retina 显示屏,同时也是与主屏内容交互的输入设备,需要为Touch Bar 做适配的同学,来看这篇苹果官方的人机交互指南。

    就目前而言,Touch Bar 能实现对系统或应用功能快速访问。 其右侧的 Touch ID 支持指纹登录并能在 App Store 和 Apple Pay 上完成支付。

    举例来说:当用户在编辑文档时,Touch Bar 可以对字体和字号进行调节;当用户查看地图时,Touch Bar 能一键查找附近的加油站、住宿和餐馆。

    uisdc-touchbar-201611132默认状态下,Touch Bar 右侧的 “控件条”(Control Strip)中包含系统操作控件,如唤起Siri、调整主屏幕的亮度及音量等,之前是通过物理按键进行这些操作的。中间的 “应用区”(App region)用来操作应用的特定功能。”系统键”(System button)会根据当前状态切换为相应的按键。

    uisdc-touchbar-201611133Touch Bar 允许做调整。用户可以从 “控件条” 中移除功能,甚至将其完全隐藏。在隐藏状态下,仅显示 “应用区” 。用户也可以隐藏 “应用区”,只显示 “控件条” 。有些应用也允许用户在 “应用区” 添加或删除功能。

    一、Touch Bar 设计原则

    在设计 Touch Bar 应用界面时,请遵循以下原则:

    设计情景化体验

    Touch Bar 内容需与主屏内容相关。在应用中区分不同的场景,并根据应用的实际使用情况,切换不同层级的功能。

    看作键盘和触控板的延伸,而非显示器

    尽管在技术层面上 Touch Bar 就是屏幕,但它是当作输入设备使用的,用户可以通过 Touch Bar 使用某个功能,但他们的焦点应该处于主屏幕之上。任何过分吸引用户注意力或者会影响主屏幕上首页任务的信息,如警告窗口、信息、滚动内容、静态内容等,都不应该在Touch Bar上展示。

    视觉效果尽量与实体键盘一致

    Touch Bar 中的控件在大小和颜色方面应尽可能与实体键盘外观保持一致。

    不允许有专属控件

    并非所有设备都有 Touch Bar,用户有可能禁用一个应用配置在 Touch bar 上的控件。应始终提供能在键盘或触控板上执行任务的方式。

    控件能立即生效

    提供更快捷的操作,否则用户需要用更多步骤来完成诸如点击控件或从菜单中选取项目这样的任务。具体可查看 Controls 。

    立即响应用户操作

    即便应用在工作中或主屏幕正更新内容,Touch Bar中的任何已启用的控件也应能立即响应用户的操作。

    尽可能在 Touch Bar 中完成操作

    用户不应该切换到键盘或触控板来完成操作,除非这项操作所要求的界面控件复杂度超出了Touch Bar的支持范围。

    避免执行常见的快捷键操作

    一般来说,Touch Bar 不提供包含查找、全选、取消选择、复制、剪切、粘贴、撤消、重做、新建、保存、关闭、打印和退出等操作,也不应该重复提供已有的键位导航,如向上翻页和向下翻页。

    一致并准确地反映状态

    如果控件同时处于 Touch Bar 和主屏幕之上,两处应呈现相同的状态。例如,如果一个按钮在主屏幕上是禁用状态,那么它在 Touch Bar中也应为禁用状态。

    避免将交互行为镜像显示到主屏

    例如,如果用户在 Touch Bar 中点击了控件并显示了其选项列表,这些选项不应在主屏幕上显示。

    二、 交互

    2.1 辅助功能

    macOS 提供了大量的辅助功能来帮助失明、失聪以及其他残疾群体。与标准界面元素一样,Touch Bar中的控件也可以轻松访问。

    为控件提供替代文本标签:文本标签并不会显示在触控栏上,但是它们能让 VoiceOver 语音描述控件,让视力障碍用户的调用和导航操作更轻松。

    为自定义控件添加文本标签:VoiceOver 可以借用这些标签,语音描述自定义屏幕上的控件。

    2.2 用户自定义

    Tou