Tips for NSTouchBar

2016-11-26 09:55:13来源:作者:Get Schwifty人点击

第七城市

今天为 CurrencyX 加上了 Touch Bar 支持,开发起来很简单。前半部分为 macOS HIG 中 Touch Bar 部分阅读笔记,后半部分为开发过程中的一些 Tips。

Design Tips

所有人都为新的 Touch Bar 跃跃欲试,需要在开发之前考虑的第一个问题是:应该怎样使用它才能让产品变得更好用。在开发前,我先认真的读了一遍 macOS Human Interface Guidelines: About the Touch Bar ,提炼出一些关键内容。

关于 Touch Bar

设计应用的 Touch Bar 部分应该遵循以下原则:

提供与当前主视图相关的辅助操作。在应用内不同场景下,为用户设计当前所需的 Touch Bar。 将 Touch Bar 作为键盘、触控板的延伸,而不是屏幕扩展。不要显示 Alerts,Messages,Scrolling Content,Static Content 或者其他任何会令用户从主屏幕转移注意的内容。 Touch Bar 上的内容应该匹配物理键盘的显示。这一点系统已经处理好了。 不要以 Touch Bar 作为功能唯一触发点。要考虑没有 Touch Bar 的 Device 也可以正常的使用应用的全部功能。 Touch Bar 上按键应该直接处理事件,尽量避免 Popover 等层级按钮。 对 Touch Bar 上的按键事件即刻给予反馈。 尽量让 Touch Bar 上的按键完整的控制事件,避免在 Touch Bar、键盘或触控板间切换操作。 保持按键在应用内逻辑一致。如果主屏幕上某个按钮 Disabled 了,Touch Bar 上相应的按钮应该同时 Disable。 避免 Touch Bar 和主屏幕内容重复。如果 Touch Bar 上某个按钮点击后展开一列按钮,主屏幕上不需要显示这些按钮。

其中最重要的一点应该是 “将 Touch Bar 作为键盘、触控板的延伸” 。Touch Bar 相当于根据应用当前视图需要的可视化快捷键。所有的设计都应该基于这一点出发。

Touch Bar 的交互 Accessibility

在开发过程中,值得为 Touch Bar 的 Accessibility 作出一些微小的努力:

为控件提供 Alternative text label。在 Touch Bar 上它们是不可见的,但是 VoiceOver 可以通过 Label 对控件进行描述。 为 User-configurable controls 提供 Customization Labels。在 Customization 界面,Voice Over 可以通过 Label 对控件进行描述。 Customization

为基本、主要的操作提供 Default 控件,同时,为辅助操作提供 Customizable 的控件,更好的迎合不同用户个性需求。

Full-Screen 和专注内容的应用

在许多应用(例如全屏、视频播放器)中,顶部菜单栏会自动隐藏,因为用户此时更希望能够专注于应用本身。Touch Bar 应该提供 有限并有用 的控件。

Gestures

Touch Bar 之所以被称为键盘和触控板的延伸,因为它既是可视化按键,又可支持多种手势。

Tap Touch and Hold Horizontal Swipe (Pan) Multitouch Touch Bar 视觉设计

HIG 强调在 Touch Bar 上应该避免一切动画,并详细的列出了建议的颜色,图标,字体和 Layout。非常有用的是, 列出了系统提供的图标 ,足以满足大部分需求,在开发时可以根据需要来查阅。

Touch Bar 控件

系统提供的控件远不止按钮而已,仔细看看太有意思了。

Button, Toggles, Labels, Segmented Controls

这些与相应的主屏幕控件相同,总的来说在 Touch Bar 上使用时应该遵循:

优先使用意图清楚的 Icon; 如果一定要用 Title 来说明,尽可能地短。 Character Pickers / Color Pickers / Sharing Service Pickers

系统为几个常见的操作提供了完整的 Pickers,直接用就好了。

Candidate Lists

这个很有意思,想象一下现在应用的输入框点击后能在 Touch Bar 上显示程序默认提供的 Candidates 得多方便。

Scrubbers

现在的 Safari 切换 Tab 便可使用 Touch Bar 上的 Scrubber 空间,看上去是整个 Tab 的截图。它看上去就像是 Touch Bar 上的一个 Collection View。需要注意:

按照逻辑顺序显示内容; 避免显示过多的数据,毕竟它只是一个控件。 Popovers

Popover 中隐藏着一条 Touch Bar,点击之后会展开。但正如 Guideline 中提到的:应该避免这样的设计。如果一定要用,优先考虑通过 Touch-and-hold 显示的简单的 Popover。

Slider

使用它时,可以将 track line 的颜色与应用保持一致;通过左右图标表示最大值和最小值的含义。

开发过程中试着使用了 Candidate List,查看相关头文件,实现相应的 delegate 方法即可。相信其他控件的使用也没有太大难度。

Develop Tips

开发过程中参考的这篇作为开始 TouchBar 入门开发指南 · Perfect Freeze! ,此外补充一些 Tips。

如何动态修改 Touch Bar Items

在 CurrencyX 中,Touch Bar 可以让用户方便的选择列表中的任意一项作为 Base Currency:

选择之后列表会发生相应的变化,此时需要重设 Touch Bar 的内容,只需: touchBar = makeTouchBar() 即可,系统还会提供优雅的动画。

如何分隔 Items

在 NSTouchBarItem 文件底部,系统提供了几种默认的 NSTouchBarItemIdentifier,其中前三种是用来控制间距的:

fixedSpaceSmall / fixedSpaceLarge / flexibleSpace

具体对应的距离在 HIG 中有详细说明:

如何居中 Items

将 Touch Bar 的 principalItemIdentifier 设为 Item 的 identifier,在 makeItemForIdentifier 方法中,根据需要可以返回一个 NSTouchBarItem 或者 NSGroupTouchBarItem。

层级的 Touch Bar Items

NSTouchBarItemIdentifier 的扩展中,前三种用来控制间距,第四种叫 otherItemsProxy,Responder Chain 上层的 Touch Bar 可以包含下层的 Touch Bar。

我们先来看个例子,在这个 ViewController 中我们的 Touch Bar 提供了每一列的 Currency 和一个搜索按钮:

var identifiers = userCurrencyCodes .map { NSTouchBarItemIdentifier($0) }identifiers.append(.fixedSpaceSmall) identifiers.append(.search) touchBar.defaultItemIdentifiers = identifiers

此时如果编辑 TextField,Touch Bar 会自动变成 Text Field 控件适用的样式:

回到我们的 View Controller 的 Codes 中,在 search 后加上: identifiers.append(.otherItemsProxy)

此时在主视图为 First Responder 时,Touch Bar 没有任何区别,但是编辑 Text Field 时,View Controller 的 Touch Bar 并没有消失:

所以 otherItemsProxy 使得 Responder Chain 上层的 Touch Bar 可以包含下层的 Touch Bar 。

每一个 NSResponder 都可以是一个 NSTouchBarProvider,系统构建 Touch Bar 的过程从 First Responder 开始,如果 First Responder 的 touchBar 不为空则加入,向上遍历,如果遇到了 otherItemsProxy,则会将两者合并,并继续向上遍历,直至 Final Responder,然后加载出对应当前 Responder Chain 的 Touch Bar。

总结

更新了 CurrencyX 之后觉得,Touch Bar 真是一个对开发者友善又有趣的新朋友,看得出 Apple 为了新电脑的畅销付出了巨大的努力。

参考 macOS Human Interface Guidelines - Touch Bar TouchBar 入门开发指南 Multi-Touch Bar UI 开发入门指南

Happy Coding :snowman:️ Winter Sweet

支持我们

Price Tag 是一款可以查看任意 App 历史价格的免费的 iOS App

SalesX 是给 Apple 开发者使用的菜单栏工具,第一时间把 app 销售情况推送给你,7 天免费试用

CurrencyX 是 Mac 上小而美的汇率 app

如果你觉得文章对你有帮助,可以买一个支持我们

关注我们公众号,获取最新文章推送

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台