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

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

這里提供一些 Unicode ID。

紅心大戰(zhàn)

星形評(píng)級(jí)

復(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)畫，喜歡折騰搗鼓，那就試試吧。PowerPoint 中部分動(dòng)畫的“平滑結(jié)束”比較用得上，但至今配合動(dòng)畫延遲也沒(méi)有嘗試出完全相同的程度。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)。不過(guò)，如果彈出元素顯示在觸發(fā)彈出的 UI 元素下方，則平移應(yīng)是向下移動(dòng) 50 像素。例如，此下載平移將適用于從導(dǎo)航欄或從應(yīng)用標(biāo)題觸發(fā)的浮出控件。這是為了向用戶提供彈出元素與其觸發(fā)元素之間的可視鏈接。

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

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

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

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

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

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

3. 整合軟硬件

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

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

# 注釋 #

在【一、字體】中提及的 SS01 樣式，出現(xiàn)了一些復(fù)雜的情況，感謝 @prox 用心的查證，手動(dòng)點(diǎn)贊！因 @prox 網(wǎng)絡(luò)問(wèn)題無(wú)法發(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 版本。推測(cè)，這可能只是一個(gè)臨時(shí)的、中間的、不正式的版本。
Segoe 字體本身是不包括中文的。微軟當(dāng)前對(duì)它的用法是，與微軟雅黑中文搭配成新版 YaHei Light，或與方正中等線搭配成 Windows Phone 自帶 DengXian 字體。所以呢，也許是 5.11 版本打包的時(shí)候出錯(cuò)了，直接將一整套微軟雅黑扔了進(jìn)去……（注意5.11與其他任何版本的中 文字體都不一樣，其他的選擇了默認(rèn)宋體作為中文字體缺失時(shí)的替換展示字體，而 5.11 版本帶有雅黑）
Bing 的搜索結(jié)果也傾向我的推測(cè)。

因此，Segoe 就是這樣的：

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

再次感謝！

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

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

那些令人尊敬的人們，現(xiàn)在或許正為未來(lái)五年或十年的設(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 和下載下來(lái)的 9841 有多處不同的原因了。那么沒(méi)有理由不相信 Windows 10 最終會(huì)擁有一套漂亮的界面！鑒于保密工作越發(fā)嚴(yán)謹(jǐn)，大家還是等正式發(fā)布的那天吧！→ 如果過(guò)早曝光，沒(méi)了驚喜，那多沒(méi)意思嘛^_^）

全篇完結(jié)。