微信小游戏 UI · 可视化学习手册
看懂一张界面，
理解背后的技术。
从一个按钮到整张关卡地图。把设计、渲染、引擎和动效串起来，看清每种技术能做什么，以及边界在哪里。
30篇图解教程
6个交互实验
1条完整制作链路
THE BIG PICTURE / 技术全景
先把工具放回正确的位置。
Figma、Canvas、Cocos 和 Spine 不在同一层。理解它们怎样协作，比记住更多工具名字更有用。
01
设计与素材
画面长什么样
Figma / PS / Illustrator02渲染基础
像素怎样被画出
Canvas / WebGL / Shader03引擎与 UI
把界面组织起来
Cocos / Unity / FairyGUI04动效与落地
让它动起来、跑得稳
Spine / 粒子 / 适配与性能设计出来、网页跑通、微信可用，是三个不同的结论。
认识运行环境 →每篇文章区分运行环境、适配条件和验证状态。浏览器演示用于解释原理，真机性能需要单独验证。
LEARN BY MAKING / 从效果进入
你想做出怎样的界面？
YOUR LEARNING PATH / 按体系学习