【博文精选】解读微软设计语言Fluent Design System

【博文精选】解读微软设计语言Fluent Design System

微软在上个月的Build 2017上发布了Windows 10新界面,并提出新的设计语言:Fluent Design System。把之前在组内分享的PPT也整理成文章发出来,希望还不太晚:)


以上是FDS的官方视频,不知道大家看完有什么感受。我猜最直观的感受应该是这两方面:正面的——有视觉冲击力、更立体、更动感了;或者负面的——有点像苹果。在感性上的感受之外,我们下面可以从三个方面来详细了解Fluent Design System:

一.为什么?二.是什么? 三.怎么做?


一.为什么?

为什么微软要创造一套新的设计语言?为什么在当前这个时间背景下诞生?为什么它很重要?它有什么价值?【博文精选】解读微软设计语言Fluent Design System1.微软积累了足够多的跨平台设备,也积累了大量的跨平台用户和需求。用户体验应该是围绕用户的、直觉、有效率的,所以有必要在各种设备上统一设计语言。这也是Apple、Google公司都在做的。

2.更重要的是,人机交互系统正在从0维扩展到3维(从只有语音的0D,到目前最常见的2D界面,再到3D的VR/AR),新的显示形式逐一诞生:3D影像、全息影像、虚拟空间,新的人机交互方式也扩展到多种:语音、文字、触摸、手势、体感、注视(gaze)……Fluent Design正是在这样的背景下诞生。

微软近年来在AR设备Hololens上投入了很大力量,而设计师也在其中得到启发看到设计的未来。微软混合现实团队的成员Bojana Ostojic介绍说,如果你在客厅里需要通过全息投影画面用手调整一个正在设计中的3D模型,接着又需要在电脑屏幕上用鼠标键盘操作CAD模型软件,这个交互界面应该是怎样的?“当我想到这些问题的时候,我突然觉得我们看到了一个与过去不同的机会。”——可以说,Fluent Design是从Hololens上获得的灵感,也是在为打通Hololens和其他设备做准备。

因此,FDS的核心思想是:在0D到3D的各场景和设备中使用同一套设计语言。(在2D的屏幕上你看到2D的UI,带上Hololens你看到的就是3D的UI)。它要探索的不仅是如何为新的3D设备做设计,更要探索如何将2D与3D无缝结合。下面会讲到的5大理念也是围绕着这个核心思想来展开。


二.是什么?

Fluent Design System是什么?和以往的设计语言有什么区别?

【博文精选】解读微软设计语言Fluent Design System

Fluent Design System提出了5大设计理念:光线(Light)、深度(Depth)、动效(Motion)、材质(Material)和扩展(Scale),用来营造UI的空间感、连贯性、真实性,并扩展UI设计的维度,从0D到3D设计。


光线(Light)

光被引入到Fluent Design System新设计语言中,一方面作为一种增强可用性的交互方式为用户提供引导,另一方面因为它本身涵盖的“温暖”特质可以增强场景氛围,贴近真实。官方描述是这样的:『光有助于引导用户的注意力。光是温暖和吸引人的,是流畅优美和有目的明确的。光线可以很好营造氛围和场所的感觉。也是一个强调信息的好工具』。
在这里可以看到,METRO扁平化时代中,由于“去除装饰”思想而被精简的高光又重新回来了。因为在现实/虚拟现实/混合现实世界中,光是最重要的元素之一。

【博文精选】解读微软设计语言Fluent Design System



深度(Depth)

过去UI并非完全没有深度,但都是在2D平面中模拟深度,处于2.5D的形态,通过遮挡、阴影、视差、景深等表现方式来为用户提供深度认知的线索。

在新的设计语言中,除了延续以上手法以外,也真正引入了三维空间的概念,在交互和视觉中增加了Z 轴深度的考虑,在AR环境下,我们就可以拥有真正的空间深度,像视频展示的那样,从“侧面”看到一个真3D世界。除此之外,还有听觉感知,通过听觉的空间感知营造出一种身临其境的感受。

【博文精选】解读微软设计语言Fluent Design System


动效(Motion)

对自然动效的提倡,这些年我们已经并不陌生了。无缝的转场可以让人注意力更集中,让体验更沉浸,并且通过动画让用户平滑的从一个任务过渡到另一个任务。在这里想提一句的是,动效同样是对真实世界的一种还原,也是视觉在时间这个维度上的延伸(从3D到4D)。

【博文精选】解读微软设计语言Fluent Design System


材质(Material)

设计是一次又一次螺旋上升的轮回。在经历了METRO时代的平面感之后,质感再次重新回到我们视野,映射现实世界的物件。被媒体大呼的“毛玻璃回归”,在微软的官方说明中被称为“亚克力(acrylic)”材质。

【博文精选】解读微软设计语言Fluent Design System

其他一些工作原理、交互层级如下图所示。从图上看起来跟苹果系统确实挺像的,不过也许这只是一种暂时的殊途同归。微软志不在此,亚克力材质UI只是这整套通用性语言框架内的最初一步,相信未来不是坚守某一种材质而是新一次全真的模拟吧。

【博文精选】解读微软设计语言Fluent Design System

【博文精选】解读微软设计语言Fluent Design System


扩展(Scale)

这一点是5大理念中最重要,也是能使它区别(甚至领先)于其他设计系统语言的一点。

Scale我理解为具有弹性的伸缩扩展性。它要考虑的不只是2D界面内的自适应扩展,而是跨越0D到3D能够在整个微软生态中来去自如的交互和视觉形式,使微软下的不同系统间无缝交流:win10、hololens、surface、Xbox、以及Cortana。这不仅需要兼容3D界面和2D界面,并且需要更智能的响应。

【博文精选】解读微软设计语言Fluent Design System

总的看以上5个理念,前四者(光线、深度、动效、材质)都是在致力于打造一个“真实”的UI世界,那些过去在游戏中才能够体验到的真实度、沉浸感,现在在追求效率的UI上也能感受到。而最后一点(扩展性)则是让设计语言能够兼容穿梭于真实和数字之间的一个能力。


对比谷歌:

Google的Material design经过几度的更新已经发展为非常成熟的体系和规范。而Fluent Design System和它相比还只是刚刚起步,它的5个理念在Material design中都能看到一些影子,拉开差距的是微软对于未来3D世界、沉浸式环境的思考。

【博文精选】解读微软设计语言Fluent Design System

光线:Material design在环境概念中提到“Material design是一个由光、材料、投影构成的三维环境”。在设计表现形式中,它通常用“影”来表达“光”,例如大量的长投影和卡片投影的运用。(Environment)

深度:Material design率先提出Z轴概念,用UI元素在Z轴上的高度,来体现界面层级和强化主次。仅限于2D屏幕。(Environment、Elevation & shadows)

动效:在Material Design世界里,动效是响应的、自然的、可被察觉的、有意图的。动效是我最喜欢Material design的地方之一。在官方视频中,我们能感觉到动画的呼吸,感受到动画的流畅与优雅,像一个生动的活物遵循着物理世界的规则。(Motion)

材质:不同于微软的亚克力,Material Design的材质隐喻是纸张与墨水,这是当年在扁平大方向下的隐喻探索。卡片样式、阴影层级、折叠效果等也都是基于纸张的物理特性的视觉延伸。

扩展:Material Design为平台的拓展和自适应做出了非常详尽的规范和示例,也提供了不少好用的工具,是非常实用的指南。但尚未拓展到3D领域。(Platform adaptation)


再看也是近期发布的iOS 11,虽然苹果也在AR领域有所布局和动作,设计语言上有更新迭代的小优化,但并没有改朝换代的大动作。相比之下,微软的设计思考更加前沿。

借用官方PPT中的wording总结一下:Fluent Design System是一套为复杂世界准备的具有通用性的语言。……它从扁平化设计语言,转向沉浸式、多维度的设计语言;从为小屏幕、触摸屏做设计,转向为多种设备、多种交互方式做设计……设计过去往往是关于消费和传达,现在朝向创造力和策划力变革(让人们在新的工作环境中发挥想象,解决问题)……

【博文精选】解读微软设计语言Fluent Design System

三.怎么做?

Fluent Design是一套设计语言,而Fluent Design System不止于设计语言,它是提供给开发者的系统能力,让开发者能简单、系统性地将流畅设计语言运用到个人研发项目中。

如下图所示,Fluent Design System还在逐步发展的初级阶段。看起来至少会分成五个阶段,未来会一个阶段一个阶段地完成并开放给开发者。微软期望开发者们能加入共同完善这套系统,这种方式还挺“互联网”的,也挺不微软的。

【博文精选】解读微软设计语言Fluent Design System

在上个月的发布会中,它就发布了第一阶段的能力,包括了:显示突出高亮点(Reveal Highlight)、亚克力材质(Acrylic Material)、连接动画(Connected Animations)、意识控制(Conscious Controls)、透视视差(Perspective Parallax)。



【博文精选】解读微软设计语言Fluent Design System



以上视频是基于现有能力而实现的APP,是真实的而非概念版。

设计师和开发者可以怎样获取更多信息呢?

1.https://developer.microsoft.com/zh-cn/windows/apps/design

官方提供了基础的介绍和指南。但目前还处在建议阶段,没有发展到完善的规范。

2.https://docs.microsoft.com/zh-cn/windows/uwp/design-downloads/

设计师也可以在这里下载到设计资源,包括模板和工具。

【博文精选】解读微软设计语言Fluent Design System

未来的Fluent design会怎样?

微软的下一步计划里会有以下这些尝试。例如第1点360 Media Playback,系统将对360度视频体验提供支持,使其在2D的媒体播放器上和MR环境中都有良好体验。再如第4点Z-Depth Layering,它能让2D界面在MR环境中增加深度,使其拥有3D观看体验。

【博文精选】解读微软设计语言Fluent Design System

【博文精选】解读微软设计语言Fluent Design System

【博文精选】解读微软设计语言Fluent Design System


最后看看微软的一些概念设计,从中获取灵感吧。

【博文精选】解读微软设计语言Fluent Design System

【博文精选】解读微软设计语言Fluent Design System

从图片看起来像是基于VR/AR环境的设计,可以看到各种APP是如何在同一空间工作,既有3D的虚拟形象,也有相对传统的“窗口式”界面。

写在最后:微软的主战场已经转移,转向AR、MR的未来。这一次微软又跑在很前面,不管是技术领域还是设计理念。很容易让人联想到当初METRO语言的诞生,发布之初惊艳全场引领潮流,而最终还是由于未有好的产品化、商业化,无法成为市场追捧的集大成者。希望这次不再重蹈覆辙:)

当然,AR、MR也只是微软所认准的未来,然而未来总是不确定的,也许苹果、谷歌也在从另外的方向逼近未来。

参考文章及图片来源:
1.Fluent design system官方官方网站: 

http://fluent.microsoft.com/
2.《What’s new and coming for Windows UI: XAML and composition》:
https://channel9.msdn.com/Events/Build/2017/B8100
3.《Introducing Fluent Design》:https://channel9.msdn.com/Events/Build/2017/B8066




如果您觉得内容不错,

请点击屏幕右上角按钮【分享到朋友圈】分享内容

更多精彩内容请关注公众号:tx_cdc


【博文精选】解读微软设计语言Fluent Design System


本篇文章来源于微信公众号: 腾讯CDC体验设计

UI/UX

想问下,大家都是什么段位的设计师?

2017-6-22 11:24:36

UI/UX

奇葩公仔算什么?腾讯又“生”了一窝怪咖

2017-6-23 22:48:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索