Microsoft 设计原则

驱动出色设计的基础

我们相信遵循 Microsoft 设计原则可帮助你构建使用户感到愉悦并使你感到自豪的应用商店应用。在规划你的应用时使用这些原则，并且通过它们指导你完成设计和开发选择。

关于现代设计

长期以来，Microsoft 在许多领域都是技术领先者，并且提供各种产品。最近开始发生的一种变化是，我们越来越关注设计。此更改的特点是强大的基础、令人兴奋且具有影响力的创意、美观的浏览以及意识到其他任何内容均已过时。此更改的基础已成为 Microsoft 的设计原则。

Microsoft 设计理念可以通过干净整洁的应用屏幕加以说明，这些屏幕可使用户快速操作、最大限度地减少键入操作，并且自动通知你新信息和已更新的信息。用户将与该内容（而不是与表示该内容的控件）交互。并且视觉元素拥有高精确性和完整性。

现代设计的基础

除了使用标签“平面设计”表示的内容，我们的现代设计还具有更深入的信息、字符和背景。我们的设计语言基于三个不同的核心。

• Bauhaus：从 1919 年开始，此图标设计学校提升了强大的设计理念：删除所有多余内容。需要了解的一件事是你的应用的核心功能是什么，但需要根据规定显著减少该核心功能中的功能。Antoine de Saint-Exupéry 发现当不再需要删除任何内容时，即表示实现了完美的设计。简洁性不仅实现了美观，还提高了可用性。

• 国际印刷样式（瑞士样式）：瑞士样式首先采用干净美观的加粗类型赋予 Microsoft 设计灵感。此风格提倡干净、可读性和客观性作为其中心主题。根据此风格，我们有必要采用网格（版式和视觉网格），以及以符合原则的和美观的方式使用不对称布局。

• 动态设计：动态设计可使体验更加生动，并传达一种优雅的感觉。我们从诸如 Saul Bass 的前卫人士那里获得灵感；Saul Bass 使用动态类型和设计来为电影创建美观的标题顺序。出色的动态设计不仅使用户感到愉悦，还可以帮助向用户说明如何完成某项任务。

有关设计核心的详细信息，请参阅 Microsoft 的现代设计。

我们可将这些灵感引入自己的原则，从而指导我们完成所有设计。虽然这些都是我们选择的原则，但是它们在某些方式下普遍适用于所有原则，我们希望它们可以帮助你在我们的平台上进一步推广你的品牌。下面是 Microsoft 设计原则：

• 技术为本
• 实现以较少投入取得极大成绩
• 迅速和流畅
• 真正实现数字化
• 合作共赢

技术为本

此原则之所以作为首个原则是有原因的。在历史上，创造者、建设者和工艺师都以自己的工作为本，将自己视作杰出的专业人员。此原则与注意细节相关—在被很多人视若平常事的小事上投入时间、精力和热情。关于设计是每个阶段的完整和完美的体验—从网格上完全对齐的像素、到颜色、再到应用屏幕上的版式。挑战自己，在开发的每个阶段都以自己的技术为本。

获取网格

在图形设计中，现代版式网格是提供内容一致性的基架。按照一定比例排列元素，可以同时获取美观和实用方面的优势。用户可以快速舒适地浏览页面。

层次结构和平衡

若要使你的应用的可视化层次结构对用户清晰可见，请使用不同的属性显示不同类型的信息。你可以使用字体大小、字体颜色、定位和间距以使层次结构中的不同级别截然不同。如果你采用一致方式使用不同的属性值，则用户可营造应用的节奏感，并且每个级别都将不同并可被立即识别。

层次结构	层次结构不足

大型文本、高色彩对比度。在前面的示例中，“线程”是选定的透视项目的标头。它将建立在其下显示的内容上下文。标头是高对比度（黑底白字），可告知我们它是页面上的选定项。其他项目的标头具有较低的对比度（黑底灰字），可不再强调它。

下一步的最大文本。线程列表中最重要的详细信息是消息收件人的名称。

最小文本。每条消息的第一行或前两行的重要性仅次于该名称。颜色可从各个消息和名称中区分出已读消息和未读消息。

间距和对齐。在各个线程之间使用较多的间距—并在某个线程内使用较少的间距—以显示层次结构。只需右对齐消息的时间戳，即可使其突出显示。

层次结构不足。没有层次结构，页面即丧失了意义和可读性。这会丧失美感，但更重要的是，还会丧失可用性。

你是谁？

找到最能反映你的应用个性的版式。以下是一些版式示例，可补充并帮助定义该应用。

纽约时报应用。传统的字样反映了此新闻源的严重性。

Camera360。此应用中的字样是现代且时尚的。

扼要概述和清单

• 完善细节。
• 使应用的使用安全可靠。
• 使用平衡、对称和层次结构。
• 让你的应用布局与网格对齐—应用的新布局。
• 使你的应用可供尽可能广泛的受众（包括残疾人士）访问。请参阅可访问性：设计指南。

实现以较少投入取得极大成绩

此原则仅将你的应用限制为着重于其核心功能而已。我们信奉的是内容优于镶边。内容采用多种形式：图片、电子邮件、新闻文章等等。删除镶边，仅在屏幕上保留最相关的元素。 并从内容本身在可能的位置使用导航元素。遵循干净的沉浸式体验规则。屏幕上的每个元素都必须具有值和明确目的。

此原则不表示你应牺牲直观性。如果导航元素可指导用户了解如何与该应用进行交互，即表示设计是成功的。出色的设计可以在直观性和界面减少之间找到平衡，并制作出干净、美观的最终产品。

内容优于镶边

让用户直接与内容交互。通过删除镶边并且利用字体、比例和颜色，使内容的呈现更加简单。在此示例中，名称和标题更易于阅读。

以内容为中心	分散注意力的镶边

让内容浅显易懂

相关的命令和功能明显易用，而且易于交互。

扼要概述和清单

• 精心做好某一方面，而不是覆盖广泛但都表现平平。
• 优先考虑内容，再考虑镶边。
• 保持主题鲜明直接，让人们沉浸于他们喜欢的事物，他们会探索其余事物。
• 激发用户的信心。
• 减少 UI 中的冗余。

迅速和流畅

此原则确保体验具有沉浸感和响应性。它可提升各种引人注目的动画、过渡和响应，这些内容不是预期的，但却使界面活灵活现并使用户感到愉悦。此原则使人员和任务优于技术。

如果你的应用是平板电脑应用或手机应用，请记住对于“外出”用户而言，出色的应用需侧重于简单、可快速使用的方案。对于此类使用案例，关注于准确交付用户需要的内容，快速而有侧重点，最终使你可以完成出色的设计。

处于活动状态

动态磁贴具有响应性、处于活动状态并且引人入胜。另外，它们可以涵盖你的所有想象 — 从通知你新的电子邮件到提供关于你最喜爱酒吧的特价饮料的内部提示。

动作

营造一种连续性，并让你的应用通过使用有意义的动作讲述其故事。动作可以提示用户启动操作或区分不同类型的操作。点击时将弹出锁屏，你可以将其向上滑动。某一项目的退出过渡是指如何将该项目轻扫回视图中。

扼要概述和清单

• 迅速响应用户交互并为下一次交互做好准备。
• 设计实现直接的触控式交互。
• 通过运动提高用户的兴致。
• 将前后内容顺利地融为一体。

真正实现数字化

此原则包含数字化域可以实现的无限创新能力。仿真设计参考真实世界的规则和属性，以表明其设计隐喻。但是，我们还包含强大功能、语言以及媒介的独特可能性。

就像 Bauhaus 设计学校所教的那样去掉多余的设计元素，此原则鼓励减少数字化比喻（例如皮革或纹理效果、拼接、阴影和反射）。包含更强大且可扩展的设计语言。这是真正实现数字化原则的基础。

信息位置

实现信息图形化，而不只是图标图形化。主要目标是信息传送，而不应该关注于不必要的细节。采用信息图形方法是指实现更干净的内容、可操作的信息，并且没有干扰。

图标图形化	信息图形化

扼要概述和清单

• 通过通信保持活力和生气。
• 使用美观的版式。
• 使用大胆、鲜艳的色彩。
• 连接到云，以便用户能够彼此保持联系。

合作共赢

此原则关乎统一自己的工作，在可能的情况下使其与通用生态系统保持一致，以及在必要的位置进行创新。分解你的工作，以便不同平台上的应用和用户方案可以共同作为一个熟悉的体验和一个品牌进行工作。用户找到了熟悉的授权，他们不希望重新学习与之交互的各个方面。因此，在 Microsoft 软件和服务的常用平台上进行构建。使你的体验基于建立的常用控件、手势、交互模式、动画，甚至是常见的身份验证和存储云服务。

换言之，尽量不要重新发明滚轮。创新固然出色，但是不能以用户体验为代价。每个应用还传达某种语气，一种与用户共鸣的个性。查看我们如何实现语音，并开始思考如何在你的应用中使用它。找到适用于你的应用的功能来进行模拟，以证实哪些功能有效，不要迟疑。

考虑平台

考虑你的应用如何在整个 Microsoft 设备和外形规格的生态系统上工作。问问自己：“此设备的优势是什么？”并优化使用这些独特优势的体验。使用多个平台甚至可以向你提供一个机会，使你可以设计不可能通过仅构建一个平台而实现的方案。

扼要概述和清单

• 使用 UI 模型。
• 使用其他应用，通过参与应用合约来完善方案。
• 使用我们的工具和模板来提高一致性。

不管你的品牌的视觉呈现如何，出色设计的原则都适用。符合原则的设计可产生用户喜欢且依赖的体验。

规划 Windows 应用商店应用

Windows 应用商店应用的导航设计

Windows 应用商店应用的命令设计

触摸交互设计

Windows 应用商店应用的 UX 指南

开发优秀的 Windows 应用商店应用

Windows 应用商店应用的辅助功能

原则和语言：独立视图