适配 macOS 新外观

（你好 WWDC 2020） 你好 欢迎来到 WWDC （适配 macOS 新外观） 大家好 欢迎来到 Apple Park 我叫 John Tegtmeyer 我是参与开发 AppKit 的工程师 稍后我的同事 Jeff Nadeau 会加入进来 我们非常高兴 能带领大家了解 macOS 的新外观 大家可能已经见过了 macOS 所具有的全新设计 其中包括 Mac app 外观和构造上的巨大更新 包括全高度边栏 它带有色彩丰富的图标 和更新后的符号图标设计 这些更新还包括全新的工具栏 它具有行间标题以及即大又显眼的控件 以及与下方分割显示区域的集成

内容列表的外观也进行了更新 包括一种新的按下选中样式

这是一个很大的变化 大家可能会好奇 这对大家的 app 有什么作用 好消息是这些设计上的变化 大多是自动完成的 繁杂的修改工作由框架代劳 因此大家的原生 Mac app 可以直接 在 macOS Big Sur 上得到美观的效果 不过只要再多做一点适配 大家就可以让 app 的外观锦上添花 我们今天要讲的就是这方面的内容 这个新设计可以细分为三个方面 首先是窗口结构方面的更新 比如边栏和工具栏等元素 这可以帮助大家的 app 取得成功 其次是控件方面增加了一些很棒的新功能 最后是符号图像 它们已经在 macOS 上提供

我们首先谈谈边栏和工具栏的更新 本次最亮眼的更新之一 可能就是漂亮的全高度新边栏 在此以“邮件”为例 只要在 Big Sur 上生成 app 就能使其直接获得新外观 因为它利用的是现有的 API （全高度边栏使用现有的 API） 具体来说 大家需要确保在生成边栏时 使用 NSSplitViewController 并且其 SplitViewItem 配置为使用边栏行为

这里用到的第二个 API 是 fullSizeContentView 窗口遮罩 这使得内容可以布局到 通常为标题栏保留的空间下方

如果大家还没有利用到 fullSizeContentView 样式 那么在 macOS Big Sur 中 有方法更轻松地进行适配 NSView 现在提供多种不同方式 来为大家的视图发现安全区域

大家已经可以采用这些新的安全区域 它们就在 Interface Builder 里

只要在 Size Inspector 中 勾选以下新选项 即“安全区域布局参考线”

安全区域布局参考线 就会出现在视图中供大家使用 （带边栏的窗口控制器） 如果大家正在 Interface Builder 中 创建新的 Mac app 那么在目录中有个很方便的对象 可以创建预先配置好的边栏

它能建立一个带边栏的 分割视图控制器 并自动调整大家的窗口 以适配 fullsizeContentView 这里不需要做额外的配置

在少数情况下 大家可能不需要全高度边栏 NSSplitViewItem 现在有了一个新的属性 可以让大家不使用全高度边栏 如果大家的边栏通常是折叠显示的 那么就可以考虑不使用 或工具栏较拥挤 需要更多的空间时 也可以考虑不用

但是请注意这个属性 只影响具有边栏行为的项目 （边栏图标颜色） 由于有了新的多彩图标 现在的边栏还增添了一抹新的色彩 默认情况下 一切边栏图标 都使用强调色来着色 但现在有了一种新的 NSOutlineViewDelegate 方法 大家可以用它来自定义颜色 （边栏着色配置） 该委托方法返回的是 一个 NSTintConfiguration 实例 该实例能提供几种不同类型的着色

第一种是 default 配置 它直接使用强调色

单色选项提供的是没有彩色的外观 这类似于 Catalina 的边栏图标

PreferredColor 允许大家指定一种颜色 将其与默认强调色一同使用 但如果强调色被自定义了 指定的颜色则跟随它一起改变 比如 “邮件”的蓝绿色文件夹 与默认的蓝色强调色相得益彰 但它与红色的强调色则不搭配

最后是 fixedColor 它能指定一种不会改变的颜色 一个非常合适的例子就是 “邮件”的 VIP 文件夹 它永远是黄色的星形图标 （边栏图标颜色） 大家可以使用本特色功能来区分 边栏的各个部分 以适合自己的 app 的方式去使用它 大家也可以用它来将一种颜色 与某一特定项目建立强联系 或者使用单色选项 使边栏中的次级分组变得不显眼 以便将用户的注意力导向到重要内容上

下面请大家看一下工具栏 在 Big Sur 之中 工具栏有了崭新的设计 请注意现在各项目后面 再也看不到拟物块了 而是与窗口中的内容看起来整齐划一 这也是不需要大家动手就能得到的效果 （工具栏样式） 除了工具栏的新外观之外 工具栏还有了许多新样式 每种样式都具一定的目的性 比如在窗口中具备强烈的存在感 或者后退一步 让内容占据焦点位置 （现有样式中的祖父级样式） NSWindow 现在有了名为 toolbarStyle 的新属性 用于控制这些新外观

首先是统一型样式 这是工具栏的新标准外观 该样式强调工具栏中控件的存在感 大家能看到控件更大 图标更显眼 它还支持新的行间标题 位于边栏旁边工具栏的前方边缘处

（新标准 富有冲击力的设计 行间标题） 因为这是工具栏的新标准外观 所以对于大多数不符合 其他样式要求的窗口来说它都是好选择 它的大尺寸控件和简洁的标题 可以帮助 app 在 macOS 的新外观下 显得尤其美观

统一样式有一个变体 即紧凑型统一样式 该样式的布局更紧凑 拥有常规尺寸的控件 工具栏的高度也更小 （用于 控件稀疏的工具栏 焦点位于内容时） 如果大家的窗口配置了隐藏窗口标题 该外观就正是过去所一直应用的外观 在 Big Sur 中 本外观现在支持增加 一条可选的行间标题 这种样式可以使用在 用户注意力重点聚焦于窗口内容 且工具栏项目不多的情况

新的“偏好设置样式”是特别为 app 的偏好设置窗口设计的 它补充了工具栏中可选择的图标 给予它们相似的尺寸 将其居中 使窗口得到一种 整齐划一的美观观感 （用于设计偏好设置窗口时） 该偏好设置样式有个非常棒的地方 就是不需要大家做适配工作 只要大家已经在使用 NSTabViewController 控件 并使用了 TabStyle 工具栏即可 如果大家还没开始使用这个类 就快为自己的偏好设置窗口使用它吧 因为它让切换标签变得轻而易举 还能免费提供这个崭新的外观

扩展样式可能是大家更加熟悉的 因为它曾经是工具栏的标准布局 请注意窗口标题是如何 放置于工具栏顶端的 且标题可以在必要的时候 扩展到横跨整个窗口 （以往的“标准”工具栏） 这个样式推荐用于窗口标题较长的情况 或者工具栏充满大量项目的情况 如果大家需要 与现有的工具栏保持兼容性 那么这也是一个好选择

最后 我们还有自动样式 它会根据窗口结构决定 使用什么样的样式 这个是默认值 并会为大家与 Big Sur 之前版本 相连的 app 维持现有布局 （工具栏控件） 工具栏中的控件也有了崭新的设计 而且不需要额外的适配工作

请注意工具栏在一般使用时 不会在后方显示边框 但鼠标悬浮于控件上时 就能看到边框再次出现 并提供非常舒适的视觉反馈效果 （文字控件获得线条边框 定义可单击区域） 虽然大多数控件周围不会有边框 有文字的控件会有线条边框 围绕在控件的边缘上 这有助于界定工具栏上哪些是空区域 并可以用来拖动窗口 （大尺寸工具栏控件） 另一个影响控件的变化 就是统一工具栏样式所使用的全新大尺寸 大家会发现控件以及其图标 都更大 并具有更大的字重

因为有了这种新的控件尺寸 大家可能发现有些按键在一边 或者几个边上 被切掉了边缘 这很可能是因为工具栏项目中 定义的最小和最大尺寸太小了

这些属性正在被渐渐弃用 为了给 AppKit 自动来为视图测定尺寸让道 自从 Mojave 之后 此功能已经实现 所以多数情况下 大家可以彻底地移除这些调用 这是最简单的适配工作 当然 如果大家对各项目的尺寸 需要更多控制 大家也可以使用约束值

大家可能已经注意到了 行间标题和工具栏的另一项功能增强 邮件展示了未读消息计数 它就位于窗口标题下方 使用小字标示 （窗口副标题） 这是使用 NSWindow 的新副标题属性 来实现的 这是一种展示次要文本的绝好方法 比如未读消息数 在统一工具栏样式中 大家能看到这段文本置于主标题的下方 这省下了大量的空间 使用这种扩展样式 可以将副标题放置于主标题旁边 并自动进行分割 （导航工具栏项目） 说到窗口标题 如果大家的工具栏包括控件 比如后退和前进 这些项目会属于窗口的前方边缘处 使用 NSToolbarItem 的新导航属性 大家可以指定这些项目 剩下的工作交由系统完成 在自定义工具栏时 导航项目也具有特别的行为 这些项目可以通过自定义 来放进工具栏或者移出 但它们无法被从这个标题前方的位置移除 工具栏中有一项特定控件 拥有了全新的使用体验 它就是搜索控件 当窗口足够大时 会正常展示完整的搜索框 但当窗口被缩小 搜索框就被折叠成一个按钮

单击这个按钮会重新展开搜索框 这就保证了搜索功能可以随时使用 窗口的大小并不影响使用 （空间不足时折叠 优先提供高可视性） 那么 为了完成此行为 我们增加了一个新的项目 称为 NSSearchToolbarItem 该项目在设计上 就为轻松适配作了专门的安排 让大家可以保留原有的搜索框

大家的 app 里可能会有 类似上图所示的代码 而适配新的搜索项 可以简单到仅需两步 第一步 把项目的类改成一个 NSSearchToolbarItem

然后 不要设置该项目的视图属性 而是设置该项目的 searchField 属性 完成这两处小改动 大家就能得到崭新的搜索体验 （搜索框 搜索工具栏项目） 在 Interface Builder 中 大家能发现有一个搜索项目 已经被添加到对象目录中了 它有个非常棒的地方 就是能维持向下兼容 当大家的 app 在旧版本系统上运行 所使用的就是现时所用的标准搜索框 不必进行任何运行时检查

而只要改几处代码 大家就能适配全高度边栏 崭新的工具栏样式 并调节各项目的布局 这些特色功能 大部分完全不需要大家去修改 但大家可以再进一步配置 让窗口能完完全全地利用 macOS 的新外观

参照一下邮件 app 注意工具栏中有几个项目 与窗口中的内容区域对齐 （工具栏分区） 分割视图的分割线 延伸到窗口的顶端 创造出了这些优美的全高度分区 随着分割线的尺寸改变 工具栏的项目也随之改变 这为控件提供了有用的上下文 显示出它们能对哪些上下文起作用 （工具栏分区 内容可以自定义） 适配这些工具栏可以做到锦上添花 但这并不需要大量的劳动 它们是用新的 NSTrackingSeparatorToolbarItem 创建 每个项目都被配置为 跟踪一条特定的分割线 剩下的由工具栏来完成

在自定义过程中 这些分区不可以被移除 但是各分区的内容可以被自定义

创建这些项目中的任意一个 只需要一行代码即可 使用构造函数来创建项目 并将其分配给分割视图以跟踪 并指定该分割视图的哪一个分割线 应该作为对齐的基准

如果大家在项目创建时无法访问 该分割视图也没关系 只要在窗口显示之前将其分配即可

（允许将项目定位至边栏上方） 大家也可以使用新的跟踪项目 放置控件于全高度边栏的上方 为了简化此步骤 AppKit 增加了一个 新的标准项目标识符 用来自动发现全高度的边栏 放置在分隔符前的工具栏项目 将出现在全高度边栏上方 （标题栏分隔符） 大家可能注意到 工具栏下方已没有分割线 但是情况并非总是如此 工具栏和滚动的内容之间 会自动地产生阴影 在内容滚动消失的边界产生层次感 这对窗口中的每一个具备 滚动视图的分区都有效 （NSScrollView 必须填满框架 需要 .fullSizeContentView） 为了看到该行为 请确保自己的滚动视图 完整填满了这个分区的框架 大家还需要使用全尺寸的内容遮罩 我们在前面提过这点 否则大家还是会看见分割线 无论显示的内容是否为滚动内容 （覆写每个分区的样式） 如果大家想要显性地要求显示分割线 而不是滚动阴影 或者完全不显示任何分割 那么大家可以将 titlebarSeparatorStyle 应用到 每一个分割视图项目上 这使得我们可以指定 哪些分区应该有滚动内容层次感 而哪些应该没有

或者大家也可以指定 某一窗口的样式为整体样式 注意窗口上的样式 将会取代任何由分割视图项目定义的样式 如果大家要把样式的控制权交给项目自身 请确保窗口样式被设为“自动” （适配系统类） 我们已经谈到了一些全新设计中 富有冲击力的窗口级别特色功能 这些特色功能被直接加入到 NSToolBar 之中 以及 NSSplitViewController 中 如果大家还没有利用好这些类 那么现在正是 让系统替大家代劳大量工作的好时机

以上就是让大家的窗口大获成功的方法 接下来 Jeff Nadeau 将会带领大家 了解控件方面的精彩改进 （控件） 谢谢 John 现在大家已经优化了窗口结构 让我们来看看 macOS Big Sur 会给 app 中的控件带来哪些改进 系统控件在 Big Sur 中 采用了新式现代的设计 而且 AppKit 可以自动给大家的 app 提供这些更新 有一些控件的更新或许能让大家尤其兴奋 首先是强调色的更新 对于 macOS 上的强调色家族 大家可能已经很熟悉了 这些颜色影响着所有的用户界面元素 包括控件 选中项背景、焦点环等等

在 macOS Big Sur 中 我们增加了新的强调色选择 大家可以选择任意颜色 如果某一种颜色对大家的 app 很特别 那么大家可以将它 指定为 app 的自定强调色 当在常态偏好设置中选中该多色彩选项后 该自定义强调色 会应用到大家希望它出现的一切地方

包括控件、列表选择项、边栏图标 菜单和焦点环 这是让 app 表达独特个性的好方式 （自定强调色） 设置自定强调色非常简单 在资产目录中就可以完成 首先在 app 的资产目录中 创建一个新命名的颜色 对于新创建的 app Xcode 甚至会为帮大家添加颜色 任意设置自己喜欢的颜色 大家可套用系统颜色 也可以自己挑选颜色 别忘了 大家还可以在深色模式中 选择不同的色度 （在 PROJECT EDITOR 中进行设置） 选好自己满意的颜色后 大家可以在 project editor 中 给自己的强调色指定名字 这样 Xcode 的创建系统可以识别它 就是这么简单 在 Big Sur 上创建和运行自己的 app 大家会在用户界面看到自己的自定颜色 （人们可能会偏好不同的强调色） 请记住 大家的自定强调色 只在系统偏好设置中 设置为 multicolor 时才可用 在强调色方面 我们要支持一定的个性化 让大家可以选择 自己喜欢的颜色 并用在自己的 Mac 上 （已命名的系统颜色 永远与偏好设置中一致） 因此大家应该继续使用已命名的系统颜色 而不是给自己的自定强调色写硬代码 这些颜色会自动跟随强调色偏好设置 并会确保大家能按需要 与系统的其余部分匹配 我们认为这是 app 表达一些个性的有趣方式 接下来我要谈一个 我们认为会非常受欢迎的新控件风格 那就是大控件

推出大控件的缘由是 有时候我们需要更大的按钮 这种情况在引导流程中十分常见 如图所示 在窗口中间有一个唯一的行为召唤 这种用户界面类型越来越普遍 而且我们知道很多 app 必须依靠创建自定义按钮 来得到这样的控件 现在我很高兴地告诉大家 大控件如今也是一个标准的控件尺寸 所以大家只要把控件尺寸设为大 就可以得到大按钮 而且也能放心地知道 按钮会与系统主题相匹配

但它的益处不仅在于按钮 大控件适用于大多数按钮样式 包括弹出按钮和下拉菜单 它也适用于分段控件、文本框和搜索框

其实大家最经常看到大控件的地方 是在我们刚才看到的工具栏统一新样式中 其工具栏的所有选项会使用大按钮

大家还会在系统警报中看到大按钮 它能显眼地标识出 对于系统警告的可行操作 接下来我要特别提到一个控件 那就是滑动条 macOS Big Sur 中的滑动条有了新外观

在这个新样式中 刻度线显示在滑轨中间 将有无刻度线的滑动条布局进行了统一 （滑扭形状与大小已更新） 大家使用新的 SDK 进行构建时 会自动应用此新外观 所以有一些内容大家可能会想了解一下 （文字标签） 首先 它可能会影响大家的布局 如果大家之前的配置是手动将标签 与滑动条的滑轨对齐 那么当 app 使用这个新样式时 大家会发现 大家的标签已经不对齐了 因为滑轨和刻度线 在控件的框架中已经居于不同的位置 解决方案是以滑动条为基线 将标签对齐 滑动条会计算出基线偏移值 它对任何相邻的标签文字都适用 这项技术在 Catalina 也适用 因此大家只要配置一次约束条件 就可以在两个版本中得到准确对齐的标签 接下来让我们看看表格视图的部分更新 （表格视图样式） （同样适用于 NSOutlineview） 大家可能已经在我们的一些截图中 看到表格选取项的新外观 这是我们增加到 NSTableView 的 新按下选中样式

该按下选中样式对大家的单元格视图 应用了一些额外的水平留白 并为第一行和最后一行 应用了竖直方向的留白 它还具有稍高的默认行高 以及更宽的多列表格间距 大家可以使用 NSTableView 的 新样式属性控制这个样式 这里有四个内置选择 首先是 automatic 它是默认值 它根据表格的配置来选择样式 而 fullWidth 样式展示的选区 是在表格选区中从一边到另一边 如在 Catalina 和更早版本系统中一样 Inset 是我们刚刚看过的按下选中样式 而 sourceList 则是特别为 边栏来源清单设计的新外观 Style 属性让大家可以配置 自己想要的样式 而 effectiveStyle 为只读属性 它能告诉大家自动样式 被解析成了何种样式 （表格视图样式） 自动样式解析是 基于表格视图的配置进行的 如果它在边栏内 就会选择 sourceList 外观 如果表格嵌套在有边框的滚动视图下 那么它将会使用 fullWidth 样式 其他情况则会默认使用新的按下选中样式 （在边栏中 - 有边框 - 其它情况） （基于配置的解析） 因为按下选中样式 可能影响大家的布局排列 它将只会用于使用新版 SDK 所创建的 app 但是 边栏永远使用 新的 sourceList 样式

新的样式属性完全替代了 旧有的 sourceList 反白选取样式 所以当设置一个 sourceList 时 大家应该偏好使用新样式的属性 我们这样以软性的方式 弃用旧的反白选取样式 现在大家的内容列表已经很美观了 让我们换个话题 谈谈 app 中的字体排版 （文本样式） 好消息是 macOS 有了文本样式 大家在其它平台可能已经看过 这个排版样式的层级 在 macOS 中 它们现在也可以用于大家的文本内容了

字号和字重已经过调整 以适应 Mac 的设计感 集中于我们的 13 磅标准正文字号附近 我们要记住的重要一点是 这和动态排版不一样 所以并不存在能在系统层面上 调节这些字号的滑动条 以下是大家访问 这些系统文本样式及代码的方式 大家可以通过使用 preferredFontforTextStyle 的方法 来获取 NSFont 实例 或者如果大家喜欢用字体描述符 也可以改用 preferredFont- DescriptorforTextStyle 来实现 （文本样式） 当然 字体挑选器和 interface builder 也已经添加了文本样式方面的支持 现在大家的控件和排版看起来很美观了 让我们重点谈一谈图标设计 （符号图像） 眼尖的观众也许已经注意到 在 macOS Big Sur 整个系统中 图标设计已经焕然一新 这是因为我们将 SF Symbols 引入了 Mac 这意味着大家可以访问 我们的 2500 多个内置符号图像库 也可以选择设计自己的符号 （符号） 符号图像非常适合于建立 能够与 app 相得益彰的排版图标设计 因为它们能随字号缩放 而且它们可以适应各种字重 因此它们和刚才提到的 系统文本样式是天然的绝配 这还意味着符号图像可以 轻易适应不同的配置 例如 还记得新统一工具栏的大图标吗？ 这些图标实际上是符号图像 被设置为 13 磅 字重为中黑 并使用大的符号比例 工具栏控件自动配置它们的符号图像 以匹配工具栏的大小和样式 所以如果大家使用符号 任何样式的工具栏 都可以得到整洁统一的外观

但符号图像的百搭特性 不仅仅在这里发挥作用 （小-中-大） 符号可以用作精美的边栏图标 在这里我们看到 NSOutlineView 同时自动缩放了文本标签 以及符号图像 以匹配系统偏好设置中挑选的边栏尺寸 因此在边栏中可以很轻松地 支持这三种尺寸 （使用新图像初始化器进行创建） 大家还可以通过 使用 systemSymbolName 初始化器的 新 init 来访问系统符号 大家创建一个系统符号的时候 还有机会 提供一个访问性描述 我们强烈推荐这么做

大家也可以在 Interface Builder 中 指定系统符号 这个菜单提供了每个符号的预览 方便大家找到想要寻找的符号 在自己的用户界面使用符号图像时 最好的方法是使用 NSImageView 它知道如何恰当地处理符号图像 以匹配大家按偏好设定的排版属性 以及其它因素 比如显示比例 它还知道怎样有效地显示符号图像 我们给 NSImageView 添加了两个新属性 以帮助大家配置自己的符号图像 即符号字体及比例 （回复） 图像显示还能处理符号图像的 独特对齐属性 其中最重要的就是基线对齐 当大家在 NSImageView 中 使用符号图像时 大家可以利用自动布局 使图像和相邻的标签实现基线对齐 这样它们就能完美对齐 符号图像通常可以根据所在的环境 调整大小、粗细和比例 例如 一个按钮中的符号图像 总是与按钮的字体相匹配

但是如果大家需要手动专门调整 符号图像的某些方面 大家可以使用新的 withSymbolConfiguration 方法 创建一个嵌入了 相关配置的新 NSImage

大家可以利用尺寸、粗细和比例 创建符号配置 或参考我们刚介绍的文本样式 如果大家需要自己绘制符号图像 我在这里提供一些 几何对齐方面的重要信息 在图像自身的坐标空间中 其字形位于有边界的矩形内 其大小与 NSImageSize 属性相同

在有边界的矩形内是对齐矩形 对于符号图像来说 它的范围从基线一直到字顶高度 如果大家需要手动依照 这些排版特性来实现对齐 大家可以使用对齐矩形 来随之调整自己的绘图

大家尤其需要避免直接 在层内容中使用 NSImage 这对多个版本的 macOS 都带来了问题 但对符号而言尤为严重 一旦一张图片被设定为层内容 它将失去对所处上下文的敏感性 并将无法自适应显示比例这样的属性

这种情况下也难以妥当地 为该层指定尺寸和位置 最终成品只有模糊的符号 单纯使用 NSImageView 更好些

关于符号的最后一点 我们已经更新了 大多数现有的已命名系统图像 来直接映射到符号图像上 所以举例来说 如果大家要求 NSImageNameShare 模板 就会得到方块和上箭头的符号 这个改变可能会影响在大家的 app 中 绘制或布局这些图像 所以我们这种映射只会用于 使用新 SDK 创建的 app 当大家为 Big Sur 重新创建 app 时 这一点是需要注意的 我们说了很多很酷的东西 所以我们来检阅大家的下一步骤 一旦大家开始用新 SDK 创建 app 一开始要先确认自己使用了全高度边栏 以保证能与现代的窗口结构相匹配 （更新工具栏和标题栏） 然后看一下大家的工具栏 考虑哪个样式适合自己的 app 如果大家的窗口是基于分割视图结构 大家可能还要在工具栏中添加分割跟踪 这样大家可以把它分成整洁清晰的区域 比如邮件这样的 app 接下来是考虑在资产目录中 定义一个自定的强调色 这是让 app 表达个性的好方式 最后是开始利用符号图像 现在大家可以访问一个巨大的符号库 这些都是 Apple 推出的高质量符号 它们有很多用处 而且可以匹配 app 中的排版 macOS Big Sur 在 macOS 设计上 是一个巨大的更新 很期待看到大家 如何将这个新的设计方向 引入自己的 app 中 感谢观看

（你好 WWDC 2020）