恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
可协作的原型设计工具(附免费行业模板素材)
0.0°
2019-03-18 原创文章 教程 举报 2187 4 2 0

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


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


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


Step1:快速创建应用


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


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


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

Image title


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


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


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

Image title


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

Image title


Step2 : 创建页面结构

Image title


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

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


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

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


 Step3 : 创建页面内容

Image title


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


墨刀有两个组件区:


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

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

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


Step4:添加页面交互


页面间交互


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


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

Image title


页面内交互


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

Image title


组件神奇移动

Image title


素材库内置的动态组件

Image title


自己制作动态组件

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


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


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


预览


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


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

Image title


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

Image title


分享

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

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

Image title


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

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

Image title


下载


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

Image title


模板素材包


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


网易考拉原型模板: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

Image title


更新:2019-03-18

收藏

4人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1448

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2019-03-18 原创文章 教程 举报 2187 4 2 0

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

      0.0°

      你确定要举报可协作的原型设计工具(附免费行业模板素材)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录