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

本汪曾負(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ì)出一套極具辨識(shí)性與差異化的 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ì)和間距）：

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

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

Windows 8 中的 Segoe UI：

注意事項(xiàng)：

如果頁面標(biāo)題或副標(biāo)題太長而無法顯示，請使用省略號(hào) (U+2026)，而不要使用 3 個(gè)點(diǎn)。不要在標(biāo)題文本末尾和省略號(hà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)符號(hào)：

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

不要過度使用感嘆號(hào)。相反，選擇程度更深的字詞。和感嘆號(hào)一樣，請慎用問號(hào)。當(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.] 在逗號(hào)后面、句點(diǎn)后面均有空格。大小寫。如：Windows 不能寫作 windows 或者 win。Windows 10 for Phones 不宜寫作 Win10 for phone。對于有特別作出規(guī)定的標(biāo)志，比如 Microsoft 徽標(biāo) Microsoft Corporate Logo Guidelines（請展開其中的 + 號(hào)按鈕）。

【附加示例】

調(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)識(shí)。

這點(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)生了什么樣的品牌形象、怎樣提升了用戶的操作效率等。

四、排布與對齊

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

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

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

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

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

2、頁眉

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

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

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

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

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

4、水平填充值

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

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

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

5、垂直填充值

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

6、組之間的水平填充

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

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

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

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

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

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

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

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

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

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

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

剛剛給了一些干貨。

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

就舉個(gè)實(shí)例吧，表單的布局。或者說，把表單換成一行行內(nèi)容，對應(yīng)進(jìn)去就好啦。

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

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

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

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

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

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

何時(shí)使用兩列布局？

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

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

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

五、圖標(biāo)

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

透視

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

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

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

生產(chǎn)

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

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

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

大部分此類字形在提供時(shí)其間距為零。你可以在每個(gè)零寬度字形上放置其他零寬度字形。例如，如果你插入零寬度的紅色的實(shí)心 (U+E00B)，光標(biāo)不會(huì)跑到心形的末尾，因?yàn)槠鋵挾葹榱恪Ｈ缓�，如果你插入黑色的心形輪�?(U+E006)，則心形輪廓會(huì)放置在實(shí)心之上。

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

這里提供一些 Unicode ID。

紅心大戰(zhàn)

星形評級

復(fù)選框組件

單選按鈕

雜項(xiàng)

滾動(dòng)條

漸進(jìn)式公開箭頭

后退按鈕

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

HTML 的后退箭頭

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

用于控制的圖標(biāo)的字形

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

六、動(dòng)畫

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

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

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

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

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

更多動(dòng)畫自行操作、觀察。

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

這是我看到的一個(gè)提煉：

Metro UI設(shè)計(jì)具備以下五點(diǎn)原則：

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

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

3. 整合軟硬件

4. 世界級的動(dòng)畫

5. 生動(dòng)，有靈魂

# 注釋 #

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

Segoe UI 的兩種造型？

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

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

這是 Windows 7 下的 Segoe 字體集。

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

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

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

?其中有這樣一行：

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

因此，Segoe 就是這樣的：

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

再次感謝！

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

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

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

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

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

全篇完結(jié)。