微信小程序云开发教程——墨刀原型工具入门(素材面板)

2024-03-12 13:52

本文主要是介绍微信小程序云开发教程——墨刀原型工具入门(素材面板),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  

引言

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

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

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

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

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

软件介绍

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

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

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

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

素材面板

在原型工具的编辑页面中,左侧工具栏设置了「素材面板」功能,能够让您在绘制原型时便捷地使用官方内置素材,一键复用,减少重复工作;以及设定自制/企业设计系统的素材库内容,提高原型绘制的效率和质量。
素材面板共分为组件、图标、图片、页面、母版五部分,布局直观、搜索高效、收藏简单。

视频讲解

素材面板

00:14 全局搜索:在任一素材面板中可以搜索各类素材内容
00:53 素材库:打开素材库管理您的素材
01:06 最近使用:查看和复用已经使用过的组件
01:24 组件面板介绍:管理和使用内置、自制及收藏的组件素材
03:02 图标面板介绍:筛选使用墨刀内置图标素材
03:30 图片面板介绍:上传图片至个人/企业空间并管理
03:49 页面面板介绍:筛选和收藏丰富的页面素材模版

组件素材

在左侧工具栏可以打开组件素材面板,也可以使用快捷键 1 快速打开。
再次点击「组件」按钮,或再次使用快捷键 1 即可关闭面板。

内置组件

在内置组件部分中,顶部有组件素材分类导航,共有常用、表单、导航、图表、多媒体五类组件。点击即可快速定位到对应位置,便捷使用组件。

常用组件包括文字、形状、图片、按钮、占位符等,具体使用教学请查看常用组件

表单、导航、图表等组件封装了完整的交互、支持直接编辑内容,具有高复用性。具体使用教学请查看高级组件

多媒体组件可以帮助您在原型中快速嵌入图片、视频、音频、二维码、地图等。具体使用教学请查看多媒体组件

我的组件

「我的组件」分为自制收藏两类。
如果是企业空间的文件,还会有「企业组件」。企业素材库支持共享组件,可将现有素材一键添加,多人共同维护。
企业素材库是一个企业成员共享的资源库,可以帮助企业成员进行素材的快速复用,提升工作效率以及达成企业产品设计的风格统一。

自制组件

在墨刀,你可以将任何组件(组合)创建为“我的组件”,收录到“自制组件”中,具体创建方式可以查看我的组件
点击右上角的「新建文件夹」按钮,可以创建文件夹,更加清晰地管理组件素材。点击并拖动文件夹栏目,还能够为文件夹排序。

收藏组件

「收藏」栏目中包含了您在墨刀官方素材广场收藏过的组件素材,不限制收藏数量,可以直接预览和使用。
点击右上角的「加号」按钮,会进入发现栏目查看更多官方推荐的组件素材内容,选中并收藏后就会在收藏栏目呈现。
:之前已经收藏(引用)的组件数据,也会合并至新的素材面板中。

发现组件

「发现」部分呈现了丰富的组件素材,并在顶部进行了推荐和分类,能够一键复用素材,减少重复工作,帮助您将更多精力投入到产品创意中。
选择合适的一、二级分类并点击「全部」即可查看符合要求的组件并收藏使用。

图标素材

在左侧工具栏可以打开图标素材面板,也可以使用快捷键 2 快速打开。
图标素材面板有发现图标库两部分。

发现栏目为您推荐了绘制原型时常用的图标内容,方便使用。
图标库栏目包含「收藏」和「素材广场」两部分。素材广场中有风格各异的图标包,点击可以查看详情并收藏。

图标的具体使用方法和技巧可以查看图标组件

图片素材

在左侧工具栏可以打开图片素材面板,也可以使用快捷键 3 快速打开。
图片素材分为我的(企业) 和发现两部分。
您可以从本地上传图片,这些图片将以文件夹的形式呈现,同样文件夹也支持拖拽排序
企业版用户还可以选择将图片素材上传至个人素材库或者企业素材库,分别管理您的图片素材。

点击发现,我们为您提供了人物、动物、美食、风景等7类图片素材,双击或拖拽都能轻松使用,帮助您更佳便捷地完成原型绘制。

页面素材

在左侧工具栏可以打开页面素材面板,也可以使用快捷键 4 快速打开。

页面素材面板中分为发现收藏两部分。
发现栏目中为您整理推荐了部分页面主题,每天我们都会为您更新海量素材以供使用。
点击即可查看相关的页面素材,选择收藏后就能够存放在收藏栏目中,更加便捷地复用整个页面了。

全局搜索

在素材面板四大栏目的顶部,都分别设置了搜索栏
点击可以搜索素材关键字,还能够查看您的搜索历史以及搜索量较高的关键词推荐

搜索结果包含了组件、图标、图片、页面四个类目。点击切换即可快速查看其他类目的素材内容。
您可以通过搜索查找您创建的文件夹、创建的组件、上传的图片,以及墨刀提供的丰富素材内容。

如果未能搜索到您需要的相关内容,可以点击「提交反馈」联系我们优化素材内容及搜索结果。

素材库

在组件、图标、图片、页面四大栏目的右上角,点击「素材库」按钮或是使用快捷键 A 都能打开个人素材库。
素材库的具体使用请查看素材库

最近使用

在组件、图标、图片、页面四大栏目的右上角,点击「最近使用」按钮,即可看到您最近使用过的四类素材内容,更加便捷地进行复用。
同时顶部也能够通过关键词搜索您使用过的符合条件的素材,更加快速地找到您需要的素材内容。

这篇关于微信小程序云开发教程——墨刀原型工具入门(素材面板)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/801477

相关文章

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

Spring Boot拦截器Interceptor与过滤器Filter详细教程(示例详解)

《SpringBoot拦截器Interceptor与过滤器Filter详细教程(示例详解)》本文详细介绍了SpringBoot中的拦截器(Interceptor)和过滤器(Filter),包括它们的... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)详细教程1. 概述1

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式?原型模式的工作原理C#中如何实现原型模式?1. 定义原型接口2. 实现原型接口3

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入

Linux搭建Mysql主从同步的教程

《Linux搭建Mysql主从同步的教程》:本文主要介绍Linux搭建Mysql主从同步的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux搭建mysql主从同步1.启动mysql服务2.修改Mysql主库配置文件/etc/my.cnf3.重启主库my

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

SpringBoot操作MaxComputer方式(保姆级教程)

《SpringBoot操作MaxComputer方式(保姆级教程)》:本文主要介绍SpringBoot操作MaxComputer方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录引言uqNqjoe一、引入依赖二、配置文件 application.properties(信息用自己

Redis客户端工具之RedisInsight的下载方式

《Redis客户端工具之RedisInsight的下载方式》RedisInsight是Redis官方提供的图形化客户端工具,下载步骤包括访问Redis官网、选择RedisInsight、下载链接、注册... 目录Redis客户端工具RedisInsight的下载一、点击进入Redis官网二、点击RedisI