在今年的 WWDC 上，一直延續(xù)著擬物化設(shè)計(jì)接近 20 年的 Mac OS X 終于畫上句號(hào)，新的 macOS Big Sur 則作為第 11 個(gè)大版本邁入全新的世代。macOS 11 不僅承載著從 Intel 芯片平臺(tái)向著蘋果自家的 SoC 遷移的重任，而且采用了更為貼近 iOS 和 iPadOS 的視覺美學(xué)，整個(gè)蘋果生態(tài)自此開始走向統(tǒng)一。

芯片是硬件層面上的統(tǒng)一，而視覺風(fēng)格的融合和開發(fā)框架上的兼容，則預(yù)示著軟件層面上的融合。在蘋果官方的人機(jī)交互界面指南當(dāng)中，iOS 平臺(tái)的設(shè)計(jì)指南的第二章就是 Mac Catalyst：

而在蘋果官方的網(wǎng)站上，也寫著這樣一段話：

……您可以基于自己當(dāng)前的 iPad app，輕松地創(chuàng)建原生 Mac app。借助 Mac Catalyst，這兩種 app 將共用相同的項(xiàng)目和源代碼，因此您可以高效地轉(zhuǎn)化 iPad app 的桌面級(jí)功能……快來向這些積極的受眾提供您的新 Mac app 吧。

軟件層面上的共享，也許預(yù)示著最終蘋果多平臺(tái)的最終統(tǒng)一。而來自推特用戶 @MauriQHD 的爆料顯示，蘋果也正在 iPhone 上測(cè)試 macOS。真假與否似乎還需時(shí)間驗(yàn)證，但是統(tǒng)一融合，似乎是必然的結(jié)果。

從各種意義上來說，這都是一個(gè)值得想象的未來，這也使得 macOS 11 以及往后各個(gè)版本的設(shè)計(jì)，都顯得價(jià)值非凡。

今天的文章，翻譯自最新的 macOS 11 官方設(shè)計(jì)指南的開頭概述部分。下面的內(nèi)容，是設(shè)計(jì)師需要了解的 macOS 11 的主要設(shè)計(jì)特點(diǎn)和規(guī)范。

引言

macOS 11 引入了許多用戶界面上的改變，而這些改變使得來自 iPad 的應(yīng)用可以更加快速地通過調(diào)整平滑地遷移到 macOS 的平臺(tái)上來使用他們。macOS 11 還加入了很多 iOS 平臺(tái)上大家所熟知的功能特性（比如 SF Symbols 和文本樣式），這些功能增強(qiáng)了用戶體驗(yàn)，并且簡(jiǎn)化了APP的設(shè)計(jì)和開發(fā)的過程。

當(dāng)你為 macOS 11 構(gòu)建APP的時(shí)候，如果你借助 SwiftUI 和 Auto Layout 調(diào)用系統(tǒng)定義的元素，會(huì)發(fā)現(xiàn)絕大多數(shù)的更新都是全自動(dòng)的。如果你的 APP 是高度自定義的，那么你要做的事情可能還有很多。

如果你需要考慮在 macOS 上使用你的新 APP ，那么你可以先看看下面的更改和新特性，并合理地規(guī)劃。

圖標(biāo)和圖像

macOS 11 更新了整個(gè)系統(tǒng)的圖標(biāo)設(shè)計(jì)，為整個(gè)系統(tǒng)的 APP 圖標(biāo)帶來了更加統(tǒng)一外觀輪廓，同時(shí)也給文件圖標(biāo)帶來更加精致細(xì)膩的外觀設(shè)計(jì)。此外，macOS 11 引入了多功能圖標(biāo)，可以在側(cè)邊欄和表單中來使用，用來代表不同的項(xiàng)目和功能。

SF Symbols 的使用，從符號(hào)到圖標(biāo)為整個(gè)系統(tǒng)賦予了視覺的一致性，并且讓設(shè)計(jì)師和開發(fā)者在創(chuàng)建任何設(shè)計(jì)的時(shí)候，都能擁有更為本土原生的視覺效果。macOS 11 會(huì)自動(dòng)地將 AppKit 中的共享圖片諸如 Action、Unlocked、Share 等自動(dòng)映射為相應(yīng)的 SF Symbols。當(dāng)然，在某些情況下，這些被替換的圖標(biāo)可能和其他的圖標(biāo)在尺寸和對(duì)齊方式上略有不同，因此，最好在設(shè)計(jì)過程中，適當(dāng)?shù)貦z查一下相應(yīng)的布局。

應(yīng)用程序圖標(biāo)

在 macOS 11 中，APP 圖標(biāo)的設(shè)計(jì)語言已經(jīng)和所有平臺(tái)進(jìn)行了一致化處理，同時(shí)又保留了一部分 macOS 圖標(biāo)的寫實(shí)渲染風(fēng)格。應(yīng)用圖標(biāo)結(jié)合了經(jīng)典的圓角矩形的外輪廓，采用了正面透視視角，并加入了一致的陰影效果，從而確保了統(tǒng)一的視覺體驗(yàn)。

盡管在整體的設(shè)計(jì)語言上，我們鼓勵(lì)視覺一致性，但是它并不是死板的，巧妙的視覺設(shè)計(jì)同樣是我們所擁抱的。比如「預(yù)覽」、「Xcode」和「文本編輯」這三款應(yīng)用的圖標(biāo)設(shè)計(jì)，就將圓角矩形的視覺設(shè)計(jì)風(fēng)格，和圖標(biāo)隱喻對(duì)應(yīng)的真實(shí)元素有機(jī)而巧妙地結(jié)合起來，在保持視覺大體統(tǒng)一的前提下顯得不拘一格。

文件圖標(biāo)

在設(shè)計(jì)文件圖標(biāo)的時(shí)候，系統(tǒng)會(huì)將 APP 對(duì)應(yīng)的圖標(biāo)和大家熟悉的帶有折角的矩形結(jié)合起來，如果你的 APP 所涉及到的文件類型很多，那么你還可以對(duì)文件圖標(biāo)進(jìn)行自定義，幫助用戶區(qū)分不同的文件。

功能圖標(biāo)

在應(yīng)用內(nèi)的功能圖標(biāo)通常會(huì)代表特定的項(xiàng)目、類別、技術(shù)，或者在表單視圖、設(shè)置界面的側(cè)邊欄中，來代表不同類型的信息。功能圖標(biāo)通常會(huì)沿用 macOS 11 中常見的圓角矩形樣式，其中包含簡(jiǎn)潔明確的圖形來闡釋含義，但是它的造型和色彩也是可以自定義的。

macOS 10.15

macOS 11

為了幫助設(shè)計(jì)師更好地完成這一部分的設(shè)計(jì)，請(qǐng)前往 Apple 設(shè)計(jì)素材頁面下載對(duì)應(yīng)的素材模板:

Apple Design Resources

應(yīng)用程序的強(qiáng)調(diào)色

在 macOS 11 中，你可以給 APP 指定一種強(qiáng)調(diào)色，用來凸顯應(yīng)用中需要高亮顯示的元素，比如側(cè)邊欄的圖標(biāo)。如果用戶在「設(shè)置」—「通用」中所選取的是「多色彩」而非特定色彩，那么界面中的強(qiáng)調(diào)色會(huì)顯示為你所設(shè)計(jì)的強(qiáng)調(diào)色。

如用戶選擇的是「多色彩」以外的特定強(qiáng)調(diào)色，那么系統(tǒng)會(huì)將這種強(qiáng)調(diào)色應(yīng)用到整個(gè)系統(tǒng)，并且替換掉你所設(shè)計(jì)的強(qiáng)調(diào)色。當(dāng)然，也有例外的情況，如果你對(duì)側(cè)邊欄的圖標(biāo)或者符號(hào)指定使用了固定的色彩，當(dāng)用戶設(shè)置強(qiáng)調(diào)色的時(shí)候，系統(tǒng)不會(huì)覆蓋這一部分的顏色。

關(guān)于這一部分的設(shè)計(jì)和應(yīng)用，請(qǐng)參閱這篇文檔：

Sidebars

窗口和視圖

在整個(gè) macOS 11 系統(tǒng)當(dāng)中，窗口界面的設(shè)計(jì)風(fēng)格會(huì)整體向 iOS 界面的視覺風(fēng)格靠攏。比如窗口側(cè)邊欄、工具欄和內(nèi)容區(qū)域的邊緣，使用了更貼近 iOS 風(fēng)格的圓角，并且使用了視覺上更加輕量級(jí)的控件。

工具欄和標(biāo)題欄

在默認(rèn)樣式下，工具欄比以往更高了，窗口對(duì)應(yīng)的標(biāo)題可以和控件直接內(nèi)聯(lián)顯示，并且工具欄內(nèi)的控件和項(xiàng)目都不再包含邊框。無邊框的控件和更高的工具欄使得 macOS 11 的工具欄擁有了更加流暢自然的外觀。

macOS 10.15

macOS 11

為了和增高之后的工具欄尺寸相對(duì)應(yīng)，工具欄中的控件會(huì)默認(rèn)使用更大的尺寸。唯一的例外是集成式的標(biāo)題工具欄的區(qū)域（比如 Safari 中的標(biāo)題欄），這個(gè)地方依然使用的是常規(guī)尺寸。為了適應(yīng)新的尺寸，你可能需要針對(duì)新的工具欄尺寸，調(diào)整布局。

macOS 10.15

macOS 11

重要提示：請(qǐng)繼續(xù)使用 miniSize 和 maxSize API 來設(shè)置工具欄大小，并且調(diào)整控件大小，因?yàn)楫?dāng)前參數(shù)和默認(rèn)的較大尺寸并不匹配。你需要為工具欄指定最大和最小尺寸，并使用相應(yīng)的約束。

當(dāng)水平空間有限的時(shí)候，工具欄可以使用「搜索」按鈕來代替完整搜索欄。用戶單擊「搜索」按鈕時(shí)，搜索欄會(huì)展開顯示；當(dāng)用戶在窗口中的其他位置單擊時(shí)，搜索欄將折疊，工具欄中的搜索將再次顯示為按鈕。

在用戶偏好窗口中，工具欄可以使用 SF Symbols，這樣確保和主界面的外觀保持一致，但是標(biāo)題依然可以顯示在工具欄的正上方。為了清晰起見，整個(gè)工具欄的按鈕，可以使用不同的配色。為了更清晰地表明用戶偏好窗口的活動(dòng)狀態(tài)，窗口的顯示模式將會(huì)和整個(gè)系統(tǒng)偏好保持一致。

macOS 10.15

macOS 11

如果整個(gè)窗口包含多個(gè)分區(qū)或者控制面板，那么可以讓不同的子工具欄都相互保持對(duì)齊，以便用戶在調(diào)整窗口大小的時(shí)候，每個(gè)區(qū)域都能相互關(guān)聯(lián)，保持邏輯的一貫性。

調(diào)整尺寸之前

調(diào)整尺寸之后

側(cè)邊欄（Sidebars）

在 macOS 11 當(dāng)中，側(cè)邊欄（技術(shù)上被稱為 source list）在窗口中，會(huì)拓展和整個(gè)窗口一樣高。在新系統(tǒng)中，側(cè)邊欄內(nèi)的元素默認(rèn)的間距、行高、字體大小都會(huì)增加，并且被高亮選中的狀態(tài)下的外輪廓為圓角矩形。

macOS 10.15

macOS 11

側(cè)邊欄的行高、文本和字符大小取決于整體的大小尺寸，通常會(huì)有小、中、大三個(gè)不同的大小，你可以通過程序來直接設(shè)置大小，用戶也可以在系統(tǒng)偏好設(shè)置的「通用」一欄來設(shè)置側(cè)邊欄的圖標(biāo)大小。下方是 macOS 11 和之前版本的 macOS 在側(cè)邊欄指標(biāo)上的差異。

在某些情況下，如果側(cè)邊欄較小則可能會(huì)使用小號(hào)尺寸的 SF Symbols 作為默認(rèn)尺寸。

使用 SF Symbols 來創(chuàng)建側(cè)邊欄其實(shí)是最簡(jiǎn)單的方法。另外，你可以使用 PDF 模板圖片來創(chuàng)建側(cè)邊欄樣式。如果你必須使用自定義的位圖來進(jìn)行設(shè)計(jì)，那么請(qǐng)務(wù)必以 @1x 和 @2x 的分辨率同時(shí)創(chuàng)建符合規(guī)范的 小、中、大 三個(gè)尺寸的位圖。

默認(rèn)情況下，側(cè)邊欄的符號(hào)要使用系統(tǒng)當(dāng)前的強(qiáng)調(diào)色（具體可參考 App Accent Colors 的章節(jié)）。如果你需要強(qiáng)調(diào)特定的某個(gè)側(cè)邊欄元素，那么你可以給它指定一個(gè)固定的顏色，那么即使修改系統(tǒng)偏好中的強(qiáng)調(diào)色，也不會(huì)影響它。當(dāng)然，盡量不要讓你的 APP 中所有的顏色都使用固定的顏色。在 macOS 中，用戶會(huì)期望系統(tǒng)的配色能夠跟隨著他們的設(shè)置偏好來自動(dòng)變化。

列表視圖（Table views）

在 macOS 11 當(dāng)中，列表視圖總體上會(huì)顯得更大，它的行高會(huì)顯得更高，字體更大，條目之間的空間會(huì)更開闊。macOS 11 引入了 3 種列表樣式，它們各自有著不同的外觀，可以應(yīng)對(duì)不同的需求，它們分別是嵌入式列表、全寬列表和自動(dòng)列表，更具體的你可以參考開發(fā)文檔：

NSTableView.style

嵌入式列表本身被作為一種可延展式的列表，廣泛應(yīng)用到 macOS 11 的 UI 界面當(dāng)中。因?yàn)榍度胧搅斜肀旧淼牧己每臻g延展性，使得它在包含側(cè)邊欄和工具欄的諸多交互界面中，非常合理地展現(xiàn)內(nèi)容，填補(bǔ)空間，并且靈活地應(yīng)對(duì)窗口尺寸的變化。

而經(jīng)典的全寬列表在 macOS 11 中同樣是高度可用的，不過會(huì)在每行的開頭和結(jié)尾自動(dòng)填充所需的內(nèi)容。全寬列表適宜于周圍有可視邊距的表單，比如在首選項(xiàng)窗口中的表單。

而自動(dòng)列表則指的是，系統(tǒng)會(huì)使用表單視圖來定位視覺層次，輔助完善UI的外觀效果。

為了創(chuàng)建更為開闊的列表視圖，macOS 11 使用了幾個(gè)全新的列表視圖指標(biāo)。在下圖中，你可以看到 macOS 11 和 macOS 10.15 之間的樣式的差異。

macOS 10.15

macOS 11

下面列舉出具體的表單設(shè)置參數(shù)：

除了上述的表單中所列舉出來的參數(shù)之外，macOS 11 中還會(huì)在表格的第一行和最后一行前后，新增 10 pt 的垂直空間。

在調(diào)整列表的內(nèi)容布局的時(shí)候，我們遵循新的標(biāo)準(zhǔn)：

• 建議采用 24pt 的行高，盡量確保你的圖標(biāo)和字符是 16pt x 16pt 的大小
• 在每一行以內(nèi)，條目和條目之間增加 6pt 的空間，確保視覺上足夠?qū)挸ㄊ孢m

如果你不針對(duì) macOS 11 更新 APP，那么你的 APP 在 macOS 11 中運(yùn)行的時(shí)候，整體外觀不會(huì)改變。不過，如果你的表單樣式被識(shí)別為 Source list ，那么系統(tǒng)會(huì)自動(dòng)將其應(yīng)用為 macOS 11 中的新樣式。具體的設(shè)計(jì)可以參考這里的規(guī)范：

Sidebars

開發(fā)者可以參看這里的文檔：

NSTableView.style.sourceList.

表單（Sheets）

彈出的表單將不再從父窗口的工具欄下面彈出展開了，在 macOS 11 當(dāng)中，彈出表單將會(huì)以圓角矩形的獨(dú)立彈出窗口懸浮呈現(xiàn)，而父窗口則會(huì)變暗以暗示兩者之間的從屬關(guān)系。

提醒（Alerts）

提醒同樣會(huì)采用和彈出表單一樣的圓角矩形窗口，在提醒窗口中，絕大多數(shù)的內(nèi)容將會(huì)居中對(duì)齊。

你還可以使用紅色的文本來強(qiáng)調(diào)具有破壞性的操作。

菜單（Menus）

macOS 11 對(duì)于菜單和菜單選項(xiàng)在視覺上都進(jìn)行了系統(tǒng)的修改。如果你使用標(biāo)準(zhǔn)的菜單和菜單選項(xiàng)，那么你會(huì)自動(dòng)獲得下列的視覺效果：

• 菜單項(xiàng)內(nèi)容將會(huì)使用和側(cè)邊欄以及窗口內(nèi)容相同的 13 pt 的字體大小
• 菜單內(nèi)的分隔線將會(huì)有 1 pt 的粗細(xì)
• 菜單項(xiàng)目被高亮選中的選項(xiàng)使用的是圓角矩形色塊顯示

macOS 10.15

macOS 11

控件

被重新設(shè)計(jì)的 AppKit 控件（比如復(fù)選框、彈出按鈕、按鈕和分段控制器）采用了更加簡(jiǎn)約和大膽的設(shè)計(jì)，同時(shí)和 iOS 的控件保持著風(fēng)格上的一致，不會(huì)讓你覺得陌生。當(dāng)你在應(yīng)用程序中使用標(biāo)準(zhǔn)的 AppKit 控件的時(shí)候，無需調(diào)整界面即可采用新的外觀，除了 Slider 控件采用了更高的樣式。下面是 Slider 控件的新舊版本的參數(shù)和樣式的對(duì)比：

macOS 10.15 中的控件

macOS 11 中的控件

字體排版

從 macOS 11 開始，SF Pro 將會(huì)作為可變字體來提供。可變字體將會(huì)作為一個(gè)單獨(dú)的程序包來提供，其中會(huì)包含所有的字重（比如常規(guī)體、粗體和細(xì)體）和不同的字形（比如斜體），可變字體還支持光學(xué)尺寸調(diào)整，這是一種在不同的 SF Pro 字符之間添加特定尺寸字體的設(shè)計(jì)方法。

macOS 11 還引入了對(duì)所有文本樣式的支持，從正文、標(biāo)題到標(biāo)注，等不同樣式均是原生支持。對(duì)動(dòng)態(tài)字體在 macOS 11 中將不再可用。具體的字體排版的技術(shù)支持，可以在下面的章節(jié)中查詢到：

Typography

小組件

對(duì)小組件的支持是 macOS 11 中的重要特性之一，它以直觀的方式提供關(guān)鍵的有用信息。

在 macOS 11 當(dāng)中，你可以創(chuàng)建 小、中、大三種不同尺寸的小組件。當(dāng)用戶將小組件添加到通知欄之后，可以通過右鍵菜單選擇小組件的尺寸大小。

在小組件的設(shè)計(jì)上，你可以參考這篇文章：

相關(guān)的開發(fā)資料可以參考 WidgetKit 的開發(fā)文檔：

WidgetKit

結(jié)語

從目前來看，官方的 macOS 11 的設(shè)計(jì)規(guī)范還在不斷完善中，但是其中較大的改變大體都已經(jīng)列舉在這里了，你還可以前往 HIG 的頁面仔細(xì)閱讀細(xì)則，會(huì)有很多驚喜的。

參考內(nèi)容：https://developer.apple.com/design/human-interface-guidelines/macos/overview/whats-new-in-macos/

延伸閱讀：