【免费下载链接】avocadoAn interaction design toolbox项目地址https://gitcode.com/gh_mirrors/avocado11/avocado点击查看免费下载Avocado 是一个零代码的交互设计工具箱interaction design toolbox其 Examples/ 目录里藏着 18 个开箱即跑的交互原型案例——从最简单的拖拽滑动条Slider到完整的聊天应用Messaging app全部无需写一行代码用 Quartz Composer 打开就能跑。本文把这 18 个 Examples 案例按类型拆解帮你按打开→运行→仿写的路径学会制作交互原型。Avocado 是什么交互设计工具箱全家福模块内容路径交互组件Draggable Layer、Carousel、Dial、Rolodex 等 20 个 patchAvocado/原生插件Bluetooth、Global String、Keyboard 2 等 8 个插件Avocado Plug-Ins/官方案例18 个可运行的交互原型.qtz工程Examples/演示素材各交互功能的动态演示 GIFOther/GIFs/每个.qtz文件就是一个 Quartz Composer 工程macOS 下双击打开即可内部由主 patch Info 状态 patch拼装而成这正是学习它的最佳方式。案例总览18 个原型如何分布18 个核心案例 15 个顶层案例 3 个 Utilities 工具组件案例顶层 15 个位于 Examples/ 根目录覆盖拖拽、轮播、翻页、动画、键盘输入等场景工具组件 3 个位于 Examples/Utilities/专门演示单个工具 patch 的用法加餐 4 个Examples/Bluetooth/ 下的蓝牙联动案例还附带 Arduino 固件代码.ino文件拖拽 Draggable 系列5 个必学交互案例这 5 个案例全部基于核心 patch Draggable Layer.qtz 及其配套组件Snap Points、Boundaries、Animation是新手入门的第一站。Slider (Draggable).qtz.qtz)—— 带轨道边界的滑动条。内部组合了 Draggable Layer Boundaries限制拖拽范围 Info读取位置是最标准的入门案例Snap in position (Draggable).qtz.qtz)—— 松手后图层自动吸附到指定位置Pickup animation (Draggable).qtz.qtz)—— 自定义捏起时放大的拾取动画细节感的典范Two Images (Draggable).qtz.qtz)—— 配置了 X/Y 各 9 个吸附点是开关式切图交互的经典Three Dimensions (Draggable).qtz.qtz)—— 三轴空间的拖拽演示进阶玩法学习建议先只打开 Slider 案例对照 Draggable Layer Info.qtz 看懂位置数据如何流出其余 4 个案例都是在此基础上加料。轮播与翻页系列4 个滑动切换案例Carousel.qtz—— 手机模型里的可滑动图片轮播内部是 Carousel.qtz 主 patch 手机边框图层Carousel Advanced.qtz—— 进阶版自定义转场动画 弹出pop动画 Carousel Settings 调参Book.qtz—— 基于 Rolodex.qtz 名片架 patch 实现的翻书效果Dial.qtz—— 滚轮式旋转交互配合 Absolute Value.qtz 和文字图层实时显示角度数值聊天应用交互原型Messaging app 拆解Messaging app.qtz 是整个 Examples 里工程量最大的案例单文件约 5.8MB相当于 18 个案例里的毕业设计。它把多种 Avocado 组件组合成了一个完整的信息流原型手机框架phone dimensions 图层组模拟 iOS 设备外壳消息列表滚动scroll Y 方向滚动控制列表 → 详情跳转Master Detail.qtz 主从视图关系点击区域Hit Grid.qtz 网格热区识别点击位置看懂这一个案例等于把 Avocado 的组件组装套路完整过了一遍。动画与综合应用4 个微交互案例Animations.qtz—— 四种基础动画的合集演示点头Nod、脉动Pulsate、抖动Jiggle、跳跃Jumppatch 对应 Avocado/ 下的同名文件Nod.qtz—— 触碰图片时点头的单一效果Jump.qtz—— 矩形块受触弹跳的单一效果Today I Feel.qtz—— 综合大案例iOS 虚拟键盘输入 全局字符串Global String状态管理 弹性动画 延迟组件是文本输入类交互的完整参考工具组件案例3 个 Utilities 小案例Examples/Utilities/ 里的 3 个小案例每个只演示一个工具 patch适合想给原型加个功能时查阅Hit Grid.qtz—— 网格热区判断用户点中了哪个格子Global String.qtz—— 跨工程共享字符串演示 Save Global String.plugin 与 Retrieve 的配对Delay Ducklings.qtz—— 用 Delay Value.qtz 让一组小鸭子错开时间依次移动延迟效果的趣味演示加餐蓝牙交互 4 案例想给原型接上真实硬件Examples/Bluetooth/ 提供 4 个案例 4 份 Arduino 固件BluetoothBlink.ino 等Bluetooth Slider.qtz手机滑条控制蓝牙 LEDSend to Arduino.qtz/Receive from Arduino.qtz单向收发Send and Receive.qtz双向通信依赖 Avocado Plug-Ins/ 中的 Bluetooth Send / Receive / Connection 插件把交互原型从屏幕延伸到物理世界。新手上手路线3 条实用建议按难度递进学习Slider拖拽→ Carousel轮播→ Dial滚轮→ Messaging app综合每关一个案例前 4 个案例就能覆盖 80% 的组件用法先找 Info patch 读状态流打开任何案例后先定位Info类节点如 Draggable Layer Info、Carousel Info它输出当前交互状态是理解整个工程数据流向的钥匙善用全局值串联页面学会 Save Global Boolean.qtz 和 Retrieve Global String.plugin 的配对用法后就能像 Today I Feel 那样把键盘、动画、文字状态串成一套完整交互结语Avocado 的 18 个 Examples 案例本质上是一本可运行的交互设计教材5 个拖拽案例教你手势4 个轮播案例教你切换4 个动画案例教你反馈3 个工具案例教你加料外加 1 个聊天应用综合演练和 4 个蓝牙加餐。打开 README.md 可以查到完整的组件清单挑一个最接近你产品需求的案例打开改一改图片你的第一个可交互原型就完成了。赞分享【免费下载链接】avocadoAn interaction design toolbox项目地址https://gitcode.com/gh_mirrors/avocado11/avocado点击查看免费下载相关推荐Cangjie/HarmonyOS-Examples AIChat项目深度解析AI聊天应用完整实现Cangjie/HarmonyOS Examples AIChat项目深度解析AI聊天应用完整实现 还在为鸿蒙应用开发中如何集成AI聊天功能而烦恼吗本文将深示例工程PPT MasterAI 生成原生可编辑 PPTPPT MasterAI 生成原生可编辑 PPT 周三下午收到一份 60 页的行业调研 PDF周五上午老板要一份 15 页的汇报 PPT。PPT MasteAI 技能人工智能AI 应用Invidious 缓存调优3层方案从转圈10秒到1秒打开Invidious 缓存调优3层方案从转圈10秒到1秒打开 翻车现场转圈40秒是常态 22:47你打开自己部署的 Invidious 实例视频页面转了后端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考