微信小程序云开发教程——墨刀原型工具入门(编辑页面)

  引言

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

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

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

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

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

软件介绍

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

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

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

编辑页面

添加页面及页面文件夹

在编辑区左侧的页面列表区域,您可以点击顶部的「+」为原型添加新页面。

在编辑区左侧的页面列表区域,您可以点击顶部的「页面文件夹」为原型添加新的页面文件夹。

页面文件夹能够有效的梳理页面逻辑,具体设置方法如下:
鼠标将页面拖拽放入文件夹中(IE浏览器不支持页面拖动,建议使用谷歌浏览器/墨刀客户端)

页面标识

在左侧的页面列表区域,可以为页面及文件夹修改标识样式,便于区分各页面的类型或状态,提升您的工作效率。

设置页面文件夹标识

点击页面文件夹前的「文件夹」图标会弹出切换颜色菜单,点击就能为文件夹图标修改颜色。
点击最右侧的「恢复默认」按钮,即还原为默认颜色。

点击空白区域,颜色菜单即会隐藏。
页面文件夹仅支持修改颜色。

设置页面标识

点击页面名称前的「页面」图标会弹出切换图标面板,共有最近使用、符号及表情三个板块。
最近使用:这里会记录并显示您最近使用过的页面标识,方便您快速复用。

符号:提供了进度标志以及符号标识,能够清晰地标明页面的类型、修改状态及操作等。

表情:提供了丰富的表情符号,可以任意修改切换。

恢复默认:设置页面标志后,如您想删掉标志,点击面板右上角的「重置」按钮,即可使页面标识恢复默认状态。

设置页面/组件外观

在工作区左侧栏中选中某个页面,将会在右侧栏弹出【页面设置】板块,您可以在右侧的外观设置面板中设置页面画板的外观(尺寸、背景色)。

选中某个组件时,您可以在右侧的外观设置面板中设置组件的外观(如位置、大小、颜色、透明度、阴影、动效等)。

页面列表/元素组件列表多选

墨刀支持页面列表/元素列表多选,具体操作如下,

  • 页面列表:
    点击某个页面,按住shift单击另一个页面,则可以选中这两个页面中的所有页面(包括这两个页面),接着可以对其进行统一的移动/删除操作;
    按住command(Mac)/ ctrl(Windows),则可逐个页面进行选择。

  • 元素组件列表:
    按住shift,单击首尾两个元素组件即可选中列表中两组件中间的所有元素,然后右键进行组合/图层调整等操作;
    按住command(Mac)/ ctrl(Windows),即可逐个元素组件进行选择,然后右键进行组合/图层调整等操作。

删除页面

选中具体页面,点击「更多」图标,即可删除页面。

如果您要删除的页面含有子页面,您可以选择只删除父页面或删除父页面与子页面。

删除页面找回

误删或删除的页面可以通过以下2种方式找回:

  • 1、 在文件名称旁的菜单栏内选择页面回收站找回。

  • 2、在页面栏旁边的菜单栏内选择页面回收站进行找回.

注:页面删除14天后将会被系统自动清空,如误删页面请您及时在页面回收站中找回。系统清空后无法找回页面,当前不支持手动清理页面回收站。

调整页面顺序

鼠标悬浮在页面上直接往上或往下拖拽即可调整页面顺序。

注:IE浏览器不支持页面拖动,建议使用谷歌浏览器/墨刀客户端

上传图片创建页面

如果您需要批量上传图片创建页面,可以在电脑桌面多选这些图片,然后拖拽到页面列表区域,图片就会自动上传并创建一个新的页面。 上传完成后,可以直接添加交互,便捷演示。

设置页面横屏

1、在工作台左侧选中页面

2、设置横竖屏

选中画布时,您可以在右侧的外观设置面板中设置页面画布为横屏或者竖屏。
需要注意的是,只有手机文件才可以设置横竖屏,网页尺寸文件默认横屏,无竖屏选项。

设置页面高度(长页面)

选中页面画布后,鼠标悬浮在页面画布底部,按住向下拖拽即可调整页面高度(拉长页面)。如果需要精确设置页面高度的值,可以在右侧的页面外观设置中输入数值设置。
拉长页面高度超过一屏后,在运行时会以滚动的形式展示。

修改页面/页面文件夹名称

在页面列表双击某个页面的页面名称,即可修改它的页面名称。
文件夹与页面的重命名操作一样,双击名称即可修改。

展开、折叠页面

选中一个多级页面的父页面,点击页面左上角的小三角形按钮即可展开、折叠页面。

您也可以使用快捷方式操作:

展开 - Ctrl+; 折叠 - Ctrl+’

批量导入图片生成页面

如果您需要批量上传图片创建页面,您可以在电脑桌面多选这些图片,然后拖拽到文件编辑区的页面列表区域,图片就会自动上传并创建页面。 上传完成后,您可以直接添加交互,进行演示。

合并文件

把几个文件的页面合并成一个,可以通过「转移页面」功能来实现:
在文件A中选择所需页面,点击页面右侧的「更多」-「转移至」按钮,在弹出的面板中选择需要移入的空间-文件夹-文件B,就可以将文件A的页面转移(合并)到文件B中了。
需要注意的是:
1、文件不能没有页面,因此如果需要转移所有页面,得先新建一个一级空白页面。
2、相互转移的两个文件需为同一个版本,比如V8原型中的页面无法转移至V7原型中。

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

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

相关文章

硬件工程师面经整理20_阻抗匹配

文章目录 阻抗匹配_微波电路/低噪放/差分信号线1 微波电路的匹配电阻2 低噪声运放阻抗匹配3 差分信号线阻抗匹配一般是多少 互连链路阻抗特性 阻抗匹配_微波电路/低噪放/差分信号线 1 微波电路的匹配电阻 微波电路的匹配电阻指的是在微波频段内,由于电路阻抗的不匹…

html标签之表格标签,资料分享

二.准备工作 与中国大部分在校生一样,从不考虑多多参加社会活动为自己铺路,直到找工作时才发现自己一无所有。 是的,一无所有。对于求职来说,如果不找对口工作,那么你的专业知识已经无用武之地。能证明你能力的实践活…

Windows上websocket客户端连接定时存储消息到文件并加载文件定时发送服务端工具实现

场景 在业务开发中,需要对接三方websocket协议数据或者连接并存储线上websocket协议数据,需要使用websocket客户端 连接线上的websocket服务端获取并存储数据,然后将数据存储成文件格式可移植,并将数据复制 到本地,…

MATLAB知识点:while循环的注意事项

​讲解视频:可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇(数学建模清风主讲,适合零基础同学观看)_哔哩哔哩_bilibili 节选自​第4章:MATLAB程序流程控制 在使用while循…

Linux中basename作用

在Shell脚本中,basename 是一个用于提取文件名或路径的基本名称(basename)的工具。它通常用于处理文件路径,以获取文件的名称部分或去除路径信息。 basename 命令的语法如下: basename STRING [SUFFIX] 其中&#x…

docker 安装rabbitmq并配置hyperf使用

这里我想完成的是 制作消息(多个协程制造)——》推送到rabbitmq——》订阅消息队列——》消费消息(ws协程客户端【一次消费多条】/ws前端) 利用 WebSocket 协议让客户端和服务器端保持有状态的长链接,保存链接上来的客…

Grind 75 | 1. Two Sum | 2. valid parentheses

来刷刷Grind 75, Blind 75作者更新版. Leetcode1 两数之和 经典题 link 思路: 很明显用hash table,一开始思考遍历2遍数组,第一遍加入hash table中, 第二遍对每个元素看能不能找到sum target,但思考如果有重复元素…

阿里云2核4G服务器支持多少人同时在线?

2核4G服务器支持多少人在线?阿里云服务器网账号下的2核4G服务器支持20人同时在线访问,然而应用不同、类型不同、程序效率不同实际并发数也不同,2核4G服务器的在线访问人数取决于多个变量因素: 2核4G:2核CPU和4G内存对…

学习笔记-cmake

cmake的版本号说明: CMAKE_MINIMUM_REQUIRED(VERSION 3.10) # 指定编译 C 版本 set(CMAKE_CXX_STANDARD 17) 创建一个工程: project(preprocess) 工程下创建一个项目: SET(PROGRAM WorkStation) include路径: set (INCLUD…

Nginx原理以及基础知识详解

Nginx是一个高性能的HTTP和反向代理服务器,具有高并发性、高可靠性、低内存消耗等特点。其工作原理和基础知识如下: 一、Nginx的工作原理 Nginx采用多进程模型,主进程负责接收客户端的连接请求,然后将连接请求分发给工作进程来处…

读算法的陷阱:超级平台、算法垄断与场景欺骗笔记02_大数据

1. 大数据分析 1.1. 随着“大数据军备竞赛”与定价算法的广泛应用,线上购物平台与实体商铺的界限也变得越来越模糊 1.2. 在沃尔玛疯狂扩张的时代,它给地区性商业带来的伤害不亚于一场地震 1.2.1. 当地的小型商铺往往…

浏览器工作原理与Javascript高级(异步)

总体介绍 浏览器运行是多进程的,包括主进程、渲染进行、网络进程和GPU进程等等 解析HTML时(渲染进程)用到两大引擎,一个是渲染引擎(用于渲染页面)、一个是JS引擎用于解析JS代码。又JS引擎运行是单线程的,所以渲染和 …

Dubbo基础入门一

1、什么是Dubbo3 Apache Dubbo 是一款易用、高性能的 WEB 和 RPC 框架,同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践。 “Dubbo3 已在阿里巴巴内部微服务集群全面落地,成功取代运行多年的 HSF 框架。” 2、…

【Linux】Linux原生异步IO(二):libaio相关结构体、函数详解

1、结构体 1.1 iocb struct iocb成员变量详解: struct iocb {PADDEDptr(void *data, __pad1); /1、在io完成事件中返回,与io_getevents方法返回的io_event结构体data成员一致一般存放用户自定义数据、用户数据、回调函数*/PADDED(unsigned key, aio_rw_flags

5G 网络切片VLAN ID配置错误导致业务不可用

【摘要】随着电联5G共建共享工作的开展,无法及时有效观测到单逻辑站点的相关指标,导致单运营商用户业务出现异常。本案例中着重对单运营商用户无法使用网络进行相关参数排查,从KPI性能指标结合故障告警发生时间,从而分析由于网络切…

稀碎从零算法笔记Day6-LeetCode:长度最小的子数组

前言:做JD的网安笔试题,结果查找子串(单词)这个操作不会。痛定思痛,决定学习滑动数组 题型:数组、双指针、滑动窗口 链接:209. 长度最小的子数组 - 力扣(LeetCode) 来…

(学习日记)2024.03.06:UCOSIII第八节:空闲任务+阻塞延时+main函数修改

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

CSS字体样式值,前端开发基础学习

元素特点: 块状元素: 在页面中以矩形区域显示。自上而下排列,独占一行可以直接添加宽高一般情况下,作为其他元素或内容的容器 行内元素: 在页面中最小单位也是矩形。在一行内逐个排列。不可以直接添加宽高&#xf…

VGG16-CF-VGG11实验报告

说明:VGG16和CF-VGG11是论文《A 3D Fluorescence Classification and Component Prediction Method Based on VGG Convolutional Neural Network and PARAFAC Analysis Method》使用的两种主要模型。其对应代码仓库提供了实验使用的数据集、平行因子分析结果和CNN模…

vue3 (二)v-model高级用法

1、子组件可以无需使用事件,直接通过this.$emit(update:modelValue, newValue) 修改父组件的数据 前置条件: (1).父组件通过 v-model 绑定自身数据(可传递给子组件) (2).子组件通过props中的 modelValue 来接收数据 (3).子组件通…