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(缩放)这五个元素总结一下我的看法。

Fluent Design的学习笔记_第1张图片
微软流畅设计体系分为五个元素Light(光感)、Depth(深度)、Motion(动效)、Material(材质)、Scale(缩放)

一、Light(光感)

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

Light1
Fluent Design的学习笔记_第2张图片
Light2

二、Depth(深度)

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

Fluent Design的学习笔记_第3张图片
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秋季正式更新才能看出来更多。

你可能感兴趣的:(Fluent Design的学习笔记)