墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理。
当你想制作原型设计图,在网上搜索原型设计工具的时候,在知乎、CSDN等平台上总是能看到墨刀的身影,下面我就通过一个实际的例子来感受一下墨刀的使用体验。
在进入墨刀后,首先进行用户注册,注册完成后就能使用,墨刀提供web版本的工具,可以减少用户下载安装应用的麻烦,新用户享有免费体验7天,点击新建按钮就能新建原型项目
可以看到墨刀为我们提供了许多当前市面上常见app的原型模板,我们只需要直接选择创建就可以使用了,极大的减少了用户在原型设计上所花费的时间。
不过我这个项目不需要下面的这些模板,于是我选择了iPhone12的模板进行创建。进入项目界面后,首先能看到的主界面如下图:
左边栏是一个应用中的各个页面,一个应用不可能仅仅只有一个主页页面,向我们平时使用的软件,如学习通、B站等,都是由多个页面所组成,在这些页面之间建立起相对应的联系,一个软件完成的操作逻辑才能说是被完整的搭建了出来。
中间部分就是页面所对应的界面了,用户利用右边的组件工具栏,将组件脱出到界面中,组成一个完整的界面。
右边就是一个大的项目设置,可以更改项目的默认布局、模板和网格。
下面就通过我们小组的合作项目:文曲星——基于动态数据可视化的高校智能学习辅助系统的原型设计来深入体验一下墨刀的各种功能。
首先是一个登录功能,这是每一款应用都必须要有的功能,只有通过对个体用户进行信息上的采集,才能更好的进行个性化的服务,一个登录功能应该包含有登录界面、注册界面、找回密码界面。
登录界面应该包含用户名与密码的输入框、执行登录操作的按钮、注册账户和找回密码界面的跳转链接组成。
注册界面应该由用户名、手机号、密码、确认密码、手机验证码这五个部分的输入框以及执行注册操作的按钮组成。
找回密码应该由手机验证码、新密码、新密码确认输入框和确认修改密码组成。
实际效果如下图所示:
完成界面的布局后,就应该建立这三个界面的跳转关系了,墨刀提供了可视化的界面跳转指向工具,只需要点击选中控件,将空间左边的小闪电标志拖向想要跳转到的页面即可完成,这种可视化的操作使得不懂代码的人也能很好的使用这个工具,降低了使用门槛,但是如果一个页面存在太多的跳转关系,所相连的线交织在一起时,就会显得非常的混乱,这是图形化操作所带来的不可避免的缺点。
在完成跳转的链接后,通过运行测试发现,界面之间的跳转非常的生硬,这时候就需要动画的加入使得跳转变得流畅好用,按照下面的步骤就能为跳转页面添加动效了
1.选中刚刚添加好跳转功能的控件
2.点击右边栏的事件选项卡
3.点击添加事件
4.选择合适的动效,这里我选择了右移入
这样,我们就完成了页面间跳转的动画,一个软件最初的模样已经出现在我们眼前了。
紧接着,就是软件的首页设计了,首先是在页面的底部加入常见的导航栏,将四个位置分别更改为:首页、消息、笔记、我的,并更改相应的图标,给予用户更直观的使用体验,同时,因为墨刀不支持页面嵌套,所以无法实现底部导航栏不动而中间内容改变的效果,只能实现生硬的转换效果,具体制作步骤同上。
在此处我并不打算添加动效,避免底部导航栏跟随运动导致穿帮。
最终效果:
总结:
墨刀是一款对于新手非常友好的原型设计工具,提供了海量的常见模板,同时支持web端进行设计,并将文件同步至其云盘中,保证多设备的同步,自动的对齐功能非常智能,对于页面跳转,可视化的拖线操作也非常的友好,并提供了简单的动画添加功能。
但是这款软件也并非没有缺点,其原型设计出来的结果过于的简单,难以完成复杂的操作,同时对于当前市面上各类app常用的底部导航栏的跳转支持不佳,导致各个画面的切换相当的生硬。
下面是本工程的体验链接,欢迎各位拜访提出意见。
https://modao.cc/app/dd4ef90528f8ce93bea738e47cf24135b8ff356d?simulator_type=device&sticky