Hi, I’m Dana, a UI/UX designer who creates clean, intuitive, and human-centered digital experiences.

Let's go
Dana portrait

我是一名产品设计师,关注 AI 产品、创作工具与复杂工作流体验设计。过去的项目中,我参与了从用户引导、信息架构、内容节点、Agent 工作流到视频社区体验的多类设计,擅长把复杂功能转化为清晰、可理解、可落地的产品体验。我习惯从用户任务和业务目标出发,通过调研、原型与持续迭代,推动设计方案在真实产品中产生价值。

工作经历

TapNow AI / 产品设计师 安克创新科技股份有限公司 / UIUX设计师(实习) 深圳市一群科技有限公司 / 游戏UI设计师

教育经历

北师香港浸会大学 / 传播学-互动媒体 / 硕士 广东药科大学 / 数字媒体技术 / 本科
Tapnow.ai portfolio page
View detail
TapNow project hero

TapNow

AI 创意导演画布

TapNow 是一款面向创意导演与创意团队的 AI 创意画布。它将文本、图像、音频和视频等多模态 AI 能力整合到一个可视化工作空间中,让用户可以在画布上规划创意方向、调用不同模型与智能体、生成素材、编排内容,并持续迭代作品。从灵感探索到最终成片,TapNow 让创意生产更像一次清晰、可控、可协作的导演流程。
English Title: AI Creative Director Canvas

我的角色

产品设计师
UI/UX设计师

就职时长

2025.09 - 至今

我的贡献

画布体验
分享与发布
社区体验
通知与账号
订阅页面
视觉系统

专注于

全链路体验分析
用户转化
复杂产品拆解
交互设计
视觉系统

体验地图

01

Agent 渗透率全链路提升

让 Agent 从可选工具,变成创作任务的自然起点

2026
02

文字节点体验优化

围绕输入、调整和创作,优化创作开头

2025/2026
03

画布历史与结果查看

重构生成结果的查看、筛选、复用与管理效率

2026
04

主体库交互与设计

将多模态素材沉淀为可复用的主体资产

2026

更多内容

01

Taptv社区与作品合集页优化

2026

从内容展示走向创作者主页、系列作品与社区互动

我将 TapTV 社区个人页从单纯的作品陈列,重新组织为创作者品牌空间:突出身份、代表作、合集结构和社区互动路径,让访问者更快理解创作者价值,也帮助创作者更好经营内容资产。这个项目体现了我对内容消费路径、社区产品结构、创作者运营和信息层级的综合判断。

02

Arena活动页面优化

2026

重构活动信息层级,并建立可复用的封面交付规范

我重构 Arena 活动页的信息层级,把活动主题、参与方式、规则说明、作品展示和结果反馈组织成更清晰的参与路径。同时,我把封面设计经验沉淀为可复用规范和预览校验流程,让内容团队可以稳定交付。这个项目体现了我的设计系统能力、跨团队协作能力和把设计经验工具化的落地意识。

03

多角度设计

2026

从0-1将模型参数转译成可视化交互

我从 0 到 1 将抽象的多角度模型参数转译成用户可以理解和操作的可视化交互,让用户不需要理解复杂模型概念,也能通过空间视角控制生成结果。这个项目体现了我把 AI 能力产品化的能力,包括参数转译、复杂交互设计、模型能力解释和高级创作工具体验设计。

04

消息系统优化

2025

梳理站内通知、任务反馈与状态触达路径

我在 MVP 阶段搭建 TapNow 站内信基础架构,将课程礼包、会员续费、扣费失败、活动通知和社区互动等分散业务,抽象为服务、活动、互动三层消息体系,在不打断画布创作的前提下建立可持续扩展的触达能力。这个项目体现了我的复杂业务拆解、信息架构、轻量化产品判断和系统扩展意识。

01Agent 渗透率全链路提升

一句话介绍项目

我围绕 TapNow Agent 渗透率提升,梳理了用户从 “看到 Agent” 到 “再次使用 Agent” 的完整路径,并设计首页动态 Suggestion、Agent 空态引导、老用户项目续接提示、升级召回和新模型任务建议,让 Agent 从一个可选工具,变成用户开始、推进和续接创作任务时更自然经过的路径。

Agent dialog interface

项目背景

当时 Agent 已经上线,也具备基础的任务执行能力,但它在产品里仍然更像一个「用户主动想起来才会打开」的工具。

所以这次需求的目标不是简单增加一个入口,而是提升 Agent 在创作路径里的渗透率:让用户在首页、画布、项目续接、新模型上线等关键场景里,都能看到一个更具体、可执行的任务起点。

所以这次需求表面上是 “提升 Agent 使用率”,但我把它进一步拆成了一个更完整的问题:如何让 Agent 更自然地渗透到用户的创作路径里,而不是只靠一个更明显的按钮获得一次点击。

为什么值得做?

核心目标是提升这条链路:

Agent adoption funnel from seeing Agent to reuse

这条链路里,每一步都代表用户和 Agent 的关系更进一步。用户看到入口只是第一步,真正重要的是他们有没有发送任务,任务有没有完成,结果有没有被采纳,以及后续是否愿意再次回来使用。因此,这个项目的核心目标不是制造一次性曝光,而是让 Agent 从「可选工具」逐渐变成用户创作过程里的稳定协作者。

目标用户

第一类是新用户。他们对产品和 Agent 都还不熟悉,最大的问题是 “ 不知道怎么开始 ” 。所以对新用户来说,我需要更强的引导,比如让首页从原来偏内容浏览和功能集合的页面,转向更明确的 Agent 起点,让用户一进入产品就能看到可以直接执行的创作任务。

第二类是老用户,尤其是已经习惯画布创作的用户。他们并不一定需要强行被拉进 Agent,而是需要更柔和、更有上下文的提示。对这类用户来说,Agent 不能显得像是在替代他们,而应该像是在理解他们当前项目、帮助他们继续推进。

所以新用户侧重 “ 强引导 ” ,老用户侧重 “ 软渗透 ” ,这个差异也影响了我后面的入口设计。

项目真正的挑战

难点在于 Agent 的使用率不是一个入口能解决的。如果我只是在页面上放一个更醒目的 Agent 按钮,可能会提升一部分打开率,但用户进入之后仍然不知道要说什么,也不一定会完成任务,更不一定会复用。所以我判断,这个项目真正要解决的是 “ 任务感 ” 的问题。用户看到的不能只是 Agent 这个工具,而应该是一个自己马上可以执行的创作建议。

设计方案

我的策略是:让 Agent 在不同创作阶段主动给出下一步任务。这样一来,Agent 不再只是一个等待用户主动打开的工具,而是能在用户需要开始、推进或续接项目时,主动提供下一步。

关键设计判断

因为我的目标不是让用户用一次,而是让用户开始习惯用 Agent。这也是我在这个项目里很重要的取舍:Agent 的语气必须是辅助型,而不是替代型。

01

首页动态 Suggestion,让用户更自然地进入 Agent

这一部分不是单纯视觉改版,而是首页角色的变化:从「内容展示页」变成「创作任务启动页」。

Before home screen

Before

原首页更像功能、模型发布和 Workflow 的集合页。用户能看到很多内容,但页面没有特别明确地告诉用户 “现在可以开始做什么”。

After

我把首页中心改成 Agent 输入框、动态 Suggestion 和最近项目续接任务,让用户一进入产品就能看到一个具体的创作任务起点。

After home screen
02

Agent 空态引导

这部分不是给 Agent 加装饰,而是解决用户第一次打开后「不知道该问什么」的问题。

Agent empty state before

Before

原 Agent 对话框并没有太多引导,用户看到下方 suggestion 不合心意就直接关闭,并未精准击中用户。

After

我尝试设计了一段动效,用来引导用户视线,并突出新版 Suggestion 的 Memory 能力:它能更精准地理解用户需求,给出更贴合当下情境的建议。

03

项目续接提示

对老用户来说,他们不一定会在每次回到项目时主动打开 Agent。尤其当 Agent 面板被关闭后,如果入口完全消失,用户就很容易回到原来的画布习惯里。

Project continuation suggestion

我设计了一个轻量的小气泡提示:当 Agent 被收起或关闭时,它仍然可以基于上一次创作内容给出续接建议,例如:我们上次创作了绿色氛围感图片,要继续生成图片吗? 这样 Agent 不再像一个临时聊天窗口,而更像一个能记得项目进度的协作者。它不是打断用户,而是在用户可能继续创作的时刻,用很轻的方式提醒下一步。

04

升级召回 & 新模型 Suggestion

这部分重点不是新功能内容本身,而是升级信息出现时的交互行为:怎样在不打断当前创作的前提下,把用户重新召回到 Agent。

Upgrade recall interface

我没有把升级做成一个静态通知,而是设计成一个有层次的召回浮层。 这个交互的重点是控制召回强度:它比普通 banner 更有存在感,但又保留 “稍后” 选项,不强迫用户立刻切换任务。对愿意尝试的用户,主按钮可以直接进入 Agent 的新能力路径;对暂时不想中断的用户,也可以先关闭,回到当前创作。

05

埋点验证体系

我为首页输入、首页 Suggestion、Agent 空态、项目续接和升级召回等入口补充 source 标记,追踪用户从曝光、点击、Agent 打开、任务发送、任务完成、结果采纳到再次使用的完整路径。

最终结果

对新用户来说,它降低了第一次使用 Agent 的门槛。用户不需要理解所有功能,也不需要自己想 prompt,只要看到一个合适的任务建议,就可以直接开始。

对老用户来说,它减少了打断感。Agent 不再是一个突然出现、要求用户切换工作方式的新工具,而是顺着他们已有项目给出下一步建议。

对产品来说,这套设计也更利于后续增长优化。每个入口都有 source 埋点,团队后续能继续判断哪个入口真正带来了任务发送、任务完成、结果采纳和再次使用。

02文字节点体验优化

一句话介绍项目

我负责 TapNow 画布内文字节点的体验重构,将它从一个偏「参数填写」的 Prompt 输入工具,重新定义为承载 Prompt、剧本、角色设定、创作说明和协作备注的内容节点,提升长文本创作与协作体验,并为后续 Agent Context Node 建立基础。

TapNow canvas text node interface

项目背景

当时文字节点在画布里并不是高频功能。大部分用户的创作路径仍然是「图片生成 → 视频生成」,图片承担主要表达,文字更多只是输入一句 Prompt。

但我没有把「使用率低」理解成「没有需求」。在调研中我发现,用户其实一直在写大量文字,只是没有写在画布里。他们会在 Notion 里写 Prompt、角色设定、故事脚本、修改意见、镜头说明和团队备注,再复制一部分内容回到画布。

所以真正的问题不是用户不需要长文本,而是画布里的文字节点太难用,导致创作上下文被拆散。团队成员打开画布时,只能看到图片和一段 Prompt,却不知道为什么这样生成、人物设定是什么、后续要改什么,以及这段 Prompt 为什么这样写。

TapNow text node context workflow on canvas

为什么值得做?

核心目标是推动文字节点从:

Prompt Input to Context Container

也就是说,它不应该只是一个短文本输入框,而应该成为画布里稳定承载创作上下文的节点。这条路径里,文字节点的价值会逐步从「输入一句 Prompt」扩展到「组织创作信息」:包括 Prompt、剧本、角色、镜头语言、修改要求、风格约束、团队备注和 Agent 需要理解的上下文。

目标用户

第一类是重度创作者。他们会写长 Prompt、剧本、角色设定和镜头说明,但原来的文字节点无法支撑长文本阅读和编辑,所以他们被迫在 Notion 等外部工具里完成真正的创作。

Heavy creator writing long-form prompts

第二类是团队协作用户。他们需要在画布里留下修改意见、创作原因和上下文备注,让其他成员理解作品背后的决策,而不是只看到最终生成结果。

Collaboration users reviewing creative notes

第三类是未来 Agent 用户。Agent 需要的不只是一句 Prompt,而是创作目标、人物设定、限制条件、团队备注、下一步任务等 Context。文字节点需要提前具备承载这些信息的能力。所以这个项目既服务当前的长文本创作,也为后续 Agent Context Node 做基础能力准备。

Future Agent user working with context

项目真正的挑战

难点不在于把输入框做大一点,而在于重新定义文字节点在 AI Canvas 里的产品角色。如果只是提高输入上限,用户虽然能写更多,但节点会越来越大,画布会越来越乱,长文本也依然不好读。如果直接做成 Notion 那样的文档编辑器,又会太重、太复杂,打断画布原本轻量、快速、可移动、可连接的创作节奏。所以我判断,这个项目真正要解决的是:如何既满足长文本创作,又保持画布节点轻量。

设计方案

我的策略是:保留 Canvas 的轻交互,同时增强文字节点的长文本体验。文字节点仍然应该能快速移动、连接和参与画布布局,但当用户需要写 Prompt、剧本、角色设定或协作备注时,它也要提供足够舒服的阅读和编辑空间。所以我没有把它改成一个完整文档工具,而是围绕节点状态、内容滚动、放大编辑和编辑触发方式,重新设计它在画布里的使用体验。

关键设计判断

因为 TapNow 的核心仍然是 Canvas。用户在画布里需要的是一种轻量的创作上下文,而不是跳出画布进入一个完整文档系统。文档模式虽然适合长文本,但会让用户离开画布的空间关系,也会削弱节点之间的连接感。所以这次设计的取舍是:让文字节点拥有更好的长文本能力,但仍然保持它作为画布节点的轻量感。

01

重构节点状态

这一部分不是单纯做视觉优化,而是减少文字节点在画布里的视觉干扰。

Text node hover selected and resize states

我重新设计了 Hover、Selected 和 Resize 状态。缩放控制默认隐藏,只有 Hover 到节点角落时才出现,让画布在浏览状态下更干净,也避免用户误以为文字节点一直处于可编辑或可调整状态。

02

增加节点内滚动

原来的问题是,文本一长,用户只能不断拉大节点才能阅读内容,最后画布布局会被长文本破坏。

Text node internal scrolling interaction

我为文字节点增加了内部滚动。节点大小负责画布布局,滚动负责内容浏览。这样用户可以在不打乱画布结构的前提下阅读长 Prompt、剧本和角色设定。

03

放大编辑模式

对于长 Prompt、剧本、角色设定这类内容,小节点内编辑并不舒服。

Expanded text editing mode

所以我设计了放大编辑模式,让用户在需要深度输入时获得更大的编辑空间。但它仍然保留画布上下文,不会像打开一个独立文档那样完全脱离 Canvas。

04

区分移动与编辑

画布里的文字节点有一个很容易被低估的问题:移动和编辑很容易互相误触。

之前用户拖动节点时可能进入编辑,想编辑文字时又可能移动节点。于是我重新定义了触发规则:单击用于选中和移动,双击进入编辑。这样文字节点在画布里既能作为可操作节点存在,也能在用户明确需要时进入编辑状态。

最终结果

Soft flowers for creator outcome

对创作者来说,它让长 Prompt、剧本和角色设定可以留在画布里,而不是被迫拆到 Notion 等外部工具中。

Water flower for collaboration outcome

对协作来说,它让团队成员能直接在画布里理解创作原因、修改方向和上下文信息,而不是只看到孤立的生成结果。

Moon reflection for future product outcome

对产品未来来说,它把文字节点从 Prompt Input 推向 Context Container,为后续 Agent Context Node、Agent Memory 和多模态生成工作流打下了基础。

项目总结

这个项目体现的不只是交互细节优化,而是我对 AI Canvas 产品形态的重新判断。我没有停留在「优化输入框」,而是通过用户调研、反馈整理、竞品分析和模型趋势判断,发现文字会在未来多模态创作和 Agent 工作流里承担更重要的控制信息。最终,这次重构让文字节点从一个低频、轻量的输入工具,变成了可以承载 Prompt、Character、Story、Goal、Constraint、Notes 和 Agent Context 的创作内容节点。

03画布历史与结果查看

一句话介绍项目

我负责 AI 创作画布中节点堆叠能力的交互设计。针对用户连续生成图片、视频、音频和文字后,画布节点快速增长、视觉空间拥挤,以及原有“节点—变体—历史”结构理解成本较高的问题,我设计了一套“独立节点 + 视觉堆叠”的内容组织方式。

Soft floral canvas stack overview

项目背景

AI Canvas 的内容生成速度,远高于用户整理内容的速度。

用户每完成一次图片、视频或内容迭代,画布上都会增加新的节点。随着创作持续进行,用户需要频繁缩放、拖动和寻找内容,画布逐渐失去可读性。

与此同时,原有生产节点同时承载多变体和多历史,用户需要理解“节点—变体—历史”的多层关系,内容管理成本较高。

所以,这个项目要解决的不只是节点太多、画布太乱,而是如何重新组织大量生成内容,同时不破坏用户已有的创作关系。

Canvas stack background with grouped image variants

为什么值得做?

AI 工具会快速产生大量中间结果和候选方案,这些内容既不能简单删除,也不能一直平铺在画布上。随着生成能力变强,真正重要的不只是继续生成,而是帮助用户重新组织、保留和理解创作过程。因此,节点堆叠并不是单纯的视觉优化,而是在补足 AI Canvas 的内容管理能力。

项目真正的挑战

这个项目表面上是把多个节点叠在一起,但真正困难的是如何只改变视觉结构,不改变节点逻辑。因为每个节点背后都可能包含生成参数、PIN 和状态、上下游连线、历史数据和原有空间位置。用户必须始终确认内容没有丢失、连线没有变化、参数没有被修改、解散后可以恢复,并且整理操作不会触发生成。所以我为这个项目建立了一个核心原则:视觉可以变化,节点逻辑不能变化。

关键设计判断

Preserve Logic:保留节点数据、参数、PIN 和连线。堆叠是一种视觉整理行为,而不是节点合并。

Keep It Reversible:创建、拖入、拖出和解散都可以恢复或撤销,让用户放心整理内容。

Make State Visible:通过磁吸、高亮、数量变化和动画,让状态变化清晰可感知,减少拖拽误操作。

基于这个定义,每个内容仍然是独立节点。堆叠只改变它们的展示方式,用户可以随时展开、移入、移出或解散。

设计方案

我的方案围绕堆叠完整生命周期展开:从多选创建,到收起识别、展开聚焦、拖入拖出,再到解散和位置恢复。重点不是做一个好看的叠放样式,而是让用户在整理大量节点时始终知道内容在哪里、关系是否保留、操作是否可逆。

01

创建堆叠

用户多选两个及以上节点后,通过批量工具栏创建堆叠。

Canvas nodes selected and gathered into a stack

节点通过收拢动画移动到统一锚点,创建完成后保持选中状态。这里的动画不是装饰,而是在表达节点没有消失,只是被整理到了一起。

02

收起态

收起后的堆叠保留顶层封面、多层叠放效果、悬停、选中和展开入口。

Collapsed canvas stack with layered cards

我没有把它设计成一个完全抽象的文件夹。顶层封面帮助识别内容,多层卡片强调这里是一组独立节点,而不是一个新节点。

03

展开态

用户单击进入 Stack Focus Mode,只查看当前堆叠里的内容,其他画布节点暂时隐藏。

Expanded stack focus mode with canvas nodes

用户可以在里面浏览、预览和拖入拖出节点,并通过返回、点击空白或 Esc 退出。退出后,恢复原来的画布缩放和视口位置。

04

拖入与拖出

拖入被拆成接近、进入吸附范围、吸附完成三个阶段。

Drag in and drag out stack interaction

当节点进入有效范围后,堆叠会出现高亮、占位或数量变化反馈,松手后通过磁吸动画进入堆叠。拖出时同样明确显示移出堆叠状态,让用户区分普通移动和修改节点归属。

05

解散与位置恢复

用户解散堆叠后,节点优先恢复原有相对位置。

Dissolve stack and restore canvas node positions

如果堆叠已经被整体移动,解散时以移动后的锚点为基准恢复布局;如果目标区域存在占位冲突,系统自动计算无重叠位置。

边界设计

为了避免堆叠再次形成复杂层级,我限制了堆叠不能拖入另一个堆叠、两个堆叠不能直接合并,也不支持嵌套堆叠。因为项目本身就是为了降低“节点—变体—历史”的多层心智,如果允许无限嵌套,只会重新制造新的复杂结构。同时,只剩一个节点时自动解散,所有整理操作不触发生成任务,连线关系始终保留,收起时弱化连线,悬停或选中时再强调,旧历史数据也不会在未经确认的情况下自动转换。

最终结果

最终,我完成了一套覆盖创建、收起、展开、拖入拖出与解散恢复的堆叠方案,让堆叠从视觉样式变成可逆、可理解的内容组织机制,也为后续管理更多创作资产提供统一基础。

Canvas stack final result overview

项目总结

这个项目体现了产品定义能力、复杂交互设计能力、系统设计能力、信息架构能力和可逆设计能力。我先定义“堆叠是视觉整理,而不是数据合并”,再由这个定义推导创建、展开、拖入、拖出、移动、解散、撤销、连线、历史数据、位置恢复、嵌套限制和自动解散等完整规则,让用户可以放心整理,而不必担心破坏原有内容和创作关系。

04主体库交互与设计

一句话介绍项目

我负责 AI 多模态主体库 Element 的整体交互设计、信息架构和关键流程设计,将图片、视频、音频及文本描述封装为可长期管理、可搜索、可复用的主体资产,让用户在视频创作中实现一次创建、多次调用。

Element library overview on TapNow canvas

项目背景

随着 Seedance 2.5 支持多模态 Reference,用户在视频创作过程中需要频繁复用人物、场景、物体等主体信息。

但原有产品中所有参考素材均以单文件形式管理,每次生成都需要重新添加图片、视频、音频及描述,不仅操作成本高,也无法保证生成结果的一致性。

因此团队决定设计 Element 主体库,将多模态素材封装为一个主体资产,并兼容不同模型的能力差异。该项目围绕主体创建、管理、调用及模型兼容策略进行了完整设计。

Element grouping workflow in TapNow canvas

项目真正的挑战

这个项目最大的难点,是如何在支持复杂多模态主体的同时,不增加用户学习成本。传统素材库只管理单个文件,而主体库需要管理一个对象:它可能同时包含图片、视频、音频和文本描述,还要支持长期维护、编辑、搜索、复用和多模型兼容。如果直接暴露全部素材能力和模型限制,创建流程会变得非常复杂。所以我把问题定义为:高复杂系统,如何保持低认知成本。

为什么值得做?

Element 不只是素材管理能力,而是 AI 视频创作中的主体资产基础设施。它把用户反复上传和描述的参考信息沉淀为可复用对象,让角色、场景、物体和风格可以跨生成任务持续调用,从而降低生成准备成本,并提升结果一致性。这个项目真正的价值,是把创作流程从文件复用升级为主体复用。

TapNow canvas workflow showing element reference composition

关键设计判断

Progressive Disclosure:用户先看到创建、编辑、删除和搜索,复杂的多媒体与模型兼容放到后续流程中。

Element grid view using familiar Library interactions

Mental Model:复用已有 Library 的 Rename、Delete、Hover、More Menu、Search 和 Folder 交互,减少重新学习。

Element entry in the existing Library information architecture

Object-oriented Design:把文件升级为主体,让 AI Workflow 围绕角色、场景、物体和风格展开。

Element entry as a reusable subject asset in Library

基于这个判断,我没有让创建阶段受老模型限制,而是将主体定义为模型无关资产,在调用阶段再进行模型适配,V1 优先保证 Seedance 2.5 的 PMF 场景。

设计方案

整个方案围绕主体资产的完整生命周期展开:从 Library 信息架构,到主体创建、素材管理、Prompt 调用,再到多模型兼容。

Element lifecycle from Library architecture to subject workflows and multi-model compatibility
01

重构信息架构

在 Library 中新增 Element 一级入口,并支持 Grid View 和 List View。

Element Library grid and list view information architecture

Element 与 Favorite、Folder、Character 等模块保持一致,让用户把它理解为 Library 里的新资产类型,而不是一个需要重新学习的新系统。

02

设计主体创建流程

用户可以从 Library 创建,也可以框选节点直接创建。

Element creation from Library or selected canvas nodes

创建过程中,左侧固定 Element 编辑面板,右侧继续浏览画布素材。用户无需退出当前创作流程,就可以完成主体沉淀,符合 Create once, use everywhere 的使用方式。

03

统一多模态素材管理

一个主体可能包含图片、视频、音频和文本。

Element media management panel with images video audio and text assets

我没有采用四块独立区域,而是设计统一 Media Card,支持上传、从 Canvas 添加、删除、Hover Preview 和 Drag 排序,让不同媒体保持一致交互。

04

设计主体调用

在 Prompt Area 新增 Element Button 和主体快捷面板。

Element invocation from the Prompt Area with selected subject chips

用户可以新建主体、编辑主体、多选主体并 Apply,系统自动插入 Prompt,而不是让用户反复上传几十张参考图片。

边界设计

为了避免产品能力一直受最低模型限制,我将主体资产与模型调用分离:创建阶段不受老模型限制,主体本身作为模型无关资产长期保存;调用阶段再根据当前模型做适配、自动降级或限制使用。这样 V1 可以优先服务 Seedance 2.5,同时为后续模型能力扩展保留空间。

最终结果

Soft blue flowers behind frosted glass

完成主体库 V1 的完整方案,覆盖 Library 信息架构、Grid/List View、主体创建、主体编辑和 Hover Preview。

Soft blurred floral stems on a white background

将主体创建、管理与 Prompt 调用串联成闭环,让用户能在创作过程中沉淀并复用资产。

Soft diffused light through tree leaves

设计多模型兼容和可见自动降级策略,在保证生成成功率的同时增强用户对系统行为的理解。

项目总结

这个项目让我从单个页面和单个交互,进一步站到产品体系层面思考资产管理、模型能力、跨页面流程和信息架构。真正复杂的不是功能本身,而是如何把复杂能力包装成用户几乎无需思考就能使用的体验。

05Taptv社区与作品合集页优化

一句话介绍项目

我主导了 TapTV 创作者个人页 0-1 的产品设计,围绕创作者身份、社区影响力、代表作品与系列内容资产,重新搭建创作者主页的信息架构,帮助创作者建立长期经营的个人品牌,同时提升访问者对创作者价值的理解和内容消费效率。

图片占位

项目背景

当时 TapTV 正在从单一视频消费平台,逐步向创作者社区演进。但平台里还缺少一个统一的创作者主页。

用户如果对某个创作者感兴趣,只能通过视频详情页、作品列表或零散信息去判断这个人是谁、擅长什么、是否值得关注,以及有没有更多同类型作品。

这导致创作者价值被分散在不同页面里,无法形成长期积累的内容资产,也很难建立稳定的关注关系。

所以这个项目表面上是在做一个个人主页,但我理解它真正要解决的是:如何让创作者在 TapTV 内拥有一个可长期经营的身份入口。

为什么值得做?

核心目标是让创作者主页从:

作品列表
创作者品牌空间

它不只是把视频集中展示出来,而是要帮助访问者完成一条更完整的判断链路:认识创作者 → 建立信任 → 浏览内容 → 关注创作者。

所以我把这个页面定义为创作者在平台内的长期资产入口,而不是一个简单的资料页。

目标用户

第一类是创作者。他们希望主页可以长期经营,需要编辑个人资料、展示专业身份、管理代表作品、创建系列合集,并持续沉淀自己的个人品牌。

图片占位

第二类是访问者。他们进入个人页时,并不想阅读大量资料,而是希望快速判断这个人是谁、是否专业、是否值得关注,以及有没有值得继续看的内容。

图片占位

所以这个项目的关键不是单独满足某一类用户,而是平衡创作者的经营需求和访问者的浏览效率。

项目真正的挑战

难点不是设计一个好看的个人主页,而是处理「身份表达」和「内容消费」之间的关系。如果页面把所有信息全部平铺,个人页就会退化成普通的视频列表,创作者的身份价值无法被建立。但如果过度强调个人介绍,又会降低访问者继续看作品的效率。所以我判断,这个项目真正要解决的是:如何让用户先快速认识创作者,再建立信任,最后自然进入内容消费。

设计方案

我的策略是按照访问者的决策顺序重新组织信息架构。第一层是 Identity,解决「他是谁」的问题,包括 Banner、Avatar、昵称、简介、认证、职业、地区和社交媒体。第二层是 Authority,解决「他是否值得相信」的问题,包括 Followers、Following、Stars、荣誉和 Achievement,用社区影响力帮助用户建立信任。第三层是 Content Assets,解决「我还能继续看什么」的问题。这里我没有把所有内容混成一个列表,而是拆成 Creations 和 Collections 两个层级。

图片占位

关键设计判断

因为它们在用户心智里承担的任务不一样。Creations 解决的是「我现在看哪一个作品」。Collections 解决的是「这个创作者有没有持续输出的内容方向」。如果把作品和合集混排,用户会很难判断哪些是单个内容,哪些是系列资产,也会削弱创作者长期经营的价值。所以我采用双 Tab 结构,让 Creations 用于浏览具体作品,Collections 用于组织系列内容,降低访问者的认知成本。

01

创作者身份区

我设计了顶部 Banner 与创作者名片,将头像、昵称、简介、关注按钮、分享入口、粉丝数据、荣誉以及社交链接整合为统一的身份展示区域。

图片占位

访问者进入页面后,可以在第一屏完成对创作者身份和影响力的快速判断,而不是先陷入大量作品列表里。

02

资料编辑能力

我补充了完整的资料编辑入口,包括名称、简介、身份、所在地、社交媒体和加入时间。

图片占位

这部分的目标不是增加填写负担,而是让创作者有能力持续完善自己的主页,使个人页从一次性资料展示,变成可以长期维护的品牌资产。

03

Creations / Collections 内容架构

内容区采用 Creations 和 Collections 双 Tab。

图片占位

Creations 用于承载具体作品浏览,支持画布等属性筛选,帮助访问者快速找到想看的内容。Collections 用于承载系列内容组织,帮助创作者把分散作品沉淀成更清晰的主题资产。

04

Collections 生命周期设计

我进一步设计了合集的完整生命周期:创建 → 上传封面 → 填写标题 → 添加作品 → 编辑 → 排序 → 删除作品 → 持续维护。

图片占位

同时,我允许仅包含一个作品也可以创建合集,降低创作者的使用门槛。封面默认同步首个作品,也支持后续自定义调整,让创作者既能快速创建,也能持续优化展示效果。

05

代表作品机制

我新增了代表作置顶能力,让创作者可以主动决定希望访问者第一眼看到什么。

图片占位

代表作既可以是单个作品,也可以是合集。置顶内容只影响主页展示顺序,不改变它在 Creations 或 Collections 中的原始位置,从而保证内容资产结构的稳定性。

最终结果

图片占位

对访问者来说,它让个人主页的浏览路径更清晰:先认识创作者,再建立信任,最后进入内容消费和关注决策。

图片占位

对创作者来说,主页不再只是资料页,而是一个可以持续经营的品牌空间,可以沉淀身份、影响力、代表作和系列内容资产。

图片占位

对平台来说,这套设计为后续创作者生态建设提供了统一的个人主页基础,也让关注转化、内容消费和创作者运营有了更稳定的承载场景。

项目总结

这个项目体现的不只是页面设计能力,而是我从业务目标出发搭建创作者主页体系的 0-1 产品设计能力。我通过身份、影响力和内容资产三个层级重新组织信息架构,同时平衡创作者和访问者两类用户的不同目标。最终,这个项目完成了创作者名片、Banner 展示、资料编辑、社区影响力展示、荣誉成就、代表作品机制、Creations / Collections 双层内容架构,以及 Collections 创建、编辑、排序和维护流程,为 TapTV 的创作者社区建设打下了基础。

06Arena活动页面优化

一句话介绍项目

我主导了 Arena 活动页的整体改版,不仅重新设计了活动页的信息架构,也建立了一套覆盖首页 16:9 活动封面和详情页 21:9 Banner 的设计规范,并结合预览工具,把规范真正落地到内容团队的日常工作流中。

图片占位

项目背景

Arena 是一个持续运营的平台,每个月都会上线新的活动,因此活动页和封面会频繁更新。

首先,活动页的信息组织比较混乱。Banner、活动规则、奖励、作品展示等内容都堆在同一个页面里,规则以长文本形式呈现,用户需要不断滚动才能找到关键信息,阅读成本很高。

其次,活动封面的质量非常不统一。不同活动由不同内容同学制作,有的封面像宣传海报,有的像信息长图,大量奖金额、时间、规则直接放进图片里,而这些信息又会被页面 UI 再展示一次,造成信息重复、视觉拥挤,甚至被按钮和标题遮挡。

更大的问题在于,封面本身没有统一标准。当活动时间、奖励金额或多语言文案发生变化时,只能重新修改图片,不仅返工成本高,也影响运营效率。所以我认为,这并不是一个简单的页面改版,而是需要重新梳理页面信息表达和内容生产流程。

项目真正的挑战

我觉得最大的挑战不是设计一个新的页面,而是建立一套能够长期运行的设计系统。Arena 的活动会持续更新,封面也会由不同成员不断制作。如果只是设计一版页面,而没有规范,后续还是会不断出现新的问题。因此,我需要同时解决两个问题:用户如何更快理解活动信息,以及不同团队如何稳定地生产符合要求的活动封面,而不是每一次都依赖设计师人工审核。也就是说,这个项目真正难的是把设计经验沉淀成一套可复用、可执行的标准。

设计方案

在分析过程中,我把问题拆成了两条主线。

页面信息架构
封面职责定义

第一条是页面的信息架构。我重新梳理了用户进入活动页后的阅读路径,把活动内容按照用户完成任务的流程进行组织,而不是按照运营提供的内容顺序进行排列。因此,我将页面拆分成 Banner、Theme、Terms、Projects、Winners 等几个独立模块,让用户能够快速找到活动主题、参与方式、规则、作品展示以及最终结果。

第二条是封面的职责。我重新定义了封面和页面 UI 的分工。封面的职责应该是吸引用户点击、建立活动氛围和形成视觉记忆,而所有会变化的信息,例如时间、奖励、报名方式、规则等,都应该交给页面 UI 展示。这样不仅信息表达更清晰,也避免后续活动更新时频繁修改图片。

01

活动页信息架构重构

我重新设计了 Arena 活动页的信息架构,把原本长文本式的页面拆成多个功能模块,建立更符合浏览习惯的信息层级。

图片占位

页面从信息堆叠变成围绕用户参与路径组织,让用户更快理解活动主题、参与方式、规则、作品展示和最终结果。

02

首页 16:9 活动封面规范

我建立了首页 16:9 活动封面规范,明确主体、安全区以及 UI 遮挡区域。

图片占位

规范规定哪些内容应该保留在封面,哪些信息应该交给页面 UI,避免奖金额、时间、规则等信息重复出现在图片里。

03

详情页 21:9 Banner 规范

我针对详情页建立了 21:9 Banner 规范。

图片占位

由于首页和详情页承担的职责不同,我分别定义了不同的视觉布局和安全区,让同一个活动能够适配两个不同场景,而不是简单裁切同一张图片。

04

封面视觉规范与检查清单

我沉淀了一套完整的封面视觉规范,包括推荐使用的视觉元素、不建议放入图片的信息、品牌元素、Logo 使用方式以及检查清单。

图片占位

这样内容团队能够按照统一标准制作封面,而不是依赖设计师逐张审核。

05

封面预览工具落地

为了让规范真正落地,我利用 Vibe Coding 开发了一个封面预览工具。

图片占位

内容团队可以直接查看封面在首页和详情页中的实际展示效果,检查是否存在 UI 遮挡、安全区冲突或可读性问题,把原来的经验判断变成标准化的校验流程。

最终结果

图片占位

对于用户来说,活动信息更加清晰,能够更快理解活动主题、规则和参与方式。

图片占位

对于内容团队来说,封面制作从过去依赖经验,变成了一套可复用、可校验、可持续维护的标准流程。

图片占位

通过预览工具,规范真正融入日常工作流,提升了跨团队协作的效率和交付稳定性。

项目总结

这个项目体现了信息架构能力、设计系统能力、跨团队协作能力和工具化思维。我不仅重新组织复杂内容,让用户更高效地获取信息,也建立了跨页面、多比例的视觉规范,并把设计经验沉淀成内容团队能够直接执行的标准。通过预览工具,我进一步将设计规范转化为可验证、可复用的工作流,而不仅仅停留在设计文档层面。

07多角度设计

一句话介绍项目

我负责 AI Canvas 中 Change Angle 功能的 0-1 产品设计。针对 Qwen 多角度生成模型参数抽象、用户难以理解模型能力,以及画布创作过程中缺少自然视角编辑方式的问题,我设计了一套基于画布工作流的视角调节能力,将模型参数转译为可直接操作的 3D 交互组件,让用户完成「选择图片 → 调整视角 → 生成新图」的完整创作流程。

图片占位

项目背景

AI 图片生成已经能够支持多角度重建,但底层能力仍然以模型参数的形式提供。例如 rotate_right_left、vertical_angle 和 move_forward。

这些参数虽然能够控制生成结果,却无法帮助普通用户理解调整一个参数到底会让图片发生什么变化。

与此同时,Change Angle 发生在 AI Canvas 的连续创作过程中。用户往往已经完成图片生成,并希望围绕当前图片继续探索新的视角,而不是重新进入一个独立编辑页面。

因此,这个项目需要解决的不只是如何让用户修改模型参数,而是如何把复杂的模型能力,转化为符合创作直觉的画布编辑能力。

为什么值得做?

多角度生成能够帮助用户快速获得新的构图、镜头和拍摄视角,是 AI 创作过程中非常重要的一类编辑能力。但模型能力越复杂,用户理解成本越高。如果仍然采用参数配置方式,大多数用户只能不断尝试:修改参数、Generate、查看结果、再调整参数。整个过程依赖大量试错,生成效率和创作体验都会受到影响。因此我认为:模型能力越强,设计越应该帮助用户建立结果预期,而不是增加参数学习成本。真正需要产品化的,不是参数,而是用户对于空间视角的理解。

图片占位

项目真正的挑战

这个项目表面上是给模型增加一个参数调节面板,但真正困难的是如何建立用户对于空间视角变化的心理模型。模型能够理解的是 Rotation、Tilt 和 Scale,而用户理解的是往左看一点、镜头抬高一点、离主体近一点。如果直接暴露参数,用户无法判断当前修改的是相机还是主体、图片最终会如何变化、多个参数之间是否存在影响。于是整个生成过程变成了不断试错。所以我为这个项目建立了一个核心原则:用户操作的是空间视角,而不是模型参数。

关键设计判断

Translate Technology:将模型参数转译为用户能够理解的创作语言。

图片占位

Direct Manipulation:优先让用户直接操作空间,而不是输入数值。

图片占位

Stay in Workflow:整个调整过程始终发生在画布中,不打断已有创作流程。

图片占位

基于这个定义,我把 Change Angle 定义为一种空间编辑能力,而不是参数配置能力。模型参数仍然存在,但它们只负责驱动模型;用户看到的,则是符合创作认知的空间操作方式。

设计方案

我的方案围绕画布里的完整生成链路展开:用户从图片节点进入 Change Angle,通过参数转译后的空间控件建立结果预期,完成视角调整后生成新图片节点,并保留与原图之间的连线关系。重点不是展示模型参数,而是让用户在创作流程中自然理解和操作空间视角。

图片占位
01

入口设计

用户选中图片节点后,可直接在 Toolbar 中进入 Change Angle。

图片占位

我没有将它设计成独立页面,而是作为图片编辑能力的一部分,让用户能够围绕当前图片继续创作。这样既减少页面切换,也保持了画布工作的连续性。

02

参数转译

模型内部使用 rotate_right_left、vertical_angle 和 move_forward,我重新组织为用户语言:Rotation、Tilt 和 Scale。

图片占位

同时保留 Wide-angle Lens 作为高级镜头能力。这里并不是简单修改命名,而是重新建立用户目标、空间操作和模型参数之间的映射关系。

03

空间交互设计

我将主要交互设计为一个可拖拽的 3D 控制组件。

图片占位

用户可以直接拖动立方体调整左右和上下视角,再配合滑杆完成精细调整。相比直接输入数值,这种方式能够帮助用户建立当前拖动方向与最终图片变化之间的对应关系。

04

生成流程

完成调整后,点击 Generate。

图片占位

系统不会覆盖原图,而是在画布中生成新的图片节点,并保留与原图之间的连线关系。这样用户能够明确知道当前结果来源于哪张图片,以及采用了哪一次角度调整。

05

重置与状态反馈

为了降低探索成本,我增加了 Reset 功能,帮助用户快速恢复默认参数。

图片占位

同时,对按钮状态、生成中状态和多语言提示进行了统一设计,确保不同语言环境下都具有一致的交互体验。

边界设计

为了保证整个能力符合画布工作流,我补充了以下边界规则:Generate 不覆盖原图,而是始终生成新的节点;调整参数不会修改原始图片数据;Reset 仅恢复当前调节参数,不影响历史结果;新节点继承原图上下文关系,保持连线可追溯;中、英、日三种语言保持统一的信息结构和交互表达。这些规则确保用户能够放心探索不同视角,而不会破坏已有创作内容。

最终结果

图片占位

最终,我完成了一套完整的 Change Angle 产品方案,包括 Toolbar 功能入口、参数产品化转译、3D 空间调节组件、滑杆精细控制、Reset 机制、Generate 生成链路、节点关系设计、多语言文案、状态反馈与异常处理。

图片占位

功能上线后,支撑了日均 1w+ 使用量,让原本偏底层的模型能力成为 AI Canvas 中可直接使用的标准图片编辑工具。

图片占位

它把原本只能通过技术参数驱动的 AI 能力,重新组织为符合用户创作习惯的交互方式,为后续更多 AI 编辑能力提供了统一的设计范式。

项目总结

这个项目体现了 0-1 产品定义能力、AI 能力产品化能力、复杂交互设计能力、画布产品思维和系统化设计能力。我从模型能力出发,重新定义用户可理解的第一版产品形态,将抽象参数转译为用户语言和空间交互,并围绕入口、调节、生成、节点关系、重置机制、多语言规范和边界规则,形成完整且可扩展的画布编辑方案。

08消息系统优化

一句话介绍项目

我基于 TapNow 的业务扩展需求,设计了站内信 MVP,将原本单一的 Reward 奖励通知,重构为可承载服务、活动和互动场景的消息系统,在不打断画布创作的前提下,建立一套可持续扩展的站内触达基础能力。

图片占位

项目背景

随着 TapNow 平台逐步引入影视飓风课程、会员订阅、社区活动及创作者运营等业务,原有通知能力已无法承载不断增长的消息触达需求。

此前通知入口仅包含 Reward 单一分类,主要用于 Tapies 奖励领取。随着课程礼包发放、会员续费提醒、扣费失败通知、官方活动、社区互动等场景不断增加,所有消息被集中放置在奖励通知中,导致用户难以判断消息的重要程度,也无法快速完成后续操作。

因此,我负责基于 PRD 设计 TapNow 站内信 MVP,希望在不打断创作体验的前提下,建立一套能够支持未来持续扩展的消息体系。

项目真正的挑战

本项目最大的挑战,并不是增加几个通知分类,而是在 MVP 阶段搭建一套能够长期演进的消息架构。课程礼包、会员续费、扣费失败、活动通知和社区互动背后的业务目标完全不同,如果继续沿用奖励通知的结构,不同业务只能不断新增特殊样式和入口,系统复杂度会持续增加,也会削弱用户对消息优先级的判断。与此同时,TapNow 的核心使用场景仍然是画布创作,任何通知设计都必须避免频繁打断用户当前任务。

为什么值得做?

通知系统不是单纯的信息展示页,而是业务触达、用户任务和产品节奏之间的连接层。它需要帮助用户快速区分消息重要程度、理解下一步操作,同时让课程转化、会员续费、权益通知、活动运营和社区互动能够复用统一结构。这个项目真正值得做的地方,是把零散业务消息抽象为一套稳定的站内触达框架,而不是继续为每个业务单独做入口。

图片占位

关键设计判断

从用户任务分类,而不是按照业务部门分类。

图片占位

奖励不是消息分类,而是消息详情中的附件能力。

图片占位

通知只负责触达和跳转,复杂业务状态交给对应业务页面处理。

图片占位

基于这个判断,我将消息体系拆成服务、活动、互动三类,让用户进入通知中心后,能先判断这是一条需要立即处理的消息、稍后参与的活动,还是社区互动反馈。

设计方案

整个 MVP 围绕三层信息架构展开,并通过列表、详情、状态边界和提醒策略共同支撑。

服务 System
活动 Events
互动 Social

服务用于处理与个人账号、权益相关的事务,例如课程礼包、订阅续费、扣费失败和权益到账;活动用于承载官方运营活动,例如社区赛事、活动邀请和奖励发放;互动用于呈现社区关系反馈,例如点赞、评论、关注、回复和 @。

01

重构通知信息架构

将原有单一奖励通知升级为服务、活动、互动三类消息体系。

图片占位

MVP 首期重点支持课程礼包、续费提醒、权益到账等服务类消息,同时提前预留活动与互动能力,避免后续业务重复改版。

02

建立列表概览 + 详情承载

列表负责快速浏览,详情页承载复杂业务说明。

图片占位

列表展示标题、摘要、时间、标签和未读状态;详情页承载完整正文、图片、CTA 按钮、跳转链接和奖励附件。这样既保证列表的信息密度,也让复杂业务拥有足够空间解释。

03

明确消息状态边界

梳理通知系统与业务系统之间的职责。

图片占位

例如点击更新支付方式即可将消息标记为已读,但是否真正完成支付,由支付页面负责判断;点击查看礼包表示完成消息阅读,礼包是否已领取或过期,则由礼包页面负责处理。

04

优化提醒策略

减少通知对画布创作的打扰。

图片占位

新消息仅更新铃铛角标,不主动弹出通知面板,不使用 Toast 强提醒,也不抢占当前焦点。当多个分类均存在未读消息时,默认优先展示服务类消息。

边界设计

为了保持 MVP 轻量,我没有把通知中心设计成复杂运营后台,也没有引入强实时推送和多层业务状态同步。通知系统只负责消息触达、阅读状态、基础分类和跳转承载;领取、支付、过期、权益生效等复杂判断交给对应业务页面处理。这样既降低系统耦合,也为后续运营后台、定向触达和创作者运营预留扩展空间。

最终结果

图片占位

完成 TapNow 站内信 MVP 整体方案,覆盖服务、活动、互动三层消息架构。

图片占位

建立通知列表与详情的信息分层、未读状态、消息生命周期、奖励附件和 CTA 跳转规范。

图片占位

为后续运营后台、社区互动、活动运营及创作者触达能力预留统一扩展框架。数据指标待上线后补充。

项目总结

这个项目体现了信息架构能力、MVP 产品思维、复杂业务拆解能力、增长与转化意识,以及系统化设计能力。我没有停留在设计一个通知页面,而是把课程、会员、活动和社区互动等分散场景抽象为一套可复用的消息基础框架,让 TapNow 能够在不打断创作体验的前提下持续扩展站内触达能力。