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

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

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

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

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

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

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

引言

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

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

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

圖標和圖像

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

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

應(yīng)用程序圖標

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

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

文件圖標

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

功能圖標

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

macOS 10.15

macOS 11

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

Apple Design Resources

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

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

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

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

Sidebars

窗口和視圖

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

工具欄和標題欄

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

macOS 10.15

macOS 11

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

macOS 10.15

macOS 11

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

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

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

macOS 10.15

macOS 11

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

調(diào)整尺寸之前

調(diào)整尺寸之后

側(cè)邊欄（Sidebars）

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

macOS 10.15

macOS 11

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

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

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

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

列表視圖（Table views）

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

NSTableView.style

嵌入式列表本身被作為一種可延展式的列表，廣泛應(yīng)用到 macOS 11 的 UI 界面當中。因為嵌入式列表本身的良好空間延展性，使得它在包含側(cè)邊欄和工具欄的諸多交互界面中，非常合理地展現(xiàn)內(nèi)容，填補空間，并且靈活地應(yīng)對窗口尺寸的變化。

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

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

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

macOS 10.15

macOS 11

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

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

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

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

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

Sidebars

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

NSTableView.style.sourceList.

表單（Sheets）

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

提醒（Alerts）

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

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

菜單（Menus）

macOS 11 對于菜單和菜單選項在視覺上都進行了系統(tǒng)的修改。如果你使用標準的菜單和菜單選項，那么你會自動獲得下列的視覺效果：

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

macOS 10.15

macOS 11

控件

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

macOS 10.15 中的控件

macOS 11 中的控件

字體排版

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

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

Typography

小組件

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

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

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

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

WidgetKit

結(jié)語

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

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

延伸閱讀：