今天這篇近萬字的長文，不僅是對微軟風格的追根溯源，也是一份特別有重量的設計總結。作者@帶著佳偉去旅遊 曾負責過微軟的影片，全文都是乾貨 >>>
本汪曾負責過微軟的某些影片。
Modern UI 的大部分特性是適合用來做 PPT 的。
好的 PPT 應該是基於演講者定製的。不要輕易相信有了好的模板你的演示就一定會比別人的好——好的模板套成渣的也不在少數，好的 PPT 配上水平不夠的演講也很常見。演講的目的在於讓聽眾明白你的想法，PPT 只是一個輔助工具，是聽眾在“明白你的想法”這一環節的催化劑。演講才是重點。
關注此問題的應該大多是會自己動手做的，每次從空白 PPT 開始構想創作是一件很好的事。
貼上微軟官方的設計理念：微軟 /design design.microsoft.com
不建議把 Modern UI 簡單粗暴地理解為“色塊”堆砌而成的介面——那介面上的“擬物”還是所謂“扁平”又有何本質區別？也不能把 Modern UI 叫做“扁平化”，微軟官方可是從來沒有用過“扁平化”這樣的措辭。（早期叫 Metro UI，涉及商標原因改為 Modern UI 或 Windows 8 Style UI。Metro UI 的早期，那些個磁貼是長條狀的，比現在看到的長許多。）
不認同 Modern UI 的，每個人有各自喜好。但我們無法否認要獨立於 iOS、Android 樣式之外設計出一套極具辨識性與差異化的 UI 不是一件容易事的事實。許多手機產商用盡各種方式，卻似乎始終無法跳出那個框框。
一、字型英文：Segoe UI
中文：Microsoft YaHei UI、Microsoft YaHei、微軟雅黑
Segoe 是 Modern UI 規定使用字型。微軟還開發或授權一組字型，中文的 Microsoft YaHei UI 就屬於其中一種，用於簡體中文的顯示，現有 Light / Regular / Blod 三種版本。附上官方連結 Windows 下的字型。
在控制皮膚中提取字型，或從 Microsoft 官方獲取：Font Families
Windows Phone 上的中文使用 Dengxian 字型，英文使用 Segoe WP 字型（Light / Semilight / Semibold）。它們或將在 Windows 10 for Phones 中與 Windows 10 統一（目前 Windows 10 的設計準則還沒有一個完整成型的資料對外公開或樣式呈現）。
對英文原版系統來說，在沒有安裝中文語言包的情況下，不會有“微軟雅黑”這個字型，但是有 Microsoft YaHei UI。也就是說，即使“微軟雅黑”不可用，Microsoft YaHei UI 都是處於可用的狀態。UI 是代表系統介面顯示的字型。
預設字型經幾次系統升級發生了改進：
Windows 8 的預設字型：
Windows 7 中的預設字型：
① 字詞：
若要體現“簡單”和“輕鬆”，請使用簡單的句子和短語、最短的文字和日常字詞。精心挑選的精確字詞可清晰地表達意義。通常，少即是多。以客戶（對應 PPT 的觀眾）的語氣說話。你要假設你只懂一點或完全不懂你所面對的產品，並以這樣的眼光審視你的作品。下面是一些
調整前和調整後的示例：
請說“獲取 Windows 8.1”，而不是“檢視產品”。請說“你需要一個 ID，如下所示：customer@microsoft.com”，而不是“ID 無效”。請說“選擇你的主題”，而不是“配置你的顯示效果”。同樣，儘量避免那些聽起來嚇人或對於大多數客戶僅有模糊意義的“技術”字詞。比如：無效、錯誤、配置、管理、裝置（請改用“電腦”或“手機”）等。
② 標點符號：
標點符號能幫助傳達意義，但它不可替代字詞。以下是要記住的幾點：
不要過度使用感嘆號。相反，選擇程度更深的字詞。和感嘆號一樣，請慎用問號。當連結採用客戶問題的措辭時，它們效果很好。③ 用法：略。
④ 注意格式規範：
“英文” “中文” “數字”相互之間須有空格。比如 [我們將在 4 月 29 日召開 Build 大會，會上會有更多關於 Windows 10 的資訊公佈。]英文句子間須有空格。比如 [We released Windows 10 Technical Preview last year, and many people like it. We also showed HoloLens.] 在逗號後面、句點後面均有空格。大小寫。如：Windows 不能寫作 windows 或者 win。Windows 10 for Phones 不宜寫作 win10 for phone。對於有特別作出規定的標誌，比如 Microsoft 徽標 Microsoft Corporate Logo Guidelines（請展開其中的 + 號按鈕）。【附加示例】
調整前的文字：你嘗試開啟的檔案不屬於允許的檔案型別。
調整後的文字：不能在手機上開啟此類檔案。
調整前的文字：我們正在將該演示裝置的設定還原到預配置的值。此過程不可中斷。
調整後的文字：我們正在將該電腦還原到用於演示的原始設定。該過程需要一些時間，並且不能中斷。
調整前的文字：Microsoft 可能會使用你提供的資訊，以透過與你的帳戶相關聯的服務相關強制性通訊聯絡你，並提供我們認為你感興趣的其他通訊。
調整後的文字：Microsoft 可能針對關於你的帳戶的服務相關資訊聯絡你，或者向你提供你可能感興趣的其他有用資訊。
【配置正確合適的字面內容，也是 Modern UI 的設計準則之一！如果沒有做到，便不能算是 Modern UI。重申一遍，不建議把 Modern UI 理解為“色塊堆砌”。】
三、顏色Modern UI 的顏色是飽滿、鮮明和真實的數字，涵蓋了顯示技術所能夠達到的整個色域。Windows 主要使用單一純色，但利用各種技巧創造深度，如透明度、分層和混合。
先上一張色表吧。此色表僅對 Windows Phone 起作用，Windows 又是另外一套顏色方案（不是不整合，是兩種裝置的融合度還不高、使用場景還有很多隔閡的時候，顏色的使用也需要隨使用場景的特點而有不同。這點又反映在磁貼的動畫上，Windows 上的磁貼不會也是禁止進行前後翻轉。）另，此色表是當時的，現在我手裡有一臺 Lumia 830，它的主題色還多了一種“亮綠”，是為了配合亮綠色背殼而增加的，且它排在最後一位，而不是插隊到綠色位置。還有的運營商可能會有定製的主題色，這些暫時都不在我們的考慮範圍內。
Modern UI 體現在 Windows Phone 上的配色：
謹慎地融入顏色，對品牌產生影響。使用離散、高對比度的顏色組合來體現清晰度和可見性。應當儘量少用鮮豔的顏色，如果你無法決定使用哪種顏色，則預設使用中性或單色色調。意思就是不要將各種五花八門甚至發亮的顏色（而且還是沒有經過組合配色的隨機選的顏色）毫無規律地拼湊在一起——尤其是手機這樣小尺寸的手持裝置，因為它與大螢幕的裝置有不同的特點，配色方法是有區別的。簡單說來，如果你要在一個小的地方，比如明信片、名片、書籤等等的小物品上運用Moder UI，記得：少用色，用好色。
比如 Microsoft Account 的各處登入頁面（如 Outlook），它經常需要在手機或各種裝置上顯示，它非常簡潔，就一種藍色藍色（Xbox 登入可能會是綠色，是顏色在品牌上的變換），不會五花八門。且用色之處，皆為重要資訊，或，希望你關注的資訊。
Modern UI 體現在 Windows 上的配色：
正如你知道的那樣，系統顏色和應用顏色是不同的。系統顏色是使用者選擇並由 Windows 應用到系統中主要 UI 表面的顏色，如“開始”螢幕背景、邊欄選單、按鈕顏色等等。應用顏色是應用開發人員選擇的獨特顏色，它獨立於系統顏色之外。應用顏色表示應用的品牌和標識。
這點應用到 PPT 上可以變換為，選定用於貫穿整個 PPT 的主色，和你的分頁顏色。比如目錄用色，和目錄上各章節的配色。能輕易發現，背景色一定不是淺色系的！（至少預設配色方案不會給出淺色系背景，至於可自定顏色不在討論範圍內）預設的紫色，是深紫，明度較低，即用沉穩的色調，去反襯磁貼的多彩。若背景色是淺色系的，那麼整個介面會顯得凌亂，難分主次。
應用在 PPT 上，背景要具有承載頁面內容的能力。即使是圖片作為背景，也要將圖片的明度調暗。可試著選擇桌面桌布當作開始螢幕背景，並和桌面切換對比，你會發現，開始螢幕雖然使用了桌面桌布作為圖片，卻也是經過了加暗處理。（Windows 上的內建應用配色，是經過調色配置好的一套顏色，可自行取色使用。但不要從開始螢幕上的磁貼取，請從“所有應用”介面的小圖示取。因大磁貼顏色實際是漸變色，而非真純色。）
另，為何 Windows 8.1 更新後預設桌布是黃色的呢？因為本身黃色不適合作為開始螢幕上的磁貼顏色，會造成文字變黑的結果。黃色同時是中性色，冷暖不定。到了 Windows 8.1，桌面變為黃色，廣告圖中多是中等正方形狀態。顏色上，弱化它；功能上，不強調它。微軟希望大家更多地使用 Modern 應用，而不是桌面，趨勢。）
一個案例：多彩的鬧鐘，下方開關白色為開，否則是關。增強了對比度，這就是在視覺上將開關的狀態感知增強了，且因背景是深灰，而非鮮亮色，這種感覺就更強了。當你放眼看這張圖的時候就有“一目瞭然”的感覺。如果用左右拉的開關，並放於鬧鐘名稱右側，放眼望去，便不會那麼清晰了。
作用在 PPT 上，即運用高對比度的顏色來獲得“看一眼就明白”的效果。（黑、灰、白不屬於色彩。）
總之：主角是前景被關注的內容，而非背景。這裡反映出 Modern UI 的一個原則：突出最重要的資訊，內容第一，而非無謂的裝飾。讓資訊量達到“無法向下刪減”的程度。
再看幾個應用的顏色：
郵件現已經改為藍色，可能是為了和 Outlook 藍色調配合。
介面上色系越少（相近色不算），Modern UI 的特徵越明顯。
統一配色，並將最需要引人注意的部分用該顏色標註出來，除此之外，用不同灰度的黑色。底部選單欄也為了和背景形成反差，引起注意。比如郵件應用，被藍綠色標記的文字是郵件前面幾個字的提要，而不是發件人或者其他，這是因為郵件內容是最最重要的，比如“週末一起去野餐吧”這樣的郵件訊息，而不是“洪國明”這樣的名字。（洪國明是微軟用於 Demo 的一群名字中的一個，還有“曾樹山”等等……如果有關注廣告可能會看到。另，Contoso 是微軟用於 Demo 的公司名字，幾乎每個案例都是說 Contoso 公司，還為其註冊商標、開發演示應用。contoso.com 好像是會跳轉到 Microsoft 官網。）
擴充： Windows 視窗的背景並不是白色，而是鉻色。:-)
再來個優秀案例：
應用在 PPT 上，想象一個場景：時間軸式的事件圖，若時效性較強，可逐漸改變明度。若特徵不是時效性，是某幾個關鍵時刻，那麼關鍵時刻就用明度高的，其餘的依次弱化。
為什麼說不要把 Modern UI 理解為“色塊堆砌”，其中一個原因：用色是有講究的，即使是大純色塊，也不是亂用的。重點不在於“大的純色塊”這樣的視覺表象，而是用色塊表現了什麼、突出了什麼、弱化了什麼、起到了怎樣的互動引導作用、產生了什麼樣的品牌形象、怎樣提升了使用者的操作效率等。
四、排布與對齊本節末尾有提供官方乾貨哦。——欸別急，先看再下。
寫在最前：我所見過許多想模仿“磁貼”卻模仿不到位的，很大問題出在“磁貼間距”上，要麼太離散，要麼靠得太近。間距是直接影響到“像不像”的一個因素。
1、使用網格系統（要做出嚴苛精確的介面）
在設計 PPT 時候，記得用網格。
網格由單元和子單元組成。測量的基本單位就是單元。一個單元等於 20 × 20 畫素。每個單元進一步細分為 5 × 5 畫素的子單元。每個方形單元有 16 個子單元。下面這張圖描述了螢幕左上角處的網格。放大該影像即可顯示畫素、子單元以及單元。
頁首的基線應該為距離頂部 5 個單元或 100 個畫素。頁首的左邊距為 6 個單元或 120 個畫素。Windows 8 頁首為 Segoe UI 樣式集 20 細線。（還有一些用於程式設計的 UX 事項，比如 Windows 8.1 中滑鼠觸頂會出現標題欄，設計時要考慮元素不會被遮擋。這些內容就不贅述了，PPT 製作中基本沒人去寫這種互動。）
3、內容區域
內容區域的上邊距為 7 個單元或 140 個畫素。左邊距為 6 個單元或 120 個畫素。下邊距非常靈活。對於水平平移的內容，應該不超過 6.5 個單元（130 個畫素），且不少於 2.5 個單元（50 個畫素）。 對於垂直平移的內容，上邊距和左邊距保持不變。由於內容滾出螢幕，因此未指定下邊距。
4、水平填充值
內容項之間的水平填充因項而異。對於明邊項（如影像和使用者磁貼），磁貼和隨附文字之間的填充為 2 個子單元或 10 個畫素。對於列表，列之間的填充為 2 個單元或 40 個畫素。對於明邊項，列之間的填充為 2 個子單元或 10 個畫素。
這裡就不舉反例了，相信大家都曾經見到過，嗯。如果你實在沒把握，可以把開始螢幕或者其他的截圖一下，放進 PPT，然後用圖形臨摹重疊，再刪除截圖。