在此次的 WWDC 20发布会上，苹果推出了最新版的桌面系统 macOS Big Sur，虽然命名的方式没有变化，但苹果强调，此次更新是「自 Mac OS X 以来，最重大的设计改变」，不仅是图标、界面都变得和 iOS 更接近，功能上，如今两个平台也有诸多共通点。由于目前只有一台 Macbook Pro 作为主力机，所以暂时不打算冒险升级，毕竟还要拿它恰饭。通过查阅官网的介绍，以及官方最新更新的 macOS 设计资产文件，我想说一说自己的感受。
---------------------------------------------------------------------------------------------
先试着汇总一下 macOS Big Sur 最明显的几个设计改变：
- 应用窗口的圆角都变大了，与 Macbook Pro 的屏幕圆角更为和谐一致；
- 大量的毛玻璃、半透明界面元素,界面更为扁平；
- 系统级应用图标采用了与 iOS 和 iPad OS 一致的圆角矩形图标；
- 更大的元素间距，更少的灰度中间色，以及更强的黑白对比。
---------------------------------------------------------------------------------------------
通过界面和图标两个部分，来看一下具体的设计更新内容：
一、界面部分
我们先来看一张对比图，Mac OS X 10.0 & macOS 11.0 这两个跨越20年历史的操作系统，在系统 UI 上发生了翻天覆地变化的同时，也可以看出苹果在 mac OS设计语言上的延续性。关于 mac OS 的历史有太多值得 UI 设计师们反复学习的地方。
Mac OS X 10.0
Mac OS X 10.0 这套 UI 界面使用拉丁语中的「水」一词来命名，也就是「Aqua」。从控制窗口开关的按钮到滚动条，似乎都是用晶莹剔透的水滴制作而成，并且被头顶的光源给充分地照耀着，呈现出令人忍不住想舔一口的强烈水晶质感，这也引领了一个时代的 UI 设计师一拥而上的投入到写实界面的大潮中。成为2000年以后几年整整一代UI设计师、网页设计师，美术工作者喜欢的风格。
macOS 11.0
macOS 11.0（Big Sur）重新设计了系统、内置应用的图标和界面，此次更新是「自 Mac OS X 以来，最重大的设计改变」。桌面底部的程序坞（Dock）和顶部的菜单栏都做了透明化处理，比起之前的深灰色条，配合彩色渐变的新壁纸，设计语言上确实是更为时尚简洁了（毛玻璃视觉可追溯到2007年发售的Windows Vista，而当时的 OS X Yosemite 也大量作用了这种设计语言，虽然骂声一片，不过现在看来，当年的改变还算克制——给人一种稳定、扎实的视觉观感）这次更新，系统版本从10升级到11，这是十几年来第一次，代表着搭载arm处理器的Mac即将开创下一个时代。
大部分系统内置应用也都进行了重新设计，淡化了菜单栏部分的「物理按钮」概念。应用程序图标统一的圆角矩形，桌面窗口的大圆角设计，让一切看起来都有一种浮动板块的感受，感觉每个元素都可拖拽，都使得整个系统更为接近 iOS 和 iPad OS 这样的移动端设备的的系统设计语言。
这些无处不在的大圆角界面，非常适合 iPad Pro 的圆角
更大的元素间距，更少的灰度中间色，以及更强的黑白对比都使得界面更加简洁时尚了。苹果设计师 Alan Dye 在发布会上也提到了设计风格转变的原因，主要是希望「降低视觉的复杂度，让用户能够将注意力集中在内容上」，而非各种花哨的装饰，很像是当年 iOS 从拟物化转移到扁平化的说辞。
更加扁平简洁的菜单栏窗口
菜单栏的毛玻璃效果
降低视觉的复杂度，让用户能够将注意力集中在内容上
与iOS14同步更新的小部件功能，在mac系统中设定了三种不同大小的尺寸排列方式。控制中心的视觉设计上有些最近流行的“新拟态”设计语言，毛玻璃质感和大量的投影和和纵深感，就连顶部的菜单的文字都加上了投影。毛玻璃的背景画面，能很好的突出前景信息，中和了扁平化图文带来的生硬不立体感。在视觉上形成一种视觉的层次感。
全新通知中心将通知和小部件组合在一个视图中（其实照搬了 iOS 的控制中心）
全新的界面也大量的使用了毛玻璃效果
---------------------------------------------------------------------------------------------
二、图标部分
Mac 系统的图标一直其设计上的亮点之一。在苹果的 mac OS 的人机交互指南中也明确指出：“漂亮，引人注目的图标是macOS用户体验的基本组成部分。图标不仅是装饰性的，而且在与用户交流中起着至关重要的作用。要在macOS上看家，应精心设计应用程序图标，提供信息，并且美观。它应该传达应用程序的主要目的并暗示用户体验。”
在此次系统级应用图标采用了与 iOS 和 iPad OS 一致的圆角矩形图标，邮件、通讯录等应用也都不再保留之前的拟物化设计。当年在 Smartisan OS 发布会上老罗提到：由于桌面系统有充足的屏幕空间，只要图标足够精致，所有的图标放的越大就越好看。如果说手机屏幕空间有限，统一图形是不得已通过牺牲美感来保持整齐划一;那在屏幕空间足够大的桌面端，为了追求所谓和 iOS 一致性，一股脑的全框上一个令人发指的圆角矩形，只能说是在舍本逐末了。
全新的 Duck 栏以及全新的系统图标
虽然新图标在美感和辨识度上远不如旧版本。但这也是大势所趋，如今苹果正试图融合 macOS 和 iOS、iPad OS 的生态，在完成对主要功能的迭代后，必然就会去统一各个平台的设计风格。
旧版 ICON，每个图标都是自己该有的形状，识别度更高
新版 ICON，全部框进了圆角矩形当中，视觉美感和识别度大大降低。
关于图标，我有几个不太能忍的点
- Launchpad Icon 经典的小火箭设计也已经不见了，取而代之的是一个蜜汁色块的排列图标
- Keynote、Pages、Numbers 等等众多个性化图标都被框死在这个该死的圆角矩形当中，完全没有了之前的识别度
- 最忍受不了也是被吐槽最多的，就是电源设置里的这个绿色电池图标，这个谜一样的对齐方式确实让人产生疑惑。这么明显的视觉错误，在后续的正式版当中，肯定会改掉的吧。
数字和图标，谜一样的对齐方式
---------------------------------------------------------------------------------------------
最后，我根据官网的截图，试着做了 macOS Big Sur 中自己还比较喜欢的四个图标(左到右分别是：Messages、FaceTime 、Mail、Maps)
上面是 iOS13 下面是 mac OS 11.0
临摹制作之后，有这么几点感受：
新系统图标在细节上增加个更多阴影层次，对于写实风格上的一些阴影参数，相对于自己的习惯来说有些偏深；
与官方不同的是，我试着在背板的圆角矩形上也做了丁点的光影厚度(出于个人喜好) ，官方图的圆角矩形背景应该是平面或者带有轻微渐变的扁平元素；
对于这个框起来的圆角矩形，在查看官方文件后确认，圆角用的是跟 iOS 一样的曲率连续圆角；
所有的图标被框进这个圆角矩形当中，应该都是在为于苹果应用自研架构处理器后，对系统全平台统一做的铺垫准备。
最新的查看官方文件后发现，圆角用的是跟iOS一样的曲率连续圆角
关于拟物潮流的讨论：
我把这几个图标我挨个发到了我的Dribbble ，并在每组图标上用2019和2020做了年份区分(刻意的小心思)，这也引起了有很多网网友的讨论：“潮流是个圈”，“这代表拟物设计的回归”，“写实或3d要成为设计潮流了吗”。
对于这个问题，我自己的看法：
苹果的这次更新势必会带动一波关于新的拟物风格的讨论，这也只有苹果这样体量的公司才可以做到。
写实的，精致的视觉元素当然会带来更有冲击力的视觉体验。拟物和扁平应该各自在界面中发挥各自的优势作用，而不是对立的关系。我们从苹果的这次更新中也可以看出这个规律。
而对于写实和拟物的设计，以及是否会回到拟物时代，我觉得这从来就不是设计讨论的重点，因为这些符号都是对于界面信息呈现的辅助元素而已。
---------------------------------------------------------------------------------------------
如有需要PSD文件的同学，可从评论区的网盘链接中下载到。
FaceTime Icon（macOS-Big-Sur）
Mail Icon（macOS-Big-Sur）
Maps Icon (macOS Big Sur)
三、总结
这次的设计更新确实是一次视觉风格上的大胆的革新和尝试，界面窗口更加扁平化的同时，也带来了更多 3D 维度的视觉层次，在减少了冗杂细节的基础上,变得更加极简主义了。
macOS 11.0 在设计上似乎是追求扁平化和拟物化的结合，实际上这也是 mac OS一贯的设计语言：该拟物的拟物，该扁平的表扁平，让操作更符合直觉的。这也是为什么很多按钮，图标还保留阴影的原因。只是这次的在减少了中间过度之后，这种反差变得更为强烈了。
毫无疑问，这一次，macOS 又要引领一波将来的设计趋势，但趋势或者流行的设计都是好的吗？这是更值得我们去思考的问题。
最后，推荐机器多的朋友们升级来提前体验一番的这些新的设计内容，毕竟UI 设计师需要保持足够的好奇心。但不建议大家对自己的主力机进行尝鲜升级。
--------------------------------------------------------------------------------------------
对于 macOS Big Sur 的新系统的探索就到这里告一段落了。如果这篇文章对你有帮助，请给个关注呗。
大感谢。
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册