Microsoft Fluent Design for Web(CSS 框架)

Microsoft Fluent Design for Web (CSS framework)

微软最近发布了一个名为"Fluent Design"的设计系统,用在网页设计上合适吗?

我的大部分搜索都是针对所有 Microsoft 平台、C# 应用程序、F# 等。 我从未见过任何有关网页设计的内容。

我只是在这里引用微软的话。

它与网页设计完全相关。因为这些只是原则,并不特定于任何平台。因此,如果您是 Web 开发人员并且喜欢 Microsoft 的思维方式。围绕这些原则构建 Web UI 框架是非常好的。

请查看此 video,您的问题已在问答环节 (22:00) 中得到讨论。

更新:Fluent design 现在支持 web、Android 和 IOS。 https://www.microsoft.com/design/fluent/#/

更新:可以找到名为 react-uwp 的高质量第 3 方 React 组件框架 here

更新:新网站在https://fluentweb.com/

更新: link 已经死了,https://getmwf.com 不再提流畅设计了。

Microsoft 为其员工和供应商提供了一个 Web 框架。

看起来他们正在向该框架引入流畅的设计组件。

https://fluent.getmwf.com/

查看 Microsoft Web Framework 以了解组件的详细信息、HTML 结构和 CSS 以满足 Microsoft 的网页设计原则。

只需从 MWF homepage 底部复制粘贴即可。

This site is restricted to use by Microsoft employees and authorized vendors. No materials or code from this site may be used on non-Microsoft websites. By entering this site, you confirm that you are a Microsoft employee or an authorized vendor working on behalf of Microsoft. You further agree that the materials and code constitute Microsoft’s intellectual property, are limited for use on Microsoft-operated websites, and are subject to the applicable agreements governing your employment or vendor relationship with Microsoft.

2020 年 4 月更新 Fluent Design 的主要目标是 Microsoft's Fluent Design System website

对于官方 web 框架,请转到 github 存储库:

  • Fluent UI - 一组用于构建 Microsoft Web 体验的 React 组件。良好的支持和大量的追随者。
  • Office UI Fabric 仅包括网格、排版、图标和实用程序。没有组件,也没有对 React 的依赖。维护得不是很好

一些教程可用here

查看 Fluent Kit 框架。

它是当前 Bootstrap 版本的 Fluent Design 扩展,使用 jQuery,因此对于任何人来说都应该是一个简单的起点,真的。此外,它是 very well documented 和 "work in progress",因此随着设计本身的发展,您可以期待更多的功能。


重要更新: Fluent Kit 以及整个 Nespero 项目已关闭

您可以使用此库在 Fluent Design System 中实现 Reveal Effect。 需要等待 backdrop-filter CSS 支持背景虚化效果。

https://github.com/d2phap/fluent-reveal-effect