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

本汪曾負(fù)責(zé)過微軟的某些視頻。

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

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

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

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

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

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

一、字體

英文：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è)計(jì)準(zhǔn)則還沒有一個(gè)完整成型的資料對外公開或樣式呈現(xiàn)）。

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

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

Windows 8 的默認(rèn)字體：

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

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

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

Windows 7 中的默認(rèn)字體：

Windows 8 中的 Segoe UI：

注意事項(xiàng)：

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

① 字詞：

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

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

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

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

② 標(biāo)點(diǎn)符號：

標(biāo)點(diǎn)符號能幫助傳達(dá)意義，但它不可替代字詞。以下是要記住的幾點(diǎn)：

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

③ 用法：略。

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

“英文” “中文” “數(shù)字”相互之間須有空格。比如 [我們將在 4 月 29 日召開 Build 大會(huì)，會(huì)上會(huì)有更多關(guān)于 Windows 10 的信息公布。]英文句子間須有空格。比如 [We released Windows 10 Technical Preview last year, and many people like it. We also showed HoloLens.] 在逗號后面、句點(diǎn)后面均有空格。大小寫。如：Windows 不能寫作 windows 或者 win。Windows 10 for Phones 不宜寫作 Win10 for phone。對于有特別作出規(guī)定的標(biāo)志，比如 Microsoft 徽標(biāo) Microsoft Corporate Logo Guidelines（請展開其中的 + 號按鈕）。

【附加示例】

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

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

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

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

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

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

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

三、顏色

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、排布與對齊