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

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

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

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

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

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

2、頁(yè)眉

頁(yè)眉的基線應(yīng)該為距離頂部 5 個(gè)單元或 100 個(gè)像素。頁(yè)眉的左邊距為 6 個(gè)單元或 120 個(gè)像素。Windows 8 頁(yè)眉為 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 的頁(yè)標(biāo)題（如果頁(yè)面不是只有這一個(gè)標(biāo)題的話）。可以先做母版，定好位，這樣就很方便，不用每次去調(diào)整。

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

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

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

4、水平填充值

內(nèi)容項(xiàng)之間的水平填充因項(xiàng)而異。對(duì)于明邊項(xiàng)（如圖像和用戶磁貼），磁貼和隨附文本之間的填充為 2 個(gè)子單元或 10 個(gè)像素。對(duì)于列表，列之間的填充為 2 個(gè)單元或 40 個(gè)像素。對(duì)于明邊項(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)的類型而異。 對(duì)于磁貼和文本列表，行內(nèi)項(xiàng)之間的垂直填充為 1 個(gè)單元或 20 個(gè)像素。對(duì)于明邊對(duì)象，行內(nèi)項(xiàng)之間的填充為 2 個(gè)子單元或 10 個(gè)像素。

6、組之間的水平填充

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

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

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

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

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

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

等等！這是側(cè)重排布與對(duì)齊以及模塊樣式的，不是側(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 某些頁(yè)面的設(shè)計(jì)（看起來更接近 Modern UI）、適合用于應(yīng)用的 UI 設(shè)計(jì)。但是記得，我們很難用 PPT 達(dá)到動(dòng)態(tài)磁貼的效果，也是 Modern UI 的一個(gè)精髓所在。要想方設(shè)法讓你靜態(tài)的頁(yè)面內(nèi)容達(dá)到“一目了然”和”突出重點(diǎn)”的狀態(tài)。

剛剛給了一些干貨。

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

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

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

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

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

下面是使用單列布局的較長(zhǎng)表單示例：

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

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

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

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

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

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

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

透視

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

“擠出”一個(gè)對(duì)象意味著當(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)系起來，甚至可以喚起對(duì)應(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í)心之上。