说明:#原创# 标签为IT之家在IT圈所设的投稿栏目,具体投稿规则点此查看

— 写在前面 —

常逛 IT 之家的各位大概都知道,苹果在 WWDC20 搞了个大新闻:macOS 将与 iOS 统一步调,从 X86 平台迁移至 ARM 平台,并从 macOS 10 迭代为 macOS 11。这 20 年一遇的 Mac 大版本更新被称为 Big Sur,它的开发者测试版目前已经能在苹果官网下载。👉 点此跳转 👈

▼ Big Sur(大瑟尔)是位于加利福尼亚州中海岸的一段多山区域,常以景色秀丽闻名;

系统架构的变动是 macOS 11 最重要的升级点。遗憾的是,搭载 A12Z 的 Mac mini 只对少数开发者开放,目前尚不清楚基于 ARM 平台的 macOS 表现如何。

▼ Apple 自研的电脑芯片可在低功耗的同时维持高性能

不过,我们普通用户第一眼看到 macOS Big Sur,都会察觉到它 UI 的变化。虽然看不到系统内部的代码,Big Sur 的全新 UI 像是在视觉层面向用户们宣布:电脑设备与移动设备终将融为一体

▼ 之前,苹果在官方文档中特别提醒,如果您的应用同时登陆了 macOS 与 iOS 平台,请不要把 iOS 的圆角矩形带到 macOS 中来;

▼ 现在,苹果把 Mac 图标全部统一成圆角矩形,并明显是根据 iOS 的图标魔改来的(真香!);

macOS Big Sur 发布后,楼主第一时间安装了开发者测试版,并在自己的主力机 MacBook Pro 上深度使用了 3 周。可能是 macOS 占有率不高 + 首个测试版 Bug 多的缘故,IT 圈里有关 Big Sur 的讨论帖比较少。但恕我冒昧推测,对 Big Sur 的全新 UI 感兴趣的家友应该不在少数。

本帖旨在观赏 macOS 11 的全新图标和窗口设计,并准备了一套楼主自行提取、收集的 Big Sur 图标包作为福利。废话不多说,让我们一睹苹果下个十年的全新设计吧!

一、当光线成为界面的一部分:"新拟物"风格图标

相信各位家友在今年的手机概念图中,经常能看到下面这类设计:

此类 UI 使用光线、阴影将 App 界面分割成一块块"浮雕",它既拥有"扁平设计"的抽象感,又拥有"拟物设计"的立体感,给人耳目一新的感觉。

▼ 在一个连续的平面上,按钮、菜单、进度条呈现凸起、下凹的 3D 效果;

▼ 虽说该 UI 强调光影的真实性,但它的元素设计仍然是抽象的。硬要说的话,这套 UI 有点像 iPad 的织物键盘

设计师们把这种"半平面、半拟物"的设计称为 Neumorphism。这个生僻的英文单词由 New(新)与 Skeuomorphism(拟物)组合而成,因此 Neumorphism 可被称为"新拟物"设计

"新拟物"设计的精髓在于对光线的绝妙运用。它把光效拿捏在"扁平"与"拟物"之间,进而打造一种全新的视觉体验。

▼ 微软的 Metro 与谷歌的 Material 作为扁平设计的代表,很早就开始用阴影表达界面元素间的层级关系;

▼ 苹果早期的拟物风格,也通过在图标表面添加光线反射进而赋予图标水晶般的质感

▼ 不同于 Metro 和 Material,"新拟物"同时使用高光、阴影来强调界面中的内容。从呈现效果看,Metro 和 Material 把界面元素统统作为"纸片"来处理,但"新拟物"强调了元素的厚度,即元素的侧面会对光线产生遮挡;

▼ 不同于传统的拟物,"新拟物"虽然将符合物理规律的光影效果引入界面,但它所模拟的材质是自然界不存在的。换句话说,"新拟物"是将真实光线用于虚拟对象,而"拟物"是还原实际物品在特定光照下的效果;

作为 2020 年设计行业的大趋势,"新拟物"受欢迎的原因很简单:新颖。消费者对抽象、扁平的用户界面已经产生审美疲劳,目前急需一个能抓住消费者眼球的新方案。

▼ iOS 中已经出现了一些"新拟物"风格的界面;

虽然"新拟物"的概念设计活跃在各大社交平台,但在 macOS Big Sur 之前,尚未有科技公司将这一设计推向大规模商用。业内对"新拟物"的评价多为"华而不实"

▼ 用 PhotoShop 做出光影效果不难,但用代码实现光影的动态变化就很难了。退一步说,就算厂商实现了 UI 的"新拟物"化,这复杂的光线投射除了徒增功耗外又能带来什么功能方面的革新

众所周知,苹果在更新换代方面是出了名的保守,iPhone X 的刘海屏一用就是 3 代,尺寸都不带变。苹果在旧版 macOS 中使用的"扁平 + 阴影"图标没什么硬伤,Big Sur 不太可能只为图个新鲜就把前代的风格全扔了,还背了个"变丑"的骂名。

▼ "系统偏好设置"中,一言难尽的新电池图标🔋

苹果为什么要在 macOS 11 这个大版本更新中尝试新设计呢?下面请欣赏楼主的脑洞:

首先,虽说苹果在 Big Sur 中几乎将全部图标都重绘了一遍,但图标的样式不是来自 macOS Catalina 就是来自 iOS 13,全是熟悉的面孔。

"重绘"的第一原则是,统统变成 iOS 的形状。正如苹果在 WWDC20 所展示的那样,基于 ARM 平台的 macOS 能直接运行来自 iPhone 与 iPad 软件,届时旧版 macOS 的不规则图标会与 iOS 的矩形图标相互冲突。将图标统一为圆角矩形有利于苹果的全平台战略。

"重绘"的第二原则是,让"扁平的"变成"立体的"。如前文所述,"新拟物"设计是介于"扁平"与"拟物"之间的折衷方案,它既不用破坏先前的扁平样式,又能赋予图标深度与厚度,可以在 iOS 与 macOS 间制造微妙的差异感。不过立体化的图标到底好不好看,这就交给各位读者判断了。

想欣赏更多图标细节,请见本帖末尾的 Big Sur 图标包,之家图片压缩的太厉害。"新拟物"将真实的光线投射于虚拟的物体,进而让扁平的图案拥有立体感,这一特征在"信息" App 的"气泡"上最为明显。

一提到"光线"与"图标",楼主首先想到的就是 iPadOS 中新引入的鼠标系统

为了让 iPadOS 的指针更加灵动,苹果为 iOS 的扁平图标添加了三个图层:最上层的"光源",图标周围的"晕影",以及最下层的"阴影"。当指针划过图标时,小圆点会被图标吸附,成为图标上方的"光源",而"晕影"与"阴影"会随"光源"的移动而偏转,为扁平的图标增添立体感。

如果苹果想把同样的特效引入 macOS,"新拟物"图标毫无疑问能提供比扁平图标更好的光影效果。

将光线投射于虚拟物体,这也是"增强现实 AR"的拿手好戏。

苹果的 AR 头显设别 iGlasses 几乎是板上钉钉的产品,而 iGlasses 的系统界面是沿用 iOS 的经典设计还是另辟蹊径就不得而知了。Hololens 将"开始菜单"变成一块悬浮的光板,走的仍然是扁平化路线。考虑到 AR 应用的特色在于"立体",苹果很可能会将 iGlasses 的主界面 3D 化

此时,具有纵深的"新拟物"设计无疑是衔接平面 UI 与立体 UI 的可行方案。

macOS Big Sur 是第一个将"新拟物"设计投入大规模商用的操作系统,这可视为"新拟物"在实用化道路上的首次胜利。值得一提的是,在 Big Sur 的"外观"设置里,多了一项名为"自适应强调色"的选项。苹果将主题色的指定权留给开发者,这是否暗示新一代 App 在光影上会有更丰富的效果

二、苹果的大一统野心:通用的 App 窗口设计

直观的讲,macOS Big Sur 的窗口设计就是在模糊 Mac 应用与 iPad 应用的界限

借助苹果的 Project Catalyst,已经有很多优秀的 iPad 应用(如 GoodNotes)撤下了其在 Mac App Store 上的专门版本,转而提供了一个横跨 iWatch、iPhone、iPad 与 Mac 的通用版本。用户只需要购买一次即可在不同设备上使用。

统一 macOS 与 iOS 这两个平台的设计语言,这将是苹果全平台战略的重要步骤。

macOS 端的"邮件"应用

 iPadOS 端的"邮件"应用

开发者如何将 Mac 应用做成 iPad 的样式呢?其实只需改动三个部位侧边菜单顶部工具栏,以及按钮布局

▼ 在 Catalina 中,侧边菜单中的小图标为单调的灰色;在 Big Sur 中,侧边菜单拥有了多样的色彩

▼ 在 Catalina 中,顶部工具栏与其下的列表有明显的分界。工具栏的背景则模拟了弧面铝合金的光线反射,与 MacBook 一体成型的机身相互呼应。在 Big Sur 中,顶栏与列表的分界消失,工具栏的背景与列表的背景均为白色

▼ 在 Catalina 中,应用内的按钮保留了些许拟物设计,类似曾经的的蝶式键盘。在 Big Sur 中,应用内的按钮全部扁平化,并且拓宽了按钮的间距。难怪有传言说,MacBook 未来可能会搭载触摸屏。

未来,一款同时登陆 iPhone、iPad 与 Mac 的应用无需为三个平台各准备一个 App 版本。开发者只要设计一个"标准"界面"紧凑"界面,即可将同一个 App 呈现在不同设备上。

iPad 端的 App 界面被称为"标准"界面。开发者可以最多将窗口内容分割为三个部分。"标准"界面会自动适配 iPhone 的横屏模式

iPhone 端的 App 界面被称为"紧凑"界面。同屏显示的栏目只能有一个,不同栏目间可以相互切换。"紧凑"界面会自动适配 iPad 的悬浮窗

▼ 通过 Catalyst 计划,iPad 端应用可被编译为 Mac 端应用,程序界面继续沿用"标准"模式。如此一来,苹果版的 Universal Windows Platform (UWP) 就成了。

得益于封闭的生态链,苹果的全平台适配战略将会快速推进。macOS Big Sur 继承了 iOS 的轻量化设计,在减少界面元素的同时保证了桌面级 App 的复杂功能,这是值得所有开发者学习的设计思路:

"真正的简约绝不只是删繁就简,而是在纷繁中建立秩序。"

"True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity."

三、macOS 换图标教程:不用更新系统,即可尝鲜 Big Sur

正所谓"萝卜青菜,各有所爱",任何一项新设计都会在用户中引发争议。无法接受 Big Sur 新 UI 的 Mac 用户不在少数,macOS X 延续了 20 年的拟物设计不可能在一朝一夕间就能被"新拟物"以及类 iOS 界面替代。

为满足家友尝鲜的心理,我将 Big Sur 的全新系统图标从软件包中提取了出来,不想升级 Big Sur 的 Mac 用户可以从图标开始适应 Big Sur 的全新风格。

此外,我也将 Catalina 的系统图标一同放在文件夹里,升级了 Big Sur 的用户也可选择将新图标换回旧样式

  • iCloud 共享文件夹:

https://www.icloud.com/iclouddrive/0ssMqLpb-7F2hJ2ASZmIRm2-A

  • iCloud 压缩包下载:

https://www.icloud.com/iclouddrive/0obW_p5G5huPcJV6TeOmJn5tg

  • 百度网盘压缩包下载: 

https://pan.baidu.com/s/1V7_SwkkaSNJqWRctz9afDw  密码: io8i

关于更换 macOS App 图标的方法,相信各位 Mac 用户都是知道的,如下图所示:

但是,这种方法不适用于系统原生 App。比如"系统偏好设置",它作为 macOS 的一部分,受到 System Integrity Protection (SIP,系统完备性) 的保护,在不关闭 SIP 的情况下用户无权修改它的任何组分。SIP 应该如何关闭呢?

1. 重启 macOS,按住 Command + R 进入恢复模式;

2. 点击顶部菜单栏"实用工具"中的"终端";

3. 输入以下命令来禁用 SIP 保护机制:

csrutil disable

4. 执行后输出以下信息表示禁用成功:

Successfully disabled System Integrity Protection. Please restart the machine for the changes to take effect.

5. 再次重启系统即可。

关闭 SIP (系统完备性保护) 后,请在下载的文件中找到一个名为 LiteIcon 的应用,它能帮助你批量更换系统应用的图标。

— 结语 —

作为苹果进军 ARM 平台以及自研电脑芯片的第一站,macOS Big Sur 肩上的任务相当繁重。我们能从 macOS 与 iOS 的趋同设计中看到苹果打通各个平台的强烈愿望,也能从 Big Sur 的全新设计语言中窥见苹果对 AR 等新领域的小心试探。

无论如何,macOS 11 反映了 PC 行业的大趋势。英特尔的雅典娜计划也好,微软的 Windows X 也好,各大厂商都认识到传统电脑相比移动设备有许多不足之处。随着 Big Sur 与 Apple Silicon 走向公测,我期待苹果给消费者们带来更多惊喜