Product Experience Portfolio.
曾琰 · 资深产品体验设计师。深耕产品体验设计 10 年，3 年原生 AI 大模型产品设计经验， 对 C 端产品及模型工作流程有深度理解。
- Tencent · 元宝
- AI × Consumer
- Shenzhen · CN
Selected Work
精选作品
四个项目覆盖 AI 输出、录音链路、设计规范与跨领域体验。
Archive
历史作品
早期完整项目沉淀，保留从业务分析到视觉落地、数据复盘的全过程。
About
个人经历
腾讯
元宝产品部 - 高级产品体验设计师
近三年深耕元宝 APP（原生 AI 大模型产品）体验设计，近两年获两次五星员工荣誉。
- 元宝 APP：腾讯战略级 AI 产品（千万 DAU）。作为主设计师，对基础搜索及内容输出体验负责，深度了解 AI 大模型输出策略，并持续通过用户调研及数据分析等方式打磨方案、提升产品体验；同时负责 Pad、PC/Web 端适配工作。一年间，元宝 APP 日活上涨 48 倍，持续获得用户好评。
- 腾讯广告：致力于搭建广告主建站及私域流量工具，跟进广告主从建站到投放业务的全流程。主导设计互动广告模板，并对接供应商进行模板规范定义，引入模板 80+，助力广告主流程提效。
平安科技
智慧医疗事业部 - 视觉设计师
负责多款面向医疗机构及政府部门的项目，致力于各类中后台产品设计及流程提效。
- 公共卫生应急管理平台：疫情期间，作为 G 端设计团队负责人，带领小组支持疾控 Web 端、流行病上报 Pad 端、监管大屏等在内的产品设计。最终项目落地湖北省、广东珠海、四川成都等城市，进行定制化开发，总签单 1.8 亿元。
- 可视化图表工具：主导制定中后台设计规范，连接产品及开发同学建立可视化图表构建工具。工具上线后，落地民营医疗机构监管平台进行辅助搭建，该项目在广州及深圳试点，覆盖机构 900+。该工具帮助项目显著提效，交付周期缩短 30%。
房多多
产品研发部 - UI 设计师
负责房多多经纪人端及金融类产品设计，帮助经纪人解决报备带看、楼盘获客等问题。
- 经纪人端：负责日常迭代，帮助经纪人在线上进行获客、报备带看、佣金结算等操作；也负责经纪人端运营活动及节日海报、闪屏等设计。
- 多多金融：在主端产品内，为用户提供房抵贷、赎楼贷等多款金融产品。独立完成多多钱包、金融超市、贷款计算器等多款产品的体验设计。
Contact
联系方式
有产品思维的设计师，执着于用户体验打磨。
擅长 AI 产品体验、C 端及中后台、多端及多语言适配、视觉、交互、用研、动效与品牌相关工作。
01 / AI App
元宝App输出改版
这个案例按作品集原始画板顺序展开：先交代元宝产品定位、业务背景和目标确立， 再完整拆解方向一、方向二、方向三，以及效果验证和新功能上线流程。
项目开场
元宝被定义为“AI 伙伴”，不是单一问答入口
作品集先明确产品定位：元宝是腾讯基于混元大模型推出的原生 AI 应用。设计要处理的不是单个回答卡片，而是大模型能力、内容资源、服务跳转和用户真实意图之间的连接方式。
- 这页强调“2024 年中，元宝 App 正式上线”，项目发生在原生 AI 应用高速迭代的阶段。
- 页面中的绿色对话气泡把产品心智定在“陪伴和协助”，后续输出改版也围绕让用户更容易获得高质量内容展开。
- 因此网页开篇用这张图作为案例定位：输出改版的核心不是换样式，而是让 AI 伙伴更清楚地回应用户。
业务背景
从场景、能力和数据三端找到改版空间
业务背景页把问题拆成三层：场景复杂多样、特色能力待挖掘、用户数据待提升。它说明元宝面对的是搜索、内容消费、服务调用、生成创作等混合场景，不能只用一套固定回答样式承接所有问题。
- “场景复杂多样”意味着用户的提问类型很多，既可能直接要答案，也可能要图片、视频、商品、服务或后续操作。
- “特色能力待挖掘”对应腾讯生态资源和大模型能力的重新整合，输出体验要能承接这些能力。
- “用户数据待提升”把设计目标落到结果质量、使用留存和用户口碑上，推动改版从视觉优化转向产品能力及发现、营销挖掘。
体验目标
由产品策略、场景特点和业务指标共同推导目标
体验目标页把产品策略、场景特点、业务指标串成一条推导链。产品策略包括兼容竞品场景、挖掘特色能力、提升用户粘性；场景特点被总结为提问类型多样和内容诉求多样；业务指标指向提升优质生成内容使用率，以及提升用户留存和整体口碑。
- 目标不是“让页面更好看”，而是让用户轻松便捷地获得高质量内容。
- 这张图对应改版的上层判断：用户提问越复杂，输出就越需要能区分问题类型，并在不同类型下给不同呈现。
- 因此后续三条方向都围绕同一个目标服务：更准确、更可感知、更可继续使用。
产品理解
把“提问”与“回答”理解成双向、多场景、多类型的系统
产品理解页用两个大圆表达用户提问和模型回答之间的关系。用户侧是多场景提问，模型侧是多类型回答，中间通过提炼数据、信息供给和可判断内容完成转换。
- 提问侧包含搜索、写作、生成等不同入口，说明用户问题不是单一文本问答。
- 回答侧包含文字、图示、代码等多种输出形态，说明模型结果需要按内容类型进行展示。
- 这页最后追问“我们当前的回答效果如何”，引出后续通过用户反馈和数据确立改版目标。
目标确立
用反馈和耗时数据锁定“回答打断率降低”
改版目标页把用户反馈、界面对比和耗时数据放在一起：用户反馈指出内容不准、信息不足和不完整；数据侧展示文本首字平均耗时 17.1s、搜索首字平均耗时 12.6s。设计由此把目标收束为“内容准确清晰，回答打断率降低”。
- 问题一是不清晰：用户在回答里找不到明确重点，只能继续追问或放弃。
- 问题二是体感慢：生成过程缺少有效反馈，等待会被放大成焦虑。
- 问题三是不完整：用户拿到答案后缺少继续消费、核验和处理入口。
方向推导
把三个问题映射为三条设计方向
作品集把回答打断率降低拆解为三组 Problem 和 Solution：不清晰对应方向一，体感慢对应方向二，不完整对应方向三。这个总目录非常关键，当前网页必须完整承接三条方向。
- 方向一：优化输出结果，丰富内容，解决信息不清楚和内容单薄的问题。
- 方向二：优化输出过程，缓解焦虑，解决等待过程中缺少状态感的问题。
- 方向三：打通上下游，支持深度使用，解决回答后缺少进一步动作的问题。
方向一总览
从同一套框架改为按用户意图精准出答案
方向一首页指出 Before 的问题：常规搜索下，所有结果都采用同一套框架，回答内容被固定在“核心结论、结构化信息、细节解释、补充说明、内容操作”这些模块里。After 则拆解用户意图，按清晰意图、中间意图、模糊意图分别呈现。
- 清晰意图：用户直接明确说出需求，答案应简洁、直接命中，例如“蔡依林最新演唱会视频”。
- 中间意图：信息化内容本身是回答的重要部分，需要与文字共同满足需求，例如旅游路线、图片说明等。
- 模糊意图：文字已经能满足主需求，多模态内容作为潜在需求补充，例如“哈利波特一共有几部”。
1.1 清晰意图
明确搜索一类多模态内容时，直接给对应内容
清晰意图页聚焦“信息查找类需求”。当用户明确要搜图片、搜视频、搜服务时，结果不应先铺一段泛化解释，而应直接露出对应内容，并通过布局保证内容整体性和首屏效率。
- 搜图片：通过压缩内间距和整体包裹外圆角，突出图片结果的整体性，让用户一眼知道这些图属于同一组回答。
- 搜视频：作品集提到竖版视频占比高，多视频时采用竖版样式，单视频时展示视频原比例，避免为了统一卡片而牺牲视频内容。
- 搜服务：顶部展示信息卡片先解决用户首要矛盾；文中服务信息用高亮形式出现，给出跳转渠道；同时通过前方区分服务类型，辅助用户理解。
1.2 中间意图
图文并茂时，图片必须跟文字建立清晰对应关系
中间意图页处理的是“信息满足类需求”：图片不是独立素材，而是回答的一部分，或者是用户下一步需要的信息。因此图文混排必须服务阅读，而不是把图片塞进回答里。
- 图片与文字混排时出现在段落末尾，形成清晰的对应关系；上下间距通过 Markdown 规则处理，下间距大于上间距，让图片更贴近上一段关联内容。
- 图片吐出时跟随文字内容缩进，保持文本阅读路径连续，减少突然跳出的视觉割裂。
- 图片展示原比例，尽量避免裁切；同时限制图片召回比例范围在 9:16 到 16:9，避免出现展示异常的图片。
1.3 模糊意图
文字已满足需求时，多模态内容作为延展信息
模糊意图页说明：当文字回答已经满足主需求时，富信息化内容只作为补充信息出现。设计要避免喧宾夺主，同时让商品、来源、视频等信息在需要时可用。
- 商品字段：推动模型把重要信息用有序列表露出，并将重要信息加工展示，策略侧需要给到字段类型以便评测。
- 商品推荐：挂载在内容对应的单图后，便于用户对照图片和商品；宽度适应字段，同时露出来源图标，构建内容信任感。
- 视频推荐：视频放在内容最后，不干扰阅读；推荐单视频时展示原比例；点赞数大于 100 时外显，低数据外显会影响点击率。
卡片规范
把卡片交互和视觉形态沉淀为统一认知
方向一最后把多模态内容沉淀成卡片规范：制定输出卡片交互及视觉规范，让卡片融入回答形成一体，并在部门内宣贯，形成统一认知。
- 交互原则强调降低对文本阅读的干扰，多模态卡片建议在文字回答上方展示，以突出内容并减少正文中断。
- 卡片内只承载轻量交互，例如点击；复杂交互应放到二级页面，避免卡片本身变成难操作的小型应用。
- 视觉原则强调多模态卡片高度不超过 360px，卡片带有圆角，图文大卡优先与内容结合，并对基础字号和用色做约束。
方向二总览
把等待过程拆成可感知的生成链路
方向二首页从用户心智出发：“等这么久，到底在干啥。”After 方案不是简单换 loading，而是根据不同问题类型拆解模型生成链路，并在各环节露出有效信息。
- 搜索类问题拆成意图判断、搜索资料、找到资料、检索资料、下载资源、输出结果。
- 生成类问题拆成意图判断、理解需求、扩写提问、开始生成、下载资源、输出结果。
- 核心是让每个环节都有有效信息露出，从空白等待变成可理解的进度反馈。
2.1 搜索类输出一期
先按链路拆分生成环节，露出有效信息
一期方案把搜索类输出拆成多个节点：安全审核和意图判断、联网搜索、排序和 Prompt 拼接、从 LLM 结果中检索资源、检索到资源、资源依次加载、吐出全部内容。
- 画面中每一张手机对应一个等待阶段，底部还标出第一次等待平均耗时 3.5s、第二次 1.2s、第三次 2.6s。
- 问题是资源加载被拆得太碎，用户仍会感到“怎么还没加载完”。
- 这个阶段验证了“信息露出”方向有效，但还需要减少等待次数与分散感。
2.1 搜索类输出二期
把资源获取前置，并合并多次等待
二期将资源获取过程前置，同时细化资源获取环节，在每个环节保持有效信息露出，延缓用户焦虑。画板重点从“露出多个阶段”转向“合并等待感”。
- 找资料与加载资源被合并处理，减少用户感知到的等待次数。
- 资源提前下载，过去分散的多次等待被合并，整体生成过程更连续。
- 内容输出一气呵成，避免用户看到结果被频繁截断，降低无阻塞感。
搜索状态细节
意图识别和内容搜索分别给出状态反馈
状态优化页继续拆到微观层面。生成过程中持续给到动效反馈，让用户一直可以关注到重点，并感受到模型正在积极工作。
- 意图识别中：Before 只有简单加载动画；After 升级为加载动画、文字搭配扫光，并增加动态感。
- 内容搜索中：Before 只有文字展现；After 搭配动效、露出信源图标，并呈现实时间进度。
- 这些细节把“模型在工作”转化为用户可见的状态、数量和进展。
2.2 生成类输出 Before
无效信息外露会占用首屏，也会让等待更枯燥
生成类输出页先展示优化前链路：准备、出提示词、画图中、展示结果。问题在于用户在等待时看到大量与结果无关的中间文本，既占用首屏空间，也让等待过程显得干燥。
- 提示词扩写直接占据回答区域，用户会怀疑“这段话是干啥的”。
- 中间内容没有被收起，导致真正结果出现前，页面已有较多干扰信息。
- 画图阶段缺少更明确的处理进度和预期反馈，用户只能被动等待。
2.2 生成类输出 After
Prompt 扩写收起，让输出结果更专注
优化后把 Prompt 扩写等次要信息收起，输出结果更专注。页面通过文字透传处理进度、次要内容收起和加载动效，把用户注意力从“过程文本”转向“结果生成”。
- 准备阶段不再把全部扩写内容摊开，而是用较轻量的状态承接。
- 处理进度以底部面板形式展示，既能说明正在处理什么，又不会长期占据首屏。
- 画图中增加百分比和大面积生成占位，让用户知道结果正在形成。
生成状态细节
信息区分主次，动效制造惊喜感
生成状态页分别优化提示词和内容生成过程。它强调生成过程中信息要分主次，动效要既能反馈进度，也能让结果出现更有期待感。
- 提示词优化中：Before 提示词在正文中展示，干扰主要信息；After 弱化提示词，让它在卡片中滚动展示，并在高度过高后自动收起。
- 内容生成中：Before 是黑白加载占位；After 采用加载动效，增加期待感。
- 图片生成时的蓝色占位和进度百分比，帮助用户判断剩余等待和生成状态。
2.3 思考模式 Before
冗长思考过程暴露，首屏被占满且需滚动到末尾
思考模式的优化前问题是：深度思考过程完整外露，非常占用屏幕空间。虽然也可以收起，但用户仍需要频繁滚动才能看到答案尽头。
- 用户提问后，系统逐段吐出思考内容，首屏大多被中间过程占据。
- 真正结果在最后出现，用户必须等待并滚动，才能确认回答是否有价值。
- 这个问题直接影响长问题、复杂问题和任务模式下的使用体验。
2.3 思考模式 After
前置决策方向，阶段性步骤外露
优化后把方向性的重要决策前置，并把阶段性的关键步骤结果外露。用户在掌握处理方向后，再进入更细的搜索、分析和生成过程。
- 前期先展示“接下来要做什么”，让用户知道模型不是漫无目的地输出。
- 处理过程以分节点方式展开，包括确认需求、搜索资料、阅读资料、生成结果等。
- 每一步进度都尽量让用户可掌握，适合任务模式和复杂研究问题。
思考状态细节
重要节点外置，过程节点继续拆分
状态细节页进一步说明：生成过程中重要节点内容要外置展示，处理过程则拆分节点展示。这样既不丢失思考透明度，也不会让中间过程淹没最终答案。
- 重要节点外置：Before 进入思考节点不变，无法感知内容进度；After 把提示词内容弱化，超出后滚动，完成后自动收起。
- 处理过程拆分：Before 思考过程长篇大论，看不到重点；After 思考节点继续拆分，每一步都有迹可循。
- 结果生成更准确，因为用户能看到模型如何确认需求、检索资料、阅读资料和组织答案。
2.4 输出动效规则
用流式输出动效兼顾智能感和稳定性
输出动效规则页把“文字怎么出现”写成规则。设计并没有把动效当装饰，而是用它稳定用户对内容生成速度和阅读节奏的感知。
- 流式输出动画：模型吐字策略不做缓存，有多少出多少，保证吐字速度。
- 文字出现时做渐显动效，透明度从 0 到 1，动效时长 0.2s；若后端下发成段文字，则整段一一起渐显，速度同样是 0.2s。
- 内容输出稳定：当文字吐出超出一屏高度时出现向下箭头，点击后滚动至最新文字；继续输出则回到流式规则。
2.5 触觉反馈
用不同震动强度让内容进度尽在掌握
持续触觉反馈页把生成过程拆成开始生成、搜索中或生成中、正文开始、正文结束四个触觉节点，用不同强度帮助用户感知关键阶段。
- 开始生成：轻震动一次，暗示进程已开始，触发强度为 Impact Light。
- 搜索中/生成中：不震动，避免持续处理过程造成打扰。
- 正文开始：连续震动三次，强力提醒用户注意，触发强度为 Impact Medium；正文结束：连续震动两次，类似“咚咚”表达完成，使用 Notification Feedback。
方向三总览
把提问、回答和消费串成深度使用链路
方向三首页用“提问、回答、消费”三个节点概括完整链路。回答不再是终点，而是把用户带到更深的服务、内容核验和后续处理。
- 提问阶段基于真实生活场景，例如查询、推荐、资料、服务等。
- 回答阶段满足内容信息和内容能力，需要准确、清晰、可判断。
- 消费阶段支持丰富使用场景与服务链路，结合腾讯生态拉开竞品差距。
3.1 下游服务
接入书影音等多类服务，打通服务链路
这页展示通过文首卡片和划线等入口，打通内外各类生态链路。服务类型包括图书、影视、音乐、地图、景点、购物等，让用户行为不局限在元宝端内，也可以基于搜索结果继续探索。
- 顶部卡片：取来源封面展示在内容顶部，既丰富回答内容，也可作为推荐结果集合，方便用户点击跳转。
- 跳转中间页：多渠道服务优先跳转集合页，集合页中露出平台信息，增加信任感，并根据跳转类型进行分组展示。
- 这类设计把“给一本书”升级为“给出可继续阅读、购买或了解的服务路径”。
3.2 内容可信度
把来源和思考过程都显性化，建立平台信任感
内容可信度页引用 Perplexity CEO 的观点：AI 时代有两个巨大体验创新，联网状态标注来源，让回答更可信；展示思考过程，让用户第一次看到 AI 是怎么想的。
- Before 仅露出信源序号，用户不知道来源质量，也难以判断回答是否可靠。
- After 露出权威信源图标和名称，让用户能识别来源并完成基础核验。
- 引文列表中露出权威标签、公众号阅读数等质量标签，内容按权威性排序，形成可验证的引用体系。
3.3 后续处理
生成内容继续支持处理、转发和下载
生成后续处理链路页把生成类内容继续往下延展，让结果更贴合用户使用场景。它分为图像提供处理入口，以及文件支持转发下载两类能力。
- 图像处理入口：在生成链路中提供图像处理入口，主动贴合用户场景，并降低内容处理门槛，提供多种优质风格，让用户一键继续生成。
- 文字类文件：写作、表格、试卷、代码等生成内容支持下载或转发，方便后续处理。
- 这页强调输出不只是展示，而是可以进入用户的二次处理和复用链路。
效果验证
改版后数据证明输出体验提升
效果验证页展示改版后的 APP 数据：生成打断率下降 33.3%，人均 Prompt 数提升 26.9%，整体七留提升 5.6%，用户日活提升 48 倍。
- 生成打断率下降说明回答表现和模型速度的优化，让用户更愿意等到结果。
- 人均 Prompt 数提升说明用户主动提问次数增加，反映内容质量和使用意愿提升。
- 作品集总结贡献：专注于 AI 大模型输出专项，围绕回答体验从交互、视觉、动效、触觉、多端适配、分类内容规范到模型和开发侧对接，完整实现方案。
上线流程
新能力从评测到灰度，再到全量与数据观察
新增功能上线流程页说明了 AI 产品能力的落地方式。它从提出新能力开始，经由评测方向、评测标准、用户盲测、核心指标达标、方案设计、开发、验收、预发、灰度和放量，最后持续观察线上数据。
- 前期会检验核心指标，例如内容得分、可用率、召回率、准确率等。
- 中期包含功能方案设计、功能开发、产设走查测试验收和功能上线预发，确保方案不是停在设计稿。
- 后期通过部门内灰度、司内灰度、司外放量、功能全量，持续观察点击 CTR、DAU 留存、性能 GSB、大盘数据、Token 资源等指标。
02 / AI Capability
原子能力AI录音笔
录音笔案例按作品集 10 张画板完整展开：从机会点、设计目标、产品框架，到录中、 录后、设置、随时记录、PC 端适配和后续数据表现。
把“录到声音”的工具，转化为可理解、可整理、可分享的内容生产链路。
项目概览
录音笔连接“好写、翻译、智能、总结”四类能力
封面页把 AI 录音笔定义为原子能力，而不是一个孤立工具。它承接传统工具 AI 化的趋势，将高保真录音、实时转写、多语言翻译、会议总结等能力包装在同一条记录链路里。
- 画面右侧手机展示了录音波形、实时转写和 AI 总结，说明产品既关注录中状态，也关注录后整理。
- 页脚描述了设计师参与从设计、产品、体验到技术协同的完整过程。
- 这个项目的核心价值是把“录到声音”升级为“得到可理解、可整理、可分享的内容”。
机会点
在真实录音场景、用户痛点和已有能力之间找到交集
机会点页把“场景洞察”拆成录音场景、用户痛点、已有能力三块。它不是凭空做一个录音工具，而是把真实场景里的整理负担和已有 AI 能力进行匹配。
- 录音场景包括线下会议、事务讨论、跨语种场合、事件留痕，说明用户经常处在信息密度高、后续需要回看的场合。
- 用户痛点包括整理麻烦、重点遗漏、语言不通、不易保存，痛点都指向人工整理成本高。
- 已有能力包括 ASR 能力、自动总结、翻译大模型、高保真音频，最终机会点被定义为：录音亮点需记录，人工整理工作量大，可通过 AI 智能总结。
设计目标
把机会点转化为录中和录后的执行策略
设计目标页将录音笔拆成录中和录后两段。录中解决“正在记录时用户能不能放心”，录后解决“记录完之后内容能不能直接使用”。
- 录中目标是持续记录会议内容、实时总结亮点；具体策略包括 AI 纪要、智能翻译、操作便捷，分别对应不遗漏信息、多语种场景和随时操作。
- 录后目标是自动总结会议内容、记录结论与待办；具体策略包括自动转写、AI 总结、内容分享。
- 最终设计目标沉淀为：适配多语言，清晰记录录音内容，自动提取重点。
产品框架
按功能属性拆出录音状态、操作和内容转写区
产品框架页先拆分操作路径，再构建基于功能属性的页面框架。框架把上部定义为录音类产品收集区，下部定义为内容转写区。
- 录音状态区负责持续告知用户录音正在进行，以及是否有时长、波形和状态信息露出。
- 录音操作区承载暂停、结束、继续等重要操作，必须保证会议现场可快速触达。
- 内容转写区承接录中实时转写与录后总结，是把音频资产转为文字资产的核心容器。
视觉风格
用录音机、音轨、实体按键和记事本建立新视觉心智
轻拟物质感页明确提出“录音机质感打造，建立全新视觉风格”。设计把录音机、音轨、实体按键、记事本这些心智元素结合起来，让 AI 录音笔不只是普通聊天页里的一个功能。
- 顶部黑色录音区域使用机身纹理和红色音轨，强化正在录音的状态。
- 暂停与结束按钮采用实体按键质感，符合录音机工具心智。
- 内容区使用纸质纹理，让实时转写和 AI 总结更像会议纪要，形成“录音器 + 笔记本”的混合体验。
录后界面
录音区域支持展开收起，AI 纪要化身“元宝说”
这张画板展示录后具体界面。录音区域可以在展开和收起之间切换，既保留录音状态和波形，也让用户在阅读文本时获得更多空间。
- 红色音轨表示录音正在进行中，起到状态区分作用；收起后仍保留必要的录音信息，避免用户丢失当前任务感。
- AI 纪要化身“元宝说”，复用腾讯会议 AI 纪要能力，以元宝语气对会议内容进行实时总结。
- 图中还提供“思考/写”“闭麦/躲起”等语气和表达处理入口，让会议内容可以进一步转化为更自然的输出。
设置能力
支持分享端外、翻译语言和录音细项设置
设置能力页说明录音笔需要完整的控制能力，而不是只提供开始和结束按钮。用户可以分享内容到端外或保存本地，也可以设置翻译语言和录音相关参数。
- 分享到端外：录音结束后内容支持分享或导出，分享时可以设置权限，适配会议纪要流转。
- 支持翻译语言：录音时文本内容支持开启翻译，翻译按钮外置，用户可以一键切换。
- 界面中还包含 AI 朗读、声音来源、原语言、同声显示双语、区分发言人、声纹自动识别等设置，覆盖多语言和多人场景。
随时记录
即使短暂退出界面，录音仍在线
随时记录页解决一个非常具体的使用问题：用户可能离开录音详情页，但录音任务不能因此丢失。设计通过应用内状态和应用外状态两套机制保证关键录音信息不遗漏。
- 应用内状态：当前 session 内有卡片沉淀，方便操作；跨 session 时有悬浮状态，用户点击可快速操作或回录音。
- 应用外状态：灵动岛、锁屏等区域展示录音状态，让用户即使不在 App 内也能感知录音仍在进行。
- 这类状态设计服务的是“录音不能断、用户能找回、关键任务不丢”。
PC 端适配
用 Canvas 画布承载录音界面，浮窗可进一步收起
PC 端适配页展示了多窗口、多尺寸下的录音笔界面。录音界面采用 Canvas 画布承载，可以起至浮窗状态，浮窗还能进一步收起至悬浮条，保证各场景下顺畅使用。
- 桌面端不是简单放大移动端，而是根据 PC 的多窗口特征，把录音、转写、AI 总结和输入入口重新组织。
- 浮窗状态让用户可以一边开会或查资料，一边保留录音控制。
- 悬浮条状态进一步降低干扰，适合在其他桌面任务中持续记录。
后续表现
功能数据上升，并影响 APP 主端设计风格
后续表现页把结果分为数据情况和主端影响。数据侧显示功能日均用户规模持续上升；主端影响则展示录音笔的风格如何被延续到 App 主端中。
- 用户规模持续上升：在较少宣传背景下，开年后录音笔用户渗透和口碑持续提升，也在筹备升级。
- 风格延续：录音笔基于拟物质感的设计风格得到内部认可，被延续到产品主端。
- 整体颜色包含背景和文字等都向黄棕色系调整，按钮带轻质感，区分层级，让录音笔的视觉语言影响更大范围的产品界面。
03 / Design System
设计规范与公共组件搭建
这个项目完整覆盖公共组件目录、颜色 Token、Markdown 规范、字号规则、 组件覆盖范围和组件沉淀方法，重点是把协作成本沉淀成团队可复用语言。
把分散的协作成本，沉淀成团队可调用的设计语言。
组件资源
先把全局样式和组件资源整理成可复用目录
作品集开场说明：为了提高移动端、Web 端、Pad 端体验一致性，需要和设计同学统一语言，从头整理组件并发布上线，供全员接入复用。
- 全局样式包含颜色、Typography、Motion、Icon、Radius、Shadow、Map、Divider 等基础能力。
- 导航包含 Navbar、Tabbar、Drawer、Tab、Steps；操作包含 Agent Input、Radio & Checkbox、Menu、Form、Picker、Search 等。
- 展示包含 Message Bubble、Result、Empty State、Card、Avatar、Tag、Badge、Image Viewer、Video Player；反馈包含 Dialog、ActionSheet、Snackbar、Toast、Loading、Tooltip、Notification、Guide 等。
颜色系统
打通设计和开发环境，建立 Token 级色彩规范
颜色系统页强调的是开发落地，而不是单纯配色。它通过浅色和深色模式、透明度、Token 命名、Figma 规范与开发校验，减少多端色值偏差。
- 文字使用变色，避免内容叠加时颜色发生变化；通过色阶区分颜色深浅，同时保留不同对应关系的黑白纯色。
- 基于 Token 色进行语义化命名，例如类型、用途、色阶，并建立 Figma 色彩规范，后续设计稿可以一键切换深浅色。
- 连接开发与视觉双重校验：将旧色彩映射为新 Token，替换上线并做还原度走查；每个页面都要判断是否需要新增 Token。
Markdown
用结构清晰的 Markdown 规则制造稳定秩序感
Markdown 规范页把 AI 输出中的标题、正文、列表、代码块、表格等内容转成可执行规则。它解决的是长回答多端展示时层级不稳、间距混乱和阅读节奏不一致的问题。
- 正文以 16 号字作为基础字号，以大多数人手机阅读距离为基准；16 号在正文和大脑中能建立“轻松接受信息”的平衡点。
- 模型吐出时标题最多区分 6 级范围；在展示上，1-3 级与正文拉开差距，保证结构感，4-6 级则对正文加粗，避免字号层级过多。
- 设计遵循字号越大、行高倍数越小的原则，正文规范中 16px 正文行高 145%，20px 二级标题行高 120%，保证各层级索引关系紧密。
Typography
全局字号支持七档设置，并同步设计与开发
字号规范页定义了全局字号与 Markdown 字号两套规则：全局字号适配整体 UI，Markdown 字号按更大倍数放大，以保证不同用户的阅读习惯都能被覆盖。
- 字号放大规则分为两类：全局字号规则和 Markdown 字号规则，后者会按更大倍数放大。
- 规则整理进组件库后，元素设置自动布局，设计稿可以支持切换设置项后一键放大字号。
- 字号和行高规范同步给开发并写入底层规则，供各业务调用，避免设计稿、实现和业务页面之间断裂。
公共组件搭建
覆盖基础样式和操作组件，组件类型 40+
公共组件搭建页把工作范围进一步收束：建立公共组件规范，包含基础样式、操作组件等，覆盖组件类型 40+。这说明项目不是只做了少量样例，而是形成可复用的资源体系。
- 组件覆盖范围承接前面的目录，将基础样式、导航、操作、展示、反馈等能力转化为可使用资产。
- 40+ 组件类型意味着它需要支撑真实业务迭代，而不是只服务单一页面。
- 这张页在网页中作为范围确认：团队复用的前提，是先把高频能力体系化地归档。
组件沉淀
分批开发上线，并把规则沉淀为设计 Skill
组件沉淀页说明了这套规范如何持续生产。项目按优先级拆分四期开发上线，并在开发过程中沉淀设计 Skill，使后续页面生成、规范调用和组件替换更高效。
- 根据优先级拆分四期上线：基础组件如颜色、字体、导航等由组件同学全局走查；菜单等独立组件由对应设计师进行全局走查。
- 整体开发项目周期大约两个月，包含组件设计、组件走查、开发验收，以及旧组件替换上线的闭环。
- 基于设计组件库升级为设计 Skill，支持在前期 Demo 试跑、适配大字号、多语言等场景时快速搭建页面，提高设计效率。
04 / More Cases
其他项目
这一页按作品集中的其他项目逐张展开，包括元宝派、语音通话、对话分组、 广告转化平台。每张图只对应一个项目或页面，不交叉复用。
把增长、语音、知识管理和 B 端工具放回各自语境，避免项目入口和正文内容重复。
元宝派
借助 AI 生成能力做轻社交玩法包装
元宝派画板展示了多个活动页面和手机状态，整体是浅蓝背景、彩色模块和游戏化视觉。它对应的是增长和活动玩法，不是工具型问答场景。
- 画面里有入口页、内容列表、任务或互动页面、生成内容页面和分享状态，说明链路覆盖进入、浏览、参与、生成和传播。
- 高饱和头像、圆形色块、卡片和移动端界面共同降低 AI 产品的严肃感，让用户先在轻松语境里使用 AI。
- 该项目体现的是把 AI 能力包装为社交话题和活动玩法的能力，目标是提升用户参与和分享意愿。
语音通话
支持多类型语音通话，服务实时沟通
语音通话画板明确写到“支持多类型语音能力，用户可随便用”。左侧列出自由通话、视频通话、英语陪练、同声传译等场景，右侧三张深色手机界面展示通话入口、通话中和同声传译状态。
- 功能入口把语音能力拆成用户可理解的不同场景，而不是只给一个通话按钮。
- 通话中界面通过中心发光球体、底部控制区和状态文案表达系统正在听、正在说或正在处理。
- 同声传译界面把中英文内容放在同一通话语境里，重点是降低跨语言实时沟通的理解成本。
对话分组
用分组、指令和资料库管理长期对话
对话分组画板说明：对话管理工具可通过不同分组隔离不同主题的对话，并通过分组指令及上传资料库，提升分组内的对话效果。
- “指令”用于设置分组内的对话风格，让每个分组有更稳定的回答方式。
- “资料库”支持上传并保存 RAG 资料，让对话不只是一次性聊天，而能围绕项目、投研、知识库持续使用。
- 右侧的微信元宝示例展示了定制人设、高情商回复助手等分组能力，说明分组可以承载不同任务角色。
广告转化平台
面向广告主日常转化数据盘点的 B 端管理工具
广告转化平台画板定位为 B-end Product，说明它是广告主日常转化数据盘点的 B 端管理工具，以及新建组件库规范在业务中的使用。
- 画面包含后台顶部导航、左侧菜单、表格、表单和数据管理页面，说明平台要承接多模块、多流程的工作台任务。
- 设计重点在于让广告主能够清楚完成建站、素材配置、投放设置、数据查看和转化管理。
- 这类项目体现的是中后台信息架构能力：在高信息密度里保持模块清楚、状态明确和操作路径稳定。
05 / Historical Work
Anireel视频处理工具
Anireel 是一款动画解释视频制作工具。这个篇章按 PDF 原始顺序完整展开 18 页内容， 从项目背景、用户分析、目标定义、问题拆解、策略推导，到视觉规范、Logo、页面落地、官网与数据复盘。
从动画解释视频的制作门槛出发，把复杂创作能力拆成普通用户可以理解和完成的步骤。
01 / 项目封面
从品牌到功能重塑动画解释视频工具
Anireel 被定位为动画解释视频制作工具，设计职责覆盖 UI 与 Logo Design。封面强调设计负责人需要完成“品牌性到功能”的重塑，不只是包装界面，而是把工具类产品的使用对象、工作流程和行业痛点重新理解后，再落到核心流程效率优化上。
这一页同时给出项目结果导向：通过实践摸索提升新用户导出率和产品用户评价，并从设计层面推动核心流程效率优化。项目性质是 0-1 建立过程，因此后续页面会从业务理解、目标定义、框架重构一直讲到最终数据表现。
02 / 项目背景
面向非专业用户，降低动画解释视频制作门槛
项目背景页先说明产品目的：面向有 Animated Explainer Video 需求的用户，打造一款易上手的视频工具。相比实况视频，动画成本更低、周期更短、修改更方便，表达方式也不受真实世界限制，因此适合营销、教育、知识传播等大量内容生产场景。
行业数据用于支撑方向判断：视频服务类 App 设备数从 2018 年 11.37 亿台增长到 2021 年 13.94 亿台；动画短视频类型分布中，社交娱乐占 39.5%，在线教育占 17.2%，营销推广占 15.1%，其他占 28.2%。这说明动画短视频不是单一娱乐工具，而是覆盖传播、教学和商业表达的复合需求。
03 / 用户分析
将用户定位为 25-45 岁、具备内容表达需求的中青年群体
用户分析页把目标人群定义为 25-45 岁中青年。他们有一定互联网产品使用经验，具备典型职业属性，熟悉社交媒体甚至了解内容营销，也可能有常规视频制作经验，例如剪辑或教育类录屏软件。他们重视易用性，有成熟的价值观和评判体系，因此产品不能只提供专业功能，还要让任务路径足够直观。
页面拆出三类 Persona：Zoey 是 32 岁企业员工，需要为咖啡品牌做促销活动宣传；Tomas 是 28 岁自媒体博主，需要持续制作知识科普内容，例如 5G 原理视频；David 是 37 岁网课老师，希望把课程内容制作成更有创意、更吸引学生的视频。三类关键词分别指向产品营销、知识科普、在线教育，也共同指向“快速发布、创意内容、形式新颖”。
04 / 目标分析
把经验式动画制作转成流程化、标准化步骤
目标分析页先做现状归纳：媒介变迁推动视频个性化内容升级，视频类 App 设备数逐年上升；但传统动画创作方式依赖 After Effect、Premiere 等工具，门槛高、成本高、产出效率低。当内容数量变多时，传统手工式动画生产模式无法满足需求，而且创作者能力差异会影响质量稳定性。
由此页面给出核心推断：如果能把动画视频创作过程流程化、标准化，把经验式设计能力转化为简单交互步骤，就可以从传统手作模式转向智能化生产模式。目标被定义为三点：海量素材可供取用，简单拖拽或选择即可实现动画效果；内置多主题模板，输入文字即可得到完整动画内容；打造结合经验规则与创意内容的智能化创作工具。
05 / 改版前问题
启动页信息价值低效，核心入口不够清楚
改版前问题页聚焦启动页。最突出的问题是“Script Generate”按钮巨大，但“脚本生成”对非专业用户来说含义偏专业，用户不一定理解点击后能做什么，直接影响入口点击率。创建按钮也较弱，第一眼难以察觉，并且只能创建默认 16:9 的单一比例内容，难以承接不同视频发布场景。
页面还指出右侧广告位占比过大，造成信息价值浪费，阻碍留存和转化。视觉层面则表现为风格陈旧、主色难以辨认、品牌识别性弱，所有模块都采用直角转折，整体较生硬。这些问题共同说明改版不能只换视觉皮肤，而要同时解决入口理解、操作层级、内容价值和品牌感。
06 / 任务路径
把创作前、创作中和导出串成完整工具链路
任务路径页把用户的视频创作过程拆成更清楚的路径：创作前先找思路、理流程；有经验的用户可以空白创建，无经验的用户可以选择模板。模板场景覆盖营销宣传、科普教育、在线教育等方向，帮助用户从目标场景而不是专业术语进入产品。
进入创作后，用户需要添加素材，包括场景、背景、人物、文字，并替换关键字段；随后进入编辑内容阶段，通过时间轴和故事板组织内容；最后导出文件或一键生成。该页的重点是把动画制作从“专业软件操作”拆成普通用户能理解的连续步骤，后续框架重构和页面设计都围绕这条路径展开。
07 / 设计策略
从框架层、信息层、原子层、表现层共同改造体验
设计策略页把方案拆成四个层次。框架层对应“层级区分”：页面框架需要重构，并针对不同经验的用户引导点击。信息层对应“内容预置”：根据用户角色类型预置脚本模板，并使用更通俗的文案引导用户理解。
原子层对应“组件化”：组件需要可拓展、可复用，同时保持统一性，提供一致的视觉感受。表现层对应“年轻化”：采用更新的视觉表现手法，强化品牌感。四层策略分别回应启动页改版前的入口不清、信息低效、视觉陈旧和品牌识别弱问题。
08 / 框架重构
基于用户属性重构首页框架和视觉动线
框架重构页把首页内容重新划分为几组用户能理解的模块。顶部要回答“脚本成片有什么功能”，把重要功能分区展示，并讲清脚本成片的能力；模板区域要回答“有什么模板”，根据用户类型提供不同主题的预置模板，降低从空白开始的压力。
教程模块回答“脚本是什么”，为用户答疑解惑，帮助轻松上手；推荐内容则承担“看看推荐”的辅助作用，需要主次区分并弱化次要信息层级。该页本质是把专业工具首页改造成从功能理解、模板选择、教程学习到内容浏览的清晰动线。
09 / 情绪版
视觉气质以友好、活泼、简洁为核心
情绪版页说明视觉风格的来源：产品面向非专业人士，因此需要带来更友好的使用体验；同时由于产品定位年轻化，界面需要更活泼；但在实际使用过程中仍然遵循功能为先，视觉服务于功能，避免复杂装饰影响操作。
页面把风格关键词收敛为 Friendly、Lively、Concise，也就是友好、活泼、简洁。这个判断会继续影响后面的卡片、圆角、微渐变、颜色和 Logo 设计，使产品既降低专业感，又保留工具应有的清楚和效率。
10 / 风格定义
用卡片、圆角和微渐变建立亲和但清楚的界面语言
风格定义页把视觉语言拆成三类。第一是卡片式设计：将不同重点内容打包成块，帮助用户区分层级。第二是圆角过渡：为了配合活泼、友好的使用氛围，用圆润边角带来亲和力和舒适感，替代改版前过于生硬的直角模块。
第三是微渐变背景：它不是纯装饰，而是用来点缀页面、营造虚实结合的美感，并以渐变底色突出页面重点内容。三类语言都服务同一个目标：让非专业用户更愿意进入工具，同时更容易分辨信息优先级。
11 / 设计规范
用字号、字重和主辅色统一信息层级
设计规范页定义字体与颜色。字体采用 Segoe UI，并通过 20px、16px、14px、12px、10px 等不同字号以及 Regular、Semibold 等字重区分信息层级，让页面信息更一目了然，也更快突出重点。
颜色上，本次设计以蓝紫色为主，区别于稿定设计、Powtoon 等竞品中较常使用的蓝色，从而营造更活泼、年轻化的视觉感受。重点内容使用黄色作为对比色突出，页面也列出了 #5D5FEF、#FFB21E、#3C4A79、#D8D8D8 等关键色值，作为后续界面统一的基础。
12 / 标志设计
把摄影机与卡通表情结合，强化动画解说工具记忆点
Logo 设计页展示头脑风暴过程，核心图形从摄影机和卡通表情出发。摄影机能直接表达视频制作工具属性，卡通表情则带来更可爱、更友好的产品形象，贴合前面情绪版中“友好、活泼”的方向。
页面还强调眼睛元素的作用：眼睛是心灵的窗户，加入眼睛可以增强用户关注，提升记忆点和想象空间。这个 Logo 方向不是单纯图形装饰，而是在品牌识别、产品功能和情感气质之间建立连接。
13 / 启动页
用教程、关键词和创建入口引导用户开始制作
启动页落地页说明了多个关键设计点。教程指引用微渐变底色增加页面质感，并在顶部强化教程入口；同时采用破形设计手法突出模块内容，引导用户关注，并明确各模块层级，让用户知道下一步该做什么。
关键词优化把“脚本生成”替换为“你想要生成什么类型的视频？”，避免专业词汇造成理解门槛，并根据用户人群提供营销、教育、医疗等多场景模板选择。创建动画模块强化左侧 “New Project” 入口，区分重要层级，并提供多种创建比例切换；历史文件则采用圆角卡片形式展示，hover 时可进行重命名等编辑操作。
14 / 其他页面
脚本成片、编辑页和语音合成共同组成完整创作链路
脚本成片页面通过预置脚本降低制作门槛：根据应用场景提供不同预置脚本内容，一键生成动画；预置内容支持在 5 个备选文案中替换，保证创作自由度；企业名称等重要字段用下划线标记，提醒用户替换；每个视频被拆成五个场景，每个场景对应一个故事板，可在编辑页继续调整。
编辑页则提供素材库、时间轴、故事板和可视化编辑能力。内置素材包括场景、背景、人物、道具、文字、音乐等；由于素材类型较多，时间轴用不同颜色区分；故事板切换方式接近 PPT，便于上手；画布内素材支持不同维度编辑，实现所见即所得。语音合成页面左侧输入文案，右侧选择声音类型，用头像区分男女性别，并用强调色突出升级链接，提高购买转化率。
15 / 情感化设计
为异常状态补充页面元素，引导下一步操作
情感化设计页集中展示程序崩溃、导出失败、没有匹配结果、格式不兼容、加载失败、网络异常、无内容等状态。对于工具产品来说，这些状态常出现在关键流程中，如果只给冷冰冰的错误文案，会让用户不知道下一步该怎么做。
因此页面通过更丰富的插画元素和统一风格，把错误、空状态和失败反馈做成可识别的系统语言。它的作用不是单纯增加可爱感，而是在中断场景里降低挫败感，并提示用户继续处理、重试、检查网络或更换内容。
16 / 官网设计
将统一色调和图形元素延伸到官网介绍页
官网介绍页展示了 Anireel Website Design。页面说明在官网中延续统一色调和视觉元素，让产品从应用界面到外部介绍页保持同一品牌气质。
这部分的重点在于品牌一致性：蓝紫主色、年轻化视觉和卡通化元素不仅出现在产品内部，也要在官网介绍页中被用户感知。这样用户从了解产品、进入下载或使用，再到真正制作视频，能获得连续的品牌印象。
17 / 页面总览
集中呈现启动、模板、编辑和空状态等核心页面
页面总览页把前面分散讲述的界面集中放在一起，用于检验整套设计语言是否统一。可以看到启动页、模板选择、编辑相关页面、历史文件和空状态等多个界面在同一套色彩、圆角、卡片和插画系统下呈现。
这页的作用类似最终走查：确认首页引导、内容预置、素材编辑、故事板、异常状态和品牌表现没有割裂。对于 0-1 工具产品来说，页面总览能帮助团队从单页细节回到整体系统，检查核心流程是否完整、风格是否统一、不同状态是否可扩展。
18 / 数据表现与复盘
新用户导出率和 NPS 提升，验证改版方向有效
数据表现页展示改版后的结果：新用户导出率从 23.75% 提升到 34.47%，图表标注提升 45.17%，说明上线后新用户导出率显著提升，整体达到预期标准。NPS 满意度从 0.287 提升到 0.371，图表标注提升 29.26%，页面文案也提到上线当月用户 NPS 较改版前提升 37.29%，达到行业均值标准。
复盘思考包含三点。第一，突出贡献是在改版过程中主动根据用户人群拆分应用场景，探索脚本功能的多场景应用。第二，在设计与业务节奏配合上，为追上版本进度采用分批定稿，与业务方确认模块优先级、前后排期，并与开发确认交付时间、分批提测，在框架重构前提下保障顺利推进。第三，商业与体验需要平衡：在付费产品中找到收费模块与功能结合的节点，并把必须不能跳过的收费功能尽量后置，帮助用户建立使用习惯，再通过设计寻求满足用户需求的最优方案。