墨刀是一款功能强大的在线设计工具,软件的设计初衷就是想让用户设计产品更加的方便快捷,所以其所有的功能都是为此而服务的,在它里面你可以快速的搭建一个产品的架构,为大家演示产品的设计思路和成品。也可以在团队讨论时使用它,与你的团队成员一起展示产品想法、收集大家的设计意见和思路,让工作更加高效。设计完成后还可以将作品随时随地的分享给别人,无论别人是使用电脑、手机或微信都可以看到,并给出反馈和进行修改,让产品设计更加简单。墨刀最大的特点就是支持多人协作编辑,在平常设计中我们肯定要不断的听取多方面的意见对产品进行设计,但是每个人的想法都不一样,如果光靠口头交流效率是很低下的,所以小编给大家推荐了这款软件,有了它让设计变的更加简单。
功能介绍
一、基本操作
1、链接,手势,定时器
2、屏幕滚动
3、返回上一页
4、左右滑菜单
5、分享及手机运行
二、高保真原型
1、批量上传设计图
2、链接区域,固定标题栏
3、ios状态栏重叠
三、进阶:母版
1、定时轮播图
2、下拉菜单
3、母版局部滚动
四、进阶:动画
1、页面内交互入门
2、全局状态
3、apple watch
4、FAB效果按钮
5、FAB效果播放器
软件特色
1、完美的预览原型真实交互效果,让你有一种真实的模式感受;
2、个人、写作、团队项目可以同步进行,以便用户可以随时在线查看;
3、含有离线浏览服务,在没有网络的情况下,也能轻松预览,简单方便;
4、多中服务器为用户提供选择,可以根据自己的需求,选择性在应用中使用;
5、用户可以免费在线注册,没有任何费用,每一位用户都能轻松注册;
6、可随时随地预览自己的原型项目,以便用户可以随时了解项目的动态。
墨刀使用教程
【项目创建】
1、首先,打开软件,当然了,也可以在网页端进行编辑,不过为了更加方便的操作,小编还是建议下载一个体验比较好。
2、可以看到在右上方,有一个新建项目选项,点击选择,即可新建一个项目。
3、当然了,可以根据自己的需求,选择新建的项目,比如说是iPhone端,iPad端,或者是web端。
4、除了上面新建的空白项目之外,下面还提供了很多模板类型,比如钱包模块以及注册登录模块等,都是可以直接拿来使用的。
5、选择新建空白项目,上面有项目名称,以及图标和启动页面,项目名称为必选项,图标以及启动页面可以稍后在上传。
6、设置好名称,选择创建,即可新创建一个空白项目,接下来再空白项目里面进行相应的编辑即可。
【链接、手势及定时器】
使用软件可以非常方便的创建页面间链接,独创的拖拽链接方式,让页面间的链接关系清晰呈现眼前,要创建页面间链接,只需要选中要链接的组件,然后拖动组件右侧的小圆圈到目标页面就可以了。
创建好链接之后,我们会看到链接选项面板:
可以看到,链接面板包含3个部分:手势、切换动画以及定时器,下面我们来依次介绍这3个部分。
由于手势需要较大的可点击区域,所以并不是所有组件都支持手势,目前支持手势的组件包括:全局手势,链接区域,图片以及矩形,可选的手势,共有6种:点按,长按以及上下左右滑动。
接下来就是页面切换动画选择,共有15种特效可供选择,如果您不确定需要那种效果,可以在选中之后,将鼠标移到上面的预览框,对效果进行预览。
最后是定时器,可以设定这个链接的自动跳转时间,到达时间后,即使用户没有任何操作,应用也会自动跳转到目标页面,适合制作轮播动画等等。
【如何制作滚屏效果】
如果页面内容超过了当前屏幕的默认高度,只需要对屏幕高度进行扩展,就可以在预览模式下通过滚屏来查看超出屏幕部分的内容了,扩展屏幕高度非常简单,只需要点击屏幕底部的“扩展屏幕高度”按钮就可以了。
如果需要对屏幕高度实现精确控制,也可以将鼠标移到屏幕底部,待鼠标变为拖动图标后,直接拖动屏幕底部来调整屏幕高度。
【墨刀如何制作侧滑/抽屉菜单】
要建立侧滑菜单(或者抽屉菜单)效果需要用到全局手势组件:
首先假设你已经有了三个页面,分别是居中的主页面,左滑菜单以及右滑菜单,现在我们需要拖动两个全局手势组件到居中的主页面的任意位置:
然后分别将两个手势组件与两侧的菜单相连,下面以左滑菜单为例,创建好连接之后,我们需要将手势设定为左滑动,然后选择“左菜单”作为页面切换效果:
同理,连接另一个全局手势到右侧菜单,相应的选择“右滑动”手势以及“右菜单”交互,然后点击运行,菜单效果就做好了:
【分享及手机端运行】
如果需要分享原型给好友,只需要点击右上方的运行按钮,然后就可以看到左侧的二维码以及分享链接了,直接复制粘贴二维码下方的分享链接给好友就可以了,分享就是这么简单。
如果需要在手机上查看,扫描二维码后会看到提示按钮的界面:
你可以选择保存到主屏幕,或者直接在浏览器查看,这里要特别说明的是,如果你做的是微信应用,希望能在微信中直接打开而不用显示这个按钮界面,那么只需要在运行界面勾选“直接在微信查看”选项,然后点击保存就可以了:
如果是安卓手机,则会看到下载APK的选项,点击下载安装就可以像真实App一样在手机端预览了。
常见问题
1、如何制作顶栏及底栏固定,内容区滚屏效果?
拖拽拉长手机屏幕,将所有内容放到屏幕内,预览时就可以直接看到滚屏效果了。调节屏幕左侧的两个滑块的位置可以固定顶栏和底栏,具体操作方法见下面教程:
制作滚屏教程:https://modao.cc/guide/291
顶栏及底栏固定教程:https://modao.cc/guide/294
2、墨刀怎么设置或者更改屏幕尺寸?
非常简单,返回项目管理页,鼠标悬停在某应用上,点击浮动页面下部的齿轮图标也就是应用设置按钮,选择平台以及选择不同的手机型号就可以设置应用的尺寸了。
3、软件有模板么?
有的哟,触发条件:登录账号,进入项目管理页,点击右上角的加号就可以看到官方的一些模板了。你可以选择从模板中新建应用,新建的同时模板中包含的母版文件也会随同复制到你的账号里。在其他的应用中随时可以使用这些母版哦!
4、怎样做左右滑动的页面效果?
只需拖动全局手势或者对组件进行链接时选择左右滑动手势以及左右移入动效即可。
5、素材库不见了,怎样打开素材库弹窗呢?我想要更多的图标?
首先,你需要从组件区拖取一个“星星”图标,界面右侧会弹出“3”号图标弹窗(如果没出现就进行第二步)
第二步,点击工具栏小星星,打开图标面板。
第三步,在搜索框找寻你的真爱icon。
6、墨刀软件能做页面内交互么?比如下拉菜单、弹窗效果、轮播图等?
页面内交互可以用“母版”功能实现。
定时轮播:https://modao.cc/guide/180
母版联动:https://modao.cc/posts/246
下拉菜单:https://modao.cc/guide/286
界面弹窗:https://modao.cc/posts/971
7、点选组件好困难啊,鼠标要戳穿了!怎么解决?
遇到这种情况,请点击左上角保存按钮对当前操作进行保存,之后刷新该页面,或清理浏览器缓存后重启浏览器。
小兔建议:工作两小时刷新工作区页面,同时记得眺望远处,出门散散步哦,忙碌的同时也要注意身体健康哦!
8、做好的应用可以下载下来吗?软件内部图标可以导出PNG吗?
可以导出哦。软件支持导出HTML压缩包、PNG压缩包、单独页面的PNG图片以及安卓下的APK离线安装包。