LOFTER-网易轻博

Fluent Design的学习笔记
OP7418 2017-06-27

微软在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(光感)

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


二、Depth(深度)


这应该是Fluent Design最重要的内容,在几年前Google的Material design就提出了在2D设计中使用投影来表现z轴的概念。

在3D中深度不止可以表现UI元素的层次以及重要程度,更可以表现在3D虚拟空间中物体的相对位置。

比如在演示中当光标移动到一个icon上时icon就会远离UI的背景向用户靠近,表明此时的hover状态。


三、Motion(动效)


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



四、Material(材质)


传统的微软 UI 功能区确实能完成不少功能,但它与物理世界没有任何联系。Fluent Design 认为要想让用户爱上 Windows 应用设计,就必须去模仿现实世界中各种物质的质感。

当然从现在的展示中可以看到Fluent Design里只有一种毛玻璃材质或者说亚克力材质(有亚光的质感),多用于UI的背景位置。



五、Scale(缩放)


因为这个设计语言更大程度上还是为了下一代的显示设备设计的,在3D环境中这个Scale属性就显得尤为重要。

在电脑显示器上看起来较为合适的物体放在 AR 或 VR 头戴设备中观看,可能就会变得过大或过小。因此,虚拟物体大小的缩放是第一视角 UI 体验的关键因素之一。



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


推荐文章
评论(0)
联系我们|招贤纳士|移动客户端|风格模板|官方博客
网易公司版权所有 ©1997-2018 浙公网安备 33010002000017号ICP备:浙B2-20090185-5增值电信业务经营许可证:浙B2-20090185
分享到
转载我的主页