续上文
四、排布与对齐
本节末尾有提供官方干货哦。——欸别急，先看再下。
写在最前：我所见过许多想模仿“磁贴”却模仿不到位的，很大问题出在“磁贴间距”上，要么太离散，要么靠得太近。间距是直接影响到“像不像”的一个因素。
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://go.microsoft.com/fwlink/p/?LinkId=325041
用于 Photoshop 的设计模板： ttps://go.microsoft.com/fwlink/p/?LinkId=325040
用于 Illustrator 的设计模板： https://go.microsoft.com/fwlink/p/?LinkId=325039
这些资产，适合用于 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)，则心形轮廓会放置在实心之上。
大部分图标还具有镜像样式，以供使用双向文本的语言使用。
这里提供一些 Unicode ID。
红心大战
星形评级
复选框组件
单选按钮
杂项
滚动条
渐进式公开箭头
后退按钮
后退按钮的字形提供了 3 种不同大小，以便外环的权重等于 16pt、20pt 和 42pt。这些字形设计用于支持分层。
HTML 的后退箭头
记得添加其他代码，创建环绕这些字形的圆环。
用于控制的图标的字形
这些字形设计为以 14pt 大小显示。记得使用其他代码，创建环绕这些字形的圆环。
六、动画
如果你有心做动画，喜欢折腾捣鼓，那就试试吧。PowerPoint 中部分动画的“平滑结束”比较用得上，但至今配合动画延迟也没有尝试出完全相同的程度。Modern UI 中很多动画的“位移-时间”图像是曲线。
1、底部 Action Bar：https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4
这个使用进入动画“飞入” – 从底部 – 持续时间和平滑结束时间自行设定。
2、隐藏面板 Charm：https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 设定方式与上一条同理。但视频中还是早期样式，Windows 8.1 中面板与其上的文字有动画延迟，显得更有活力。视频中文字内容和面板还是一个整体。要做新样式，将文字内容与底部面板分离，设置动画延迟。
3、弹出动画：https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一个平移，它是在弹出元素淡入时从初始位置到最终位置的垂直移动。平移距离和方向由应用指定。在大多数情况下，平移应为 50 像素，以向上方向移动。不过，如果弹出元素显示在触发弹出的 UI 元素下方，则平移应是向下移动 50 像素。例如，此下载平移将适用于从导航栏或从应用标题触发的浮出控件。这是为了向用户提供弹出元素与其触发元素之间的可视链接。
更多动画自行操作、观察。
我是从介绍其设计准则这个角度来回答如何制作这种风格的 PPT 的，试图把重点的一部分呈现出来，整理下大家纷乱的感知，我认为这样做更实际。
这是我看到的一个提炼：
Metro UI设计具备以下五点原则：
1. 干净、轻量、开放、快速
2. 要内容，而不是质感
3. 整合软硬件
4. 世界级的动画
5. 生动，有灵魂
# 注释 #
在【一、字体】中提及的 SS01 样式，出现了一些复杂的情况，感谢 @prox 用心的查证，手动点赞！因 @prox 网络问题无法发表，在这里贴出他的修正内容：
Segoe UI 的两种造型？
@佳伟发现列出的 Segoe UI 字体，字形竟然是不一致的。
作为 Segoe UI 的粉丝，我不辞劳苦（？）地找到了一台 Windows 7 电脑，使用 QQ 远程协助截下了如下珍贵图像。po主真的很拼……
这是 Windows 7 下的 Segoe 字体集。
在图中，发现了两个名为“Segoe UI 常规”的文件。它们分别是这样的：
显然这两种字形是不一致的。第二种，通常我们认为是微软雅黑的西文样式。注意两个字体文件版本号，可见下图版本号更低。
我想这大概就是佳伟截图中出现两种不同样式的 Segoe 的原因了：微软中途发布了新版本的 Segoe 字体。
我找到了这样一个链接：Segoe UI Light
其中有这样一行：
可见表格当中并未列出这个 5.11 版本。推测，这可能只是一个临时的、中间的、不正式的版本。
Segoe 字体本身是不包括中文的。微软当前对它的用法是，与微软雅黑中文搭配成新版 YaHei Light，或与方正中等线搭配成 Windows Phone 自带 DengXian 字体。所以呢，也许是 5.11 版本打包的时候出错了，直接将一整套微软雅黑扔了进去……（注意5.11与其他任何版本的中 文字体都不一样，其他的选择了默认宋体作为中文字体缺失时的替换展示字体，而 5.11 版本带有雅黑）
Bing 的搜索结果也倾向我的推测。
因此，Segoe 就是这样的：
并非为了兼容 Windows 7 而把自己改成 YaHei UI Regular 的样子。
再次感谢！
设计师为此付出了艰辛劳动，程度之大是我们无法想象到的。
它倾注了设计师多年的用心探索、大量的资料、不断推翻改进的设计。不然，何以成为微软整个公司转型而确定的设计风格呢。
那些令人尊敬的人们，现在或许正为未来五年或十年的设计风格而探索着。
设计规则是人定的，为了更好地展现。那么规则也是可变的。期待 Modern UI 的不断精进！
（按当时 Windows 8 的开发情况，最终的配色方案和 UI 是在零售版中露面的。而有人声称 Windows 10 每个外放的预览版本都会暂时封锁一部分功能，这也是展示的 9841 和下载下来的 9841 有多处不同的原因了。那么没有理由不相信 Windows 10 最终会拥有一套漂亮的界面！鉴于保密工作越发严谨，大家还是等正式发布的那天吧！→ 如果过早曝光，没了惊喜，那多没意思嘛^_^）
全篇完结。
【优设指南类好文人气榜！】
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
