关于微软全新语言Fluent Design,你要知道的都在这儿

原创 收藏 评论
举报 2017-05-16

近日,Build2017大会上微软宣布采用全新的Microsoft Fluent Design System,并展示了Win10流畅设计体系,我们惊喜地看到微软在设计上终于发力,迎来颠覆性的改变。


微软Modern UI,谷歌Material design和苹果iOS并称为三大主流设计语言。而微软Modern UI设计风格一直为人所诟病,规整的方块磁贴格局、单调的配色、枯燥的文字界面…从颜值上而言,苹果、谷歌简直在碾压微软,近些年来在移动端市场占有率上几家的差距也是越来越大。

1.jpg

“功能再强大,我也理解不了微软爸爸的审美”


现在微软放大招!大会上,微软全球执行副总裁特里•梅尔森(Terry Myerson)说到:“此次的微软系统将带来直观、和谐、响应迅速、兼容广泛的跨设备体验与互动操作。”光是看官方发布的视频就能感受到微软与谷歌、苹果在设计上并肩的野心。

2.jpg

此次带来的全新语言Fluent Design System(以下简称FDS)主要包括五大核心元素:Light(光感)、Depth(深度)、Motion(动画)、Material(材质)和 Scale(缩放)。我们将从这五个方面展开说明FDS的设计理念,与谷歌Material Design和苹果iOS又有何相似之处,真的会成为微软划时代的设计语言吗?



01

 Light(光感)

light.gif

“神说要有光,世上便有了光。”


设计中光的重要性不言而喻,Joe Belfiore在大会上表示:新的light元素可以创造良好的氛围,让应用多一种空间的概念。在界面交互中能够强烈吸引用户的注意力,通过塑造光感的明暗度来引导用户,比如我们看到鼠标悬停时发光的按钮、图标点亮其他元素、高光渐变都给用户以更人性化的视觉体验。

4.jpg

这一点上,谷歌Material Design同样运用light引入shadow,建立其标志性的卡片阴影轮廓。而相比谷歌略显固化的阴影叠加,FDS中主动变化的高光显得更为生动有趣,更贴合真实世界中自然的设计。


02

 Depth(深度)

depth.gif

创新性的改变,打破二维平面的局限拓展至三维空间领域。以往微软所经历的几个设计阶段,直至Modern UI都离不开单调的平面设计。而现在运用depth元素,与物理环境相结合,将重要的内容呈现在用户面前,营造纵深变化的错觉,能够极大地减少视觉疲劳,给人以更丰富的感官体验。

6.png

7.png

而谷歌Material Design早已尝试将三维空间引入设计。提出z轴概念,利用z轴的深度,更好地打造空间感,使界面的每个元素层级鲜明,突出主次与重要程度,同时也加强UI视觉上的表现力。


你们发现了吗?微软和谷歌都在三维空间设计领域的深入研究,更易于展现虚拟物体在三维空间中的应用,随着AR/VR技术的发展,更具未来前瞻性。


03

 Motion(动画)

motion.gif

我们都知道,好的动效是优秀产品重要的组成要素之一,微软自然不会忽视这一环。Motion元素能为用户提供更多好看、互动性强的动画,吸引用户的注意力,让表达充分而细腻。并且可以看到,微软此次创造出更色彩绚丽的动效,窗口内部小图标和元素都能够承载大量的动画效果,好感度up


说到这里,又要提谷歌的Material Design,以一种优雅、流动的方式来体现动效,构建与真实世界相连的空间关系。比如优雅的转场效果、按压/释放触控涟漪、富有层次的时间感…这些都是Material Design中Motion的经典动效案例。

8.gif


04

 Material(材质)

material.gif

从刚才所说的光感、深度和特效都在试图建立与物理世界的联系,而材质更是要模仿现实世界中各种物质,让用户感受真实触感的重要一环。


比如微软这次所回归的毛玻璃效果,对于这种半透明光影渐变的效果我们似乎毫无抵抗力。其实Win7时代就有毛玻璃特效,而苹果则将这一特性发挥得淋漓尽致。从z轴维度出发的设计,用它来制造出覆盖内容之上的感觉,令界面元素更有层级,更有趣。

9.jpg

谷歌的Material Design从命名就可以看到Material材质的理念,而它的灵感正是来源于对纸和墨水的研究,其最重要的特征就是卡片信息的层叠、合并、分离,拥有现实世界的厚度与质感,能够自由伸展变形又是它的魔力所在。


不论是微软全新发布的语言,还是谷歌、苹果,对于真实材质在设计中的运用都非常重视。设计与生活理念相结合,让用户能够产生更自然的感知或许是材质如此重要的原因,你觉得呢?


05

 Scale(缩放)

scale.gif

可以看到微软在几个不同规模的交互场景中,不论是小屏幕触控还是VR实景,都能够满足。而scale元素最显著的一点在于,是在VR/AR技术中的运用,微软打破这一局限,将虚拟物体的缩放应用在UI交互中,还提到许多前瞻性的概念设计。

10.jpg

我们会预见在下一个互联网经济浪潮,微软对未来的布局投放在人工智能领域。从可穿戴智能设备HoloLens,去年宣布推出混合现实技术Mixed Reality(MR)到成立人工智能研究部门…此次微软推出的全新语言FDS与其战略布局相一致,让UI与真实世界相融合,或许不仅仅是应用于Win10的新语言,而是有更深探索。

11.jpg

这方面,谷歌和苹果的想法也不谋而合,人工智能是新一代的人机交互。所强调的光感、深度、动效、材质和缩放,搭建出来的是一个可感知的真实世界,随着技术的不断发展,在日常交互设计和应用界面,将与用户产生更亲密的联系。


新版Windows还未发布,从此次微软发布的全新语言Fluent Design System看到对未来的美好畅想,看到他们在设计上颠覆性的创新,开始学会如何优雅地为用户展示复杂信息。对于曾经被谷歌Material Design和苹果iOS所碾压的局势在悄悄开始发生变革,我们拭目以待~



连微软爸爸都知道

好的设计才能抓住用户的心

到Designup

找一位优秀设计师

让你的产品脱颖而出


    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)