转载自: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. 扩增子分析QIIME2. 1简介和安装

    原网站:https://blog.csdn.net/woodcorpse/article/details/75103929 声明:本文为QIIME2官方帮助文档的中文版,由中科院遗传发育所刘永鑫博士翻 ...

  2. ubuntu画面延迟问题解决

    新配的电脑,安装ubuntu16.04以后,出现画面延迟的问题,尤其浏览网页的时候画面十分卡顿.用free命令查看过可用内存6.多G,经过询问大概是显卡问题,然后在https://ubuntuforu ...

  3. 【前缀和】【two-pointer】【贪心】洛谷 P3143 [USACO16OPEN]钻石收藏家Diamond Collector 题解

        解法众多的一道毒瘤题? 题目描述 奶牛Bessie很喜欢闪亮亮的东西(Baling~Baling~),所以她喜欢在她的空余时间开采钻石!她现在已经收集了\(N\)颗不同大小的钻石,现在她想在谷 ...

  4. Codeforces - 570D 离散DFS序 特殊的子树统计 (暴力出奇迹)

    题意:给定一棵树,树上每个节点有对应的字符,多次询问在\(u\)子树的深度为\(d\)的所有节点上的字符任意组合能否凑成一个回文串 把dfs序存储在一个二维线性表中,一个维度记录字符另一个维度记录深度 ...

  5. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  6. 【研究】struts2-045漏洞

    攻击者可以通过构造HTTP请求头中的Content-Type值可能造成远程代码执行. 工具: K8(链接:https://pan.baidu.com/s/1kVxgFNx 密码:ygxf) Tomca ...

  7. Python获取当前时间及格式化

    1.导入time模块 # 导入time模块 import time 2.打印时间戳-time.time() # 导入time模块 import time # 打印时间戳 print(time.time ...

  8. Linux——【rpm、yun、源码包】安装

    RPM包或者安装源码包 在windows下安装一个软件很轻松,只要双击.exe的文件,安装提示连续“下一步”即可,然而linux系统下安装一个软件似乎并不那么轻松,因为我们不是在图形界面下.所以我们要 ...

  9. 牛客网Java刷题知识点之HashMap的实现原理、HashMap的存储结构、HashMap在JDK1.6、JDK1.7、JDK1.8之间的差异以及带来的性能影响

    不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑          ...

  10. Wireshark使用技巧

    Wireshark使用技巧 在分析网络时,包应该尽量的小,只要能定位问题即可. 1. 只抓包头,在wireshark中可以设置抓包大小. 如果使用tcpdump命令: [root@server_1 / ...