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

引言

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

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

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

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

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

软件介绍

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

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

官网下载地址: 墨刀 - 在线一体化产品设计协作平台 (modao.cc)编辑https://modao.cc/https://modao.cc/https://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原型中。

相关推荐
.生产的驴20 分钟前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
Hejjon39 分钟前
SpringBoot 整合 SQLite 数据库
笔记
西洼工作室3 小时前
【java 正则表达式 笔记】
java·笔记·正则表达式
初学者7.3 小时前
Webpack学习笔记(2)
笔记·学习·webpack
新手上路狂踩坑4 小时前
Android Studio的笔记--BusyBox相关
android·linux·笔记·android studio·busybox
汤姆yu6 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
stm 学习ing6 小时前
HDLBits训练3
c语言·经验分享·笔记·算法·fpga·eda·verilog hdl
尘觉6 小时前
算法的学习笔记—扑克牌顺子(牛客JZ61)
数据结构·笔记·学习·算法
计算机徐师兄6 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净6 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序