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

分享一款适用于产品经理和设计师的原型工具——墨刀。相对于axure等传统设计软件&＃xff0c;它最大的特点是轻、快&＃xff0c;不需要下载&＃xff0c;打开浏览器就能使用&＃xff0c;没有复杂的中继器、函数概念&＃xff0c;上手非常快&＃xff0c;可以满足大部分场景的原型和交互设计。

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

下面分享一下墨刀4.0的使用方法&＃xff0c;我们一起加油~

Step1:快速创建应用

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

*如使用网页版&＃xff0c;可以用chrome浏览器&＃xff08;最新版&＃xff09;登录&＃xff0c;使用IE、360浏览器等可能产生兼容性问题。

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

点击左上角&＃xff0c;可以切换个人空间和企业空间。

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

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

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

Step2 : 创建页面结构

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

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

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

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

Step3 : 创建页面内容

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

墨刀有两个组件区&＃xff1a;

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

右侧组件区&＃xff1a;包括墨刀内置的组件、我的组件&＃xff08;你可以将高复用的组件添加到这里&＃xff09;、图标、母版&＃xff08;有继承性&＃xff0c;一改全改&＃xff09;

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

Step4&＃xff1a;添加页面交互

页面间交互

页面设计好以后&＃xff0c;要建立页面间的交互&＃xff0c;只需要点击组件&＃xff0c;将组件旁边的圆形链接按钮拖动&＃xff08;链接&＃xff09;到相应的页面就可以啦&＃xff01;

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

页面内交互

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

组件神奇移动

素材库内置的动态组件

自己制作动态组件

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

Step5&＃xff1a;项目预览、分享及下载

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

预览

工作区点击**“运行”**按钮&＃xff0c;即可进入原型演示模式。

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

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

分享

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

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

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

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

下载

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

模板素材包

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

网易考拉原型模板&＃xff1a;https://org.modao.cc/app/19b49c4512159d83da68d02d869331044cb9d1c6

支付宝原型模板&＃xff1a;https://org.modao.cc/app/f7aa5f2645c63f8a4407b6c317966c43dba7689e

今日头条模板&＃xff1a;https://org.modao.cc/app/62dd5da8ab8aa2ed5bf420cff174e016acff00cf

招商银行模板&＃xff1a;https://org.modao.cc/app/41613ad93a96b857eaa4f9dcfd9daf97704f5250

京东模板&＃xff1a;https://org.modao.cc/app/494dad4a60aec643878749f69427302fa8bcc6d9

网易云音乐模板&＃xff1a;https://org.modao.cc/app/5OdUpa7Xthqm67X8DtlGScgSP43Lgjy