[{"data":1,"prerenderedAt":280},["ShallowReactive",2],{"home-works":3,"home-articles":179},[4,77,131],{"id":5,"title":6,"body":7,"category":52,"client":53,"cover":54,"description":55,"draft":56,"duration":53,"extension":57,"featured":58,"gallery":53,"meta":59,"navigation":60,"path":62,"publishedAt":63,"role":64,"seo":65,"services":68,"sort":71,"stem":72,"tags":73,"updatedAt":53,"year":75,"__hash__":76},"works\u002Fworks\u002Fscreen.md","智慧燃气综合管理平台",{"type":8,"value":9,"toc":46},"minimark",[10,17,21,24,27,43],[11,12,13],"blockquote",{},[14,15,16],"p",{},"Demo 内容：这是用于验证页面结构的虚构练习，不代表真实客户或上线成果。",[18,19,20],"h2",{"id":20},"项目背景",[14,22,23],{},"这个示例项目模拟一个信息密度较高的移动应用。模板重点验证项目摘要、设计过程、关键界面和复盘内容能否在同一篇案例中保持清晰节奏。",[18,25,26],{"id":26},"设计目标",[28,29,30,34,37,40],"ul",{},[31,32,33],"li",{},"建立清楚的任务优先级；",[31,35,36],{},"减少关键操作中的认知负担；",[31,38,39],{},"让视觉语言和交互反馈保持一致；",[31,41,42],{},"为后续功能扩展保留稳定结构。",[18,44],{"id":45},"",{"title":45,"searchDepth":47,"depth":47,"links":48},2,[49,50,51],{"id":20,"depth":47,"text":20},{"id":26,"depth":47,"text":26},{"id":45,"depth":47,"text":45},"UI\u002FUX",null,"\u002Fimage7213.jpg","智慧燃气大屏UI，深色调为主",false,"md",true,{},{"icon":61},"i-mdi:paintbrush","\u002Fworks\u002Fscreen","2026-07-01","UI\u002FUX Designer",{"title":66,"description":67},"UI\u002FUX App Project","用于验证移动产品案例页结构、信息层级和长内容阅读体验的示例项目。",[69,70],"Product Design","UI Design",22,"works\u002Fscreen",[69,70,74],"Blender",2026,"O6-mkFIWHiAOfLgawMOLbZqJPah_iuSYN1AgXB3LAlE",{"id":78,"title":79,"body":80,"category":52,"client":53,"cover":120,"description":67,"draft":56,"duration":53,"extension":57,"featured":58,"gallery":53,"meta":121,"navigation":122,"path":123,"publishedAt":63,"role":64,"seo":124,"services":125,"sort":126,"stem":127,"tags":128,"updatedAt":53,"year":75,"__hash__":130},"works\u002Fworks\u002Fuiux-app.md","UI\u002FUX App ",{"type":8,"value":81,"toc":114},[82,86,88,90,92,102,105,108,111],[11,83,84],{},[14,85,16],{},[18,87,20],{"id":20},[14,89,23],{},[18,91,26],{"id":26},[28,93,94,96,98,100],{},[31,95,33],{},[31,97,36],{},[31,99,39],{},[31,101,42],{},[18,103,104],{"id":104},"过程",[14,106,107],{},"首先整理核心场景和信息架构，再用低保真流程验证主要路径。界面阶段以有限的颜色、字号与间距层级建立系统，不依赖过量装饰制造重点。",[18,109,110],{"id":110},"复盘",[14,112,113],{},"正式案例可以在这里补充真实约束、设计取舍、验证方式与上线后的观察。避免填写未经验证的数据。1",{"title":45,"searchDepth":47,"depth":47,"links":115},[116,117,118,119],{"id":20,"depth":47,"text":20},{"id":26,"depth":47,"text":26},{"id":104,"depth":47,"text":104},{"id":110,"depth":47,"text":110},"\u002F4b0e98110079163.5fe325a0e4583.jpg",{},{"icon":61},"\u002Fworks\u002Fuiux-app",{"title":66,"description":67},[69,70],20,"works\u002Fuiux-app",[129,69,70],"Mobile App","aRCHKnRyqBSz0lJGLDpV-ALF1tKp6f-z-Us24ZjZBUQ",{"id":132,"title":133,"body":134,"category":164,"client":53,"cover":120,"description":165,"draft":56,"duration":53,"extension":57,"featured":58,"gallery":53,"meta":166,"navigation":58,"path":167,"publishedAt":168,"role":169,"seo":170,"services":171,"sort":173,"stem":174,"tags":175,"updatedAt":53,"year":75,"__hash__":178},"works\u002Fworks\u002Fdemo-3d-visual.md","Demo 3D Visual Project",{"type":8,"value":135,"toc":159},[136,141,144,147,150,153,156],[11,137,138],{},[14,139,140],{},"Demo 内容：本项目用于模板测试，没有真实客户、商业委托或成果数字。",[18,142,143],{"id":143},"视觉方向",[14,145,146],{},"尝试使用克制的色彩、柔和材质和清晰轮廓建立一组可延展的视觉语言。作品详情页需要容纳过程草图、材质测试和最终画面。",[18,148,149],{"id":149},"构图与材质",[14,151,152],{},"构图强调大块面关系和留白，避免把科技感等同于高饱和霓虹。材质保持统一的光照逻辑，让不同画面仍然属于同一系列。",[18,154,155],{"id":155},"模板用途",[14,157,158],{},"正式内容可以替换顶部占位视觉，并通过 MDC 组件增加全宽图片、图片网格、视频或过程时间线。",{"title":45,"searchDepth":47,"depth":47,"links":160},[161,162,163],{"id":143,"depth":47,"text":143},{"id":149,"depth":47,"text":149},{"id":155,"depth":47,"text":155},"3D Visual","用于验证大图叙事、视觉实验说明和多类型作品混排方式的 3D 示例项目。",{},"\u002Fworks\u002Fdemo-3d-visual","2026-06-20","Visual Designer",{"title":133,"description":165},[172,164],"Art Direction",10,"works\u002Fdemo-3d-visual",[176,172,177],"3D","Visual Design","yp-UKmkMrFMCPgPOwtzap9Xk8WxmynUvTpjqzwTh9wo",[180,237],{"id":181,"title":182,"body":183,"category":225,"cover":45,"description":226,"draft":56,"extension":57,"featured":58,"meta":227,"navigation":58,"path":228,"publishedAt":229,"seo":230,"stem":231,"tags":232,"updatedAt":53,"__hash__":236},"articles\u002Farticles\u002Fdemo-lottie-workflow.md","Demo Lottie Workflow Article",{"type":8,"value":184,"toc":219},[185,190,193,196,199,202,205,208,211],[11,186,187],{},[14,188,189],{},"Demo 文章：用于验证文章列表与正文排版，后续可以直接删除。",[18,191,192],{"id":192},"为什么需要固定检查流程",[14,194,195],{},"Lottie 文件能否播放并不等于适合交付。画布尺寸、帧率、资源引用、循环衔接和播放器兼容性都会影响最终体验。",[18,197,198],{"id":198},"导出前",[14,200,201],{},"统一图层命名，删除不可见内容，并确认使用的效果是否在目标播放器中受支持。对于需要循环的动画，应在设计阶段检查首尾状态，而不是导出后再强行修补。",[18,203,204],{"id":204},"浏览器检查",[14,206,207],{},"把 JSON 放入 ULab 的 Lottie Player，检查尺寸、总帧数、帧率和不同速度下的表现。文件默认在浏览器本地解析，适合快速验证未公开素材。",[18,209,210],{"id":210},"交付",[14,212,213,214,218],{},"保留原始 JSON，并根据使用场景导出 ",[215,216,217],"code",{},".lottie","。交付说明应明确循环、默认背景、目标尺寸和播放器版本。",{"title":45,"searchDepth":47,"depth":47,"links":220},[221,222,223,224],{"id":192,"depth":47,"text":192},{"id":198,"depth":47,"text":198},{"id":204,"depth":47,"text":204},{"id":210,"depth":47,"text":210},"Motion","从设计交付到浏览器预览，整理一条便于检查和协作的 Lottie 工作流。",{},"\u002Farticles\u002Fdemo-lottie-workflow","2026-07-08",{"title":182,"description":226},"articles\u002Fdemo-lottie-workflow",[233,234,235],"Lottie","Motion Design","Workflow","Uc1VS7UbSDqJZuRL5hTorEihJPEuOVqK1bImF4-Lgow",{"id":238,"title":239,"body":240,"category":235,"cover":45,"description":270,"draft":56,"extension":57,"featured":56,"meta":271,"navigation":58,"path":272,"publishedAt":273,"seo":274,"stem":275,"tags":276,"updatedAt":53,"__hash__":279},"articles\u002Farticles\u002Fdemo-figma-workflow.md","Demo Figma Workflow Article",{"type":8,"value":241,"toc":265},[242,247,250,253,256,259,262],[11,243,244],{},[14,245,246],{},"Demo 文章：示例内容不代表完整方法论，正式发布前请替换。",[18,248,249],{"id":249},"从少量规则开始",[14,251,252],{},"基础变量、文字层级和间距规则足以解决大部分早期一致性问题。组件数量不是成熟度指标，只有真实复用的结构才值得维护。",[18,254,255],{"id":255},"让状态可见",[14,257,258],{},"按钮、输入框与反馈组件需要覆盖关键状态。与其在页面中复制多个近似版本，不如先定义清晰的默认、悬停、聚焦、禁用和错误状态。",[18,260,261],{"id":261},"交付前检查",[14,263,264],{},"检查命名、约束、自动布局、响应式行为和开发注释。设计文件应该帮助团队理解意图，而不只是存放最终画面。",{"title":45,"searchDepth":47,"depth":47,"links":266},[267,268,269],{"id":249,"depth":47,"text":249},{"id":255,"depth":47,"text":255},{"id":261,"depth":47,"text":261},"用简单约束维护界面一致性，让设计文件更容易协作、检查和迭代。",{},"\u002Farticles\u002Fdemo-figma-workflow","2026-06-26",{"title":239,"description":270},"articles\u002Fdemo-figma-workflow",[277,70,278],"Figma","Design System","bdyBxMA-m1Jghw-BegcLf2KPRCZa1vV5K79Fk_oqmak",1784571990284]