码迷,mamicode.com
首页 > 其他好文 > 详细

Microsoft Fluent Design System

时间:2017-06-09 13:22:34      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:自身   设计规范   uil   mic   模式   运动   角色   官网   alt   

转载自:http://www.ui.cn/detail/131217.html

就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言——“Fluent Design System”。

就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言——“Fluent Design System”,这一消息给广大设计师又带来了一针强心剂,作为软件大鳄的微软也开始要在设计语言的道路上扮演一个指路人的角色了吗?

在视频中,他们分别提出了 Light、Depth、Motion、Material、Scale 几个理念,让我们通过官网的解释以及结合视频看看这几个理念分别表示什么。

另外,由于 Fluent Design 的官网是不兼容 Chrome 的(简直不可思议),所以需要通过 Safari 或者 Edge 浏览器查看。

1、Light

技术分享

技术分享

官方将 Light 解释为“光”并且引入到了设计语言中,认为光是一种能够给用户提供邀请的交互方式,通过照亮其他元素吸引用户,同时因为它本身涵盖的“温暖”特质同样能够与“邀请”相辅相成。

Material Design 通过光引入了 Shadow,而 Fluent Design 引入了 Light,不得不说它们都希望把自己的设计语言立意在大自然的基础上,从而更贴近人们的生活,在交互中尽可能调用用户的“自主心智”理解设计。

2、Depth

技术分享

技术分享

对 Depth 的理解与官方解释基本一致,Fluent Design 同样打破平面理念引入了三维空间的概念,将 Z 轴也考虑到了设计和交互中(类似 Material Design 的 Elevation),从而增加设计载体的空间,让更多设计的交互体现方式与生活相辅相成,同样也是为了在 VR/AR 中能够采用这套设计规范。

3、Motion

技术分享

技术分享

动效以及运动模式已经成为了一个优秀产品必不可少的一环,同样也类似 Material Design Motion 一样,Fluent Design 应该也会在这块提出更多的合理指导意见,从而让自身平台产品在运动模式这块有更多参考。

4、Material

技术分享

技术分享

从官方解释来看,Material 这个特性是为了强调设计语言中关于材料的概念,在符合条件的产品中采用自然界中与其相契合的材料表现(例如毛玻璃材料、纸张材料等),从而给用户合理的心理感知和体验,这也是将设计与生活以及自然界结合的一种理念。

5、Scale

技术分享

技术分享

视频在这里引入了几个不同规模的交互场景(小屏幕触控、VR 大场景交互),意义应该是要表明该设计语言能够 cover 住所有规模的场景设计需求(果然野心够大),看了下官方对这个理念的解释,基本契合。

最后我们再看看视频结尾的一些基于该设计语言制作的演示内容:

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

技术分享

演示中甚至涵盖了 VR 和 AR,看来微软这次确实在下一盘大棋,虽然有些都是概念设计,但是设计界就是需要有这样的突破性思维和想法,才有可能创造出更富有前瞻性的设计语言。

Microsoft Fluent Design System

标签:自身   设计规范   uil   mic   模式   运动   角色   官网   alt   

原文地址:http://www.cnblogs.com/hwBeta/p/6971455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!