Fluent Design的学习笔记

微软在Build 2017大会上发布了Win10秋季创意者更新和全新的微软流畅设计体系（Fluent Design System）

今天在站酷首页发现了大植子Daz_Qu写的VR原型的快速制作想要做个练习，当然我需要先了解一下Fluent Design。

微软Fluent Design System此前内部代号为Project NEON，微软流畅设计体系分为五个元素Light（光感）、Depth（深度）、Motion（动效）、Material（材质）、Scale（缩放）。
微软表示，“设计正在发生扩张变化”，这是在说在过去几年Windows一直处于扩大2D显示，但现在有更多的图像显示模式。Windows家族设备还有没有屏幕的（如何呈现流畅设计还不清楚），小型化2D屏幕，大的2D屏幕，支持Windows Mixed Reality的3D屏幕。

当然，我觉得这个设计语言更大程度上还是为了下一代的显示设备设计的，例如VR设备（HTC viwe）、增强现实设备（微软自家的HoloLens）。

从Light（光感）、Depth（深度）、Motion（动效）、Material（材质）、Scale（缩放）这五个元素总结一下我的看法。

微软流畅设计体系分为五个元素Light（光感）、Depth（深度）、Motion（动效）、Material（材质）、Scale（缩放）

一、Light（光感）

在Fluent Design里光感的作用应该就是吸引用户的注意力，将用户实现移动产生的光晕作为焦点的提示，让用户知道自己的操作的位置。

Light1

Light2

二、Depth（深度）

这应该是Fluent Design最重要的内容，在几年前Google的Material design就提出了在2D设计中使用投影来表现z轴的概念。
在3D中深度不止可以表现UI元素的层次以及重要程度，更可以表现在3D虚拟空间中物体的相对位置。
比如在演示中当光标移动到一个icon上时icon就会远离UI的背景向用户靠近，表明此时的hover状态。

Depth演示

三、Motion（动效）

很多设计规范都提出了动效的作用，Fluent Design System也针对动效提出了自己的建议。并没有像Material design那样对动效做规定。

Motion（动效）演示

四、Material（材质）

传统的微软 UI 功能区确实能完成不少功能，但它与物理世界没有任何联系。Fluent Design 认为要想让用户爱上 Windows 应用设计，就必须去模仿现实世界中各种物质的质感。
当然从现在的展示中可以看到Fluent Design里只有一种毛玻璃材质或者说亚克力材质（有亚光的质感），多用于UI的背景位置。

Material（材质）演示

五、Scale（缩放）

因为这个设计语言更大程度上还是为了下一代的显示设备设计的，在3D环境中这个Scale属性就显得尤为重要。
在电脑显示器上看起来较为合适的物体放在 AR 或 VR 头戴设备中观看，可能就会变得过大或过小。因此，虚拟物体大小的缩放是第一视角 UI 体验的关键因素之一。

Scale（缩放）演示

现在Fluent Design很多东西都是概念的微软内部也在进一步完善，更多东西等今年Windows秋季正式更新才能看出来更多。