告訴你如何做出微軟風格的PPT？(4)

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

Modern UI 的大部分特性是適合用來做 PPT 的。

好的 PPT 應(yīng)該是基于演講者定制的。不要輕易相信有了好的模板你的演示就一定會比別人的好——好的模板套成渣的也不在少數(shù)，好的 PPT 配上水平不夠的演講也很常見。演講的目的在于讓聽眾明白你的想法，PPT 只是一個輔助工具，是聽眾在“明白你的想法”這一環(huán)節(jié)的催化劑。演講才是重點。

關(guān)注此問題的應(yīng)該大多是會自己動手做的，每次從空白 PPT 開始構(gòu)想創(chuàng)作是一件很好的事。

貼上微軟官方的設(shè)計理念：微軟 /design design.microsoft.com

不建議把 Modern UI 簡單粗暴地理解為“色塊”堆砌而成的界面——那界面上的“擬物”還是所謂“扁平”又有何本質(zhì)區(qū)別？也不能把 Modern UI 叫做“扁平化”，微軟官方可是從來沒有用過“扁平化”這樣的措辭。（早期叫 Metro UI，涉及商標原因改為 Modern UI 或 Windows 8 Style UI。Metro UI 的早期，那些個磁貼是長條狀的，比現(xiàn)在看到的長許多。）

不認同 Modern UI 的，每個人有各自喜好。但我們無法否認要獨立于 iOS、Android 樣式之外設(shè)計出一套極具辨識性與差異化的 UI 不是一件容易事的事實。許多手機產(chǎn)商用盡各種方式，卻似乎始終無法跳出那個框框。

一、字體

英文：Segoe UI

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

Segoe 是 Modern UI 規(guī)定使用字體。微軟還開發(fā)或授權(quán)一組字體，中文的 Microsoft YaHei UI 就屬于其中一種，用于簡體中文的顯示，現(xiàn)有 Light / Regular / Blod 三種版本。附上官方鏈接 Windows 下的字體。

在控制面板中提取字體，或從 Microsoft 官方獲�。篎ont Families

Windows Phone 上的中文使用 Dengxian 字體，英文使用 Segoe WP 字體（Light / Semilight / Semibold）。它們或?qū)⒃?Windows 10 for Phones 中與 Windows 10 統(tǒng)一（目前 Windows 10 的設(shè)計準則還沒有一個完整成型的資料對外公開或樣式呈現(xiàn)）。

對英文原版系統(tǒng)來說，在沒有安裝中文語言包的情況下，不會有“微軟雅黑”這個字體，但是有 Microsoft YaHei UI。也就是說，即使“微軟雅黑”不可用，Microsoft YaHei UI 都是處于可用的狀態(tài)。UI 是代表系統(tǒng)界面顯示的字體。

默認字體經(jīng)幾次系統(tǒng)升級發(fā)生了改進：

Windows 8 的默認字體：

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

SS20 樣式（首選的設(shè)計和間距）：

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

Windows 7 中的默認字體：

Windows 8 中的 Segoe UI：

注意事項：

如果頁面標題或副標題太長而無法顯示，請使用省略號 (U+2026)，而不要使用 3 個點。不要在標題文本末尾和省略號之間添加空格。不要使用傾斜字體。應(yīng)遵循布局。（這點在之后會說明，簡而言之：勿亂擺）二、字面內(nèi)容（語言風格）

① 字詞：

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

以客戶（對應(yīng) PPT 的觀眾）的語氣說話。你要假設(shè)你只懂一點或完全不懂你所面對的產(chǎn)品，并以這樣的眼光審視你的作品。下面是一些調(diào)整前和調(diào)整后的示例：

請說“獲取 Windows 8.1”，而不是“查看產(chǎn)品”。請說“你需要一個 ID，如下所示：customer@microsoft.com”，而不是“ID 無效”。請說“選擇你的主題”，而不是“配置你的顯示效果”。

同樣，盡量避免那些聽起來嚇人或?qū)τ诖蠖鄶?shù)客戶僅有模糊意義的“技術(shù)”字詞。比如：無效、錯誤、配置、管理、設(shè)備（請改用“電腦”或“手機”）等。

② 標點符號：

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

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

③ 用法：略。

④ 注意格式規(guī)范：

“英文” “中文” “數(shù)字”相互之間須有空格。比如 [我們將在 4 月 29 日召開 Build 大會，會上會有更多關(guān)于 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。對于有特別作出規(guī)定的標志，比如 Microsoft 徽標 Microsoft Corporate Logo Guidelines（請展開其中的 + 號按鈕）。

【附加示例】

調(diào)整前的文本：你嘗試打開的文件不屬于允許的文件類型。

調(diào)整后的文本：不能在手機上打開此類文件。

調(diào)整前的文本：我們正在將該演示設(shè)備的設(shè)置還原到預(yù)配置的值。此過程不可中斷。

調(diào)整后的文本：我們正在將該電腦還原到用于演示的原始設(shè)置。該過程需要一些時間，并且不能中斷。

調(diào)整前的文本：Microsoft 可能會使用你提供的信息，以通過與你的帳戶相關(guān)聯(lián)的服務(wù)相關(guān)強制性通信聯(lián)系你，并提供我們認為你感興趣的其他通信。

調(diào)整后的文本：Microsoft 可能針對關(guān)于你的帳戶的服務(wù)相關(guān)信息聯(lián)系你，或者向你提供你可能感興趣的其他有用信息。

【配置正確合適的字面內(nèi)容，也是 Modern UI 的設(shè)計準則之一！如果沒有做到，便不能算是 Modern UI。重申一遍，不建議把 Modern UI 理解為“色塊堆砌”�！�

三、顏色

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

先上一張色表吧。此色表僅對 Windows Phone 起作用，Windows 又是另外一套顏色方案（不是不整合，是兩種設(shè)備的融合度還不高、使用場景還有很多隔閡的時候，顏色的使用也需要隨使用場景的特點而有不同。這點又反映在磁貼的動畫上，Windows 上的磁貼不會也是禁止進行前后翻轉(zhuǎn)。）另，此色表是當時的，現(xiàn)在我手里有一臺 Lumia 830，它的主題色還多了一種“亮綠”，是為了配合亮綠色背殼而增加的，且它排在最后一位，而不是插隊到綠色位置。還有的運營商可能會有定制的主題色，這些暫時都不在我們的考慮范圍內(nèi)。

Modern UI 體現(xiàn)在 Windows Phone 上的配色：

謹慎地融入顏色，對品牌產(chǎn)生影響。使用離散、高對比度的顏色組合來體現(xiàn)清晰度和可見性。應(yīng)當盡量少用鮮艷的顏色，如果你無法決定使用哪種顏色，則默認使用中性或單色色調(diào)。意思就是不要將各種五花八門甚至發(fā)亮的顏色（而且還是沒有經(jīng)過組合配色的隨機選的顏色）毫無規(guī)律地拼湊在一起——尤其是手機這樣小尺寸的手持設(shè)備，因為它與大屏幕的設(shè)備有不同的特點，配色方法是有區(qū)別的。簡單說來，如果你要在一個小的地方，比如明信片、名片、書簽等等的小物品上運用Moder UI，記得：少用色，用好色。

比如 Microsoft Account 的各處登錄頁面（如 Outlook），它經(jīng)常需要在手機或各種設(shè)備上顯示，它非常簡潔，就一種藍色藍色（Xbox 登錄可能會是綠色，是顏色在品牌上的變換），不會五花八門。且用色之處，皆為重要信息，或，希望你關(guān)注的信息。

Modern UI 體現(xiàn)在 Windows 上的配色：

正如你知道的那樣，系統(tǒng)顏色和應(yīng)用顏色是不同的。系統(tǒng)顏色是用戶選擇并由 Windows 應(yīng)用到系統(tǒng)中主要 UI 表面的顏色，如“開始”屏幕背景、邊欄菜單、按鈕顏色等等。應(yīng)用顏色是應(yīng)用開發(fā)人員選擇的獨特顏色，它獨立于系統(tǒng)顏色之外。應(yīng)用顏色表示應(yīng)用的品牌和標識。

這點應(yīng)用到 PPT 上可以變換為，選定用于貫穿整個 PPT 的主色，和你的分頁顏色。比如目錄用色，和目錄上各章節(jié)的配色。

能輕易發(fā)現(xiàn)，背景色一定不是淺色系的�。ㄖ辽倌J配色方案不會給出淺色系背景，至于可自定顏色不在討論范圍內(nèi)）默認的紫色，是深紫，明度較低，即用沉穩(wěn)的色調(diào)，去反襯磁貼的多彩。若背景色是淺色系的，那么整個界面會顯得凌亂，難分主次。

應(yīng)用在 PPT 上，背景要具有承載頁面內(nèi)容的能力。即使是圖片作為背景，也要將圖片的明度調(diào)暗。可試著選擇桌面壁紙當作開始屏幕背景，并和桌面切換對比，你會發(fā)現(xiàn)，開始屏幕雖然使用了桌面壁紙作為圖片，卻也是經(jīng)過了加暗處理。（Windows 上的內(nèi)置應(yīng)用配色，是經(jīng)過調(diào)色配置好的一套顏色，可自行取色使用。但不要從開始屏幕上的磁貼取，請從“所有應(yīng)用”界面的小圖標取。因大磁貼顏色實際是漸變色，而非真純色。）

另，為何 Windows 8.1 更新后默認壁紙是黃色的呢？因為本身黃色不適合作為開始屏幕上的磁貼顏色，會造成文字變黑的結(jié)果。黃色同時是中性色，冷暖不定。到了 Windows 8.1，桌面變?yōu)辄S色，廣告圖中多是中等正方形狀態(tài)。顏色上，弱化它；功能上，不強調(diào)它。微軟希望大家更多地使用 Modern 應(yīng)用，而不是桌面，趨勢。）

一個案例：多彩的鬧鐘，下方開關(guān)白色為開，否則是關(guān)。增強了對比度，這就是在視覺上將開關(guān)的狀態(tài)感知增強了，且因背景是深灰，而非鮮亮色，這種感覺就更強了。當你放眼看這張圖的時候就有“一目了然”的感覺。如果用左右拉的開關(guān)，并放于鬧鐘名稱右側(cè)，放眼望去，便不會那么清晰了。

作用在 PPT 上，即運用高對比度的顏色來獲得“看一眼就明白”的效果。（黑、灰、白不屬于色彩。）

總之：主角是前景被關(guān)注的內(nèi)容，而非背景。這里反映出 Modern UI 的一個原則：突出最重要的信息，內(nèi)容第一，而非無謂的裝飾。讓信息量達到“無法向下刪減”的程度。

再看幾個應(yīng)用的顏色：

郵件現(xiàn)已經(jīng)改為藍色，可能是為了和 Outlook 藍色調(diào)配合。

界面上色系越少（相近色不算），Modern UI 的特征越明顯。

統(tǒng)一配色，并將最需要引人注意的部分用該顏色標注出來，除此之外，用不同灰度的黑色。底部菜單欄也為了和背景形成反差，引起注意。比如郵件應(yīng)用，被藍綠色標記的文字是郵件前面幾個字的提要，而不是發(fā)件人或者其他，這是因為郵件內(nèi)容是最最重要的，比如“周末一起去野餐吧”這樣的郵件消息，而不是“洪國明”這樣的名字。（洪國明是微軟用于 Demo 的一群名字中的一個，還有“曾樹山”等等……如果有關(guān)注廣告可能會看到。另，Contoso 是微軟用于 Demo 的公司名字，幾乎每個案例都是說 Contoso 公司，還為其注冊商標、開發(fā)演示應(yīng)用。contoso.com 好像是會跳轉(zhuǎn)到 Microsoft 官網(wǎng)。）

拓展： Windows 窗口的背景并不是白色，而是鉻色。:-)

再來個優(yōu)秀案例：

“閱讀列表”應(yīng)用的頂部菜單欄之一（按時間排序，從左到右是“今天、昨天、這周的早些時候、上周、上個月”）。下面是界面圖片：

想必不用多解釋，此案例中“今天”的配色是明度最高的，因其是“今天”共享進來的。時間越之前，明度越暗：弱化注意力。越是之前的，越可能是已經(jīng)閱讀過了的、無需關(guān)注的。

應(yīng)用在 PPT 上，想象一個場景：時間軸式的事件圖，若時效性較強，可逐漸改變明度。若特征不是時效性，是某幾個關(guān)鍵時刻，那么關(guān)鍵時刻就用明度高的，其余的依次弱化。

為什么說不要把 Modern UI 理解為“色塊堆砌”，其中一個原因：用色是有講究的，即使是大純色塊，也不是亂用的。重點不在于“大的純色塊”這樣的視覺表象，而是用色塊表現(xiàn)了什么、突出了什么、弱化了什么、起到了怎樣的交互引導(dǎo)作用、產(chǎn)生了什么樣的品牌形象、怎樣提升了用戶的操作效率等。

四、排布與對齊

本節(jié)末尾有提供官方干貨哦。——欸別急，先看再下。

寫在最前：我所見過許多想模仿“磁貼”卻模仿不到位的，很大問題出在“磁貼間距”上，要么太離散，要么靠得太近。間距是直接影響到“像不像”的一個因素。

1、使用網(wǎng)格系統(tǒng)（要做出嚴苛精確的界面）

在設(shè)計 PPT 時候，記得用網(wǎng)格。

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

2、頁眉

頁眉的基線應(yīng)該為距離頂部 5 個單元或 100 個像素。頁眉的左邊距為 6 個單元或 120 個像素。Windows 8 頁眉為 Segoe UI 樣式集 20 細線。
（還有一些用于程序設(shè)計的 UX 事項，比如 Windows 8.1 中鼠標觸頂會出現(xiàn)標題欄，設(shè)計時要考慮元素不會被遮擋。這些內(nèi)容就不贅述了，PPT 制作中基本沒人去寫這種交互。）

這很適合用來填寫 PPT 的頁標題（如果頁面不是只有這一個標題的話）�？梢韵茸瞿赴妫ê梦�，這樣就很方便，不用每次去調(diào)整。

3、內(nèi)容區(qū)域

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

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

4、水平填充值

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

這里就涉及到開頭說的“間距”的問題啦~ 規(guī)定是磁貼間間隔 10 像素。開始屏幕上的每塊磁貼都是有 1 px 的邊框的哦，那個邊框就包含在“10 像素的間距”之中。也就是說，除去邊框，還有 8 px 的空間。

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

5、垂直填充值

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

6、組之間的水平填充

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

嗯，分組。不過 PPT 中應(yīng)該很少會用到組的樣式吧……

再給大家提供幾張圖，是微軟用作為講解案例的：

可以說，排布和對齊，是很大程度影響到你的 Modern UI 看起來“正不正宗”或者說“像不像”的關(guān)鍵因素之一。

寧可多花一點時間在對齊和排布上。另，PowerPoint 中的“對齊”功能挺好用的。

說了這么多，你一定在找干貨……好的，這就給你！

等等！這是側(cè)重排布與對齊以及模塊樣式的，不是側(cè)重用色的。

用于 PowerPoint 的設(shè)計模板： https://go.microsoft.com/fwlink/p/?LinkId=325041

用于 Photoshop 的設(shè)計模板： ttps://go.microsoft.com/fwlink/p/?LinkId=325040

用于 Illustrator 的設(shè)計模板： https://go.microsoft.com/fwlink/p/?LinkId=325039

這些資產(chǎn)，適合用于 PPT 某些頁面的設(shè)計（看起來更接近 Modern UI）、適合用于應(yīng)用的 UI 設(shè)計。但是記得，我們很難用 PPT 達到動態(tài)磁貼的效果，也是 Modern UI 的一個精髓所在。要想方設(shè)法讓你靜態(tài)的頁面內(nèi)容達到“一目了然”和”突出重點”的狀態(tài)。

剛剛給了一些干貨。

那么就來說說，這些干貨你準備怎么用？可不是亂搭的呀寶貝們……

就舉個實例吧，表單的布局�；蛘哒f，把表單換成一行行內(nèi)容，對應(yīng)進去就好啦。

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

之所以說表單，就是想拓展一下。不僅僅是用于 PPT。比如你要用 Modern UI 來設(shè)計一張或多張打印出來的填表，就能注意到。

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

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

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

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

何時使用兩列布局？

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

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

此外，我想分享一個大家應(yīng)該都見過的表單設(shè)計：

五、圖標

圖標使用最少的部分和細節(jié)，可以提取和簡化概念。它們在本質(zhì)上是圖形，并且采用平面透視效果和單色，強化了內(nèi)容重于版式的思想。

透視

的圖標是二維符號形狀。圖標可以巧妙地暗示體積或深度，但我們一般避免增加透視線或角度。大多數(shù)圖標代表一個概念或?qū)ο蟆Ｈ绻粋�圖標代表一個以上的對象，前面的對象“擠出”后面的對象。

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

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

生產(chǎn)

建議使用矢量繪制所有圖標，尤其是在 Adobe Illustrator 或 Expressions Design 中。將矢量形狀貼靠在字形系統(tǒng)中是至關(guān)重要的。Windows 圖標必須有清晰、干凈的邊緣。

圖標不只是提供功能。還有助于將用戶與應(yīng)用的總體構(gòu)想聯(lián)系起來，甚至可以喚起對應(yīng)用的良好情感。圖標不但要透出品牌的個性，而且要保持界面的效率。

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

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

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

這里提供一些 Unicode ID。

紅心大戰(zhàn)

星形評級

復(fù)選框組件

單選按鈕

雜項

滾動條

漸進式公開箭頭

后退按鈕

后退按鈕的字形提供了 3 種不同大小，以便外環(huán)的權(quán)重等于 16pt、20pt 和 42pt。這些字形設(shè)計用于支持分層。

HTML 的后退箭頭

記得添加其他代碼，創(chuàng)建環(huán)繞這些字形的圓環(huán)。

用于控制的圖標的字形

這些字形設(shè)計為以 14pt 大小顯示。記得使用其他代碼，創(chuàng)建環(huán)繞這些字形的圓環(huán)。

六、動畫

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

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

這個使用進入動畫“飛入” – 從底部 – 持續(xù)時間和平滑結(jié)束時間自行設(shè)定。

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

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

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

我是從介紹其設(shè)計準則這個角度來回答如何制作這種風格的 PPT 的，試圖把重點的一部分呈現(xiàn)出來，整理下大家紛亂的感知，我認為這樣做更實際。

這是我看到的一個提煉：

Metro UI設(shè)計具備以下五點原則：

1. 干凈、輕量、開放、快速

2. 要內(nèi)容，而不是質(zhì)感

3. 整合軟硬件

4. 世界級的動畫

5. 生動，有靈魂

# 注釋 #

在【一、字體】中提及的 SS01 樣式，出現(xiàn)了一些復(fù)雜的情況，感謝 @prox 用心的查證，手動點贊！因 @prox 網(wǎng)絡(luò)問題無法發(fā)表，在這里貼出他的修正內(nèi)容：

Segoe UI 的兩種造型？

@佳偉發(fā)現(xiàn)列出的 Segoe UI 字體，字形竟然是不一致的。

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

這是 Windows 7 下的 Segoe 字體集。

在圖中，發(fā)現(xiàn)了兩個名為“Segoe UI 常規(guī)”的文件。它們分別是這樣的：

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

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

?其中有這樣一行：

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

因此，Segoe 就是這樣的：

并非為了兼容 Windows 7 而把自己改成 YaHei UI Regular 的樣子。

再次感謝！

設(shè)計師為此付出了艱辛勞動，程度之大是我們無法想象到的。

它傾注了設(shè)計師多年的用心探索、大量的資料、不斷推翻改進的設(shè)計。不然，何以成為微軟整個公司轉(zhuǎn)型而確定的設(shè)計風格呢。

那些令人尊敬的人們，現(xiàn)在或許正為未來五年或十年的設(shè)計風格而探索著。

設(shè)計規(guī)則是人定的，為了更好地展現(xiàn)。那么規(guī)則也是可變的。期待 Modern UI 的不斷精進！

（按當時 Windows 8 的開發(fā)情況，最終的配色方案和 UI 是在零售版中露面的。而有人聲稱 Windows 10 每個外放的預(yù)覽版本都會暫時封鎖一部分功能，這也是展示的 9841 和下載下來的 9841 有多處不同的原因了。那么沒有理由不相信 Windows 10 最終會擁有一套漂亮的界面！鑒于保密工作越發(fā)嚴謹，大家還是等正式發(fā)布的那天吧！→ 如果過早曝光，沒了驚喜，那多沒意思嘛^_^）

全篇完結(jié)。