微信小程序云开发教程——墨刀原型工具入门（页面交互+交互案例教程）

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。墨刀 - 在线一体化产品设计协作平台 (modao.cc)墨刀支持为页面或组件添加交互跳转事件，模拟用户使用产品

Stitch .

3029人浏览 · 2024-03-02 13:33:44

Stitch . · 2024-03-02 13:33:44 发布

引言

作为一个小白，小北要怎么在短时间内快速学会微信小程序原型设计？

“时间紧，任务重”，这意味着学习时必须把握微信小程序原型设计中的重点、难点，而非面面俱到。

要在短时间内理解、掌握一个工具的使用，最有效的方式莫过于临摹：

看实例视频教程，并跟着教程在实例素材上操作。

基于以上两点，小北根据学长和老师们的推荐，选择了先上入手“墨刀”这个软件！

软件介绍

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。

墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

官网下载地址：墨刀 - 在线一体化产品设计协作平台 (modao.cc)https://modao.cc/brand

墨刀支持为页面或组件添加交互跳转事件，模拟用户使用产品交互时的真实体验，让你的原型“动”起来。

一、页面交互

网页跳转/插入外部链接

使用交互事件中的超链接功能即可实现网页跳转效果。
1、选中任意元素，添加事件，选择跳转超链接

2、选择跳转到当前页面或者新开窗口，输入允许跳转的http/https协议的地址

定时跳转

选中画布后，在链接设置面板中可以为页面或状态设置定时跳转的效果。

二、交互案例教程

使用页面状态和动态组件功能，可以实现很多动态切换效果。您可以跟随下面的视频进行具体操作的学习。

底部导航

底部导航可以用动态组件实现，本节课程带您学习用墨刀制作微信底部导航。

底部导航

00:00 案例效果：查看底部导航的预览效果
00:22 组件状态编辑：使用动态组件功能设置导航的切换效果
02:27 创建母版：将编辑好的动态组件转换为母版便捷复用
02:48 添加交互跳转：为母版中的组件添加交互链接，实现组件状态切换
03:27 母版复用：将母版在页面复用并设置不同的默认状态