可协作的原型设计工具（附行业模板素材）

Posted 2021-02-13 productcompass

分享一款适用于产品经理和设计师的原型工具——墨刀。

相对于axure等传统设计软件，它最大的特点是轻、快，不需要下载，打开浏览器就能使用，没有复杂的中继器、函数概念，上手非常快，可以满足大部分场景的原型和交互设计。

近期，墨刀又推出了4.0版本，新增加了用户可以自定义和批量管理的组件库、素材库，并且完善了企业级的协作功能。这对于产品经理来说是个利好消息，可以创建团队的设计系统库，不管是版本之间，还是多个团队之间都可以保持步调一一致。

下面分享一下墨刀4.0的使用方法，一起加油~

Step1:快速创建应用

*官网推荐大家使用墨刀桌面客户端进行操作，能带来更好的使用体验。

*如使用网页版，可以用chrome浏览器（最新版）登录，使用IE、360浏览器等可能产生兼容性问题。

注册/登录墨刀后，首先到达的是「项目管理页」，创建的项目都会展示在这个页面。

 

 

点击左上角，可以切换个人空间和企业空间。

点击下方，可以选择「使用模板项目」还是「创建空白项目」。

使用模板项目：墨刀内置了丰富的模板项目，可先预览模板效果，挑选成功后点击「使用模板」即可。通过编辑模板你可以更快地掌握页面设计、交互设计的方法，也可在此基础上完善个人产品原型。

 

 

创建空白项目：有手机、平板、自定义等多种平台，创建后可以编辑页面，还可上传启动图标和启动界面图。

 

 

Step2 : 创建页面结构

 

在偏好设置-推荐模式下，页面列表位于工作区的左侧，与元素列表并排。

你可以在页面列表下添加新页面、子页面、创建副本、移动当前页到其他项目、删除等操作。

在页面列表下方，有「页面回收站」，14天内误删除的页面可以在回收站进行找回。

PS：良好的页面结构如同一个清晰的脑图，能够帮助制作者在复杂的产品原型中理清思路。

 

 Step3 : 创建页面内容

 

墨刀创建页面内容非常的简单：从组件区拖出组件到页面设计区，对齐进行大小、颜色、外观等属性设置就可以了。

墨刀有两个组件区：

高频组件区：位于左侧，当您画网页原型时，可以将页面列表收拢起来，空间会大很多。

右侧组件区：包括墨刀内置的组件、我的组件（你可以将高复用的组件添加到这里）、图标、母版（有继承性，一改全改）

快捷键A或者在上方工具栏点击「素材库」，您还可以对素材进行批量的管理。

Step4：添加页面交互

页面间交互

页面设计好以后，要建立页面间的交互，只需要点击组件，将组件旁边的圆形链接按钮拖动（链接）到相应的页面就可以啦！

在添加链接时，还可根据需求，设置不同的触发手势、定时器及动效。

 

页面内交互

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

 

组件神奇移动

 

素材库内置的动态组件

 

自己制作动态组件

更为深入的交互可以查看官网状态的使用方法。

Step5：项目预览、分享及下载

原型制作过程中，不但可以随时检查原型在pc或移动设备上的真实运行效果，还可以将原型分享给你的同事或朋友，让大家第一时间看到设计成果。

预览

工作区点击“运行”按钮，即可进入原型演示模式。

在“预览“页面，你还可以设置原型是否带真机外壳，链接区域是否高亮，是否显示批注，内容区是否滚动。

 

 

 

还可以点击右上角的“全屏模式”，带来更有沉浸感的演示体验。并支持切换黑白背景色。这个演示效果非常棒！

 

 

分享

 

在墨刀，你可以轻松分享原型项目给你的同事或客户，或者在进行用户测试时分享给用户查看。

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

 

将分享链接或二维码传给对方，对方就能在电脑端或者手机上查看你的原型了。

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

 

 

下载

常用的图片、html格式墨刀都又提供。不过离线文件可供演示、查看，但是不能用于编辑，墨刀的文件必须在线编辑。一般来说，你可以将已经定稿的项目下载下来，存档或者交付给开发。

 

模板素材包

登录墨刀，点击创建项目即可使用这些模板素材。

网易考拉原型模板：https://org.modao.cc/app/19b49c4512159d83da68d02d869331044cb9d1c6

支付宝原型模板：https://org.modao.cc/app/f7aa5f2645c63f8a4407b6c317966c43dba7689e

今日头条模板：https://org.modao.cc/app/62dd5da8ab8aa2ed5bf420cff174e016acff00cf

招商银行模板：https://org.modao.cc/app/41613ad93a96b857eaa4f9dcfd9daf97704f5250

京东模板：https://org.modao.cc/app/494dad4a60aec643878749f69427302fa8bcc6d9

网易云音乐模板：https://org.modao.cc/app/5OdUpa7Xthqm67X8DtlGScgSP43Lgjy