设计 × 人 × AI

董丽娜
产品设计作品集

资深产品设计师
AI 原生产品体验

14 年消费级及复杂数字产品设计经验,
其中 3 年专注于 AI 原生产品体验。
曾任 Mootion 设计负责人,
主导生成式 AI 产品从概念到上线的 0 到 1 体验设计。

Lina Dong · 董丽娜

Adobe → 阿里健康 → Mootion AI
中央美术学院(CAFA)

浏览我的作品
Lina Dong
设计人与 AI 协作的体验。
产品设计作品集精选作品

精选项目 / 01

Mootion.com

智能体驱动的 AI 视频
创作平台

通过多智能体协同工作流,将想法与源素材转化为完整视频故事的多模态 AI 创作平台。

角色
产品设计负责人 · 2022–2025
范围
0 到 1 产品体验 · 人机协作 · AI 用户体验体系 · 设计系统
规模
200 万+ 创作者 · 1,000 万+ 视频 · 50+ 国家

已上线运营 · 200 万+ 创作者 · 覆盖 50+ 国家

阅读 Autoflow 项目案例
访问 Mootion
Mootion 网站组合图:AI 视频生成、产品能力与创作者案例

01 / 智能体工作流

多智能体工作流中的用户控制

让 AI 配置视频生成参数,同时让用户始终掌握关键决策。

  • 基于意图的配置AI 智能体根据用户意图,自动配置视频生成所需的关键参数。
  • 清晰的交互状态通过视觉差异区分可编辑与锁定状态,让用户明确知道何时可以介入。
  • 可见的生成进度以“思考中”等明确的系统状态,呈现长时间生成任务的进展。
  • 保留调整窗口提供短暂的调整时间,让用户能够覆盖 AI 的决策,而无需中断生成流程。
多智能体工作流中的用户控制的产品界面与交互示例
多智能体工作流中的用户控制 · Mootion

02 / 多智能体协作

基于角色分工的多智能体工作流

将等待转化为可观察的进展。

  • 专业角色分工由不同智能体分别负责规划、脚本撰写、分镜、动画和编辑。
  • 对话式活动流通过对话式活动流逐步展示中间成果,让用户在生成过程中持续了解工作进展。
  • 持续的进度感知使生成过程更易理解,并让用户持续感受到任务正在推进。

Autoflow 改版~30% → ~60%改版后的视频完成率

基于角色分工的多智能体工作流的产品界面与交互示例
基于角色分工的多智能体工作流 · Mootion

03 / 主动引导

通过主动建议发现产品能力

在用户需要灵感的时刻,帮助他们发现可以创作什么。

  • 贴合场景的起点在用户探索工作台时提供相关的提示词建议,一键进入创作流程。
  • 用示例揭示能力通过示例提示词展示长篇故事等创作可能,无需用户先了解完整的功能体系。
  • 轻量引导在需要时提供灵感,降低上手门槛,同时保持主流程连贯。
通过主动建议发现产品能力的产品界面与交互示例
通过主动建议发现产品能力 · Mootion

04 / 创作模板

通过场景模板发现创作能力

将常见用户意图转化为可直接使用的创作配置。

  • 即用型创作配置以场景模板连接常见的用户意图与可直接使用的创作配置。
  • 降低提示词编写成本减少编写提示词的负担,同时展示产品可以生成的多种内容。
  • 不同目标,一致的交互不同模板承载不同的创作目标,在一致的交互模式下支持多样化产出。
通过场景模板发现创作能力的产品界面与交互示例
通过场景模板发现创作能力 · Mootion

05 / 进度与反馈

骨架屏与渐进式内容呈现

在生成过程中及时提供反馈。

  • 即时反馈使用骨架屏保持布局稳定,并在内容生成期间提供即时反馈。
  • 渐进式呈现随着内容生成逐步展示结果,无需等待整个响应完成。
  • 支持长时间任务对于耗时较长的任务,清楚说明延迟,并允许用户继续处理其他工作。
骨架屏与渐进式内容呈现的产品界面与交互示例
骨架屏与渐进式内容呈现 · Mootion

06 / 多模态创作

多模态输入:一个创作流程,多种输入方式

将不同来源的素材接入统一的生成流程。

  • 灵活的输入方式在同一创作流程中支持文本、音频、视频、文件、链接和直接录制。
  • 统一的生成流程将不同输入类型整合到统一流程,减少工具与模式之间的切换。
  • 从已有素材出发让用户根据素材类型与叙事意图,选择最合适的输入方式。
多模态输入:一个创作流程,多种输入方式的产品界面与交互示例
多模态输入:一个创作流程,多种输入方式 · Mootion

07 / AI 辅助写作

AI 辅助脚本编辑

在生成视频之前,先完善源内容。

  • 可编辑的创作起点将粘贴或上传的源内容转为可编辑脚本,让用户在生成开始前进行调整。
  • 自然语言与快捷操作用户可以用自然语言描述修改,也可以使用改写、精简、扩写和自定义等快捷操作。
  • 在创作流程中编辑将编辑融入创作流程,让用户在进入后续生成阶段前充分完善内容。
AI 辅助脚本编辑的产品界面与交互示例
AI 辅助脚本编辑 · Mootion

08 / 精确图像编辑

基于区域选择的 AI 图像编辑

将 AI 能力与精确的用户控制结合。

  • 明确编辑范围让用户涂选需要 AI 修改的精确区域,同时保留图像的其他部分。
  • 一致的编辑模式在统一的交互模式下,将不同编辑意图对应到合适的 AI 能力。
  • 精确控制结合模型能力与用户的精确控制,减少图像中非预期的变化。
基于区域选择的 AI 图像编辑的产品界面与交互示例
基于区域选择的 AI 图像编辑 · Mootion

09 / 国际化

从右到左(RTL)与文化适配

根据语言习惯与文化语境调整产品体验。

  • 从右到左的交互针对从右到左的语言,适配导航、对齐方式与内容流向。
  • 符合语言习惯的输出依据不同语言的表达习惯校验大语言模型生成的内容,超越逐字翻译。
  • 文化表达扩展角色和视觉预设,使内容更贴合不同地区与文化语境。
  • 敏感视觉内容的保护机制针对涉及文化或宗教敏感性的视觉生成,引入相应的保护机制。
从右到左(RTL)与文化适配的产品界面与交互示例
从右到左(RTL)与文化适配 · Mootion

10 / 国际化

多语言字幕系统

保障不同文字系统及双语内容的可读性。

  • 适配语言的字体排版为不同语言定义字体排版与字幕预设,保障跨文字系统的阅读体验。
  • 双语内容为多语言内容提供双语字幕布局。
  • 强调与可读性提供可选的动画与逐词高亮,强化重点并提升可读性。
  • 可复用的素材库将字幕素材组织为可复用的资源库,为本地化提供可扩展的基础,同时保持核心工作流程连贯。
多语言字幕系统的产品界面与交互示例
多语言字幕系统 · Mootion

11 / 国际化

配音与背景音乐

让本地化音频选项更易发现和比较。

  • 便于浏览的声音预设按语言、口音、语气和角色特征组织声音预设,便于快速浏览和比较本地化配音。
  • 统一的音频控制在同一创作环境中提供配音与音频控制,减少上下文切换。
  • 支持持续扩展让素材体系能够兼容标准与高级选项,同时保持核心交互模式一致。
  • 连贯的音频工作流在同一面板内支持音频预设选择,将本地化配音与配乐选择融入一个流程。
配音与背景音乐的产品界面与交互示例
配音与背景音乐 · Mootion

12 / 国际化

自适应落地页本地化

面向英语、日语、简体中文和繁体中文适配文案与布局。

  • 本地化标题结构根据英语、日语、简体中文和繁体中文的表达方式调整标题结构,避免逐字翻译。
  • 一致的视觉层级兼顾语序、文本长度与换行差异,同时保持一致的视觉层级。
  • 灵活的布局规则通过灵活的布局,让想法、脚本、录音等动态概念自然适配不同语言。
自适应落地页本地化的产品界面与交互示例
自适应落地页本地化 · Mootion

13 / 跨平台设计系统

跨平台设计系统

在不同产品界面、交互状态与反馈模式之间建立一致性。

  • 共享的设计基础建立统一的设计系统,保持不同产品界面、交互状态与反馈模式的一致性。
  • 可复用组件标准化导航、按钮、输入框、浮层、加载、错误和促销状态等可复用组件。
  • 响应式规范定义响应式行为与实现规范,减少设计与工程实现之间的偏差。
跨平台设计系统的产品界面与交互示例
跨平台设计系统 · Mootion

14 / 首次使用体验

首次使用体验设计

为新用户提供清晰的创作起点。

  • 明确的第一步提供清晰的主要操作与示例提示词,让首次使用的用户无需了解全部产品即可开始创作。
  • 渐进式发现逐步展示常用场景与 AI 工具,平衡能力发现与认知负担。
  • 持续使用的工作台保持最近项目可见,让同一工作台自然服务首次使用和回访用户。
首次使用体验设计的产品界面与交互示例
首次使用体验设计 · Mootion

15 / 空状态与错误状态

空状态与错误状态

说明发生了什么,并提供清晰的下一步。

  • 明确的下一步通过错误状态解释当前情况,并始终提供清晰的后续操作。
  • 直接的恢复路径让用户可以直接创建项目、返回首页,或使用建议提示词继续创作。
  • 轻量引导将空状态转化为轻量的上手引导,提供建议提示词或创作入口。
空状态与错误状态的产品界面与交互示例
空状态与错误状态 · Mootion
Lina Dong

Lina Dong

AI 可以有不确定性,
体验不应让人难以预料。

设计细节

放大查看细节 · 按 Esc 关闭