29

正如微软最近发布了一个名为“Fluent Design”的设计系统,是否适合将其应用到网页设计中?

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

4

7 回答 7

12

2020 年 4 月更新Fluent Design 的主要目的地是Microsoft 的 Fluent Design System 网站

对于官方 Web 框架,请访问 github repos:

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

此处提供了一些教程。

于 2018-04-09T11:47:16.727 回答
9

查看Microsoft Web 框架,了解您将用于满足 Microsoft 的 Web 设计原则的组件、HTML 结构和 CSS 的详细信息。

于 2017-07-13T13:21:20.210 回答
5

我只是在这里引用微软。

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

请观看此视频,在问答环节 (22:00) 中讨论了您的问题。

于 2017-05-28T06:25:44.010 回答
5

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

本网站仅限 Microsoft 员工和授权供应商使用。不得在非 Microsoft 网站上使用本网站的任何材料或代码。进入此站点即表示您确认您是 Microsoft 员工或代表 Microsoft 工作的授权供应商。您进一步同意,材料和代码构成 Microsoft 的知识产权,仅限在 Microsoft 运营的网站上使用,并受适用于管理您与 Microsoft 的雇佣或供应商关系的协议的约束。

于 2017-09-04T03:02:44.780 回答
5

您可以将此库用于 Fluent Design System 中的显示效果。您需要等待backdrop-filter背景模糊效果支持的 CSS。

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

在此处输入图像描述

于 2018-06-13T06:16:21.990 回答
4

查看Fluent Kit框架。

它是当前 Bootstrap 版本的 Fluent Design 扩展,使用 jQuery,因此对于任何人来说都应该是一个简单的起点,真的。此外,它有很好的文档记录和“正在进行的工作”,因此随着设计本身的发展,您可以期待更多的功能。


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

于 2018-04-25T17:59:22.817 回答
2

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

更新:可以在这里找到一个名为 react-uwp 的高质量 3rd 方反应组件框架

更新:新网站位于https://fluentweb.com/

更新:链接现已失效,https: //getmwf.com 不再提及流畅的设计。

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

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

https://fluent.getmwf.com/

于 2017-07-12T18:29:07.350 回答