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

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

這里提供一些 Unicode ID。

紅心大戰(zhàn)

星形評級

復(fù)選框組件

單選按鈕

雜項

滾動條

漸進式公開箭頭

后退按鈕

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

HTML 的后退箭頭

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

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

這些字形設(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)用標(biāo)題觸發(fā)的浮出控件。這是為了向用戶提供彈出元素與其觸發(fā)元素之間的可視鏈接。

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

我是從介紹其設(shè)計準(zhǔn)則這個角度來回答如何制作這種風(fēng)格的 PPT 的，試圖把重點的一部分呈現(xiàn)出來，整理下大家紛亂的感知，我認(rè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ī)”的文件。它們分別是這樣的：

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

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

?其中有這樣一行：

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

因此，Segoe 就是這樣的：

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

再次感謝！

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

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

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

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

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

全篇完結(jié)。