搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 流感 > 流感态度|Microsoft Fluent Design System

流感态度|Microsoft Fluent Design System

流感 2017-11-28


今天,我们不谈Fluent Design System的技术细节,

而是思考一下,

他能为我们带来什么样的启发。





在今年5月份的微软Build 2017大会上,微软正式发布了全新的设计体系 Microsoft Fluent Design System 微软流畅设计体系。


流感态度|Microsoft Fluent Design System

Microsoft Fluent Design System


“是时候跟局限在一个平面上的矩形说拜拜了。”微软的 Joe Belfiore 在 Build 大会上介绍新设计语言时说道。“新的设计语言不止与视觉有关,它还涉及交互模式、空间和全新元素的整合方式。”






从Build2017透露的内容上看,微软流畅设计体系分为五个元素Light(光感)、Depth(深度)、Motion(动效)、Material(材质)、Scale(缩放)


流感态度|Microsoft Fluent Design System

5个元素


这五个元素的应用组合能够带给用户一种更加稳定且互动性十足的体验。



自2007年微软正式发布了Windows Vista,拟物化的Aero图形用户界面便深入人心,这种风格更是被2009年发布的Windows 7发扬光大。


流感态度|Microsoft Fluent Design System

在Vista上首次使用的Aero效果


而在2012年发布的Windows 8却彻底抛弃了Aero,转而采用了在Zune上首次出现的Metro UI(后称Modern UI),为触控而全新设计的交互方式对键鼠操作极其不友好,但是其大胆的扁平风格却引领了扁平化风潮。


流感态度|Microsoft Fluent Design System

在Zune播放器上首次使用的Metro UI


流感态度|Microsoft Fluent Design System

采用了Metro UI的Windows Phone


跳过Windows 9,微软在2015年发布了Windows 10.作为最后一代独立版本的Windows,Windows 10在发布之初更像是一个赶工出来的不成熟的产物。最直观的体验就是,用户交互界面混乱不堪,磁贴简洁突出信息的特点被修改的不伦不类,各种动画就像是为了动而动。


流感态度|Microsoft Fluent Design System

搭载Windows 10的设备



反观对手,谷歌在经历了混乱的安卓设计语言后,终于在2014年的I/O大会上正式推出了Google Material Design 原质化设计。这种全新的设计语言彻底推翻了以往Google分散的设计。

通过对色彩、深度、运动、各部件之间的关系等元素的思考规划,使得Material Design成为一种统一的、能够跨平台使用的设计语言。


流感态度|Microsoft Fluent Design System
流感态度|Microsoft Fluent Design System

多种元素的组合造就了Material Design



苹果的Apple Human Interface Guideline 人机界面导引 则在iOS7彻底由拟物风格变成了扁平风格。苹果对交互界面的一贯的深入思考,加上扁平风格带来的简洁,使苹果旗下一众产品变得更优雅。


流感态度|Microsoft Fluent Design System

开始扁平化风格的iOS 7


如此看来,Material Design和Apple HIG都将抽象的表达现实物理世界作为设计的准则。尤其在 VR虚拟现实/AR现实增强/MR混合现实 技术出现后,这种自然的交互逻辑愈显重要。

 

流感态度|Microsoft Fluent Design System


与微软以往的设计风格不同的是,Microsoft Fluent Design System并不仅仅是一个全新的Windows视觉主题,而是一个完整的交互逻辑设计体系。这个体系贯穿桌面、移动设备、网站、虚拟现实/现实增强。

 

Microsoft Fluent Design System对物理世界中的效果进行了更真实的模拟,降低了用户的学习成本,Motion(动效)和Material(材质)等元素会让用户产生“亲手动一动”的想法。


流感态度|Microsoft Fluent Design System

Scale(缩放)元素


Scale(缩放)的作用在AR/MR上得到了彻底的体现,在显示器上的元素如若直接生搬到AR/MR/VR设备上,则可能会过大或过小,所以对虚拟物体的缩放成为体验感受是否优等的关键因素之一。而对物理世界元素的模拟,则将缩小虚拟物体与现实世界间的隔阂。



可以说,Fluent Design System是为了Mixed Reality而生。简洁而富有层次的Fluent Design System与需要强调但要求和谐的混合现实天生完美。


流感态度|Microsoft Fluent Design System

微软的Mixed Reality设备——HoloLens


微软将流畅设计体系概括为“An eloquent design system for a complex world”

有人将他译为“在错综复杂的世界中,别有天地。”


Fluent Design System所选择的光照、深度、动态、材质、伸缩等元素,构建出来的就是一个十分真实的世界。人们常常说交互的终极目标就是“无交互”。


流感态度|Microsoft Fluent Design System


但是其实真正的无交互,是身边充满了十分自然的交互。随着技术的发展,运算能力的提高,信息会和生活越来越紧密,最后无缝的融入我们的生活。这似乎就是Fluent Design System为我们描绘的美好未来。


现在Fluent Design System仍处于起步阶段,随着秋季创意者更新的推送,一部分应用率先使用上了这种设计体系。微软也表明,Fluent Design System不是单独的一个Windows主题,它将贯穿整个Windows 10秋季创意者更新系统。


流感态度|Microsoft Fluent Design System

使用了流畅设计体系的计算器应用


微软也正在研究下一阶段的FluentDesign System,可能包括360度媒体播放、Conscious Headers、语音、Z轴深度层、Spatial sound(空间音效)等。

 

相比较炫酷的视觉效果,FluentDesignSystem更多的向我们揭示了未来设计的趋势,不单单停留在一个平面上,世界是立体的、多样的、真实的。如何与真实世界和谐交融,才应当是我们下一步应当思考的问题。




这里是设计学会

期待与你下一次相遇


获取更多相关资讯

扫描二维码关注「流感」



参考来源

 

Fluent Design System (中文环境下的Chrome无法正常显示)

https://fluent.microsoft.com/


一文看懂微软Win10流畅设计体系(Fluent Design System)

https://www.ithome.com/html/win10/308484.htm

 

微软Win10流畅设计体系(Fluent Design System)是什么?

https://www.ithome.com/html/win10/308451.htm

  

【全面解读】Microsoft 流畅设计体系

http://www.ui.cn/detail/184864.html

 

如何评价微软在 Build 2017 上提出的 Fluent Design System?

https://www.zhihu.com/question/59724483



编辑| 谢辰旭

审核| 边旭晶 王泽华 陈雨威


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《流感态度|Microsoft Fluent Design System》的版权归原作者「流感」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读