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

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

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

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

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

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

2、頁眉

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

這很適合用來填寫 PPT 的頁標(biāo)題（如果頁面不是只有這一個標(biāo)題的話）?？梢韵茸瞿赴?，定好位，這樣就很方便，不用每次去調(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 版之后默認(rèn)的比例），尤其內(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://img.lvups.com/d/file/bigpic/2022/12/26/bbjeet5db2e

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

用于 Illustrator 的設(shè)計模板： https://img.lvups.com/d/file/bigpic/2022/12/26/u0ntfnb3a3g

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

剛剛給了一些干貨。

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

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

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

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

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

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

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

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

何時使用兩列布局？

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

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

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

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

透視

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

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

圖標(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)不但要透出品牌的個性，而且要保持界面的效率。

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

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