曾负责过微软视频的同学教你做出微软风的 PPT

2016年1月12日 | By News | Filed in: News.

Source: http://daily.zhihu.com/story/7732145

如何做出微软风格的 PPT?

知乎用户,一个没有故事的男同学。

本汪曾负责过微软的某些视频。

Modern UI 的大部分特性使其适用于 PPT 的视觉表现。

贴上微软的设计概述

Microsoft Design: http://design.microsoft.com/

不建议把 Modern UI 简单粗暴地理解为“色块”堆砌而成的界面——那界面上的“拟物”或“扁平”之分就没有实际意义了。也不建议把 Modern UI 称做“扁平化”,微软官方是从来没有用过“扁平化”这样的措辞。

要独立于 iOS、Android 样式之外设计出一套极具辨识性与差异化的 UI 不是一件容易事的事实。许多手机产商用尽各种方式,却似乎始终无法跳出那个框框。

而到现在大家也越来越清晰地看到,不断更新自我的 Modern UI 它的诞生难度比一套手机系统 UI 的设计难度要大得多。它是一种跨平台适配的整体设计方案,要包含适配各平台的交互操作,且保持整体一致,它需要寻找平衡点,来 keep balance。

从几个关键角度说说吧。

一、字体

英文:Segoe UI

中文:Microsoft YaHei UIMicrosoft YaHei、微软雅黑

Segoe 是 Modern UI 规定使用字体。微软还开发或授权一组字体,中文的 Microsoft YaHei UI 就属于其中一种,用于简体中文的显示,现有 Light / Regular / Blod 三种版本。附上官方链接 Windows 下的字体

在控制面板中提取字体,或从 Microsoft 官方获取:Font Families

* 对于 Windows Phone 8.1 及之前版本的系统,中文使用 Dengxian (等线),英文使用 Segoe WP (Light / Semilight / Semibold)。

关于 Microsoft YaHei UI 和 Microsoft YaHei 的区别,请看微软雅黑和微软正黑的 UI 版与普通版有何区别? – 字体

对英文原版系统来说,在没有安装中文语言包的情况下,不会有“微软雅黑”这个字体,但是有 Microsoft YaHei UI。也就是说,即使“微软雅黑”不可用,Microsoft YaHei UI 都是处于可用的状态,UI 是代表系统界面显示的字体。(在 Mac OS X 中,是没有 UI 后缀的字体的,因此,想在网页上用 font-family 定义字体样式的话最好使用无 UI 后缀的名称,且记得加上前后引号。)

默认字体经几次系统升级发生了改进:

Windows 8 的默认字体:

SS01 样式(Windows 7 的默认样式。这里谢谢 @prox 的关注和提醒,为引起注意,相关信息附在文末):

SS20 样式(首选的设计和间距):

第一眼你们可能觉得除了字母符号 Q I & 有变化之外只是数字 1 有了变化。很遗憾地告诉你,好几个字符都发生了变化

Windows 7 中的默认字体:

Windows 8 中的 Segoe UI:

注意事项:

  • 如果页面标题或副标题太长而无法显示,请使用省略号(U+2026),而不要使用 3 个点。不要在标题文本末尾和省略号之间添加空格。
  • 不要使用倾斜字体。
  • 遵循布局。(之后说明)

二、字面内容(语言风格)

① 字词:

  1. 若要体现「简单」和「轻松」,请使用简单的句子和短语、最短的文本和日常字词。
  2. 精心挑选的精确字词可清晰地表达意义。
  3. 通常,少即是多。

以观众 / 客户的语气说话。你要假设你只懂一点或完全不懂你所面对的产品,并以这样的眼光审视你的作品。下面是一些调整前和调整后的示例:

  • 请说「获取 Windows 10」,而不是「查看产品」。
  • 请说「你需要一个 ID,如下所示:customer@microsoft.com」,而不是「ID 无效」。
  • 请说「选择你的主题」,而不是「配置你的显示效果」。

同样,尽量避免那些听起来吓人或对于大多数客户仅有模糊意义的「技术」字词。比如:无效、错误、配置、管理、设备(请改用「电脑」或「手机」)等。

② 标点符号:

标点符号能帮助传达意义,但它不可替代字词。以下是要记住的几点:

  • 不要过度使用感叹号。相反,选择程度更深的字词。
  • 和感叹号一样,请慎用问号。当链接采用客户问题的措辞时,它们效果很好。

③ 注意格式规范:

  1. 英文、中文、数字之间须有空格。比如:我们将在 4 月 29 日召开 Build 大会,会上将有更多关于 Windows 10 的信息公布。
  2. 英文句子间须有空格。比如:Windows 10 Technical Preview was released last year, and it is attractive to many people. We also showed HoloLens in the early of this year. 逗号后面、句点后面均有空格。
  3. 专有名词的大小写与空格。如:Windows 不能写作 windows 或 win。Windows 10 for Phones 不宜写作 Win10 for phone。
  4. 对于有特别作出规定的标志,请遵循它们的使用方法。比如 Microsoft 徽标 Microsoft Corporate Logo Guidelines(请展开页面上的 + 按钮)。

【示例】

调整前的文本:你尝试打开的文件不属于允许的文件类型。

调整后的文本:不能在手机上打开此类文件。

调整前的文本:我们正在将该演示设备的设置还原到预配置的值。此过程不可中断。

调整后的文本:我们正在将该电脑还原到用于演示的原始设置。该过程需要一些时间,并且不能中断。

调整前的文本:Microsoft 可能会使用你提供的信息,以通过与你的帐户相关联的服务相关强制性通信联系你,并提供我们认为你感兴趣的其他通信。

调整后的文本:Microsoft 可能针对关于你的帐户的服务相关信息联系你,或者向你提供你可能感兴趣的其他有用信息。

配置正确合适的字面内容,也是 Modern UI 的设计准则之一,并能让你的 PPT 更适合人类阅读。如果没有遵循,便不能算是 Modern UI。重复一次:不建议把 Modern UI 理解为“色块堆砌”。

三、颜色

Modern UI 的颜色是饱满、鲜明和真实的数字,涵盖了显示技术所能够达到的整个色域。Windows 主要使用单一纯色,但利用各种技巧创造深度,如透明度、分层和混合。

先上一张色表吧,虽然仅对 Windows Phone 起作用……

Modern UI 体现在 Windows Phone 上的配色:

谨慎地融入颜色,对品牌产生影响。使用离散、高对比度的颜色组合来体现清晰度和可见性。应当尽量少用鲜艳的颜色,如果你无法决定使用哪种颜色,则默认使用中性或单色色调。意思就是不要将各种五花八门甚至发亮的颜色毫无规律地拼凑在一起——那样会使你的 PPT 失去焦点,让观众的眼睛没有「落点」。

Microsoft Account 的各处登录页面(如 http://Outlook.com),它经常需要在手机或各种设备上显示,它非常简洁,就一种蓝色(Xbox 登录是绿色,是颜色作用于品牌的变换),不会五花八门。且用色之处,皆为希望引起你关注的重要信息。

Modern UI 体现在 Windows 上的配色:

正如你知道的那样,系统颜色和应用颜色是不同的。系统颜色是用户选择并由 Windows 应用到系统中主要 UI 表面的颜色,如“开始”屏幕背景、边栏菜单、按钮颜色等等。应用颜色是应用开发人员选择的独特颜色,它独立于系统颜色之外。应用颜色表示应用的品牌和标识。

选定用于贯穿整个 PPT 的主色,和你的分页颜色。比如目录用色,和目录上各章节的配色。

能轻易发现,背景色通常不是浅色系的(至少默认配色方案不会给出浅色系背景,至于可自定颜色不在讨论范围内)。默认的紫色,是深紫,明度较低,即用沉稳的色调,去反衬磁贴的活跃。若背景色是浅色系的,界面容易失去焦点。

对于 PPT,背景要具有承载页面内容的能力。即使是图片作为背景,也要将图片的明度调暗。可试着选择桌面壁纸当作 Windows 8.1 的开始屏幕背景,并和桌面切换对比,你会发现,开始屏幕虽然使用了桌面壁纸作为图片,却也是经过了加暗处理。

案例:闹钟,下方开关白色为开,否则是关。增强了对比度,这就是在视觉上将开关的状态感知增强了。当你放眼看这张图的时候就有“一目了然”的感觉。如果用左右拉的开关,并放于闹钟名称右侧,似乎就没那么清晰了。

对 PPT 即运用高对比度的颜色来获得「看一眼就明白」的效果。

主角是前景被关注的内容,而非背景。这里反映出 Modern UI 的一个原则:突出最重要的信息,内容第一,而非无谓的装饰。并让信息量达到「无法向下删减」的程度。

再看几个应用的颜色:

邮件现已经改为蓝色,为了和 http://Outlook.com 蓝色配合。

统一配色,并将最需要引人注意的部分用该颜色标注出来,除此之外,用不同灰度的黑色。底部菜单栏也为了和背景形成反差,引起注意。比如邮件应用,被蓝绿色标记的文字是邮件前面几个字的提要,而不是发件人或者其他,这是因为邮件内容是最最重要的,比如“周末一起去野餐吧”这样的邮件消息,而不是“洪国明”这样的名字。

案例:「阅读列表」应用的顶部菜单栏之一(按时间排序,从左到右是「今天」「昨天」「这周的早些时候」「上周」「上个月」)。下面是界面图片:

案例中「今天」的配色是明度最高的,因其是最新共享进来的。时间越之前,明度越暗:弱化注意力。越是之前的,越可能是已经阅读过了的、无需关注的。

举个应用于 PPT 的例子,想象一个场景:时间轴式的事件图,若时效性较强,可逐渐改变明度。若特征不是时效性,是某几个关键时刻,那么关键时刻就用明度高的,其余的依次弱化。

为什么说不要把 Modern UI 理解为「色块堆砌」,其中一个原因:重点不在于「大的纯色块」这样的视觉表象,而是用色块表现了什么、突出了什么、起到了怎样的交互引导效果、塑造出怎样的品牌形象、怎样提升了用户的操作效率等。

四、排布与对齐

见过许多模仿「磁贴」却模仿不到位的,很大问题出在「磁贴间距」上,要么太离散,要么靠得太近。间距是直接影响到「像不像」的一个因素。

1、使用网格系统(要做出严苛精确的界面)

在设计的时候,记得用网格。

网格由单元和子单元组成。测量的基本单位就是单元。一个单元等于 20 × 20 像素。每个单元进一步细分为 5 × 5 像素的子单元。每个方形单元有 16 个子单元。下面这张图描述了屏幕左上角处的网格。放大该图像即可显示像素、子单元以及单元。

2、页眉

页眉的基线应该为距离顶部 5 个单元或 100 个像素。页眉的左边距为 6 个单元或 120 个像素。Windows 8 页眉为 Segoe UI 样式集 20 细线。

这很适合用来填写 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 个像素。此填充足够大,在用户平移时足以轻松辨别组。

分组。

附加参考:

可以说,排布和对齐,是很大程度影响到「看起来像不像」Modern UI 的关键因素之一。(其实这也是最最基本的要求吧,宁可多花一点时间在对齐和排布上。)

干货来袭:

用于 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 大小显示。记得使用其他代码,创建环绕这些字形的圆环。

当然,这些图标可以放在网页上,用 HTML 呈现出来。

标记是可以替换的,这里只是当个稻草人而已……关键在于定义字体为 Segoe UI Symbol。

六、动画

如果你有心做动画,喜欢折腾捣鼓,那就试试吧。PowerPoint 中部分动画的“平滑结束”比较用得上,但至今配合动画延迟也没有尝试出完全相同的程度。Modern UI 中很多动画的“位移 – 时间”图像是曲线。

1、底部 Action Bar

这个使用进入动画“飞入” – 从底部 – 持续时间和平滑结束时间自行设定。

2、隐藏面板 Charm:设定方式与上一条同理。但视频中还是早期样式,Windows 8.1 中面板与其上的文字有动画延迟,显得更有活力。视频中文字内容和面板还是一个整体。要做新样式,将文字内容与底部面板分离,设置动画延迟。

3、弹出动画:包括一个平移,它是在弹出元素淡入时从初始位置到最终位置的垂直移动。平移距离和方向由应用指定。在大多数情况下,平移应为 50 像素,以向上方向移动。不过,如果弹出元素显示在触发弹出的 UI 元素下方,则平移应是向下移动 50 像素。例如,此下载平移将适用于从导航栏或从应用标题触发的浮出控件。这是为了向用户提供弹出元素与其触发元素之间的可视链接。

更多动画自行操作、观察。

可能上面提供给大家下载的部分设计资产还只是“毛胚”,还需要大家根据自身情况调用。但是授人以鱼不如授人以渔(勉强用一下“授”字 🙂 哈哈)。

这是我看到的一个提炼:

Metro UI (Modern UI)设计具备以下五点原则:

1. 干净、轻量、开放、快速

2. 要内容,而不是质感

3. 整合软硬件

4. 世界级的动画

5. 生动,有灵魂

# 注释 #

在【一、字体】中提及的 SS01 样式,出现了一些复杂的情况,感谢 @prox 颇具知乎精神地查证,手动点赞。

Segoe UI 的两种造型?

在知乎 @佳伟 答案(如何做出微软风格的 PPT? – 知乎用户的回答)中,发现答案列出的 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 的样子。

再次感谢!


发表评论

邮箱地址不会被公开。 必填项已用*标注