芯片是硬件层面上的统一,而视觉风格的融合和开发框架上的兼容,则预示着软件层面上的融合。在苹果官方的人机交互界面指南当中,iOS平台的设计指南的第二章就是MacCatalyst:
而在苹果官方的网站上,也写着这样一段话:
……您可以基于自己当前的iPadapp,轻松地创建原生Macapp。借助MacCatalyst,这两种app将共用相同的项目和源代码,因此您可以高效地转化iPadapp的桌面级功能……快来向这些积极的受众提供您的新Macapp吧。
从各种意义上来说,这都是一个值得想象的未来,这也使得macOS11以及往后各个版本的设计,都显得价值非凡。
macOS11引入了许多用户界面上的改变,而这些改变使得来自iPad的应用可以更加快速地通过调整平滑地迁移到macOS的平台上来使用他们。macOS11还加入了很多iOS平台上大家所熟知的功能特性(比如SFSymbols和文本样式),这些功能增强了用户体验,并且简化了APP的设计和开发的过程。
当你为macOS11构建APP的时候,如果你借助SwiftUI和AutoLayout调用系统定义的元素,会发现绝大多数的更新都是全自动的。如果你的APP是高度自定义的,那么你要做的事情可能还有很多。
如果你需要考虑在macOS上使用你的新APP,那么你可以先看看下面的更改和新特性,并合理地规划。
macOS11更新了整个系统的图标设计,为整个系统的APP图标带来了更加统一外观轮廓,同时也给文件图标带来更加精致细腻的外观设计。此外,macOS11引入了多功能图标,可以在侧边栏和表单中来使用,用来代表不同的项目和功能。
SFSymbols的使用,从符号到图标为整个系统赋予了视觉的一致性,并且让设计师和开发者在创建任何设计的时候,都能拥有更为本土原生的视觉效果。macOS11会自动地将AppKit中的共享图片诸如Action、Unlocked、Share等自动映射为相应的SFSymbols。当然,在某些情况下,这些被替换的图标可能和其他的图标在尺寸和对齐方式上略有不同,因此,最好在设计过程中,适当地检查一下相应的布局。
在macOS11中,APP图标的设计语言已经和所有平台进行了一致化处理,同时又保留了一部分macOS图标的写实渲染风格。应用图标结合了经典的圆角矩形的外轮廓,采用了正面透视视角,并加入了一致的阴影效果,从而确保了统一的视觉体验。
尽管在整体的设计语言上,我们鼓励视觉一致性,但是它并不是死板的,巧妙的视觉设计同样是我们所拥抱的。比如「预览」、「Xcode」和「文本编辑」这三款应用的图标设计,就将圆角矩形的视觉设计风格,和图标隐喻对应的真实元素有机而巧妙地结合起来,在保持视觉大体统一的前提下显得不拘一格。
在设计文件图标的时候,系统会将APP对应的图标和大家熟悉的带有折角的矩形结合起来,如果你的APP所涉及到的文件类型很多,那么你还可以对文件图标进行自定义,帮助用户区分不同的文件。
在应用内的功能图标通常会代表特定的项目、类别、技术,或者在表单视图、设置界面的侧边栏中,来代表不同类型的信息。功能图标通常会沿用macOS11中常见的圆角矩形样式,其中包含简洁明确的图形来阐释含义,但是它的造型和色彩也是可以自定义的。
macOS10.15
macOS11
为了帮助设计师更好地完成这一部分的设计,请前往Apple设计素材页面下载对应的素材模板:
在macOS11中,你可以给APP指定一种强调色,用来凸显应用中需要高亮显示的元素,比如侧边栏的图标。如果用户在「设置」—「通用」中所选取的是「多色彩」而非特定色彩,那么界面中的强调色会显示为你所设计的强调色。
如用户选择的是「多色彩」以外的特定强调色,那么系统会将这种强调色应用到整个系统,并且替换掉你所设计的强调色。当然,也有例外的情况,如果你对侧边栏的图标或者符号指定使用了固定的色彩,当用户设置强调色的时候,系统不会覆盖这一部分的颜色。
关于这一部分的设计和应用,请参阅这篇文档:
在整个macOS11系统当中,窗口界面的设计风格会整体向iOS界面的视觉风格靠拢。比如窗口侧边栏、工具栏和内容区域的边缘,使用了更贴近iOS风格的圆角,并且使用了视觉上更加轻量级的控件。
在默认样式下,工具栏比以往更高了,窗口对应的标题可以和控件直接内联显示,并且工具栏内的控件和项目都不再包含边框。无边框的控件和更高的工具栏使得macOS11的工具栏拥有了更加流畅自然的外观。
为了和增高之后的工具栏尺寸相对应,工具栏中的控件会默认使用更大的尺寸。唯一的例外是集成式的标题工具栏的区域(比如Safari中的标题栏),这个地方依然使用的是常规尺寸。为了适应新的尺寸,你可能需要针对新的工具栏尺寸,调整布局。
重要提示:请继续使用miniSize和maxSizeAPI来设置工具栏大小,并且调整控件大小,因为当前参数和默认的较大尺寸并不匹配。你需要为工具栏指定最大和最小尺寸,并使用相应的约束。
当水平空间有限的时候,工具栏可以使用「搜索」按钮来代替完整搜索栏。用户单击「搜索」按钮时,搜索栏会展开显示;当用户在窗口中的其他位置单击时,搜索栏将折叠,工具栏中的搜索将再次显示为按钮。
在用户偏好窗口中,工具栏可以使用SFSymbols,这样确保和主界面的外观保持一致,但是标题依然可以显示在工具栏的正上方。为了清晰起见,整个工具栏的按钮,可以使用不同的配色。为了更清晰地表明用户偏好窗口的活动状态,窗口的显示模式将会和整个系统偏好保持一致。
如果整个窗口包含多个分区或者控制面板,那么可以让不同的子工具栏都相互保持对齐,以便用户在调整窗口大小的时候,每个区域都能相互关联,保持逻辑的一贯性。
调整尺寸之前
调整尺寸之后
在macOS11当中,侧边栏(技术上被称为sourcelist)在窗口中,会拓展和整个窗口一样高。在新系统中,侧边栏内的元素默认的间距、行高、字体大小都会增加,并且被高亮选中的状态下的外轮廓为圆角矩形。
侧边栏的行高、文本和字符大小取决于整体的大小尺寸,通常会有小、中、大三个不同的大小,你可以通过程序来直接设置大小,用户也可以在系统偏好设置的「通用」一栏来设置侧边栏的图标大小。下方是macOS11和之前版本的macOS在侧边栏指标上的差异。
在某些情况下,如果侧边栏较小则可能会使用小号尺寸的SFSymbols作为默认尺寸。
使用SFSymbols来创建侧边栏其实是最简单的方法。另外,你可以使用PDF模板图片来创建侧边栏样式。如果你必须使用自定义的位图来进行设计,那么请务必以@1x和@2x的分辨率同时创建符合规范的小、中、大三个尺寸的位图。
默认情况下,侧边栏的符号要使用系统当前的强调色(具体可参考AppAccentColors的章节)。如果你需要强调特定的某个侧边栏元素,那么你可以给它指定一个固定的颜色,那么即使修改系统偏好中的强调色,也不会影响它。当然,尽量不要让你的APP中所有的颜色都使用固定的颜色。在macOS中,用户会期望系统的配色能够跟随着他们的设置偏好来自动变化。
在macOS11当中,列表视图总体上会显得更大,它的行高会显得更高,字体更大,条目之间的空间会更开阔。macOS11引入了3种列表样式,它们各自有着不同的外观,可以应对不同的需求,它们分别是嵌入式列表、全宽列表和自动列表,更具体的你可以参考开发文档:
嵌入式列表本身被作为一种可延展式的列表,广泛应用到macOS11的UI界面当中。因为嵌入式列表本身的良好空间延展性,使得它在包含侧边栏和工具栏的诸多交互界面中,非常合理地展现内容,填补空间,并且灵活地应对窗口尺寸的变化。
而经典的全宽列表在macOS11中同样是高度可用的,不过会在每行的开头和结尾自动填充所需的内容。全宽列表适宜于周围有可视边距的表单,比如在首选项窗口中的表单。
而自动列表则指的是,系统会使用表单视图来定位视觉层次,辅助完善UI的外观效果。
为了创建更为开阔的列表视图,macOS11使用了几个全新的列表视图指标。在下图中,你可以看到macOS11和macOS10.15之间的样式的差异。
下面列举出具体的表单设置参数:
除了上述的表单中所列举出来的参数之外,macOS11中还会在表格的第一行和最后一行前后,新增10pt的垂直空间。
在调整列表的内容布局的时候,我们遵循新的标准:
如果你不针对macOS11更新APP,那么你的APP在macOS11中运行的时候,整体外观不会改变。不过,如果你的表单样式被识别为Sourcelist,那么系统会自动将其应用为macOS11中的新样式。具体的设计可以参考这里的规范:
开发者可以参看这里的文档:
弹出的表单将不再从父窗口的工具栏下面弹出展开了,在macOS11当中,弹出表单将会以圆角矩形的独立弹出窗口悬浮呈现,而父窗口则会变暗以暗示两者之间的从属关系。
提醒同样会采用和弹出表单一样的圆角矩形窗口,在提醒窗口中,绝大多数的内容将会居中对齐。
你还可以使用红色的文本来强调具有破坏性的操作。
macOS11对于菜单和菜单选项在视觉上都进行了系统的修改。如果你使用标准的菜单和菜单选项,那么你会自动获得下列的视觉效果:
被重新设计的AppKit控件(比如复选框、弹出按钮、按钮和分段控制器)采用了更加简约和大胆的设计,同时和iOS的控件保持着风格上的一致,不会让你觉得陌生。当你在应用程序中使用标准的AppKit控件的时候,无需调整界面即可采用新的外观,除了Slider控件采用了更高的样式。下面是Slider控件的新旧版本的参数和样式的对比:
macOS10.15中的控件
macOS11中的控件
从macOS11开始,SFPro将会作为可变字体来提供。可变字体将会作为一个单独的程序包来提供,其中会包含所有的字重(比如常规体、粗体和细体)和不同的字形(比如斜体),可变字体还支持光学尺寸调整,这是一种在不同的SFPro字符之间添加特定尺寸字体的设计方法。
macOS11还引入了对所有文本样式的支持,从正文、标题到标注,等不同样式均是原生支持。对动态字体在macOS11中将不再可用。具体的字体排版的技术支持,可以在下面的章节中查询到:
对小组件的支持是macOS11中的重要特性之一,它以直观的方式提供关键的有用信息。
在macOS11当中,你可以创建小、中、大三种不同尺寸的小组件。当用户将小组件添加到通知栏之后,可以通过右键菜单选择小组件的尺寸大小。