深入了解微软全新设计系统Fluent Design Systerm

在刚刚举办的2017build大会中,微软正式发布了全新的设计系统Fluent Design System(以下简称FDS),设计的小伙伴们纷纷激动起来。多年来,在设计领域,苹果和google已经占领了绝大部分市场,很少有设计师谈论微软的设计语言,终于,这次微软看起来得到了聚光灯。

我们先来了解下FDS的名称好了:

今年早些时候,微软的Neon项目泄露部分截图,相比之前的设计风格,增加了毛玻璃效果和动效的应用,这次微软将这种风格正式命名为FDS。大家应该都知道微软的Metro设计风格,但之前被德国一家连锁超市占用了商标,虽然后来的设计风格都是Metro的继承者,但微软也只能停用了。后来将其更名为Microsoft Deisgn Language(WDL),这个不具有识别性名字加上本身并不出彩,应该很多设计师都并不了解。这次微软可能意识到需要一个能够描述和推广的名字,所以,FDS就这样诞生了。

“Fluent”不仅仅指视觉表现,也包括交互体验。从“设计语言”到“设计系统”,微软似乎展示了它的愿景:不只是一种设计风格,而是能够应用于跨越所有设备(虚拟现实、手机、平板、电脑等等)的设计系统。单纯看名字,确实比之前的MDL好了太多。

回到官方发布的内容中,首先视频看起来的确很酷炫,开头的一段迅速的文字切换,表明了基本的设计原则。我们能看出微软更加注重表现层和通用化。

建立清晰的、表现力的、形象化的、通用的、一致的、轻松的、富于想象力的、影像化的、自然的、有魅力的、 适应的、包容性的、吸引人的设计。

接下来主要展示了五个核心要素:Light(光)、Depth(深度)、Motion(动效)、Material(材料)、Scale(缩放)

Light:

官方表示通过光吸引用户的注意力,光是营造氛围、强调信息的工具。光确实是非常重要的元素,自然中的一切都依赖于光,光如果使用的恰到好处,设计会更加细腻和自然。目前视频中展示的几个案例都是将其应用于按钮的Hover状态。这感觉对于Hololens更有意义,在3d环境中,没有鼠标指向,通过发光效果反馈给用户层次与焦点还是很有帮助的。不过表示疑惑的是,发光效果是否也适用于移动端和web端?而且,光依赖于更深的背景,那么这样是否会限制浅色背景的使用?


Depth:

FDS强调更大程度的利用层次和对象的关系,来帮助用户理解事物之间的联系,通过扩展空间感、丰富视觉体验,给用户打造一个沉浸的空间。深度本质上说也是模拟真实世界的构建方式。在2D环境中,"深度"应用最完整的,非GOOGLE的MD莫属了,它强调使用光、材质、投影构建一个3D环境。这两年流行的网页设计趋势也是应用深度和视差效果突出其空间感和信息的主次。而在虚拟现实中,深度可以说是营造真实感觉的必备要素,很多VR/AR设备中已经应用了深度的概念。


Motion:

动效如今得到越来越多的重视,FDS希望通过动效创造类似电影一样沉浸式的体验。如果能将动效很好的融入产品中,将会极大增加产品的吸引力,也能无形扩展有限界面的空间。这里仍然要提到MD,MD对动效有完善且详细的说明,并且有很多应用于实践的很棒的案例。从视频看,目前FDS并没有做出超过MD的感觉。


Material:

FDS终于将微软之前使用过的Aero(微软针对visa的一种新型用户界面,使用了透明毛玻璃效果)风格界面拿了回来,但这次增加了物质的质感和纹理,效果看起来更加细腻真实,有种回归拟物化设计的感觉。正如官方所讲:将真实世界的材质引入到数字世界中,用户将会伸手触摸设计。从这点看,FDS比Metro纯扁平化的风格还是进化了不少。不过,这部分在视频中主要强调了毛玻璃(其实感觉更像亚克力)的使用,并没有展示更多内容,期待能看到更多更好的材质的运用。


Scale:

这点算是FDS超越其他设计语言的利器了,从2D跨越到3D,在新的形势中创新。虽然目前AR/VR还有待发展,但随着技术的不断突破,未来的趋势挡不住。对于未来3D的虚拟产品,缩放有非常大的想象空间。


小结一下:

视频的视觉冲击力还是很强大的,非常具有未来感。仔细去看的话,我们能发现很多其他设计语言中似曾相识的元素,比如毛玻璃效果、各种动效、深度。简单点描述的话,FDS可以说是iOS的视觉表现+MD的交互逻辑+Metro UI+部分拟物风格的混合体。不过风格互相借鉴也不是第一次,当年ios和google也是借鉴了metro的风格。不管怎么说,对于微软,这次终于超越了Metro的平坦世界,也更加清晰的解释了FDS的目标。

通过视频和官方发布的内容我们能够看出,微软这次发布FDS的目的很明确,一方面是为推动HoloLens所需,并为将来的paint 3D等一些3D体验铺路。另外一方面,如MD和iOS核心思想一样,微软这次表示,FDS的主要目的是使用一种设计语言帮助开发人员开发更吸引人的应用和体验,并将这种语言应用到各种设备上。

几个优点

FDS对于设计师来说还是有很多学习和借鉴意义的。

1、强调更加自然、沉浸的体验

FDS这次引入了光、深度、材料等自然中的设计元素,对比Metro,更加强调设计与真实环境的关系。FDS的核心原则是不仅要美观,还要让用户在使用过程中感受到自然、流畅。随着人工智能的发展,人与信息的交互也从0D扩展到4D,虚拟与现实的界限也会越来越模糊,微软通过FDS告诉大家,未来身边可能是十分自然的“无交互”状态。

2、从2D扩展到3D,推广至所有平台和设备

微软Windows开发者平台的VP Kevin Gallo表示,FDS的最大区别是能同时应用于2D和3D环境中,另外,微软对投资HoloLens和构建混合现实生态系统非常感兴趣。Gallo说:“我们之所以推出FDS是因为我们想要让你能够构建一个通用所有设备的系统。”

MD风格能够比iOS的视觉风格应用更为广泛的原因之一是:MD的设计语言和规范使其更容易实现于不同设备,而非仅仅是移动端设计。而这次微软的FDS除了适用于所有的2D环境,更是潮流的引入至虚拟空间和交互上,如VR/AR。正如Metro当年引领了扁平化的趋势,FDS很有可能引领了2D到3D的趋势。

一些疑问

不过,虽然视频看起来很美好,回到现实,几个产品截图看来FDS完成度还不是很高,真实产品是否能够贯彻整个风格我们还不得而知,因此提出几点疑问:

1、没有面向开发者和设计师提供建立这种风格的明确的指导原则

推广任何设计语言都需要清晰的原则和规范指导,自身应用的实践也非常重要。正如iOS和MD,除了提供了详尽的规范(MD甚至每个元素控件都有spec),他们本身的应用作为设计和开发的典范,吸引更多的第三方模仿并接入。而以往微软本身的应用都非常简陋,对于复杂的应用,FDS并没有什么深入解释的文件和说明。这次微软承诺会做的更好,希望如此。

2、没有明确的时间排期和规划

微软表示,在秋季的WIN10更新中将会应用一部分FDS的元素,但整个设计系统是一个长期的项目。至于有多长期,微软并没有明确的发布日程和里程碑。这次视频展示的内容,很明显只是概念稿,而这看似酷炫的设计应用到实践中究竟什么样,没有人知道。毕竟,虽然之前的metro引领了扁平化风潮,但实际产品却差强人意。没有明确的规划,让人有种不安的感觉。希望这次微软不要让我们白激动一场。

3、华丽的系统会占用很多资源

FDS华丽的视觉效果、酷炫的动效可以想象将会占用更多的磁盘资源。在用户现有设备的基础上,新的设计是否真的能“Fluent”?普通用户是否会为了体验漂亮的系统而牺牲时间和资源?这让我想起Facebook几年前推出的应用Paper,漂亮的设计吸引了很多人的眼球,结果在去年已经被迫关闭。因此,形式虽然重要,功能才是关键。

最后

从以往的经验来看,微软的设计概念远远好过于产品,经过这么多年,windows系统仍然很难用。当然随着时间的推移,微软可能会向我们证实FDS是如何应用于实践的。希望这次不仅仅是一群设计师的自嗨。如果能将视频中的绚丽且细腻的效果应用于实际产品,那么将是非常成功的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容