首页 > 其他分享 >原型设计工具“墨刀”介绍

原型设计工具“墨刀”介绍

时间:2023-05-14 17:57:49浏览次数:45  
标签:原型 组件 设计 墨刀 交互 工具 页面

一、什么是墨刀

墨刀 MockingBot 是北京磨刀刻石科技有限公司旗下的一款在线原型设计与协同工具。

墨刀致力于简化产品制作和设计流程,采用简便的拖拽连线操作,作为一款在线原型设计软件,墨刀支持云端保存,实时预览,一键分享,及多人协作功能,让产品团队快速高效地完成产品原型和交互设计。

使用墨刀,用户可以快速制作出可直接在手机运行的接近真实 app 交互的高保真原型,使创意得到更直观的呈现。不管是向客户收集产品反馈,向投资人进行 demo 展示,或是在团队内部协作沟通、文件管理,墨刀都可以大幅提升工作效率,打破沟通壁垒,降低项目风险。

(摘自 墨刀官网:https://modao.cc/

二、墨刀能干什么

原型设计

1. 支持HTML、PNG、APK、IPA 多格式离线文件下载,还可以下载多倍率图片,满足不同分辨率需求;

2. 支持创建 iPhone/iPad、Android、平板、watches、PC 各平台设备的原型,也可以自定义设备尺寸;

3. 提供 iOS、Android 等平台的常用组件及大量精美图标,同时还可以自定义自己的个性化组件,方便项目之间自由切换、使用;

4. 通过拖拽创建链接及交互动效,提供丰富的页面切换方式、交互手势及动画,简单操作即可创作;

5. 通过二维码、链接分享,可以在网页、移动端、墨刀预览助手 app 中快速查看产品 demo 的演示效果。

开发标注

1. 使用Sketch插件上传设计文件,墨刀标注会自动生成设计标注信息及全平台样式代码,可以精准还原标注信息,并提供每个元素的 CSS、Swift、Android 样式代码;

2. 提供了业内完善的颜色解决方案。除了展示常规设计文件的全局颜色,还会自动生成当前页的页面颜色,还可以手动吸取颜色,随心定制你的个人色板;

3. 只需设计师导入Sketch切图,即可自动生成多倍率切图文件。可以一键下载全部切图,也可以根据实际需要,下载独立的元素切图;

4. 除了支持元素在各平台之间的颜色、分辨率换算,还支持手动设置 HTML 的字体大小单位(rem/em)。

Sketch插件

通过Sketch插件上传设计文件,墨刀标注会自动创建、精准还原设计文件所有样式信息,并提供元素 CSS、Swift、Android 各系统样式代码。 

三、墨刀有什么优点

1.交互设计:墨刀提供了丰富的交互设计功能,如热区、动画、过渡效果等,用户可以轻松创建具有交互性的原型。

2.设计流程:墨刀专注于优化设计流程,通过提供模板、样式库、版本管理等功能,使得设计师可以更快速地创建原型,同时也提高了团队协作效率。

3.可视化协作:墨刀支持在线协作和评论,设计师和团队成员可以随时随地进行交流和反馈,以提高设计质量和效率。

4.可扩展性:墨刀支持与其他应用程序的集成,如Slack、Jira等,可以方便地将设计流程整合到其他工作流程中。

 四、墨刀有什么缺点

1.限制:墨刀的免费版功能有一定的限制,如每个原型最多只能有20页,无法进行离线工作等。

2.编辑器:与其他原型设计工具相比,墨刀的编辑器可能不够灵活和强大。

3.兼容性:墨刀的原型在不同的浏览器和移动设备上可能存在兼容性问题,需要进行测试和优化。

4.安全性:墨刀是基于云端的在线工具,需要保证数据安全性和隐私保护。

五、如何使用墨刀(以网页版为例)

1. 创建应用

「项目管理页」,创建的项目都会展示在这里。右上角,选择新建项目。

 

「使用模板项目」,可先预览模板效果,挑选成功后点击「使用模板」即可。

 

「创建空白项目」,创建后可以编辑页面,还可上传启动图标和启动界面图。

 

2. 创建页面结构

在偏好设置-推荐模式下,页面列表位于工作区的左侧,与元素列表并排。 可以在页面列表下添加新页面、子页面、创建副本、移动当前页到其他项目、删除等操作。 在页面列表下方,有「页面回收站」,14天内误删除的页面可以在回收站进行找回。

3. 创建页面内容

从组件区拖出组件到页面设计区,对齐进行大小、颜色、外观等属性设置。

高频组件区位于左侧,画网页原型时,可以将页面列表收拢起来,空间会大很多。 右侧组件区包括内置的组件、我的组件(可以将高复用的组件添加到这里)、图标、母版(有继承性,一改全改)。 可以通过快捷键A或者在上方工具栏点击「素材库」对素材进行批量的管理。

 4. 添加页面交互

页面间交互

点击组件建立页面间的交互,将组件旁边的圆形链接按钮拖动(链接)到相应的页面。 在添加链接时,还可根据需求,设置不同的触发手势、定时器及动效。

页面内交互

页面交互可以用动态组件来制作,制作诸如加载动画、分页器、组件神奇移动等效果。墨刀也内置了WEUI动态组件、AntDesign组件,可以直接使用。

5. 项目预览、分享与下载

预览

工作区点击“运行”按钮,即可进入原型演示模式。 在“预览“页面,还可以设置原型是否带真机外壳,链接区域是否高亮,是否显示批注,内容区是否滚动。

点击右上角的“全屏模式”,进入全屏演示。并支持切换黑白背景色。

 

分享

点击该项目的“分享”按钮,可以获取一个二维码和分享链接。

 

在分享页面设置“权限”和“效果”,保证项目预览的私密性和顺畅性。

下载

离线文件可供演示、查看,但是不能用于编辑

标签:原型,组件,设计,墨刀,交互,工具,页面
From: https://www.cnblogs.com/bajiu89/p/17399535.html

相关文章

  • 原型设计
      Axure墨刀特点历史悠久短平快适用场景PC端APP,小型PC使用必须下载软件可以使用网页进行创作网络可以离线操作数据保存在云上,较依赖网络上手难度较高较低交互效果可以实现复杂逻辑关系无法实现复......
  • VCU整车管理控制器策略文档,量产车型使用。 快速原型开发 整车管理系
    VCU整车管理控制器?策略文档,量产车型使用。快速原型开发整车管理系统策略开发,应用层软件,在售车型最新版本软件。按照ASPIC开发流程开发,基于AUTOSAR架构开发,满足功能安全ASILC。模型和策略文档可以分开出。VCU整车管理系统应用层软件,策略文档。都是量产车型在用,不是仿真不是仿真......
  • 国内汽车车载电源DCDC首家,硬件原理图,软件源码,3带上位机调试工具,资料完全配套
    国内汽车车载电源DCDC首家,硬件原理图,软件源码,3带上位机调试工具,资料完全配套YID:65450666521985563......
  • 原型链与原型链继承
    1.原型对象:__proto__函数对象:__proto__  prototype原型链结构 查看一个空对象,__proto__. __proto__. __proto__. 每个__proto__指向创建它的__proto__ 最终指向Object的原型prototype(Object是一个函数对象)查找不到返回null2.函数继承//原型链继承fu......
  • kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具
    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。这个工具能通过两条指令完成一个kubernetes集群的部署:# 创建一个 Master 节点$kubeadminit​# 将一个 Node 节点加入到当前集群中$kubeadmjoin<Master节点的IP和端口 >1. 安装要求在开始之前,部署Kuber......
  • golang多版本管理工具g
    一、golang多版本管理工具g 一)g简介g是一个Linux、macOS、Windows下的命令行工具,可以提供一个便捷的多版本go环境的管理和切换 二)g特性支持列出可供安装的go版本号支持列出已安装的go版本号支持在本地安装多个go版本支持卸载已安装的go版本支持在已安装的go版本......
  • 工具篇-jenkins 暂时没用 看1
    jenkins持续集成 课程目标了解CI、CD的基本概念掌握Jenkins的主从集群搭建掌握Jenkins角色权限配置、分组配置、全局配置等核心配置的使用掌握Jenkins的持久化原理及目录结构、文件备份与恢复掌握pipeline声明式语法熟练使用pipeline语法配置进行微服务项目基于docker......
  • 原型设计工具
     本篇博客内容为介绍几种主流的原型设计工具,并且使用其中一种工具——《墨刀》设计本小组作业《云日记》的界面。AxureAxure是一款快速原型制作软件,是一个专业的快速原型设计工具;它的使用人群一般是产品设计师,能帮助网站需求设计者快捷而简单的创建基于网站架构图的带......
  • 【愚公系列】2023年05月 .NET CORE工具案例-Workflow-Core轻量级工作流引擎(随机流程)
    (文章目录)前言1.什么是工作流工作流是OA系统比较重要的功能之一,主要在于企业流程协同审批,有效进行流程管理。流程管理起源于生产组织和办公自动化领域,是针对日常工作中具有固定程序的活动提出的一个概念。目的是通过将工作分解成定义良好的任务、角色,按照一定的规则和过程来......
  • golang 实现一个自动注入跟踪代码工具
    如下面代码所示:packagemainimport("bytes""fmt""runtime""strconv")/**实现一个自动注入跟踪代码,并输出有层次感的函数调用链跟踪命令行工具.*/funcTrace()func(){//通过runtime.Caller函数获得当前Goroutine的函数调用栈上的信息,......