Microsoft设计  

Microsoft设计语言基于良好设计的原则，灵感来自国际印刷风格。强调简单，清晰和普遍性，实现美丽实用的体验。 

网格，类型，图标，颜色和控件的基本组件之间的关系使顺序，和谐，清晰的层次和灵活性，并允许表达设计和功能经验。

• 1 语言原则

保持简单

我们从简单 作为最终的统一开始。当设计是直观的，我们只知道。我们可以感觉到。结果是一个诚实和永恒的经验。

富有情感

我们挑战自己与他人创造情感联系以及我们设计的方式，人们真正的生活，思考和行为。结果是一种感觉像是为一个人创造的设计。

• 2 颜色

Microsoft产品的整套颜色

通用调色板包含一组用于Microsoft产品的整套颜色。

重要颜色  

当用户选择重音颜色时，它将显示为其系统主题的一部分。这里是如何在Windows中应用的示例。

颜色选择

一旦选择了强调颜色，基于颜色亮度的HCL值创建强调颜色的亮和暗色调。

阴影变化用于创建视觉层次并提供交互的指示。

辅助功能

因为我们的通用调色板是为屏幕设计的，为了最佳的可读性，我们保持在背景颜色和文本和图标之间的4.5:1的最小对比度。一些示例如下所示。

为了保持丰富的色彩调色，并允许深度定制，我们突出了颜色的理想组合，以满足可读性标准。

每种颜色已经优化用于屏幕（RGB）再现，考虑对比度。必须为每种颜色单独指定RGB颜色公式和十六进制值。

每个背景颜色与相应的文本颜色匹配，以确保最大的可读性并满足对比度要求（4.5:1或更高）。

显示的颜色为十六进制值。

表情符号

表情符号使用与我们的肖像画相同的基本原则。重点是网格结构，笔触宽度和几何形状，很明显他们是相同设计语言的一部分。

概述

虽然图标通常被缩减为其最基本的形状，表情符号意味着更有趣和表达。

我们的表情符号使用更小的形状和线宽在其外部笔画以及各种颜色。这允许更多的细节，更多的维度，以及更宽范围的变化范围内。

表情符号网格

与图标类似，表情符号使用基本几何体，32 EP×32 EP网格和2 EP黑色笔划轮廓组成。与图标不同，它们可以在2 EP笔画轮廓内使用1个EP笔画，形状或空格。

32 EP×32 EP格栅 
2 EP外行程宽度 
1 EP内行程宽度

几何建筑

我们的表情符号使用简单的几何形状和黑色描边轮廓。

表情符号调色板

表情符号使用从更大的，通用的调色板中精心挑选的颜色进行着色。

背景颜色的Emoji

肤色选择

世界各地的人都想要代表他们的表情符号。基于Fitzpatrick量表的五个符号肤色调整字符提供一系列肤色可以应用于我们的大多数“人”表情符号。

家庭团体

家庭有许多形状和大小。我们的表情符号可以组合，创造男性，女性，男孩，女孩和婴儿的任何组合，完成与每个家庭成员的肤色选择。我们的表情符号集允许超过52,000种不同的组合，这允许我们的客户创建表情符号，看起来像他们的家人。

• 3 网格系统

由于其严格的层次和几何形状，网格使我们。它告诉我们什么是重要的，什么可以等待。它是类型，图标，控件和图像之间优雅关系背后的结构。

网格是关系：最小像素尺寸确定笔划，图标的大小，排版大小，领先，字距，图块大小。它也是一个更自由，更开放的空间，有机的形状的空间。而不是一个过于合理化或僵硬的设置，网格成为一个新的亲密和完全人性化的视觉语法下的稳定的地面。

四像素网格允许我们在所有显示尺寸上一致地扩展我们的设计元素。

UWP应用程序的布局指南

要了解UWP应用程序中的布局，请参阅Microsoft开发人员中心的布局部分。https://docs.microsoft.com/en-us/windows/uwp/layout/index

• 4 图标

好的图标与排版和设计语言的其余部分协调。他们不混合隐喻，他们只传达所需要的，尽可能快速和简单。

概述

我们的图标都是使用基本几何图形设计的，由一组直线和曲线组成。所有的图标共享一个定义形状的大胆的单行程。当需要更多的表达或存在时，一些图标具有白色或彩色填充。同样的理论被用来创建插图和表情符号。

系统图标网格

我们的系统图标集设计使用基本的几何和一个两个像素的笔画在32 x 32像素在四像素网格完美缩放。

线性缩放大小斜坡

常见形状

图标通常最大化他们给定的空间与少量填充。

32 EP×32 EP网格

为了设计这些图标，我们从与图标的方向相对应的形状开始，并围绕这些基本参数组成设计。图标不一定完全填充或完全适合形状，并根据需要进行调整，以确保最佳的视觉平衡。

例子

几何形状构建

图标仅使用纯几何形状构建。

与
几何叠加的吉他图标

32 EP×32 EP网格

例子

“徽章”是用于描述添加到图标的元素的通用术语，其不意味着与基本图标元素集成。这些通常传达有关图标的其他信息，如状态或行动。其他公用字词包括：重叠，注释或修饰符。

行动徽章

状态标签

状态标志使用位于图标顶部的填充的彩色对象，而动作标志以相同的单色风格和线条重量集成到图标中。

常见状态

常见状态

UWP应用的图标指南

有关UWP特定的图标使用建议，请参阅UWP应用的图标指南文章UWP应用文章的  图标指南。https://docs.microsoft.com/en-us/windows/uwp/style/icons

• 5 音调和声音

品牌的声音包括所使用的词语的类型，句子的构造方式，以及语言如何流动。在微软，我们的共同声音被用于所有产品，受众和国家的所有通信，以便微软写的声音听起来像同样的品牌语言。

语音原则

1 清脆和清楚

我们的观点。我们写首先扫描，读秒。我们让它很简单

2温暖和轻松

我们是自然的。不太正式，更基于真实，日常对话。偶尔，我们很有趣。（我们知道什么时候庆祝。）

3准备出手 

我们向客户展示我们在他们身边。我们预期他们的真正需求，并在适当的时间提供伟大的信息。

我们的口头禅

风格提示

快点

从钥匙外带开始。把最重要的东西放在最明显的地方。做出选择和后续步骤显而易见。给人们足够的信息，自信地做出决定。不要阻碍。

像一个人说话

选择乐观，对话语言。使用短的日常词汇，收缩和句子风格的大写。顺说和首字母缩写。永远不要错过找到更好的词的机会。

更简单更好

每个人都喜欢清晰和明确。分开来。走出去。层。短句和片段更容易扫描和读取。修剪每个多余的单词。

UWP应用的音调和语音指南

要了解有关UWP应用程序的语音和语音建议，请参阅 Microsoft开发人员中心的应用程序帮助指南部分。https://docs.microsoft.com/en-us/windows/uwp/in-app-help/guidelines-for-app-help

• 5 排版   

作为语言的视觉表示，排版的主要任务是清楚的。它的风格不应该阻碍这个目标的方式。但是排版也作为布局组件具有重要作用 - 对设计的密度和复杂性有强大的影响 - 并且对用户的设计体验有很大的影响。

字体

选择Segoe UI用于所有Microsoft数字设计。Segoe UI提供了广泛的字符，旨在保持最佳的清晰度跨越大小和像素密度。它提供了清洁，轻盈，开放的美学，补充了系统的内容。

重量

用简单和效率的眼光来处理排版。我们选择使用一种字体，最小的权重和大小，以及一个明确的层次结构。定位和对齐遵循给定语言的默认样式。在英语中，序列从左到右，从上到下。

行间距

线间距计算为125％，当需要确保良好的读数和足够的空间用于变音标记时，四舍五入到四的最接近的倍数。

字距和跟踪

Segoe是一个人文主义的字体，具有柔和，友好的外观，它有有机的，基于手写文本的开放形式。为了确保最佳的可读性和保持人性化的完整性，字距调整和跟踪设置必须具有特定的值。

字距设置应设置为“指标”，跟踪应设置为“0”。

字间距和字母间距

与字距调整和跟踪类似，字间距和字母间距使用特定设置，以确保最佳的可读性和人性化的完整性。

字间距应设置为“100％”，字母间距应设置为“0％”。

对准

通常，我们建议类型的视觉元素和列为左对齐。在大多数情况下，这种向左和向右的方法提供了内容的一致锚定和统一的布局。

行尾

当排版没有定位为左对齐和右边粗糙时，尽量确保平整线结束，并避免连字。

段落

为了提供对齐的列边，应该通过跳过没有缩进的线来表示段落。

字符计数

如果线太短，眼睛将必须经常左右移动，打破读者的节奏。

每行50-60个字母最适合阅读。

Segoe提供广泛的字符，并设计为在小和大尺寸以及低和高像素密度保持最佳的易读性。使用文本列行中的最佳字母数确保应用程序中的可读性。

太长的线会使眼睛疲劳，并可能使用户迷惑。太短的线迫使读者的眼睛移动太多，并可能导致疲劳。

每行少于20个字符
很难阅读。
这些线
太短。

每行50-60个字符最便于
阅读。使用
文本列行中的最佳字母数确保
良好的可读性。

每行60个字符以上难以阅读。使用文本列行中的最佳字母数确保良好的可读性。太长的线会使眼睛疲劳，并可能使用户迷惑。太短的线迫使读者的眼睛移动太多，并可能导致疲劳。

悬挂文字对齐

具有文本的图标的水平对齐可以以多种方式处理，这取决于图标的大小和文本的量。

当文本（单行或多行）符合图标的高度时，文本应垂直居中。

一旦文本的高度超过图标的高度，图标高度内的文本应垂直对齐，附加文本应在下面自然流动。

当使用具有较大帽，上升和下降高度的字符时，应注意观察相同的对齐引导。

层次

应使用不同大小的字体来创建层次结构。此层次结构构建了一种结构，使用户能够通过书面沟通轻松导航。这里举例说明使用Segoe UI。

颜色和对比度

排版应始终与背景颜色不同，以确保可读性。

我们建议最小对比度为4.5：1，以获得最佳的可读性，对比度为7：1。

我们建议通过颜色着色来区分主体和子标题文本，或在某些情况下使用较重的类型权重。

示例如下

UWP应用程序的排版准则

有关UWP特定的排版建议，请参阅UWP应用程序的排版准则。https://docs.microsoft.com/en-us/windows/uwp/style/typography