如何做出微軟風格的 PPT？

11-26

做一個關於微軟的presentation，想學一下微軟的風格，比較切題。

本汪曾負責過微軟的某些視頻。

Modern UI 的大部分特性使其適用於 PPT 的視覺表現。

貼上微軟的設計概述：

Microsoft Design： http://design.microsoft.com/

不建議把 Modern UI 簡單粗暴地理解為「色塊」堆砌而成的界面——那界面上的「擬物」或「扁平」之分就沒有實際意義了。也不建議把 Modern UI 稱做「扁平化」，微軟官方是從來沒有用過「扁平化」這樣的措辭。

要獨立於 iOS、Android 樣式之外設計出一套極具辨識性與差異化的 UI 不是一件容易事的事實。許多手機產商用盡各種方式，卻似乎始終無法跳出那個框框。

而到現在大家也越來越清晰地看到，不斷更新自我的 Modern UI 它的誕生難度比一套手機系統 UI 的設計難度要大得多。它是一種跨平台適配的整體設計方案，要包含適配各平台的交互操作，且保持整體一致，它需要尋找平衡點，來 keep balance。

從幾個關鍵角度說說吧。

========================

一、字體

英文：Segoe UI

中文：Microsoft YaHei UI、Microsoft YaHei、微軟雅黑

Segoe 是 Modern UI 規定使用字體。微軟還開發或授權一組字體，中文的 Microsoft YaHei UI 就屬於其中一種，用於簡體中文的顯示，現有 Light / Regular / Blod 三種版本。附上官方鏈接Windows 下的字體。

在控制面板中提取字體，或從 Microsoft 官方獲取：Font Families

* 對於 Windows Phone 8.1 及之前版本的系統，中文使用 Dengxian （等線），英文使用 Segoe WP （Light / Semilight / Semibold）。

關於 Microsoft YaHei UI 和 Microsoft YaHei 的區別，請看微軟雅黑和微軟正黑的 UI 版與普通版有何區別？ - 字體

對英文原版系統來說，在沒有安裝中文語言包的情況下，不會有「微軟雅黑」這個字體，但是有 Microsoft YaHei UI。也就是說，即使「微軟雅黑」不可用，Microsoft YaHei UI 都是處於可用的狀態，UI 是代表系統界面顯示的字體。（在 Mac OS X 中，是沒有 UI 後綴的字體的，因此，想在網頁上用 font-family 定義字體樣式的話最好使用無 UI 後綴的名稱，且記得加上前後引號。）

默認字體經幾次系統升級發生了改進：

Windows 8 的默認字體：

SS01 樣式（Windows 7 的默認樣式。這裡謝謝 @prox 的關注和提醒，為引起注意，相關信息附在文末）：

SS20 樣式（首選的設計和間距）：

第一眼你們可能覺得除了字母符號 Q I 有變化之外只是數字 1 有了變化。很遺憾地告訴你，好幾個字元都發生了變化：

Windows 7 中的默認字體：

Windows 8 中的 Segoe UI：

注意事項：

如果頁面標題或副標題太長而無法顯示，請使用省略號（U+2026），而不要使用 3 個點。不要在標題文本末尾和省略號之間添加空格。
不要使用傾斜字體。
遵循布局。（之後說明）

========================

二、字面內容（語言風格）

① 字詞：

若要體現「簡單」和「輕鬆」，請使用簡單的句子和短語、最短的文本和日常字詞。
精心挑選的精確字詞可清晰地表達意義。
通常，少即是多。

以觀眾 / 客戶的語氣說話。你要假設你只懂一點或完全不懂你所面對的產品，並以這樣的眼光審視你的作品。下面是一些調整前和調整後的示例：

請說「獲取 Windows 10」，而不是「查看產品」。
請說「你需要一個 ID，如下所示：customer@microsoft.com」，而不是「ID 無效」。
請說「選擇你的主題」，而不是「配置你的顯示效果」。

同樣，盡量避免那些聽起來嚇人或對於大多數客戶僅有模糊意義的「技術」字詞。比如：無效、錯誤、配置、管理、設備（請改用「電腦」或「手機」）等。

② 標點符號：

標點符號能幫助傳達意義，但它不可替代字詞。以下是要記住的幾點：

不要過度使用感嘆號。相反，選擇程度更深的字詞。
和感嘆號一樣，請慎用問號。當鏈接採用客戶問題的措辭時，它們效果很好。

③ 注意格式規範：

英文、中文、數字之間須有空格。比如：我們將在 4 月 29 日召開 Build 大會，會上將有更多關於 Windows 10 的信息公布。
英文句子間須有空格。比如：Windows 10 Technical Preview was released last year, and it is attractive to many people. We also showed HoloLens in the early of this year. 逗號後面、句點後面均有空格。
專有名詞的大小寫與空格。如：Windows 不能寫作 windows 或 win。Windows 10 for Phones 不宜寫作 Win10 for phone。
對於有特別作出規定的標誌，請遵循它們的使用方法。比如 Microsoft 徽標 Microsoft Corporate Logo Guidelines（請展開頁面上的 + 按鈕）。

【示例】

調整前的文本：你嘗試打開的文件不屬於允許的文件類型。

調整後的文本：不能在手機上打開此類文件。

調整前的文本：我們正在將該演示設備的設置還原到預配置的值。此過程不可中斷。

調整後的文本：我們正在將該電腦還原到用於演示的原始設置。該過程需要一些時間，並且不能中斷。

調整前的文本：Microsoft 可能會使用你提供的信息，以通過與你的帳戶相關聯的服務相關強制性通信聯繫你，並提供我們認為你感興趣的其他通信。

調整後的文本：Microsoft 可能針對關於你的帳戶的服務相關信息聯繫你，或者向你提供你可能感興趣的其他有用信息。

配置正確合適的字面內容，也是 Modern UI 的設計準則之一，並能讓你的 PPT 更適合人類閱讀。如果沒有遵循，便不能算是 Modern UI。重複一次：不建議把 Modern UI 理解為「色塊堆砌」。

=========================

三、顏色

Modern UI 的顏色是飽滿、鮮明和真實的數字，涵蓋了顯示技術所能夠達到的整個色域。Windows 主要使用單一純色，但利用各種技巧創造深度，如透明度、分層和混合。

先上一張色表吧，雖然僅對 Windows Phone 起作用……

Modern UI 體現在 Windows Phone 上的配色：

謹慎地融入顏色，對品牌產生影響。使用離散、高對比度的顏色組合來體現清晰度和可見性。應當盡量少用鮮艷的顏色，如果你無法決定使用哪種顏色，則默認使用中性或單色色調。意思就是不要將各種五花八門甚至發亮的顏色毫無規律地拼湊在一起——那樣會使你的 PPT 失去焦點，讓觀眾的眼睛沒有「落點」。

Microsoft Account 的各處登錄頁面（如 http://Outlook.com），它經常需要在手機或各種設備上顯示，它非常簡潔，就一種藍色（Xbox 登錄是綠色，是顏色作用於品牌的變換），不會五花八門。且用色之處，皆為希望引起你關注的重要信息。

Modern UI 體現在 Windows 上的配色：

正如你知道的那樣，系統顏色和應用顏色是不同的。系統顏色是用戶選擇並由 Windows 應用到系統中主要 UI 表面的顏色，如「開始」屏幕背景、邊欄菜單、按鈕顏色等等。應用顏色是應用開發人員選擇的獨特顏色，它獨立於系統顏色之外。應用顏色表示應用的品牌和標識。

選定用於貫穿整個 PPT 的主色，和你的分頁顏色。比如目錄用色，和目錄上各章節的配色。

能輕易發現，背景色通常不是淺色系的（至少默認配色方案不會給出淺色系背景，至於可自定顏色不在討論範圍內）。默認的紫色，是深紫，明度較低，即用沉穩的色調，去反襯磁貼的活躍。若背景色是淺色系的，界面容易失去焦點。

對於 PPT，背景要具有承載頁面內容的能力。即使是圖片作為背景，也要將圖片的明度調暗。可試著選擇桌面壁紙當作 Windows 8.1 的開始屏幕背景，並和桌面切換對比，你會發現，開始屏幕雖然使用了桌面壁紙作為圖片，卻也是經過了加暗處理。

案例：鬧鐘，下方開關白色為開，否則是關。增強了對比度，這就是在視覺上將開關的狀態感知增強了。當你放眼看這張圖的時候就有「一目了然」的感覺。如果用左右拉的開關，並放於鬧鐘名稱右側，似乎就沒那麼清晰了。

對 PPT 即運用高對比度的顏色來獲得「看一眼就明白」的效果。

主角是前景被關注的內容，而非背景。這裡反映出 Modern UI 的一個原則：突出最重要的信息，內容第一，而非無謂的裝飾。並讓信息量達到「無法向下刪減」的程度。

再看幾個應用的顏色：

郵件現已經改為藍色，為了和 http://Outlook.com 藍色配合。

統一配色，並將最需要引人注意的部分用該顏色標註出來，除此之外，用不同灰度的黑色。底部菜單欄也為了和背景形成反差，引起注意。比如郵件應用，被藍綠色標記的文字是郵件前面幾個字的提要，而不是發件人或者其他，這是因為郵件內容是最最重要的，比如「周末一起去野餐吧」這樣的郵件消息，而不是「洪國明」這樣的名字。

案例：「閱讀列表」應用的頂部菜單欄之一（按時間排序，從左到右是「今天」「昨天」「這周的早些時候」「上周」「上個月」）。下面是界面圖片：

案例中「今天」的配色是明度最高的，因其是最新共享進來的。時間越之前，明度越暗：弱化注意力。越是之前的，越可能是已經閱讀過了的、無需關注的。

舉個應用於 PPT 的例子，想像一個場景：時間軸式的事件圖，若時效性較強，可逐漸改變明度。若特徵不是時效性，是某幾個關鍵時刻，那麼關鍵時刻就用明度高的，其餘的依次弱化。

為什麼說不要把 Modern UI 理解為「色塊堆砌」，其中一個原因：重點不在於「大的純色塊」這樣的視覺表象，而是用色塊表現了什麼、突出了什麼、起到了怎樣的交互引導效果、塑造出怎樣的品牌形象、怎樣提升了用戶的操作效率等。

========================

四、排布與對齊

見過許多模仿「磁貼」卻模仿不到位的，很大問題出在「磁貼間距」上，要麼太離散，要麼靠得太近。間距是直接影響到「像不像」的一個因素。

1、使用網格系統（要做出嚴苛精確的界面）

在設計的時候，記得用網格。

網格由單元和子單元組成。測量的基本單位就是單元。一個單元等於 20 × 20 像素。每個單元進一步細分為 5 × 5 像素的子單元。每個方形單元有 16 個子單元。下面這張圖描述了屏幕左上角處的網格。放大該圖像即可顯示像素、子單元以及單元。

2、頁眉

頁眉的基線應該為距離頂部 5 個單元或 100 個像素。頁眉的左邊距為 6 個單元或 120 個像素。Windows 8 頁眉為 Segoe UI 樣式集 20 細線。

這很適合用來填寫 PPT 的頁標題（如果頁面不是只有這一個標題的話）。可以先做母版，定好位，這樣就很方便，不用每次去調整。

3、內容區域

內容區域的上邊距為 7 個單元或 140 個像素。左邊距為 6 個單元或 120 個像素。下邊距非常靈活。對於水平平移的內容，應該不超過 6.5 個單元（130 個像素），且不少於 2.5 個單元（50 個像素）。對於垂直平移的內容，上邊距和左邊距保持不變。由於內容滾出屏幕，因此未指定下邊距。

用在 PPT 上是很科學的。我們按 16:9 的屏幕來講（2013 版之後默認的比例），尤其內容的左側，不能靠太近邊緣，因為橫向本身就比較長，要達到平衡。

4、水平填充值

內容項之間的水平填充因項而異。對於明邊項（如圖像和用戶磁貼），磁貼和隨附文本之間的填充為 2 個子單元或 10 個像素。對於列表，列之間的填充為 2 個單元或 40 個像素。對於明邊項，列之間的填充為 2 個子單元或 10 個像素。

這裡就涉及到剛才說的「間距」問題啦~ 規定是磁貼間間隔 10 像素。開始屏幕上的每塊磁貼都是有 1 px 的邊框的哦，那個邊框就包含在「10 像素的間距」之中。也就是說，除去邊框，還有 8 px 的空間。

這裡就不舉反例了，相信大家都曾經見到過，嗯。如果你實在沒把握，可以把開始屏幕或者其他的截屏一下，放進 PPT，然後用圖形臨摹重疊，再刪除截屏。

5、垂直填充值

內容項之間的垂直填充也因項的類型而異。對於磁貼和文本列表，行內項之間的垂直填充為 1 個單元或 20 個像素。對於明邊對象，行內項之間的填充為 2 個子單元或 10 個像素。

6、組之間的水平填充

組之間的填充為 4 個單元或 80 個像素。此填充足夠大，在用戶平移時足以輕鬆辨別組。

分組。

附加參考：

可以說，排布和對齊，是很大程度影響到「看起來像不像」Modern UI 的關鍵因素之一。（其實這也是最最基本的要求吧，寧可多花一點時間在對齊和排布上。）

乾貨來襲：

用於 PowerPoint 的設計模板： https://go.microsoft.com/fwlink/p/?LinkId=325041

用於 Photoshop 的設計模板： ttps://go.microsoft.com/fwlink/p/?LinkId=325040

用於 Illustrator 的設計模板： https://go.microsoft.com/fwlink/p/?LinkId=325039

這些資產，適合用於 PPT 某些頁面的設計（看起來更接近 Modern UI）、適合用於應用的 UI 設計。但是很難用 PPT 做出動態磁貼的效果，也是 Modern UI 在視覺上的一個關鍵而極具辨識性的特徵。要想方設法讓你靜態的頁面內容達到「一目了然」和"突出重點"的狀態。

要怎麼用？

先給一張各種元素的建議大小，包括間距：

之所以舉表單的例子，就是想拓展一下。不僅僅是用於 PPT 的元素，比如你要用 Modern UI 來設計一張或多張列印出來的填表，就能注意到。

下面是使用單列布局的短表單示例：

下面是使用單列布局的較長表單示例：

請不要嘗試將大量內容置於一個非常長的表單中，而是考慮將任務分成多個組或多個表單序列。下面是分為多個組的較長表單示例（比如你設計的問卷，一長串連在一起，對方看到就覺得很多，看著不舒服，帶來一種煩躁感。這不是 Modern UI 所提倡的，而應該有焦點。分頁）：

下面是分為多個頁面的較長表單示例：

何時使用兩列布局

將兩列布局用於僅能進行有限垂直平移的短表單。兩列布局在橫向充分利用了屏幕空間。請記得為兩列之間保留足夠的用於裝訂線的空間。

下面是使用兩列布局的表單示例：

此外，我想分享一個大家應該都見過的表單設計：

========================

五、圖標

圖標使用最少的部分和細節，可以提取和簡化概念。它們在本質上是圖形，並且採用平面透視效果和單色，強化了內容重於版式的思想。

透視

的圖標是二維符號形狀。圖標可以巧妙地暗示體積或深度，但我們一般避免增加透視線或角度。大多數圖標代表一個概念或對象。如果一個圖標代表一個以上的對象，前面的對象「擠出」後面的對象。

「擠出」一個對象意味著當圖標中的一個元素顯示為覆蓋另一元素時，覆蓋操作將創建一個與背景顏色匹配的間隙。
顏色

圖標的主要顏色是純白色。白色是可以在大多數具有豐富的彩色背景的顏色上下文（如應用磁貼和應用欄）中很好地顯示的單一顏色。

生產

建議使用矢量繪製所有圖標，尤其是在 Adobe Illustrator 或 Expressions Design 中。將矢量形狀貼靠在字形系統中是至關重要的。Windows 圖標必須有清晰、乾淨的邊緣。

圖標不只是提供功能。還有助於將用戶與應用的總體構想聯繫起來，甚至可以喚起對應用的良好情感。圖標不但要透出品牌的個性，而且要保持界面的效率。

====================

另外，來說說 Segoe UI Symbol 圖標。用這些圖標會顯得你的 Modern UI 更加接近原本的設計。

大部分此類字形在提供時其間距為零。你可以在每個零寬度字形上放置其他零寬度字形。例如，如果你插入零寬度的紅色的實心 (U+E00B)，游標不會跑到心形的末尾，因為其寬度為零。然後，如果你插入黑色的心形輪廓 (U+E006)，則心形輪廓會放置在實心之上。

大部分圖標還具有鏡像樣式，以供使用雙向文本的語言使用。

這裡提供一些 Unicode ID。

紅心大戰

星形評級

複選框組件

單選按鈕

雜項

滾動條

漸進式公開箭頭

後退按鈕

後退按鈕的字形提供了 3 種不同大小，以便外環的權重等於 16pt、20pt 和 42pt。這些字形設計用於支持分層。

HTML 的後退箭頭

記得添加其他代碼，創建環繞這些字形的圓環。

用於控制的圖標的字形

這些字形設計為以 14pt 大小顯示。記得使用其他代碼，創建環繞這些字形的圓環。

當然，這些圖標可以放在網頁上，用 HTML 呈現出來，舉個「點贊」形狀的例子：

&

&&標記是可以替換的，這裡只是當個稻草人而已……關鍵在於定義字體為 Segoe UI Symbol。

=========================

六、動畫

如果你有心做動畫，喜歡折騰搗鼓，那就試試吧。PowerPoint 中部分動畫的「平滑結束」比較用得上，但至今配合動畫延遲也沒有嘗試出完全相同的程度。Modern UI 中很多動畫的「位移-時間」圖像是曲線。

1、底部 Action Bar：https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4

這個使用進入動畫「飛入」 - 從底部 - 持續時間和平滑結束時間自行設定。

2、隱藏面板 Charm：https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 設定方式與上一條同理。但視頻中還是早期樣式，Windows 8.1 中面板與其上的文字有動畫延遲，顯得更有活力。視頻中文字內容和面板還是一個整體。要做新樣式，將文字內容與底部面板分離，設置動畫延遲。

3、彈齣動畫：https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一個平移，它是在彈出元素淡入時從初始位置到最終位置的垂直移動。平移距離和方向由應用指定。在大多數情況下，平移應為 50 像素，以向上方向移動。不過，如果彈出元素顯示在觸發彈出的 UI 元素下方，則平移應是向下移動 50 像素。例如，此下載平移將適用於從導航欄或從應用標題觸發的浮出控制項。這是為了向用戶提供彈出元素與其觸發元素之間的可視鏈接。

更多動畫自行操作、觀察。

========================

可能上面提供給大家下載的部分設計資產還只是「毛胚」，還需要大家根據自身情況調用。但是授人以魚不如授人以漁（勉強用一下「授」字哈哈）。

這是我看到的一個提煉：

Metro UI （Modern UI）設計具備以下五點原則：

1. 乾淨、輕量、開放、快速

2. 要內容，而不是質感

3. 整合軟硬體

4. 世界級的動畫

5. 生動，有靈魂

================================

# 注釋 #

================================

在【一、字體】中提及的 SS01 樣式，出現了一些複雜的情況，感謝 @prox 頗具知乎精神地查證，手動點贊。

================================

Segoe UI 的兩種造型？

在知乎 @佳偉答案（如何做出微軟風格的 PPT？ - 知乎用戶的回答）中，發現答案列出的 Segoe UI 字體，字形竟然是不一致的。

作為 Segoe UI 的粉絲，我不辭勞苦（？）地找到了一台 Windows 7 電腦，使用 QQ 遠程協助截下了如下珍貴圖像。po主真的很拼……
這是 Windows 7 下的 Segoe 字體集。

在圖中，發現了兩個名為「Segoe UI 常規」的文件。它們分別是這樣的：

顯然這兩種字形是不一致的。第二種，通常我們認為是微軟雅黑的西文樣式。注意兩個字體文件版本號，可見下圖版本號更低。

我想這大概就是佳偉截圖中出現兩種不同樣式的 Segoe 的原因了：微軟中途發布了新版本的 Segoe 字體。
我找到了這樣一個鏈接：Segoe UI Light

其中有這樣一行：

可見表格當中並未列出這個 5.11 版本。推測，這可能只是一個臨時的、中間的、不正式的版本。
Segoe 字體本身是不包括中文的。微軟當前對它的用法是，與微軟雅黑中文搭配成新版 YaHei Light，或與方正中等線搭配成 Windows Phone 自帶 DengXian 字體。所以呢，也許是 5.11 版本打包的時候出錯了，直接將一整套微軟雅黑扔了進去……（注意5.11與其他任何版本的中文字體都不一樣，其他的選擇了默認宋體作為中文字體缺失時的替換展示字體，而 5.11 版本帶有雅黑）
Bing 的搜索結果也傾向我的推測。