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

  

引言

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

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

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

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

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

软件介绍

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

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

 官网下载地址:墨刀 - 在线一体化产品设计协作平台 (modao.cc)icon-default.png?t=N7T8https://modao.cc/brand

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

一、页面交互

网页跳转/插入外部链接

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

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

定时跳转

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

二、交互案例教程

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

底部导航

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

底部导航

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

底部菜单

底部菜单可以用动态组件实现,本节课程带您学习用墨刀制作微信公众号底部菜单。

底部菜单

00:00 案例效果:查看底部菜单的预览效果
00:23 组件状态编辑:使用动态组件功能设置底部菜单的效果
00:43 添加交互跳转:为动态组件添加交互链接,实现组件状态切换

Tab切换

Tab切换可以用动态组件实现,本节课程带您学习用墨刀制作抖音个人主页的tab切换。

tab切换

00:00 案例效果:查看Tab切换的预览效果
00:21 组件状态编辑:修改组件不同状态的显示效果
00:56 添加交互跳转:为动态组件添加交互链接,实现组件状态切换
01:11 调整组件:修改动态组件的位置和大小,匹配页面效果

左右/局部滚动

左右滚动/局部滚动可以用动态组件实现,本节课程带您学习用墨刀制作微信订阅号消息的局部滚动效果。

左右、局部滚动

00:00 案例效果:查看左右滚动的预览效果
00:21 添加组件状态:将素材组件转化为动态组件
00:33 调整动态组件:调整动态组件的宽度,实现滚动效果

下拉菜单

本节课程带您学习用墨刀动态组件实现微信首页下拉菜单效果。

下拉菜单

00:00 案例效果:查看下拉菜单的预览效果
00:21 组件状态编辑:设置组件不同状态的隐藏/显示效果
00:44 添加交互跳转:实现页面切换和组件状态的切换

键盘弹出

本节课程带您学习用墨刀动态组件实现键盘弹出效果。

键盘弹出

00:00 案例效果:查看键盘弹出的预览效果
00:17 组件状态编辑:使用动态组件功能设置弹窗的效果
00:44 设置交互跳转:为页面中的组件添加交互事件来实现组件状态的切换

点赞效果

本节课程带您学习用墨刀动态组件实现抖音主页的点赞效果。

点赞效果

00:00 案例效果:查看点赞效果的预览效果
00:18 组件状态编辑:设置组件不同状态中的不同外观和动效效果
00:37 添加交互跳转:为页面中的组件添加交互事件来实现组件状态的切换

点击弹窗

本节课程带您学习用墨刀动态组件实现微信小程序的点击弹窗效果。

点击弹窗

00:00 案例效果:查看点击弹窗的预览效果
00:17 制作半透明蒙层:使用矩形组件进行蒙层的制作
00:30 组件状态编辑:使用动态组件功能设置弹窗的效果
00:48 设置交互跳转:为页面中的组件添加交互事件来实现组件状态的切换

定时弹窗

本节课程带您学习用墨刀动态组件实现抖音首页的定时弹窗效果。

定时弹窗

00:00 案例效果:查看定时弹窗的预览效果
00:19 组件状态编辑:设置组件不同状态的隐藏/显示效果
00:42 添加交互跳转:为组件添加定时器跳转效果,实现组件状态定时自动切换

图片放大

本节课程带您学习用墨刀动态组件实现图片放大效果。

图片放大

00:00 案例效果:查看图片放大的预览效果
00:26 页面状态编辑:设置页面不同状态的图片展示效果
01:05 添加交互跳转:为组件添加交互跳转效果,实现页面状态的切换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/432499.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AlibabaCloud微服务:Linux 部署 Sentinel 流量控制

目录 一、实验 1.环境 2.Linux 部署 Sentinel 3. 微服务接入Sentinel配置 二、 问题 1.Linux本地启动Sentinel控制台 2.JDBC连接失败 一、实验 1.环境 (1)主机 表1 主机 系统软件版本IP备注Linuxopenjdk 1.8.0192.168.204.200 maven3.5.0nac…

基于QGIS的研究区域遥感影像裁切下载方法-以岳麓区为例

目录 前言 一、数据说明 1、遥感影像 2、矢量范围 二、按矢量范围导出 1、第一步、导出影像 2、第二步、设置输出格式 3、设置裁切范围 4、设置分辨率 三、按矢量范围掩膜 1、第一步、打开裁剪工具 2、第二步、参数设置 ​编辑 3、执行掩膜 四、webgis支持 1、生成运行…

【Redis】Redis持久化模式AOF

目录 引言 AOF持久化模式​编辑​编辑 AOF与RDB的混合持久化(4.x后的新特性) AOF的优缺点 修复破损aof文件 到底用RDB还是AOF 引言 AOF就相当于上面的日志形式。是追加式备份。所有发生的写操作,新增啊,修改啊,删除啊,这些命…

AI大模型与小模型之间的“脱胎”与“反哺”(第四篇)

76. **动态领域适应网络(Dynamic Domain Adaptation Networks, DDANs)**: 创建能动态调整自身参数以适应新行业特性的网络结构,使得AI大模型能在不完全重新训练的情况下快速适应新的业务场景和环境变化。 77. **元学习中的元策略优…

SoraAI优先体验资格注册教程

SoraA1视频工具优先体验资格申请 申请网址:https://openai.com/form/red-teaming-network 申请步骤: 填写基础信息 请使用英文根据内容填写以下内容,名、姓、电子邮件、居住国家、组织隶属关系(如果有)、教育水平 、学位(哪个领…

【数据结构】顺序表+链表

目录 1.顺序表 1.1初始化顺序表 1.2销毁顺序表 1.3检查容量并扩容 1.4把某个元素插入到下标为pos的位置 1.5头插和尾插 1.6删除下标为pos的元素 1.7头删和尾删 2.顺序表的问题及思考 3.链表 3.1链表的访问 3.2链表的增删查改 1.顺序表 顺序表的本质其实就是一个数组…

整合力-整合思维模型和领导力

整合力和领导力是组织成功的两大关键因素。在当今复杂多变的商业环境中,整合力和领导力的结合对于推动组织发展至关重要。本文将探讨整合力和领导力的概念、重要性以及如何有效整合二者以促进组织的成功发展。 ### 整合力的重要性 整合力指的是组织内部各个部门、…

【3GPP】【核心网】【5G】5G核心网协议解析(三)(超详细)

5G协议 NAS协议消息:UE 与 AMF 之间 UE通过5G NAS协议与AMF建立起安全的信令连接,进行用户数据传输和网络服务请求等操作 消息格式:NAS-PDU ------------------------- | Header | NAS Message(s) | ------------------------- Header…

毕业之前准备材料

文章目录 说明第一波截止时间待办事情(共计2)1、读书报告审核(吴海梅老师审核)2、课程学分审核(吴海梅老师审核,曹主216办公室) 第二波外审截止时间待办事情(王移花老师审核&#xf…

Linux下du命令和df命令的使用

du命令作用是估计文件系统的磁盘已使用量,常用于查看文件或目录所占磁盘容量。df命令是统计磁盘使用情况,可以用来查看磁盘已被使用多少空间和还剩余多少空间。du命令语法du [选项] [文件或目录名称]参数:-a:--all, 列…

第七篇:人工智能与机器学习技术VS量测(Measurement)- 我为什么要翻译介绍美国人工智能科技巨头IAB公司 - 它是如何赋能数字化营销生态的?

IAB平台,使命和功能 IAB成立于1996年,总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司,互动广告局(IAB- the Interactive Advertising Bureau)自1996年成立以来,先后为700多家媒…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(四)

项目建议与立项申请、初步可行性研究、详细可行性研究、评估与决策是项目投资前使其的四个阶段。在实际工作中,初步可行性研究和详细可行性研究可以依据项目的规模和繁简程度合二为一,但详细可行性研究是不可缺少的。升级改造项目制作初步和详细研究&…

电脑提示“由于仅部分匹配或匹配不明确,因此无法迁移设备”怎么办?

“由于仅部分匹配或匹配不明确,因此无法迁移设备”错误可能会在将较旧的系统更新到较新的系统版本或者安装了双系统之后出现,此外,驱动程序不兼容、系统文件损坏、计算机接口故障、系统不支持出现错误的外接设备等也可能导致该错误出现。了解…

【Selenium】UI自动化|元素定位常见问题

1、报错NoSuchElementException——定位不到元素 分析的可能原因: 页面还没有加载出来,就对页面上的元素进行的操作 元素在iframe中,先要理解下frame的实质,frame中实际上是嵌入了另一个页面,而webdriver每次只能在一…

Cocos Creator 3.8.x 制作模糊效果(比如游戏弹窗需要的模糊效果)

接着上一个讨论的话题,关于3.8.x的后效,今天来分享自定义后效来制作模糊效果,并将他应用到弹窗中做背景,话不多说开整。 一:最终效果 首先咱们来看官网自定义后效怎么搞的,从它的实例开始:自定义后效 二:定义PostProcessSettings给节点提供资源(通过编辑器修改参数的…

两天学会微服务网关Gateway-Gateway路由规则

锋哥原创的微服务网关Gateway视频教程: Gateway微服务网关视频教程(无废话版)_哔哩哔哩_bilibiliGateway微服务网关视频教程(无废话版)共计17条视频,包括:1_Gateway简介、2_Gateway工作原理、3…

vue3 (四)动态组件Vs异步组件

1.动态组件 点击toggle切换2个组件&#xff0c;配合<keep-alive>使用防止切换后数据丢失 <keep-alive><component :is"currentItem"></component> </keep-alive> 2.异步组件 定义方法&#xff1a;app.component(组件名,Vue.defineAs…

vs创建asp.net core webapi发布到ISS服务器

打开服务器创建test123文件夹&#xff0c;并设置共享。 ISS配置信息&#xff1a; 邮件网站&#xff0c;添加网站 webapi asp.net core发布到ISS服务器网页无法打开解决方法 点击ISS Express测试&#xff0c;可以成功打开网页。 点击生成&#xff0c;发布到服务器 找到服务器IP…

第十篇:如何利用人工智能技术做好营销流量整形管理?(Traffic Shaping)- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市​​​​​​​。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先…

每日五道java面试题之mysql数据库篇(六)

目录&#xff1a; 第一题. MySQL中InnoDB引擎的行锁是怎么实现的&#xff1f;第二题. InnoDB存储引擎的锁的算法有三种第三题. 什么是死锁&#xff1f;怎么解决&#xff1f;第四题. 数据库的乐观锁和悲观锁是什么&#xff1f;怎么实现的&#xff1f;第五题. 为什么要使用视图&a…