Touch bar 设计规范大全

Touch bar概述

Touch Bar是位于新一代MacBook Pro键盘上方的一条 Retina 显示屏，同时也是与主屏幕内容交互提供动态操作界面的输入设备。基于当前语境，Touch Bar的这些控件能对系统或应用的功能进行快速访问。 例如，当用户在编辑文档时，Touch Bar可提供调整字体类型和大小的控件。 当用户查看地图时，Touch Bar可一键快速查找位置附近的加油站、住宿和餐馆。 Touch Bar右侧的Touch ID传感器支持指纹登录计算机及App Store和Apple Pay的购买支付功能。

有两个主要控件区的布局。 Touch Bar的中心包含两个一致大小的控件。 其他控件位于左侧。

有三个主要控件区的布局。 Touch Bar的中心包含三个一致大小的控件。 其他控件位于左侧。

2.4 字体

Touch Bar使用的是macOS中的系统字体——San Francisco。 此字体针对易读性、清晰度和一致性进行了优化。 它也匹配实体键盘的字体。 标准Touch Bar控件（如按钮和分段控件）自动使用此字体。 要了解如何在应用中应用系统字体，请参阅NSFont的参考文档。

3 图标

3.1 图形尺寸和分辨率

Touch Bar上的图片资源全部采用@2x切图。在@2x的图片中，1pt等同于2px。比如，36X36px的图标会转化为18X18pt。在图片名称后面加上@2x，然后把它们置入到Xcode文件中的@2x目录下。

3.2 自定义图标

如果系统默认图标无法满足应用内多个任务与状态，可以绘制你的专属图标。

设计高识别度的图标。图标应该与主屏幕上的应用匹配，但需要符合Touch Bar的样式风格。

让图标更简洁。太多细节会让图标语义不清，降低可读性。高拟物的图形需要简化保留最基本的元素。好的图标是通过外形轮廓表意的，只会有少量内部细节。消除锯齿以确保图标轮廓清晰。不要使用投影或用阴影与高光的方式让图标凸显出来。

让图标更一致。无论使用自定义图标还是与系统图标混合使用，所有的图标都需要通过一致的尺寸，细节，透视和描边保持相同的视觉感受。

参考系统图标设计。设计自定义图标时请参考系统图标，尽量遵循相似的表现形式。

为图标准备模板资源。图标模板是一个背景透明并有alpha通道的黑色图像。当图标显示在Touch Bar时，系统自动转化图标并为其应用适当的颜色。

测试图标。为了非常准确的判断图标的表现，需要结合场景预览所有图标，确保模板资源在被系统转化后符合预期。

3.2.1 尺寸

虽然图标可以撑满Touch Bar的高度，但图标的高度通常不超过44px（圆形图标36px）。

保持图标视觉居中。裁剪设计稿以匹配图标宽度，必要时增加内边距以确保图标在控件上显示时视觉居中。

倾斜图标尽量采用45度角。在系统图标里，倾斜元素常常会呈现45度角，例如：全屏和退出全屏的箭头图标；返回、向下、前进、向上的人字形图标；静音图标的斜线；编辑图标中的铅笔；浏览器图标中的指南针指针。查看系统提供的图标作为参考。

3.2.2 颜色和填充

Touch Bar上的图标应看上去与实体键盘按键的字形相似。如果使用了模板和系统颜色，图标会自动产生这种效果。

不要用颜色区分开关状态。系统会改变背景样式表明开关状态。

尽量用100%不透明的图标。倘若为了兼顾可读性，可用不透明度70%的作为辅助。仅当需要提升可读性和平衡度的时候，使用中间色调。

相关的指引，可查看 Color。

3.2.3 描边

为了匹配实体键盘的风格，图标尽量用2px的描边。如果需要让图标占据更多视觉重量，可以尝试3px。

3.2.4 转角

为了匹配系统图标的风格，直角图标使用2px的描边，圆角图标使用1px半径3px的描边，填充形状的圆角使用4px半径。

3.2.5 模板

使用Photoshop和Sketch模板设计合适尺寸的Touch Bar图标。下载图标模版Download Icon Templates。

3.2.6 系统提供的图标

系统提供了充足的代表常规任务和内容类型的图标，可用于应用的控件上。

尽量使用系统图标，因为它们更常见。由于系统图标是模板资源，它们能自动地填色，基于环境光和键盘背光的亮度响应系统白点变化，并对用户的交互行为自动作出反应。

不要重新定义系统图标。为确保体验的一致性，请按照图标的原本意图使用图标。比如，不要把“移动文件”图标应用于下载操作，要用原本的下载图标。

仅使用为Touch Bar而设计的系统图标。其他类型的系统图标，比如工具栏，不是为了用于Touch Bar上而设计的。

链接：Touch Bar上的图标

4 控件

系统为Touch Bar的应用区域内置了多种标准控件。尽可能地使用这些控件，以达到最佳的体验一致性。

4.1 按钮（Buttons）

点按按钮以触发应用程序的对应事件。按钮可包含图标和标题。

图标优于标题。争取设计出足够清晰明了的图标，不要依赖于文本的辅助。

使用简短的标题。太长的标题会使Touch Bar显得过于拥挤。

使用美观的边框颜色。默认边框采取了和实体按键相似的外观设计。如果确实需要自定义的话，推荐使用深色的边框颜色。

4.2 切换键（Toggles ）

切换键是按钮的一种，用于“开启”和“关闭”两种状态之间的切换。

使用背景来表现当前状态。在关闭状态下，系统会自动改变按钮的背景样式，所以不需要使用颜色、文本或另外的图标来表现当前状态。

使用切换键取代单选框和复选框。如果你需要用户在两个状态当中进行选择的话，使用切换键。

4.3 候选列表（Candidate Lists）

输入文本时，候选列表提供自动文本建议。用户可以通过点击，将文本建议输入到主屏幕中激活的文本框或文本区域内。用户可以选择展开或者收起候选列表。展开的候选列表将会替代区域内的其他控件。

4.4 字符选择器（Character Pickers）

点击字符选择器时，会打开一个包含一系列特殊字符的弹出视窗，如emoji。用户可以通过点击，将其输入至主屏幕中激活的文本框或文本区域中。

4.5 拾色器（Color Pickers）

点击拾色器时，会打开一个包含了颜色选择控件的弹出视窗。拾色器可通过配置，展示为选取颜色、边框或文本颜色的图标。无论是哪种图标，所有拾色器打开后显示的均为同一视窗。

带意图地使用图标。当拾取边框颜色时，使用边框颜色选取图标。当拾取文本颜色时，使用文本颜色选取图标。其他拾色场景下，使用颜色选取图标。

4.6 标签（Labels）

标签展示只读文本，通常是为了描述一个控件而设。

一般来说，避免使用标签。虽然Touch Bar可以展示标签，但是最好不要使用，因为用户并不能与标签进行交互。我们更应该专注于为控件设计更加有趣的图标。如果你必须使用标签，使之尽可能的简短。

当需要为复杂图标做文字补充时，标题优于标签。如果一个控件的图标本身并不是足够清晰名了，可考虑增加一个简短的标题以提供其使用语境。

4.7 弹出视窗（Popovers ）

在折叠状态下，弹出视窗在Touch Bar中表现为一个单独的按钮。

展开时，弹出视窗将生成一个包含一组暂驻控件的模块，覆盖掉应用区域中的其他控件。在这个模块的覆盖下，用户必须进行选择操作，或者也可以通过点击退出键收起当前菜单，使得弹出视窗回到折叠态。

通过点击以展开弹出视窗。弹出视窗也可以按需响应长按动作。支持长按动作的弹出视窗需要包含左箭头符号。

通过长按触发的弹出视窗，可以使用和普通弹出视窗一样又或者是完全不同的蒙层。在长按触发的蒙层中，用户通过滑动手指到达想要的选项，松开以完成选择并关闭弹出视窗。

有节制地使用弹出视窗。单一点击应能触发Touch Bar中的大多数控件。

避免嵌套的弹出视窗。一般来说，尽量避免在Touch Bar中进行一级以上的导航。

给简单的弹出视窗们保留长按动作。长按动作主要是为了展示一组包含简单选项的蒙层而保留，例如分段控件，这样用户便可以从中进行选择。

在折叠状态的弹出视窗上表明选中项。弹出视窗在展开时包含了一组选项，在折叠状态下则应该示意当前选中项。

提供明确的退出路径。确保用户知道如何收起一个弹出视窗，并回到之前的一组控件。

4.8 滑动条（scrubber）

滑动条可以让用户通过左右滑动，在如一组时间或者照片等内容中进行概览。滑动条可以是固定的，可以是能自由移动的，也可以是高度定制化的——但是需要保留和Touch Bar相称的外观。

固定滑动条为一组组织好的内容提供流畅而连续的交互，如Safari的标签页切换。用户在使用滑动条左右滑动时，手指底下的项目高亮展示。取决于滑动条的配置，用户可以通过滑动或抬起手指完成选择。如果内容超出了固定滑动条的显示区域，当手指滑动到控件的边缘的时候，滑动条会自动滑出并显示剩余的选项。在固定滑动条里，用户的手指直接移动的是选项，并非内容。

4.8.2 自由滑动条

自由滑动条在一个可自由滑动的列表中展示内容，例如“日历”应用中的一组日期，用户左右滑便可使直接查看内容。取决于滑动条的配置，如果一个选项处在某个特定的位置，如滑动条的中央，那么这个选项则被选中；或者滑动条本身是固定的，需要用户手动点击选择。

使用符合预期和具有组织逻辑的值。在自由滑动条中，如果可滑动列表是固定的话，则很多数值可能是被隐藏起来的。像是一组按照字母表顺序排列的国家列表一样，如果用户在使用的时候能推测出这些数值是什么最好不过，这样用户便能快速地在列表中移动。

避免展示数字过大的列表。在Touch Bar中浏览长列表非常乏味。如果你有一组数值很大的列表，考虑在主屏幕而非Touch Bar上展示，这样的话键盘或者触控板均可用作导航。

4.9 分段控件（Segmented Controls）

分段控件是由包含了两个或以上线性关系的部件所组成，每个部件的作用就像是按钮——通常会配置为切换键。在这个控件中，所有部件等宽。像按钮一样，分段控件可以包含文本和图标。

限制部件的数量以提升可用性。更宽的部件更容易点击。

图标优于标题。争取设计出足够清晰明了的图标，不要依赖于文本的辅助。

保持分段控件中的内容尺寸的一致性。因为各个部件宽度相等，如果每个部件中内容填充不一的话，会显得不够美观。

使用简短的标题。太长的标题会使Touch Bar显得过于拥挤。

深色的边框颜色变化优于浅色。默认边框采取了和实体按键相似的外观设计。如果确实需要自定义的话，推荐使用深色的边框颜色。

4.10 分享服务选择器（Sharing Service Pickers ）

分享服务选择器为用户提供了一种便捷的分享方式，用户可以分享文本、图像和应用程序、社交媒体账号中的其他内容，又或是其他服务。通过点击分享服务选择器，触发包含分享按钮的弹出视窗。

仅在有可分享的内容时激活分享服务选择器。如果用户没有选择任何文本、图像或者其他可分享内容，应该停用分享服务选择器。

4.11 滑块（Sliders ）

滑块由一个水平轨道和一个名为拇指键的控件所组成，你可以在其最大值和最小值之间滑动，例如调节屏幕的亮度或视频的播放进度。在滑块的数值改变时，拇指键和最小值之间的轨道将会被填充以颜色。

自定义滑块的样式以适应你的应用，增添趣味。考虑让滑轨的颜色和你应用的配色相互搭配。

提供左右两边的图标以说明最大值和最小值所代表的含义。举个例子，调整图像大小的滑块可在左边配置一个小图图标，而在右边配置一个大图图标。