[{"data":1,"prerenderedAt":115},["ShallowReactive",2],{"articles":3},[4,71],{"id":5,"title":6,"body":7,"category":55,"cover":48,"description":56,"draft":57,"extension":58,"featured":59,"meta":60,"navigation":59,"path":61,"publishedAt":62,"seo":63,"stem":64,"tags":65,"updatedAt":69,"__hash__":70},"articles\u002Farticles\u002Fdemo-lottie-workflow.md","Demo Lottie Workflow Article",{"type":8,"value":9,"toc":47},"minimark",[10,17,21,24,27,30,33,36,39],[11,12,13],"blockquote",{},[14,15,16],"p",{},"Demo 文章：用于验证文章列表与正文排版，后续可以直接删除。",[18,19,20],"h2",{"id":20},"为什么需要固定检查流程",[14,22,23],{},"Lottie 文件能否播放并不等于适合交付。画布尺寸、帧率、资源引用、循环衔接和播放器兼容性都会影响最终体验。",[18,25,26],{"id":26},"导出前",[14,28,29],{},"统一图层命名，删除不可见内容，并确认使用的效果是否在目标播放器中受支持。对于需要循环的动画，应在设计阶段检查首尾状态，而不是导出后再强行修补。",[18,31,32],{"id":32},"浏览器检查",[14,34,35],{},"把 JSON 放入 ULab 的 Lottie Player，检查尺寸、总帧数、帧率和不同速度下的表现。文件默认在浏览器本地解析，适合快速验证未公开素材。",[18,37,38],{"id":38},"交付",[14,40,41,42,46],{},"保留原始 JSON，并根据使用场景导出 ",[43,44,45],"code",{},".lottie","。交付说明应明确循环、默认背景、目标尺寸和播放器版本。",{"title":48,"searchDepth":49,"depth":49,"links":50},"",2,[51,52,53,54],{"id":20,"depth":49,"text":20},{"id":26,"depth":49,"text":26},{"id":32,"depth":49,"text":32},{"id":38,"depth":49,"text":38},"Motion","从设计交付到浏览器预览，整理一条便于检查和协作的 Lottie 工作流。",false,"md",true,{},"\u002Farticles\u002Fdemo-lottie-workflow","2026-07-08",{"title":6,"description":56},"articles\u002Fdemo-lottie-workflow",[66,67,68],"Lottie","Motion Design","Workflow",null,"Uc1VS7UbSDqJZuRL5hTorEihJPEuOVqK1bImF4-Lgow",{"id":72,"title":73,"body":74,"category":68,"cover":48,"description":104,"draft":57,"extension":58,"featured":57,"meta":105,"navigation":59,"path":106,"publishedAt":107,"seo":108,"stem":109,"tags":110,"updatedAt":69,"__hash__":114},"articles\u002Farticles\u002Fdemo-figma-workflow.md","Demo Figma Workflow Article",{"type":8,"value":75,"toc":99},[76,81,84,87,90,93,96],[11,77,78],{},[14,79,80],{},"Demo 文章：示例内容不代表完整方法论，正式发布前请替换。",[18,82,83],{"id":83},"从少量规则开始",[14,85,86],{},"基础变量、文字层级和间距规则足以解决大部分早期一致性问题。组件数量不是成熟度指标，只有真实复用的结构才值得维护。",[18,88,89],{"id":89},"让状态可见",[14,91,92],{},"按钮、输入框与反馈组件需要覆盖关键状态。与其在页面中复制多个近似版本，不如先定义清晰的默认、悬停、聚焦、禁用和错误状态。",[18,94,95],{"id":95},"交付前检查",[14,97,98],{},"检查命名、约束、自动布局、响应式行为和开发注释。设计文件应该帮助团队理解意图，而不只是存放最终画面。",{"title":48,"searchDepth":49,"depth":49,"links":100},[101,102,103],{"id":83,"depth":49,"text":83},{"id":89,"depth":49,"text":89},{"id":95,"depth":49,"text":95},"用简单约束维护界面一致性，让设计文件更容易协作、检查和迭代。",{},"\u002Farticles\u002Fdemo-figma-workflow","2026-06-26",{"title":73,"description":104},"articles\u002Fdemo-figma-workflow",[111,112,113],"Figma","UI Design","Design System","bdyBxMA-m1Jghw-BegcLf2KPRCZa1vV5K79Fk_oqmak",1784571990438]