• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用一篇文章,帮你看懂微软最新发布的「流畅设计体系」!

用一篇文章,帮你看懂微软最新发布的「流畅设计体系」!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含微软,流畅设计体系,流畅设计系统等相关知识,希望在学习及工作中可以帮助到您

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

欢迎关注作者的知乎专栏:Sketch 与 UE 设计知多少

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

另外,由于 Fluent Design 的官网是不兼容 Chrome 的(简直不可思议),导致之前对这几个理念的理解主要是基于发布会视频,所以会有很多不对的地方,我在接下来的分析中做了修正。

Fluent Design

1. Light

之前通过视频案例我把 Light 理解成了 Fluent Design 推崇轻量合理的交互方式,而官方将 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,看来微软这次确实在下一盘大棋,虽然有些都是概念设计,但是设计界就是需要有这样的突破性思维和想法,才有可能创造出更富有前瞻性的设计语言。非常期待 Fluent Design System 能够给设计界带来如何的改变。

Fluent Design System 官网(不兼容 Chrome,可以用 Safari 正常浏览)。

「在这里读懂谷歌的?Material Design!」

官方译文:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

学习笔记:

  1. 《学霸的自学笔记!Material Design设计规范学习心得》
  2. 《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记》

素材篇:

  1. 《新鲜热辣!一组实用的MATERIAL DESIGN风格素材!》

实战教程:

  1. 《重磅改版!网易新闻安卓客户端MATERIAL DESIGN实战》

原文地址:zhuanlan.zhihu

 

设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 20年前的Windows 98,有一套不俗的新用户引导流程
  • 用一篇文章,帮你看懂微软最新发布的「流畅设计体系」!

相关文章

  • 2018-08-23学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 2018-08-2316个优点告诉你,为什么表单设计应该用这个方法?
  • 2017-08-06Bootstrap3.0学习笔记之页面布局
  • 2018-08-23如何绘制功能性图标?来看资深设计师的全面总结!
  • 2017-08-06Web前端开发中找错的基本思路
  • 2018-08-23设计的套路:10个小技巧让长表单填写更省事
  • 2018-08-23一招教你让交互方案更靠谱!超好用的目标导向设计法
  • 2017-08-06关于门户网站焦点图设计的一些总结
  • 2018-08-23解锁构图新姿势!让平面作品变得高大上的3个构图技巧
  • 2017-08-06网页设计师也要学习网页代码编写

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为什么「下拉刷新」能成为现象级的设计?
    • 我在网易游戏做交互实习这段时间,总结了这8个点
    • AI教程!手把手教你搭建高大上的3D电视台
    • 网易资深视觉设计师:24个容易忽略的App设计细节
    • Adobe 出了一个超厉害的人工智能黑科技,美工可能要失业!
    • 如何用设计思维指导实际工作?这里有份超详细的解答!
    • 腾讯设计师:如何系统地设计界面图标?
    • 产品思维入门实战!对社交类产品的分析和思考
    • form表单中的Input使用disabled不能提交的解决方法
    • css样式优先级及层叠的顺序排序探讨

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有