转载自: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的更多相关文章

  1. [UWP]如何使用Fluent Design System (下)

    4. 兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall C ...

  2. 微软最新设计Fluent Design System初体验

    微软最新设计Fluent Design System初体验 本文图片不全!建议移步知乎专栏查看!!! https://zhuanlan.zhihu.com/p/30582886 原创 2017-11- ...

  3. 流畅设计 Fluent Design System 中的光照效果 RevealBrush,WPF 也能模拟实现啦!

    UWP 才能使用的流畅设计效果好惊艳,写新的 UWP 程序可以做出更漂亮的 UI 啦!然而古老的 WPF 项目也想解解馋怎么办? 于是我动手实现了一个!   迫不及待看效果 ▲ 是不是很像 UWP 中 ...

  4. [UWP]如何使用Fluent Design System (上)

    1. 前言 微软在Build 2017中公布了新的设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽的词语以及一堆动画.至于在UWP中要做成怎么样,怎么做, ...

  5. DevExpress WinForms使用教程:WinForms Fluent Design和Acrylic Effects

    在先前的版本发布中,宣布支持Fluent Design Form和Acrylic effects——旨在复制Microsoft下一代UI metaphor的新功能.本文主要介绍如何实现此功能,并明确说 ...

  6. [UWP]推荐一款很Fluent Design的bilibili UWP客户端 : 哔哩

    UWP已经有好几个Bilibili的客户端,最近有多了一个: 哔哩 - Microsoft Store 作者云之幻是一位很擅长设计的UWP开发者,我也从他那里学到了很多设计方面的技巧.它还是一位Bil ...

  7. 设计系统(Design System),设计和开发之间的“DevOps”

    最近,我们网站的上新增了几个新功能,比如通过导航栏的QR Code可以下载App:通过Carousel的方式,显示多条信息. 以往这样的功能可能需要2-3个Sprints完成,但是现在这些功能都是在一 ...

  8. design language

    design language https://en.wikipedia.org/wiki/Design_language 设计语言(设计词汇)是一种超架构的方案和风格, 它用于指导产品组件或者架构配 ...

  9. [UWP]浅谈按钮设计

    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...

随机推荐

  1. C. Connect Three Round #528 (Div. 2)【曼哈顿距离】

    一.题面 题目链接 二.分析 这题的关键是要确定一个点是从三个点出发的交汇点,其他的只要结合曼哈顿距离的定义即可明白.因为是三个点,这个交汇点的坐标分别对应的就是x,y值的中值.然后一个小技巧就是曼哈 ...

  2. 建立链表的虚拟头结点 203 Remove Linked List Element,82,147,148,237

    该逻辑对于删除第一个元素不适用. 这样的代码不优美 /** * Definition for singly-linked list. * struct ListNode { * int val; * ...

  3. webpack 打包css报错 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    是webpack4和extract-text-webpack-plugin的兼容性问题 执行命令:npm install extract-text-webpack-plugin@next --save ...

  4. MongoDB基本语句

    1.创建数据库      use  库名 2.查看所有库      show dbs 3.定义一个对象变量,下面挂着数据 4.col 是集合名,如果该集合不在该数据库中, MongoDB 会自动创建该 ...

  5. PIE SDK聚类

    1.算法功能简介 聚类处理时运用形态学算子将临近的类似分类区域聚类并合并. PIE SDK支持算法功能的执行,下面对聚类算法功能进行介绍. 2.算法功能实现说明 2.1. 实现步骤 第一步 算法参数设 ...

  6. Percona Mysql备份

    介绍 Percona是唯一一款开源.免费的mysql热备份工具,实现了对InnoDB数据库的非阻塞式的备份.有如下优势:1.完整.快速.可靠的备份2.备份期间不打断事务执行(innodb引擎)3.备份 ...

  7. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

  8. webservice 注解介绍

    JAX-WS 注释 “基于 XML 的 Web Service 的 Java API”(JAX-WS)通过使用注释来指定与 Web Service 实现相关联的元数据以及简化 Web Service ...

  9. Beam编程系列之Apache Beam WordCount Examples(MinimalWordCount example、WordCount example、Debugging WordCount example、WindowedWordCount example)(官网的推荐步骤)

    不多说,直接上干货! https://beam.apache.org/get-started/wordcount-example/ 来自官网的: The WordCount examples demo ...

  10. git代码管理工具-SourceTree 使用介绍

    一.SourceTree 简单说明 SourceTree 是git 代码管理的可视化工具,可省去操作命令行的一个图形化工具,下载地址:https://www.sourcetreeapp.com/ 二. ...