Product Experience Portfolio.
曾琰 · 资深产品体验设计师。深耕产品体验设计 10 年，3 年原生 AI 大模型产品设计经验， 对 C 端产品及模型工作流程有深度理解。
- Tencent · 元宝
- AI × Consumer
- Shenzhen · CN
Selected Work
精选作品
四个项目覆盖 AI 输出、录音链路、设计规范与跨领域体验。
Archive
历史作品
早期完整项目沉淀，保留从业务分析到视觉落地、数据复盘的全过程。
腾讯
元宝产品部 - 高级产品体验设计师
近三年深耕元宝 APP（原生 AI 大模型产品）体验设计，近两年获两次五星员工荣誉。
- 元宝 APP：腾讯战略级 AI 产品（千万 DAU）。作为主设计师，对基础搜索及内容输出体验负责，深度了解 AI 大模型输出策略，并持续通过用户调研及数据分析等方式打磨方案、提升产品体验；同时负责 Pad、PC/Web 端适配工作。一年间，元宝 APP 日活上涨 48 倍，持续获得用户好评。
- 腾讯广告：致力于搭建广告主建站及私域流量工具，跟进广告主从建站到投放业务的全流程。主导设计互动广告模板，并对接供应商进行模板规范定义，引入模板 80+，助力广告主流程提效。
平安科技
智慧医疗事业部 - 视觉设计师
负责多款面向医疗机构及政府部门的项目，致力于各类中后台产品设计及流程提效。
- 公共卫生应急管理平台：疫情期间，作为 G 端设计团队负责人，带领小组支持疾控 Web 端、流行病上报 Pad 端、监管大屏等在内的产品设计。最终项目落地湖北省、广东珠海、四川成都等城市，进行定制化开发，总签单 1.8 亿元。
- 可视化图表工具：我主导制定中后台设计规范，连接产品及开发同学建立可视化图表构建工具。工具上线后，我推动它落地民营医疗机构监管平台进行辅助搭建，并在广州及深圳试点覆盖机构 900+，帮助交付周期缩短 30%。
房多多
产品研发部 - UI 设计师
负责房多多经纪人端及金融类产品设计，帮助经纪人解决报备带看、楼盘获客等问题。
- 经纪人端：负责日常迭代，帮助经纪人在线上进行获客、报备带看、佣金结算等操作；也负责经纪人端运营活动及节日海报、闪屏等设计。
- 多多金融：在主端产品内，为用户提供房抵贷、赎楼贷等多款金融产品。独立完成多多钱包、金融超市、贷款计算器等多款产品的体验设计。
Contact me
有产品思维的设计师，执着于用户体验打磨。
擅长 AI 产品体验、C 端及中后台、多端及多语言适配、视觉、交互、用研、动效与品牌相关工作。
01 / AI App
元宝App输出改版
我围绕元宝的产品定位、业务背景和体验目标，系统拆解输出改版的三条方向， 并把方案从体验判断推进到效果验证和新功能上线流程。
项目开场
我把元宝理解为“AI 伙伴”，不是单一问答入口
我先明确元宝的产品定位：它是腾讯基于混元大模型推出的原生 AI 应用。我要处理的不是单个回答卡片，而是大模型能力、内容资源、服务跳转和用户真实意图之间的连接方式。
- 我把项目背景放在 2024 年中元宝 App 正式上线后的高速迭代阶段，方便理解这次改版的时机。
- 我用绿色对话气泡把产品心智定在“陪伴和协助”，后续输出改版也围绕让用户更容易获得高质量内容展开。
- 我把输出改版的核心收束为：不是换一套样式，而是让 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 后续处理
生成内容继续支持处理、转发和下载
我把生成类内容继续往下延展，让结果更贴合用户使用场景，并分成图像处理入口、文件转发下载两类能力。
- 图像处理入口：在生成链路中提供图像处理入口，主动贴合用户场景，并降低内容处理门槛，提供多种优质风格，让用户一键继续生成。
- 文字类文件：写作、表格、试卷、代码等生成内容支持下载或转发，方便后续处理。
- 我希望输出不只是展示结果，而是能进入用户的二次处理和复用链路。
效果验证
改版后数据证明输出体验提升
上线后，改版数据验证了方向有效：生成打断率下降 33.3%，人均 Prompt 数提升 26.9%，整体七留提升 5.6%，用户日活提升 48 倍。
- 生成打断率下降说明回答表现和模型速度的优化，让用户更愿意等到结果。
- 人均 Prompt 数提升说明用户主动提问次数增加，反映内容质量和使用意愿提升。
- 我在 AI 大模型输出专项中持续推进回答体验，从交互、视觉、动效、触觉、多端适配、分类内容规范到模型和开发侧对接，完整实现方案。
上线流程
新能力从评测到灰度，再到全量与数据观察
我把 AI 产品新能力的落地方式梳理成完整流程：从提出新能力开始，经由评测方向、评测标准、用户盲测、核心指标达标、方案设计、开发、验收、预发、灰度和放量，最后持续观察线上数据。
- 前期会检验核心指标，例如内容得分、可用率、召回率、准确率等。
- 中期包含功能方案设计、功能开发、产设走查测试验收和功能上线预发，确保方案不是停在设计稿。
- 后期通过部门内灰度、司内灰度、司外放量、功能全量，持续观察点击 CTR、DAU 留存、性能 GSB、大盘数据、Token 资源等指标。
02 / AI Capability
原子能力AI录音笔
我从录音场景和整理痛点切入，定义 AI 录音笔的机会点、产品框架和关键界面， 并完整推进录中、录后、多端适配和后续数据观察。
把“录到声音”的工具，转化为可理解、可整理、可分享的内容生产链路。
项目概览
录音笔连接“好写、翻译、智能、总结”四类能力
我把 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 规则制造稳定秩序感
我把 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 端工具效率。
把增长、语音、知识管理和 B 端工具放回各自语境，避免项目入口和正文内容重复。
元宝派
借助 AI 生成能力做轻社交玩法包装
我在元宝派中使用浅蓝背景、彩色模块和游戏化视觉，把 AI 生成能力包装成更轻松的活动玩法。
- 我把入口页、内容列表、任务或互动页面、生成内容页面和分享状态串在一起，让链路覆盖进入、浏览、参与、生成和传播。
- 高饱和头像、圆形色块、卡片和移动端界面共同降低 AI 产品的严肃感，让用户先在轻松语境里使用 AI。
- 我把 AI 能力包装为社交话题和活动玩法，目标是提升用户参与和分享意愿。
语音通话
支持多类型语音通话，服务实时沟通
我把语音能力拆成自由通话、视频通话、英语陪练和同声传译等场景，并用深色通话界面强化实时沟通状态。
- 功能入口把语音能力拆成用户可理解的不同场景，而不是只给一个通话按钮。
- 通话中界面通过中心发光球体、底部控制区和状态文案表达系统正在听、正在说或正在处理。
- 同声传译界面把中英文内容放在同一通话语境里，重点是降低跨语言实时沟通的理解成本。
对话分组
用分组、指令和资料库管理长期对话
我用不同分组隔离不同主题的对话，并通过分组指令和资料库提升长期对话的稳定性与复用价值。
- “指令”用于设置分组内的对话风格，让每个分组有更稳定的回答方式。
- “资料库”支持上传并保存 RAG 资料，让对话不只是一次性聊天，而能围绕项目、投研、知识库持续使用。
- 我用定制人设、高情商回复助手等示例验证分组能力，让不同分组可以承载不同任务角色。
广告转化平台
面向广告主日常转化数据盘点的 B 端管理工具
我把广告转化平台定位为广告主日常转化数据盘点的 B 端管理工具，并将新建组件库规范带入业务页面。
- 我用后台顶部导航、左侧菜单、表格、表单和数据管理页面承接多模块、多流程的工作台任务。
- 设计重点在于让广告主能够清楚完成建站、素材配置、投放设置、数据查看和转化管理。
- 我重点处理中后台信息架构：在高信息密度里保持模块清楚、状态明确和操作路径稳定。
05 / Historical Work
Anireel视频处理工具
我围绕动画解释视频制作工具的 0-1 改版，梳理研究、策略、视觉、落地与数据复盘， 让非专业用户也能快速完成视频创作。
把动画视频创作拆成更容易理解和完成的步骤。
01 / 项目封面
从品牌到功能重塑动画解释视频工具
我把 Anireel 做成动画解释视频制作工具，设计覆盖 UI 与 Logo，并围绕新用户导出率、产品评价和核心流程效率做 0-1 优化。
02 / 项目背景
面向非专业用户，降低动画解释视频制作门槛
我面向有动画解释视频需求的非专业用户，利用动画成本低、周期短、易修改的优势，覆盖营销、教育和知识传播等场景。
03 / 用户分析
将用户定位为 25-45 岁、具备内容表达需求的中青年群体
我把目标用户聚焦在具备内容表达需求的群体上，三类 Persona 分别代表营销宣传、知识科普和在线教育，核心诉求是快速发布与低门槛创作。
04 / 目标分析
把经验式动画制作转成流程化、标准化步骤
我的目标是把依赖专业软件和经验的动画制作流程，转化为素材可选、模板可用、文字可生成的标准化创作步骤。
05 / 改版前问题
启动页信息价值低效，核心入口不够清楚
我识别到启动页问题集中在入口不清、广告位占比过大、创建按钮弱和视觉陈旧，改版需要同时解决理解门槛、层级和品牌感。
06 / 任务路径
把创作前、创作中和导出串成完整工具链路
我把创作流程拆为找思路、选模板、添加素材、编辑内容和导出生成，帮助用户从场景进入，而不是从专业功能开始。
07 / 设计策略
从框架层、信息层、原子层、表现层共同改造体验
我将策略分为框架重构、内容预置、组件化和视觉年轻化，分别回应入口不清、信息低效、组件不统一和品牌识别弱的问题。
08 / 框架重构
基于用户属性重构首页框架和视觉动线
我把首页动线重新组织为功能说明、模板选择、教程学习和推荐内容，让用户先理解脚本成片能力，再进入具体制作。
09 / 情绪版
视觉气质以友好、活泼、简洁为核心
我把视觉关键词收敛为 Friendly、Lively、Concise：降低专业工具的距离感，同时保持工具页面的清晰和效率。
10 / 风格定义
用卡片、圆角和微渐变建立亲和但清楚的界面语言
我用卡片、圆角和微渐变组成界面语言，以更亲和的形式区分信息层级，同时保持工具类产品的清楚与可操作。
11 / 设计规范
用字号、字重和主辅色统一信息层级
我统一字号、字重和颜色系统，以蓝紫色建立年轻化气质，并用黄色辅助强调关键内容。
12 / 标志设计
把摄影机与卡通表情结合，强化动画解说工具记忆点
我从摄影机和卡通表情出发设计 Logo，用视频工具属性叠加友好表情，强化 Anireel 的品牌记忆点。
13 / 启动页
用教程、关键词和创建入口引导用户开始制作
启动页强化教程、模板选择和 New Project 入口，并把“脚本生成”改成更容易理解的问题式引导，降低首次使用门槛。
14 / 其他页面
脚本成片、编辑页和语音合成共同组成完整创作链路
我用脚本成片、编辑页和语音合成共同覆盖从文案生成、故事板编辑、素材调整到声音选择的完整制作链路。
15 / 情感化设计
为异常状态补充页面元素，引导下一步操作
我用轻量插画与清楚文案承接异常、失败和空状态，降低流程中断时的挫败感，并提示用户下一步操作。
16 / 官网设计
将统一色调和图形元素延伸到官网介绍页
我让官网延续产品内的蓝紫色调和图形元素，让用户从外部介绍页到产品界面获得一致的品牌感受。
17 / 页面总览
集中呈现启动、模板、编辑和空状态等核心页面
我用页面总览检查启动页、模板、编辑、历史文件和空状态是否统一，确保核心流程和视觉语言完整闭环。
18 / 数据表现与复盘
新用户导出率和 NPS 提升，验证改版方向有效
改版上线后，我看到新用户导出率与 NPS 均有提升，也验证了场景拆分、框架重构和商业转化节奏的调整有效。
06 / Historical Work
企业级中后台提效工具
我在平安智慧医疗事业部推动中后台系统设计体系搭建， 从设计原则、规范与组件库、模板库推进到可视化 BI 工具、监管系统应用和最终提效结果。
用统一规范和可复用工具解决多项目重复开发，让设计、产品和研发在同一套体系里协作。
01 / 项目封面
从 0-1 搭建平安智慧医疗中后台设计体系
我以多业务、多平台、降本增效为关键词推进体系搭建。前期主动提出统一规范并与业务、开发确认可行性和交付物；中期统筹整体设计并带领 3 位伙伴完成 0-1 搭建及多个版本优化；后期完善组件和模板库，通过宣讲与入库规则建立体系化架构。
02 / 设计背景
用统一规范解决风格各异、重复造轮子和效率低下
我把问题拆成三类：产品线扩张后风格不一致、同类页面重复开发、长期重复建设消耗设计与研发资源。解决方案是用全链路思路整合中后台系统，建立团队自己的中台体系，通过设计规范、组件化和模块化提高复用效率。
03 / 设计原则
以清晰、高效、通用作为中后台体验导向
我将设计原则定为清晰、高效、通用。清晰强调内容为王和层级明确；高效强调沉淀方案、避免重复劳动；通用强调覆盖多业务场景和产品线日常迭代需求，同时兼顾组件库和模板库两个维度。
04 / 设计规范
用蓝色医疗心智建立简洁、专业、舒适的视觉基调
我从情绪板、色彩和字体三方面定义基础视觉。医疗行业常伴随焦虑和不确定，因此我用蓝色传递心理关怀、信任感和安宁感，并用跨平台字体规则保证中后台系统的一致阅读体验。
05 / 组件库目录
把平台设计规范拆成导航、录入、展示、反馈和全局样式
我将组件库拆成导航、数据录入、数据展示、反馈、通用、布局与全局样式，覆盖导航菜单、标签页、单选框、输入框、卡片、时间轴等高频能力，为后续业务复用提供基础。
06 / 组件样式
把高频控件状态沉淀为可复用组件
我把 Checkbox、Select、Radiobox、Cascader、Button、Input、Tag 等高频组件的 normal、hover、click、fail、selected、disabled、loading 状态统一起来，减少每个系统重新定义基础控件的成本。
07 / 模板库结构
从组件进一步上升到业务模板和场景模块
我把业务场景抽象为可组合模块，让体系不只停留在基础组件，而是继续沉淀适用于不同业务流程的模板能力。产品经理和设计师可以基于模板快速创建页面，再根据具体场景做个性化调整。
08 / 图表模板
沉淀折线、柱状、排行、气泡等常用数据展示样式
我沉淀趋势图、柱状图、折线图、排行列表、指标卡、环形图、面积图和表格等高频图表模板，让医疗监管和经营分析页面可以快速搭建，并保持指标、图形和信息层级的一致性。
09 / 可视化 BI 工具
把组件和模板能力转化为可配置的页面生产工具
在组件库和模板库基础上，我继续推动可视化 BI 工具能力，让用户通过工具配置、数据接入和页面生成，把前期沉淀的规范与模板真正应用到业务系统交付中。
10 / 系统定位
连接业务指标、组件管理和创新探索
我将平台定位在业务角色和产品能力之间：上层面对业务人员、疾控中心、卫健委、医院等使用对象；中间沉淀业务指标、组件管理和创新探索；底层用系统能力承接具体页面搭建。
11 / 页面布局
用内容区、模板区和操作区形成所见即所得的编辑结构
我把界面拆成内容区、模板区和操作区。模板内容拖拽后可以即时显示，并能灵活配置，实现内容所见即所得；同时用空间关系表达内容画布、模板面板和操作控制之间的结构，让复杂配置界面更易理解。
12 / 页面框架
控制台从数据、样式和事件三个方向配置图表
我把 BI 控制台拆成数据、样式和事件三类配置：数据模块连接数据源并设置维度轴、度量轴和查询条件；样式模块配置图表元素；事件模块配置跳转内容和参数。预览、保存、生成 SQL 则让图表从配置到落地形成闭环。
13 / 页面流程
用拖拽、配置、预览和保存串起图表搭建流程
我把创建过程拆成图表选择、拖拽入画布、数据与样式配置、预览确认和保存生成几个步骤，让非开发角色也能通过可视化方式参与后台页面搭建。
14 / 设计应用
将体系应用到广东省民营医疗机构监管系统
我将体系落地到广东省民营医疗机构监管系统。针对民营医疗机构资质不足、监管依赖线下走访的问题，我把诊所服务流程拆成事前、事中、事后三大模块，并用可视化 BI 工具和组件化开发提升交付效率。
15 / 应用布局
顶部一级导航配合左侧二三级导航，提升层级识别
我将一级导航放在顶部，与系统名称和账号名齐平，节省屏幕空间；二三级导航放在左侧，并配合右侧面包屑，帮助用户在复杂监管系统中对照自身层级。
16 / 常规列表
用筛选、指标卡、表格和操作区支撑日常监管
我用顶部筛选、指标卡片、表格数据、分页和操作按钮承接机构、处方、风险等日常监管任务，并通过清晰操作入口帮助用户快速定位和处理信息。
17 / 常规图表
把关键监管指标组织成可读的图表工作台
我把风险评分、趋势图、排行图和提示浮层组织成仪表盘式监管界面，让用户能快速识别异常、观察趋势，并继续进入具体机构或风险项处理。
18 / 实现效果
多页面、多状态验证规范和工具的落地效果
我用多个真实系统页面验证最终落地结果：统一导航、数据卡、图表、表格和弹层规范已经进入业务页面，形成从规范到交付的闭环。
19 / 项目总结
通过宣导价值、建立机制、串联业务和赋能研发推动落地
规范推行初期会遇到质疑，尤其在项目排期紧张时。我的推进方式是让每一方看清规范价值，制定稳定的设计与研发同步机制，提炼业务组件并打包场景模块，同时用智能 BI 工具支持复杂业务场景复用。
20 / 项目成果
标准化中后台产品显著缩短设计、验收和交付周期
最终结果是设计交付周期下降 30%，设计验收周期下降 50%，多城市项目交付周期下降 80%，单个项目整体交付周期下降 20%。这些指标验证了规范、组件、模板和 BI 工具对中后台标准化交付的价值。