SuperAPI AI 工具集

Fluent UI Cross-Platform

前端与建站

查看项目

更新于 10-21 23:11

技能介绍

Fluent UI Cross-Platform 技能围绕 Microsoft Fluent 2 设计系统,讲解如何在 iOS 与 Android 原生平台上使用 Fluent UI,并与 Web(React)实现视觉与行为上的一致性。

一、用途 该技能适用于以下场景:在原生 iOS 或 Android 项目中搭建 Fluent UI;确保 Web、iOS、Android 三端设计令牌一致;构建需要统一 Fluent 风格的跨平台应用(如 Teams、Outlook 类应用);将 Web 组件 API 映射到 iOS/Android 对应实现;为移动平台集成 Figma 设计套件。

二、平台与包 Fluent 2 在三个平台各有原生实现:Web 为 fluentui 仓库,包为 @fluentui/react-components(npm);iOS 为 fluentui-apple 仓库,包为 MicrosoftFluentUI(CocoaPods / SPM);Android 为 fluentui-android 仓库,包为 com.microsoft.fluentui(Maven / Gradle)。三者共享同一套设计令牌基础,同时保留各平台原生交互习惯(如 iOS 滑动手势、Android Material 涟漪效果)。

三、主要能力

  1. 组件对照:技能提供组件一致性矩阵,覆盖 Avatar、AvatarGroup、Badge、Button、Card、Checkbox、DatePicker、Dialog、Divider、Drawer、Label、Link、List/ListItem、Menu、NavigationBar、PeoplePicker、Persona、PillButton、PopupMenu、ProgressIndicator、SearchBar、SegmentedControl、Shimmer、Slider、Snackbar、Switch/Toggle、TabBar、Text、TextField、Tooltip、Typography 等,并标注各平台是否支持及差异(如 HUD 仅 iOS,Snackbar 为 Android 原生模式)。
  2. 令牌一致性:涵盖品牌色、中性色、状态色、字号、字重、间距、圆角、阴影/高度、描边宽度、动效时长与缓动等令牌类别,并给出 Fluent 令牌名到 Web CSS 自定义属性、iOS Swift 常量、Android XML 资源的映射示例。品牌色采用共享色阶(brandColor10 至 brandColor160,brandColor80 为默认主色)。
  3. 主题能力:支持品牌色覆盖、深色模式、高对比度、按组件覆盖、动态字体缩放(iOS/Android)与 RTL。
  4. iOS 实现:语言为 Swift 5.9+,最低目标 iOS 16.0+,支持 UIKit 与 SwiftUI。安装方式包括 CocoaPods(pod 'MicrosoftFluentUI', '~> 0.20')与 Swift Package Manager(https://github.com/microsoft/fluentui-apple.git)。提供 FluentTheme 主题对象与 register(tokenSetType:provider:) 按组件覆盖,深色模式自动响应 UIUserInterfaceStyle,无障碍支持 Dynamic Type、VoiceOver、44pt 触控目标与减弱动态效果。
  5. Android 实现:语言为 Kotlin 1.9+,最低 SDK API 21,支持 Android Views(XML)与 Jetpack Compose。通过 Gradle 引入 com.microsoft.fluentui:FluentUI 或各独立模块(fluentui_core、fluentui_controls、fluentui_drawer、fluentui_listitem、fluentui_persona、fluentui_popupmenu、fluentui_topappbars、fluentui_transients)。提供 FluentTheme.updateAliasTokens 覆盖品牌色,深色模式通过 values-night 资源限定符自动解析,并可与 Material 3 / Material You 共存。

四、使用方式与跨平台模式 技能给出多种跨平台协作模式:以单一 tokens.json 作为令牌来源,经 Style Dictionary 或 Fluent 令牌管线生成各平台原生格式;对齐组件 API 命名(如 appearance/style/buttonStyle、disabled/isDisabled/isEnabled);对导航、对话框、下拉刷新、触觉反馈、状态栏等按平台做原生适配;在同一个 Figma 项目中使用三套 Figma 套件并建立规格页;以及无障碍一致性检查清单(可访问名称、WCAG 2.1 AA 对比度、焦点顺序、动态字号、减弱动效、触控目标最小值)。

五、限制与暂未提供 资料未提供各平台库的具体版本发布时间、收费或授权价格信息、性能基准数据,也未提供完整代码示例(正文指向 references/ios-reference.md 与 references/android-reference.md 参考文件)。部分组件在 Web 端标注为 Partial 或 No,跨平台并非完全一致。