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

产品设计 头文字D (源链)

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

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


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

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


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

01

Light(光感)


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

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


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

02

Depth(深度)


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


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




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

03

Motion(动画)


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

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


04

Material(材质)


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

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


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

不论是微软全新发布的语言,还是谷歌、苹果,对于真实材质在设计中的运用都非常重视。

设计与生活理念相结合,让用户能够产生更自然的感知或许是材质如此重要的原因,你觉得呢?

05

Scale(缩放)


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


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


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

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

:bulb:

连微软爸爸都知道

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

Designup

找一位优秀设计师

让你的产品脱颖而出

Designup 用可靠设计师 | 公众号: Designup 第三市集

原创文章 转载请联系作者

您可能感兴趣的

19 Free eBooks All Designers Should Read 19 Free eBooks All Designers Should Read Can you ever truly master the art of graphic design? The ever-expanding and changing scope of this industry...
能做直播的行车记录仪,360°旋转设计蓝牙可控 | 视频... 前言 洋子爸一直是个抗拒使用行车记录仪的人。我讨厌所有额外的、让我的车内空间变得复杂的东西。就行车记录仪的功能而言,一方面是因为在深圳这个地方,碰瓷的情况比较少的。一方面是市面上的行车记录仪外观和交互体验都很差。 洋子爸作为一个产品经理,对app和产品的交互体验有着十分高的要求。所...
10 of the best free Udemy courses for designers To be a good designer, you need to keep learning new techniques and skills – and what better way to stay ahead of the curve than with a free course fo...
The Benefits of Creating a Design System Styleguides have been around for years and have always been important to the visual identity of a company, but the rebrand of the term has given a new...
自家公司网站头图设计 老板对产品页的头图不满意,由于是ui新手小白,所以着手开始收集参考素材。虽然是工业物联网的产品,但是我们老板独独抱有“做工业界的小清新”的理想,最终我选定了这个设计创意来开工(按老板的口味设计容易过稿233)。 于是找到工业设计师拿到产品模型图来自己调角度渲染。。用的是keyshot,虽然...
头文字D责编内容来自:头文字D (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 关于微软全新语言Fluent Design,你要知道的都在这儿



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录