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

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实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

基于Python打造一个全能文本处理工具

《基于Python打造一个全能文本处理工具》:本文主要介绍一个基于Python+Tkinter开发的全功能本地化文本处理工具,它不仅具备基础的格式转换功能,更集成了中文特色处理等实用功能,有需要的... 目录1. 概述:当文本处理遇上python图形界面2. 功能全景图:六大核心模块解析3.运行效果4. 相

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S