Fluent 2 是一套围绕界面设计与开发使用的组件和资源体系,官网将内容分为 Design、Develop、Components、Newsworthy 与 Resources。它提供 Figma UI kits,并为 Web、iOS、Android 和 Windows 分别展示组件入口;开发者可以查看安装指南和工具使用提示,设计者还可以使用用于焦点顺序、颜色对比度、内容布局和图标缩放的 Figma 插件资源。官网同时展示 Teams、Outlook 和 Emoji 等与 Fluent 2 相关的设计案例或更新内容。
核心功能
Figma UI kits
官网在 Design 入口中提供 Figma UI kits,并将其作为进入设计内容的路径。设计者可以从“Design”页面开始使用这些 UI kits,官网明确将该入口描述为“Dive into our Figma UI kits”。正文没有进一步列出具体套件名称、组件数量或授权方式,因此具体覆盖范围以页面实际内容为准。
多平台组件
Fluent 2 的 Components 区域按平台提供 Web、iOS、Android 和 Windows 四个入口。Web 页面链接到 React components,其他三个入口分别对应 iOS、Android 和 Windows 组件;官网首页还展示了各平台组件的背景图和示例素材。这样的组织方式让使用者可以按目标平台进入对应内容,而不是只面对一个未区分平台的组件页面。
Web React 组件
Web 组件入口明确指向 React,并配有“Web”分类和 React components 说明。开发者可以从该入口查看 Web 端组件内容,首页展示的相关素材包括组件演示背景以及多个演示资源。正文没有给出具体安装命令、支持版本或组件清单,因此这些技术细节不能从当前页面确认。
移动端与 Windows 组件
官网分别提供 iOS、Android 和 Windows 组件入口,并为每个平台展示独立的演示背景与资源图片。iOS 和 Android 页面对应移动平台组件,Windows 页面对应 Windows 组件。页面正文没有说明这些组件是否共享同一套 API,也没有列出各平台的安装方式或版本要求。
无障碍与设计辅助资源
Resources 区域列出多个 Figma 插件。A11y – Focus Order 用于快速标注设计的 focus 和 tab order,以形成交互对象的流程;A11y – Color Contrast Checker 用于按照 Web Content Accessibility Guideline 标准检查文字可读性。官网还提供 Content Reel,用于从一个调色板中提取文本字符串、图片和图标来设计布局,以及 Icon Scaling Tool,用于创建多个尺寸的图标并通过一次点击进行缩放。
设计案例与产品更新内容
Newsworthy 区域展示了与 Fluent 2 相关的 Teams、Emoji 和 Outlook 内容。页面写明 Teams leverages Fluent 2 to boost performance and reduce complexity,另有关于 Emoji 更新以及 Outlook、Windows 和 Fluent 联合形成可定制 hub experience 的内容。这些条目以新闻或案例形式出现,用于展示 Fluent 2 在相关产品体验中的应用内容,并非组件安装说明。
使用方式
官网提供两条主要入口:Design 用于进入 Figma UI kits,Develop 用于查找 installation guides 和 tooling tips。组件部分按 Web、iOS、Android、Windows 分类,其中 Web 明确使用 React 组件入口。Resources 中的辅助工具以 Figma 社区插件链接呈现,包括焦点顺序、颜色对比度、内容排版和图标缩放工具。正文未说明是否需要注册、是否需要自备密钥,也未提供命令行或 API 使用方式。
适用人群与场景
使用 Figma 进行界面设计的人可以从 Design 入口获取 UI kits,并使用 Content Reel 处理文本、图片和图标布局。面向 Web 开发的人员可以进入 React 组件页面,面向 iOS、Android 或 Windows 开发的人员可以选择对应平台组件入口。需要检查无障碍设计的人可以使用 Focus Order 和 Color Contrast Checker;需要制作多尺寸图标的人可以使用 Icon Scaling Tool。关注 Teams、Outlook 或 Emoji 体验设计的人,则可以浏览 Newsworthy 区域的相关内容。