ArkUI 如何设计 AI 原生 UI？

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验 。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

展菲：您的前沿技术领航员

👋 大家好，我是展菲！

📱 全网搜索"展菲"，即可纵览我在各大平台的知识足迹。

📣 公众号"Swift社区"，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。

💬 微信端添加好友"fzhanfei"，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。

📅 最新动态：2025 年 3 月 17 日

快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！

文章目录

- 引言
- [AI 原生 UI 和传统 UI 的区别](#AI 原生 UI 和传统 UI 的区别)
- [ArkUI 为什么适合 AI 原生 UI](#ArkUI 为什么适合 AI 原生 UI)
- - [1、声明式 UI 非常适合动态内容](#1、声明式 UI 非常适合动态内容)
  - [2、组件化可以适应 AI 内容结构](#2、组件化可以适应 AI 内容结构)
  - [3、ArkUI 的跨设备能力](#3、ArkUI 的跨设备能力)
- [AI UI 的核心设计：卡片化](#AI UI 的核心设计：卡片化)
- [动态 UI：适应 AI 的"不确定性"](#动态 UI：适应 AI 的“不确定性”)
- [AI UI 的另一个关键：操作建议](#AI UI 的另一个关键：操作建议)
- [一个简单的 ArkUI AI UI 架构](#一个简单的 ArkUI AI UI 架构)
- [AI UI 的一个重要原则](#AI UI 的一个重要原则)
- 总结

引言

过去几十年，移动应用 UI 的设计逻辑基本是固定的：

用户点击界面 → 触发功能 → 显示结果

例如：

复制代码

点击按钮
打开页面
提交表单
查看结果

因此传统 App 的 UI 结构通常是：

复制代码

页面
↓
组件
↓
事件
↓
接口

但随着 **AI 原生应用（AI Native App）**的出现，这种模式正在发生变化。

很多 AI 产品（例如 AI 助手、智能搜索、智能办公）已经不再依赖复杂的菜单结构，而是围绕一个核心入口：

复制代码

对话

用户只需要：

复制代码

输入问题
语音交互
描述任务

系统就可以直接完成：

复制代码

信息查询
内容生成
任务执行

这就带来了一个新的问题：

如果应用是 AI 驱动的，ArkUI 的 UI 应该如何设计？

AI 原生 UI 和传统 UI 的区别

传统 UI 通常是 功能驱动 的：

复制代码

首页
订单页
设置页
个人中心

用户通过页面导航逐步完成任务，而 AI 原生 UI 更接近 任务驱动，例如用户输入：

复制代码

帮我订一张明天去上海的机票

系统可能直接完成：

复制代码

搜索航班
推荐航班
确认订单

整个流程可能都在 一个对话界面中完成，因此 UI 结构会从：

复制代码

页面 → 页面

变成：

复制代码

对话 → 卡片 → 操作

这也是很多 AI 应用（ChatGPT、Copilot 等）常见的界面结构。

ArkUI 为什么适合 AI 原生 UI

从技术角度看，ArkUI 其实非常适合构建 AI UI，主要有三个原因。

1、声明式 UI 非常适合动态内容

ArkUI 使用声明式 UI：

ts 复制代码

Column() {
  Text("Hello")
  Button("Submit")
}

UI 完全由 状态驱动，例如：

ts 复制代码

@State messages: string[] = []

Column() {
  ForEach(this.messages, (msg: string) => {
    Text(msg)
  })
}

当 AI 返回新的消息：

ts 复制代码

this.messages.push("这是 AI 返回的内容")

界面就会自动更新，这和 AI 的特性非常契合，因为 AI 的结果通常是：

复制代码

动态生成
实时更新
结构不固定

2、组件化可以适应 AI 内容结构

AI 返回的内容通常不仅是文本，还可能包含：

复制代码

推荐内容
搜索结果
操作建议
摘要信息

如果 UI 是组件化的，就可以很容易适配这些内容。例如定义组件：

复制代码

ChatMessage
SummaryCard
ProductCard
ActionBar

示例代码：

ts 复制代码

@Component
struct ChatMessage {
  @Prop text: string

  build() {
    Text(this.text)
      .fontSize(16)
      .margin(8)
  }
}

页面中使用：

ts 复制代码

ForEach(this.messages, (msg: string) => {
  ChatMessage({ text: msg })
})

这样 AI 返回的数据就可以 自动映射成 UI。

3、ArkUI 的跨设备能力

HarmonyOS 的一个核心能力是：

复制代码

多设备协同

例如：

复制代码

手机
平板
车机
智慧屏

而 AI 助手本身就适合跨设备。例如：

复制代码

手机发起任务
车机继续操作
智慧屏展示结果

如果 UI 组件设计得足够通用，就可以很容易适配不同设备。

AI UI 的核心设计：卡片化

AI UI 设计中一个非常重要的理念是：

卡片（Card）

原因很简单，AI 返回的信息通常是结构化数据，例如：

复制代码

推荐商品
航班信息
新闻摘要
搜索结果

如果只用文本展示，用户体验会很差。更好的方式是转成 信息卡片。例如定义一个航班卡片：

ts 复制代码

@Component
struct FlightCard {
  @Prop city: string
  @Prop date: string
  @Prop price: number

  build() {
    Column() {
      Text(this.city)
        .fontSize(20)

      Text(this.date)

      Text("¥" + this.price)
        .fontColor(Color.Red)
    }
    .padding(12)
    .backgroundColor('#ffffff')
    .borderRadius(8)
  }
}

当 AI 返回数据：

json 复制代码

{
  "city": "Shanghai",
  "date": "Tomorrow",
  "price": 980
}

UI 就可以直接渲染：

ts 复制代码

FlightCard({
  city: "Shanghai",
  date: "Tomorrow",
  price: 980
})

这种方式可以让 AI 输出的数据直接驱动 UI。

动态 UI：适应 AI 的"不确定性"

传统 UI 通常是：

复制代码

固定布局
固定组件
固定流程

但 AI UI 最大的特点是：

结果结构不固定

例如 AI 可能返回：

复制代码

一段总结
三个推荐卡片
两个操作按钮

因此 UI 必须支持 动态组合 。ArkUI 可以通过 ForEach 实现：

ts 复制代码

@State cards: CardData[] = []

ForEach(this.cards, (card) => {
  AICard({ data: card })
})

当 AI 返回不同内容：

ts 复制代码

this.cards = aiResult.cards

UI 会自动更新。这也是 AI UI 的核心设计模式：

数据结构 → UI 组件

AI UI 的另一个关键：操作建议

AI 产品通常会提供 下一步操作建议：例如：

复制代码

继续生成
查看更多
重新查询
执行操作

UI 可以设计成一个 ActionBar。示例代码：

ts 复制代码

@Component
struct ActionBar {
  build() {
    Row() {
      Button("重新生成")
      Button("查看更多")
      Button("执行操作")
    }
    .justifyContent(FlexAlign.SpaceAround)
    .margin(10)
  }
}

当 AI 生成不同建议时，只需要更新按钮列表即可。

一个简单的 ArkUI AI UI 架构

在实际项目中，一个比较清晰的结构通常是：

复制代码

Page
 ↓
ChatStore
 ↓
AIService
 ↓
LLM

职责划分：

复制代码

Page        → UI展示
ChatStore   → 对话状态
AIService   → AI请求
LLM         → 大模型

简单示例：

ts 复制代码

class ChatStore {
  messages: string[] = []

  async sendMessage(text: string) {
    const reply = await AIService.ask(text)
    this.messages.push(reply)
  }
}

UI 只需要订阅状态：

ts 复制代码

ForEach(chatStore.messages, (msg) => {
  ChatMessage({ text: msg })
})

这样 UI 和 AI 逻辑就完全解耦。

AI UI 的一个重要原则

很多团队在做 AI 产品时会犯一个错误：

把 AI UI 做成传统 App。

例如：

复制代码

很多菜单
很多页面
复杂导航

但 AI 应用更适合：

复制代码

一个核心入口
对话驱动
卡片展示
操作建议

简单来说就是：

复制代码

AI 是入口
UI 是结果

总结

随着 AI 原生应用的出现，UI 的设计方式正在发生变化。

传统 App 更像：

复制代码

功能入口集合

而 AI 原生应用更像：

复制代码

任务执行界面

在 ArkUI 中，一个典型的 AI UI 结构可能是：

复制代码

Chat
↓
Card
↓
Action

开发者真正需要思考的问题也不再是：

这个页面怎么写。

而是：

AI 返回的数据，应该如何变成 UI。

当 UI 变成 AI 数据的可视化层 时，一个真正的 AI 原生 ArkUI 应用才算真正出现。