墨刀原型工具-小白入门篇

1.引言

作为一个小白,要怎么在短时间内快速学会原型设计?

"时间紧,任务重",如何在短时间内理解、掌握一个原型设计工具的使用?据同事们的推荐,选择了入手"墨刀"这个软件!

2.软件介绍

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

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

2.1 下载地址

官网下载地址:https://modao.cc

2.2 安装使用

1、 安装

(1)双击下载的.exe文件

(2)直接使用第三方工具登录,可使用微信扫描登录

(3)登录成功之后的界面

3.基础使用

创建项目的几种方法:

  • 新建空白原型项目;
  • 从模板创建原型项目;
  • 从素材广场创建项目;

3.1 创建原型

3. 1.1 新建空白原型

点击【新建】按钮,选择点击【原型】:

再选择相应类型的原型,选择【新建空白原型】点击确认即可:

系统自动打开新建的空白原型(可进行修改原型名称):

3.1.2 模板创建原型

点击【新建】按钮,选择点击【原型】:

再选择相应类型的原型,选择相应模板,再点击确认即可:

系统自动打开新建的模板原型(可进行修改原型名称):

3.1.3 素材广场创建项目

点击墨刀首页左侧的【素材广场】:

可进行搜索,也可以在下放分类中进行选择:

点击选择的原型,系统会打开原型:

点击右侧的【立即使用】

再点击【确定】:

再点击【打开素材】:

系统自动打开新建的素材原型(可进行修改原型名称):

3.2 组件创建

按住【shift】键,选中多个对象,右键点击【选中的对象】,选择【组合】

选择刚建立的【组合】,然后选择【添加到】-【我的组件】:

填写组件名【新组件】,再点击【确定】:

从左侧【组件】中,选择【我的】,可以看见新建的组件:

3.3 分享

4.案例实现

案例:https://modao.cc/proto/MjuWNEj2scsxvsi9wSmdbU/sharing?view_mode=device\&screen=sl2fvdy5TtCAaowprIK19e\&canvasId=ssl2fvdyTtCAaowXf4R3mh

4.1 案例1:固定底部

描述:固定底部,一屏内容超出显示滚动

(1)新建->原型->选择尺寸(详见3.1)

(2)往编辑区域添加元素

(3)设置固定底部导航

弄一个超出底部的页面:

(4)点击预览,则会有底部固定,中间可以滚动的效果

4.2 案例2:跳转

描述:点击内容跳转到其他页面

根据刚才的长图完成点击长图中的矩形区域,跳转到另外一个页面

(1)选中矩形选框区域,点击右侧【事件】,再点击【添加事件】

(2)添加跳转

(3)点击预览,则会有页面跳转

相关推荐
liaozk_c4 个月前
Axure10_win安装教程(安装、汉化、授权码,去弹窗)
axure·墨刀
不秃头的UI设计师4 个月前
新手向导:选用Axure还是墨刀?
axure·墨刀
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(表单组件)
笔记·微信小程序·小程序·交互·墨刀·表单组件
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(常用组件)
墨刀
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(素材面板)
笔记·微信小程序·小程序·notepad++·墨刀·素材面板
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(编辑页面)
笔记·微信小程序·小程序·交互·notepad++·墨刀·页面
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(安装以及基础使用教程)
笔记·微信小程序·小程序·墨刀
Stitch .6 个月前
微信小程序云开发教程——墨刀原型工具入门(添加交互事件)
笔记·微信小程序·小程序·交互·墨刀
Stitch .7 个月前
微信小程序云开发教程——墨刀原型工具入门(文件设置+编辑组件)
笔记·微信小程序·小程序·notepad++·组件·墨刀