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

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

1、使用網格系統（要做出嚴苛精確的界面）

在設計 PPT 時候，記得用網格。

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

2、頁眉

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

這很適合用來填寫 PPT 的頁標題（如果頁面不是只有這一個標題的話）。可以先做母版，定好位，這樣就很方便，不用每次去調整。

3、內容區域

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

用在 PPT 上是很科學的。我們按 16:9 的屏幕來講（2013 版之后默認的比例），尤其內容的左側，不能靠太近邊緣，因為橫向本身就比較長，要達到平衡。

4、水平填充值

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

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

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

5、垂直填充值

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

6、組之間的水平填充

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

嗯，分組。不過 PPT 中應該很少會用到組的樣式吧……

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

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

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

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

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

用于 PowerPoint 的設計模板： https://fj.psjia.com/d/file/bigpic/2022/12/24/reswukz3yux

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

用于 Illustrator 的設計模板： https://fj.psjia.com/d/file/bigpic/2022/12/24/ct5fa14pgqo

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

剛剛給了一些干貨。

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

就舉個實例吧，表單的布局。或者說，把表單換成一行行內容，對應進去就好啦。

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

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

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

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

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

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

何時使用兩列布局？

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

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

此外，我想分享一個大家應該都見過的表單設計：

五、圖標

圖標使用最少的部分和細節，可以提取和簡化概念。它們在本質上是圖形，并且采用平面透視效果和單色，強化了內容重于版式的思想。

透視

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

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

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

生產

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

圖標不只是提供功能。還有助于將用戶與應用的總體構想聯系起來，甚至可以喚起對應用的良好情感。圖標不但要透出品牌的個性，而且要保持界面的效率。

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

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