MacOS 11人机界面指南

2020-06-23 05:22:29

MacOS-11引入了许多用户界面变化,更新了应用程序的外观,使其对从iPad应用程序过渡的人来说更容易接近。MacOS 11中还增加了对熟悉的iOS功能的支持-如SF符号和文本样式-这些功能增强了用户体验,并可以简化应用程序设计流程。

当你为MacOS 11构建应用程序时,你会发现,当你将系统定义的元素与SwiftUI或Auto Layout结合使用时,大多数更新都是自动的;如果你的应用程序是高度定制的,你可能会有额外的工作要做。当您考虑为MacOS 11更新您的应用程序时,请查看以下更改以帮助您计划您的方法。

MacOS-11刷新了整个系统的图标设计,为APP图标带来了统一的形状,为文档图标带来了精致的外观。此外,MacOS 11中还引入了多用途功能图标,可以在侧边栏和表格中表示项目或功能。

SF符号的采用为整个系统中的字形和图标赋予了很强的视觉一致性,并为您提供了一种轻松创建图像和图标的方法,让您在任何地方都能感到宾至如归。MacOS 11自动将AppKit共享图像(如操作、解锁和共享)映射到特定符号。在某些情况下,符号的大小或对齐方式可能与其替换的AppKit图像不同,因此最好检查一下布局。

在MacOS-11中,应用程序图标的设计语言促进了与所有平台的一致性,同时保留了MacOS图标典型的逼真渲染风格。应用程序图标结合了圆角矩形、正面透视和一致的投影,以提供统一的视觉体验。

虽然设计语言强烈鼓励视觉一致性,但它并不排除明智的表现力。例如,Preview、Xcode和TextEdit图标继续合并对物理对象的描述,以最好地传达应用程序的核心目的,同时合并新的形状、透视和阴影。

要合成文档图标,系统会将您的应用程序图标与熟悉的折角图标形状组合在一起。如果您的应用程序打开或创建了大量文档类型,您还可以提供自定义中心图像或背景外观来帮助人们区分它们。

功能图标可以表示表视图或首选项窗口的内容侧栏中的项(或项类别)、技术或信息类型。功能图标通常使用MacOS-11圆角矩形形状来包含简单、明确的字形,但它也可以使用自定义形状和颜色。有关设计功能图标的帮助,请下载Apple Design Resources for MacOS中包含的产品模板。

在MacOS 11中,您可以指定强调色来自定义应用程序按钮、选项突出显示和侧边栏字形的外观。当常规>;强调色首选项中的当前值为多色时,系统会应用您的强调色。

如果用户将强调色首选项设置为多色以外的值,系统会将他们选择的颜色应用于整个应用程序中的相关项目,替换您的强调色。例外情况是使用您指定的固定颜色的侧栏标志符号。因为固定颜色侧栏标志符号使用特定的颜色来提供含义,所以当用户更改强调色首选项的值时,系统不会覆盖其颜色。要了解更多信息,请参阅侧栏。

在整个MacOS11中,Windows都采用了让人想起iOS界面的视觉触感。例如,窗口集成了侧边栏、工具栏和内容区,使用更大的角半径,并显示轻量级控件。

默认情况下,工具栏更高,窗口标题可以与控件一起内联显示,工具栏项不再包括边框。增加的高度和无边框的控件结合在一起,使MacOS-11工具栏具有流线型的外观。

为了匹配默认工具栏增加的高度,工具栏项自动使用较大的控件大小。唯一的例外是集成的工具栏-标题栏区域-比如Safari窗口中的那个-它继续使用常规控件大小。要适应新的默认大小,您可能需要调整工具栏的布局。

重要说明:继续使用minSize和maxSizeAPI设置工具栏项的大小可能会裁剪控件,因为当前值没有考虑较大的默认大小。如果需要指定工具栏控件的最小或最大大小,请使用约束。

当水平空间有限时,工具栏可以在搜索栏的位置显示搜索按钮。当用户单击“搜索”按钮时,栏会展开;当他们单击窗口中的其他位置时,搜索栏会折叠,并且工具栏会再次显示该按钮。

在首选项窗口中,工具栏可以使用SF元件来与主窗口的外观协调,但标题位置保持在工具栏按钮上方。当需要清晰显示时,各个工具栏按钮可以包含颜色。为了指示活动的首选项窗格,窗口将系统提供的选择外观应用于选定的工具栏按钮。

如果窗口包括多个窗格,则可以将工具栏项的不同子集与每个窗格对齐,以便在用户调整窗口大小时,每组项保持在其关联视图的上方。

在MacOS11中,侧边栏(技术上称为源列表)延伸到窗口的整个高度。在侧边栏中,默认项目间距、行高和字形大小都会增加,并且所选项目突出显示使用圆角外观。

侧边栏的行高、文本和字形大小取决于它的整体大小,可以是小的、中等的或大的。您可以通过编程方式设置大小,但用户也可以通过在“常规首选项”中选择不同的侧边栏图标大小来更改它。下表显示了MacOS 11中的默认侧栏指标与之前版本的MacOS之间的差异。

使用SF符号是创建使用新度量的侧栏字形的最简单方法。或者,您可以使用PDF模板图像来创建边栏字形;如果您必须使用位图图像,请确保以@1x和@2x分辨率以小、中、大尺寸创建它们。

默认情况下,侧栏字形使用当前强调色(要了解更多信息,请参阅应用程序强调色)。如果您需要澄清单个侧边栏标志符号的含义,您可以为其指定一个固定的颜色,无论用户的强调颜色偏好如何,该颜色都会保持不变。不要使用指定固定颜色的功能来整体设置应用程序的样式。在MacOS中,人们希望在他们使用的所有应用程序中都能看到他们选择的强调色。

在MacOS 11中,表格视图总体上更大,使用更高的行、更大的字体大小和更大的项目之间的空间,以增加表格内容内部和周围的视觉分隔。MacOS版本11引入了三种表视图样式来定义在特定窗口区域中工作良好的不同外观:插页、全角和自动。有关开发人员指南,请参阅NSTableView.style。

镶嵌风格为MacOS-11桌子的扩展宽敞增添了镶嵌。因为插入样式增加了内容周围的可视空间,所以它在填充其他视图(如侧栏和工具栏)之间区域的表格中工作得很好,并与侧栏外观的变化相呼应。

经典的全宽表格样式仍然可用,但会自动在每行的开头和末尾包含所需的内容填充。全角样式最适用于周围已有可视边距的表格,例如嵌入在首选项窗格中的表格。

自动样式意味着系统使用表视图在视图层次结构中的位置来帮助确定其外观。

为了创建更宽敞的表格,MacOS-11使用了几个新的表格视图指标。在下面的图表中,您可以看到MacOS 10.11和MacOS 10.15及更早版本之间的表行布局有何不同。

除了上表中列出的值外,MacOS-11中的插入式表格在第一行之前和最后一行之后还包括一个10pt的垂直插页。

使用推荐的24pt行高时,请确保图标或字形可以适合16pt×16pt的区域。

考虑在一行内的项目之间增加6个点的间距,以确保表格外观宽敞。

如果你不更新你的应用程序,当你的应用程序在MacOS 11中运行时,你的表格的外观不会改变。例外的是一个实现了侧边栏的表格。如果将表格样式标识为源列表,系统会自动应用新的侧边栏外观。有关指南,请参阅侧栏;有关开发人员指南,请参阅NSTableView.style.sourceList。

提示:在MacOS11中,表格的宽度仍然与其行的宽度相同,但是新的填充和嵌入防止了列和单元格覆盖整行。系统还使用指定的样式来确定要添加到行背景功能(如选择外观或交替行颜色)的空间。如果需要提供完全覆盖一行的内容(如自定义背景外观),请将其添加到行中,而不是单元格。

工作表不再从父窗口工具栏的底部边缘展开。在MacOS 11中,工作表是漂浮在暗淡的父窗口顶部的圆角矩形视图。

提醒是卡片状的矩形,与MacOS 11中的所有窗口使用相同的角半径。在提醒中,大多数内容居中对齐。

MacOS 11中引入了菜单和菜单内容的视觉更改。如果使用标准菜单和菜单项,则会自动获得以下默认外观:

菜单项标题使用与侧栏和窗口内容区域相同的13磅字体大小。

菜单项的选择高亮显示是从菜单边缘插入的圆角矩形。

刷新的AppKit控件(如复选框、弹出按钮、按钮和分段控件)强调简单和大胆,与iOS控件协调一致,同时保持熟悉的外观。当你在你的应用程序中使用标准的AppKit控件时,你应该不需要调整你的界面来采用新的外观。例外的是滑块,它更高。

从MacOS-11开始,带有勾号标记的滑块的轨迹与拇指中心对齐。

从MacOS 11中开始,SF Pro以可变字体的形式提供。可变字体格式提供单个包,该包包含所有支持的粗细(如常规、粗体和超轻)的字形,既有竖排字体,也有斜体字体。可变格式还支持光学大小调整,这是在字形之间插入的一种方式,以创建特定于大小的SF Pro版本,以适合每种设计。光学尺寸调整取代了对SF Pro的固定范围文本和显示变体的需要。

MacOS版本11还引入了对各种文本样式的支持,例如正文、标题和标注。动态文字在MacOS 11中不可用。有关指南,请参阅排版。

小部件以一种美观、易于浏览的方式提升应用程序中的少量有用内容。在MacOS 11中,您可以创建小、中、大三种大小的小部件;人们在将您的小部件添加到Notification Center时可以选择他们想要的大小。

您还可以为iOS和iPadOS创建窗口小部件。有关指南,请参阅微件;有关开发人员指南,请参阅WidgetKit.11