全面解读微软全新的设计语言——Fluent设计系统

[设计思维][人机交互]

微软在Build 2017的开发者大会上发布了一种全新的设计语言——Fluent Design System,彻底改变了沿用多年的扁平矩形用户界面。新的设计语言不仅与视觉有关,还涉及交互方式、空间和全新元素的整合方式。微软高度概括了FDS要实现的三个转变:

1.从平面设计语言到沉浸式多维设计语言的转变;

2.从小屏、触控向跨平台、输入转变;

3.从消费和交流转变为创造和自我治疗。

微软操作系统部门副总裁乔·贝尔菲奥里(Joe Belfiore)在Build 2017开发者大会上介绍FDS时说:“是时候告别局限于一个平面的长方形了。新的设计语言不仅与视觉相关,还强调交互模式、空间和全新元素的融合。”

在FDS宣传资料中,微软团队用13个形容词介绍了设计理念,我将其解读为以下10种类型:适应性设计、形象级设计、创意设计、简易设计、模拟设计、吸引人的设计、通用设计、包容性设计、表现性设计和连贯性设计。同时,微软将FDS高度概括为一句话“一个复杂世界的雄辩设计系统”,我描述为:“在一个复杂的世界里,没有另一个世界。”

全面解释|积木(组件)

组件FDS设计语言的核心元素确保用户在不同尺寸和不同输入设备上的跨平台体验中表现出色,构建下一个Windows时代。

构成一个组件的五个要素是:光、深度、运动、材质和尺度。

综合解读|光(光效)

事实上,在Windows 10 RS2和以前的系统上,有亮度变化的反馈,而在FDS,则强调轻人机交互反馈。在一些二维设备的程序中,随着鼠标的移动方向,在元素本身和周围元素上产生光反馈效果。这突出显示了用户正在与之交互的控件状态。

在使用MR设备时,用户将指针悬停在屏幕上,光线以小发光圈的形式向用户提供反馈,这有助于用户将UI元素与虚拟环境分开。

全面解读|素材(Material)

微软团队利用Fluent设计系统中的物理纹理和空间深度的概念来区分各种UI组件元素,并将其置于视觉层次中。关键是调整这种材料的构成元素,以获得其独特的外观和性能,并为用户提供个性化的偏好体验。这是UWP应用程序风格体验的一个重大改进。

背景透明、高斯模糊和图层纹理增加了用户界面的视觉深度和维度,建立了视觉层次。排除混合风格用于确保放置在丙烯酸背景上的元素具有高对比度和可读性。色彩叠加为用户提供了色彩个性化的机会,创造了平易近人的体验。

这五种元素的叠加构成了一种清新、透明、高效的材料,微软称之为亚克力材料。

全面解读|亚克力材料使用规范

1.如果你想在应用中创造不同的视觉效果,你可以在应用的整个区域使用丙烯酸材料。

2.对于垂直导航的应用,丙烯酸材料应该应用于包含导航元素的辅助窗格。

微软官方规定了三种亚克力材质的设计规格,分别是60%亮/深色,70%亮/深色,80%亮/深色。这里演示60%亮光亚克力材质的具体算法。

4.对于有三个不同垂直窗格的应用程序,非主要内容应使用丙烯酸材料。

对于最接近主要内容的辅助窗格,应使用80%的亮(暗)压克力材料。

对于远离主要内容的第二个辅助窗格,应使用60%的亮(暗)压克力材料。

4.对于有三个不同垂直窗格的应用程序,非主要内容应使用丙烯酸材料。对于最接近主要内容的辅助窗格,应使用80%的亮(暗)压克力材料。对于远离主要内容的第二个辅助窗格,应使用60%的亮(暗)压克力材料。

设计的时候要慎重使用多层亚克力材料。在体验中,不应该让用户在使用应用时,在脑海中模拟三维情境下的Z轴透视,这也可能导致视觉上出现意想不到的视错觉。

综合解释|深度(视差效果)

视差是一种视觉效果,可以在用户界面中产生层次结构。靠近观察者的物体比背景中的物体移动得快。视差产生深度感、透视感和运动感。

如上所述,列表和背景图像的视差发生变化,并且列表被放置在背景图像的顶部。为了达到视差效果,我们希望离用户最近的物体比离用户较远的物体移动得更快。因此,当用户滚动界面时,列表的移动速度比背景图片快,从而产生深度变化的错觉,大大提高了用户的好感度和用户粘性。

综合解读|运动(动画)

1.连接动画(连接动画)

内聚动画用于过渡两个或多个不同视图之间的元素变化,有助于在用户浏览相关内容时保持视图之间的连续性,实现动态、自然、快速、炫酷、引人入胜的用户体验,能够快速吸引用户的注意力,大幅提升用户的参与度。

注意上面的动画。在原型中,一个内聚的动画用于动态扩展项目图像。当用户与该图像元素交互时,它成为下一级水平标题内容,在用户浏览相关内容时保持视图之间的连续性。

2.协调动画(协调动画)

配合动画是一种特殊类型的入口动画,其核心形式是“动”。用户选择的元素通过协调的动画在某个方向上移位,并在下一级在某个方向上显示。

例如,在上面的动画中,UI控件使用协调动画。协调的动画可以为元素之间的切换增加更多的视觉趣味,并进一步吸引用户对源视图和目标视图之间变化的注意。

Belfiore将一个带有动作元素的应用程序比作一个演员用动作引导观众进入一个故事。"运动元素具有特殊的魔力,可以让我们的体验充满活力."他说。"同时,它可以很容易地引导用户从一个任务过渡到下一个任务."运动元素也体现了创意、写实、放松、吸引、表达、连贯、连贯的设计理念。

完整解释|比例(缩放)

Scale的关键作用是在不同设备上重塑和呈现应用。在电脑显示器上看起来合适的对象在AR或VR耳机中观看时可能会变得太大或太小。因此,虚拟对象大小的缩放是第一视角UI体验的关键因素之一。

对于规模,在本次开发者大会上,微软也结合现有产品提出了未来发展的大方向。沉浸式数字对象的扩展也是3D交互界面和VR/AR时代必不可少的功能。随着虚拟现实的发展,规模技术将更多的应用到产品中。

综合解读| Windows Story Remix视频创作工具

Story Remix最大的特点就是简单易用。其中,Remix 3D功能可以自动提供一个故事,用户可以根据自己想要表达的逻辑和内容重新定制,吸引各个层次的创作者。View 3D功能可以直接调用3D对象来创作VR作品。

Story Builder功能允许用户使用照片、视频和音乐快速创建一个接近专业的精彩故事。Windows Story Remix允许用户上传照片、视频

“添加3D对象”来创建有趣的混合现实场景。除了编辑和创建照片和视频,Story Remix还支持直接混合音乐,就像Paint 3D一样。

它还集成了对Remix 3D社区的支持。

在微软深度学习技术的支持下,Story Remix可以识别照片中的人和物,可以根据人、物、时间等几乎任何属性直接给照片和视频添加注释或涂鸦,并且还支持电容笔墨操作。

微软在Build 2017开发者大会上给FDS做了不到一个小时的演讲,包括一些现有的功能演示,包括Windows 10。

一些关于未来的抽象概念。“流畅”不仅仅是Windows 10的特权,可能会渗透到整个UMP系统,就像Google的材质设计一样。在未来,我们可能会看到微软的品牌从完全扁平化的设计演变成更多种类和行为的东西。值得注意的是,微软Fluent设计系统并非以Windows命名,这也反映了微软想成为3D用户界面先驱的野心。