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

news2024/11/16 7:36:19

  

引言

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

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

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

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

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

软件介绍

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

墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行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 添加交互跳转:为组件添加交互跳转效果,实现页面状态的切换

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI时代编程新宠!如何让孩子成为未来的编程大师?

文章目录 一、了解编程的基础概念二、选择适合的编程工具三、激发孩子的兴趣四、注重基础能力的培养五、提供实践机会六、鼓励孩子与他人合作七、持续支持与鼓励《信息学奥赛一本通关》本书定位内容简介作者简介目录 随着科技的迅猛发展,编程已经从一种专业技能转变…

C++三级专项 Hermite多项式

用递归的方法求Hermite多项式的值。 对给定的x和正整数n,求多项式的值,并保留两位小数。 输入 给定的n和正整数x. 输出 多项式的值。 输入样例 1 2 输出样例 4.00 解析:按照题目给出的要求:递归来解决就行,上…

『京墨』1.7.0 发布,开源的诗文(名句)、歇后语、成语、绕口令、节日等的阅读 APP

1.7.0 更新日志 优化 UI 显示;优化数据同步,尤其是诗文同步;【诗文名句】【成语】【歇后语】模块添加收藏功能;添加“滑动翻页”功能。 介绍 『京墨』开源的古诗词文(名句)、歇后语、成语、绕口令、节日…

C++_map与set

目录 一、set 1、set的用法 2、multiset 二、map 1、map的用法 2、map的operator[] 3、multimap 结语 前言: C中的map和set容器属于关联式容器,与序列式容器不同的地方在于(序列式容器即vector、list,其底层是由线性数据…

牛客禁用题:求阶乘

思路&#xff1a;在新类中使用全局变量进行运算&#xff0c;在主类中定义新类数组&#xff0c;通过构造函数的调用次数返回阶乘 #include <type_traits> class add{public:static int count;static int tmp;add(){countcounttmp;tmp;} }; int add::count0; int add::t…

Flink:动态表 / 时态表 / 版本表 / 普通表 概念区别澄清

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

在golang中使用protoc

【Golang】proto生成go的相关文件 推荐个人主页&#xff1a;席万里的个人空间 文章目录 【Golang】proto生成go的相关文件1、查看proto的版本号2、安装protoc-gen-go和protoc-gen-go-grpc3、生成protobuff以及grpc的文件 1、查看proto的版本号 protoc --version2、安装protoc-…

Java 打包 SpringBoot 项目报错

Java 打包 SpringBoot 项目报错 问题重现 Please refer to xxxx for the individual test results. Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream. 解决问题 在 pom.xml 的 <properties> 中添加项目代码 <s…

AIGC下一步:如何用AI再度重构或优化媒体处理?

让媒资中“沉默的大多数”再次焕发光彩。 邹娟&#xff5c;演讲者 编者按 AIGC时代下&#xff0c;媒体内容生产领域随着AI的出现也涌现出更多的变化与挑战。面对AI的巨大冲击&#xff0c;如何优化或重构媒体内容生产技术架构&#xff1f;在多样的应用场景中媒体内容生产技术又…

【半监督医学图像分割 2021 IEEE】DU-GAN

【半监督医学图像分割 2021 IEEE】DU-GAN 论文题目&#xff1a;DU-GAN: Generative Adversarial Networks with Dual-Domain U-Net Based Discriminators for Low-Dose CT Denoising 中文题目&#xff1a;基于双域U-Net鉴别器的生成对抗网络用于低剂量CT去噪 论文链接&#xff…

云时代【5】—— LXC 与 容器

云时代【5】—— LXC 与 容器 三、LXC&#xff08;一&#xff09;基本介绍&#xff08;二&#xff09;相关 Linux 指令实战&#xff1a;使用 LXC 操作容器 四、Docker&#xff08;一&#xff09;删除、安装、配置&#xff08;二&#xff09;镜像仓库1. 分类2. 相关指令&#xf…

C---输入5个字符串,找出最长字符串并输出

从键盘输入5个字符串&#xff0c;找出最长的字符串并输出该字符串 例&#xff1a; 输入&#xff1a;123 1234 werere1234 12 123 输出&#xff1a;werere1234 #include <stdio.h> #include <string.h>int main() {char strings[5][80]; // 存储5个字符串&#x…

界面控件DevExpress .NET MAUI v23.2新版亮点 - 拥有全新的彩色主题

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。屡获大奖的软件开发平台DevExpress 今年第一个重要版本v23.1正式发布&#xff0c;该版本拥有众多…

记录SSM项目集成Spring Security 4.X版本 之 加密验证和记住我功能

目录 前言 一、用户登录密码加密认证 二、记住我功能 前言 本次笔记的记录是接SSM项目集成Spring Security 4.X版本 之 加入DWZ,J-UI框架实现登录和主页菜单显示-CSDN博客https://blog.csdn.net/u011529483/article/details/136255768?spm1001.2014.3001.5502 文章之后补…

腾讯云幻兽帕鲁服务器使用Linux和Windows操作系统,对用户的技术要求有何不同?

腾讯云幻兽帕鲁服务器使用Linux和Windows操作系统对用户的技术要求有何不同&#xff1f; 首先&#xff0c;从操作界面的角度来看&#xff0c;Windows操作系统相对简单易操作&#xff0c;适合那些偏好使用图形化界面操作的用户。而Linux操作系统则需要通过命令行完成&#xff0…

springboot基于保信息学科平台系统设计与实现论文

基于保密信息学科平台系统 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于保密信息学科平台系统的开发全过程。通过分析基于保密信息学科平台系统管理的不足&#xff0c;创建了一个计算机管理基于保密信息…

MySQL:开始深入其数据(二)DQL

在初识MySQL中我们就知道了DQL只有一个关键字select。 可是数据库管理中我们用的最多的就是查询&#xff0c;为了方便我们使用&#xff0c;MySQL定义了大量关键字给我们使用&#xff0c;泪目。 文章目录 DQLselect语法指定查询字段where条件语句逻辑操作符比较操作符between a…

1.亿级积分数据分库分表:总体方案设计

项目背景 以一个积分系统为例&#xff0c;积分系统最核心的有积分账户表和积分明细表&#xff1a; 积分账户表&#xff1a;每个用户在一个品牌下有一个积分账户记录&#xff0c;记录了用户的积分余额&#xff0c;数据量在千万级积分明细表&#xff1a;用户每次积分发放、积分扣…

基于springboot+vue的在线考试与学习交流平台

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

猫猫与数列

来源&#xff1a;牛客网 示例1 输入 2 2 输出 5 示例2 输入 999999998 2 输出 3 示例3 输入 10 18 输出 3 #include <bits/stdc.h>#define endl \n using ll long long; typedef unsigned long long ull; using namespace std; void GordenGhost(); l…