一、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点。
Axure
优点:
1.有强大的编辑功能, 使得制作素材库会更便捷一点。
2.更快的复制粘贴,素材库和原型库会多一些。
3.可以项目共享,使得同事间可以同步工作,并保留所有工作历史,并可以随时到处历史版本的项目文档。
缺点:
1.正版的Axure售价高,学生等群体可能负担不起。
2.动态面板和中继器较为复杂,要完全弄懂也需要一定的时间成本,学习成本高。
3.Axure只支持在本地设计。
墨刀
优点:
1.操作效率高,易于上手。
2.动效丰富。
3.分享二维码到微信等十分方便。
4.可自动生成页面流程图。
5.专为移动端产品原型设计而生。基本上能满足移动端产品原型的设计要求并且系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,减少了不少不必要的工作环节。
缺点:
1.必须在线操作(离线无法保存)。
2.免费版对于项目数量、页面数量有限制。
3.页面流程图不能自由操作。
Mockpuls
优点:
1.基础版免费使用,操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作。
2.有原型演示,可以帮助前端设计师、后端程序员更好地理解你的原型产品。
3.mockplus有组件库和图标库,界面设计较为方便。
缺点:
1.不支持鼠标悬停,手机预览不是很清楚,日历表组件是静态的。
2.表格功能还需要完善。
三者的比较
墨刀和Axure:
总的来说墨刀和Axure就像美图秀秀和photoshop。前者都是简化了基础的操作,很像封装好了一个函数,你直接调用就可以了。大部分小伙伴外出拍了照片肯定是美图秀秀,选选效果,感觉不错之后立即分享。但是真的设计到很多的图层组合,可控地调整页面元素,还是会用到photoshop,这其实就涉及到不同的需求,你用这个软件是想达到什么目的,是更想研究逻辑结构还是更像展现原型效果,从目标来选择你的工具。
Mockplus除用于移动APP原型设计,还可以制作PC、网页的原型设计,它可以帮助UI设计师在最短的时间内完成产品原型图的设计。
最后用网上经常出现的十分贴切的比喻:
Mockplus和Axure这种原型工具相比:
如果说Axure这种原型工具是一头沉重的大象,Mockplus则是一只轻快的小鹿。至简即至繁。
Mockplus和墨刀这样移动APP原型设计相比:
如果说墨刀是移动APP原型设计工具上的一只麻雀,Mockplus则是一只成熟的老鹰。原型设计和功能比较齐全,而且应用场景广。
二、利用网络资源自学Mockplus或墨刀等原型设计工具,并利用原型工具自拟主题进行原型设计。
在本次原型设计实验中我将使用摩客进行原型设计。下面分为三点对设计过程进行说明。
1.主题
Keep健身运动APP
Keep是一个致力于提供健身教学、跑步、骑行、交友及健身饮食指导、装备购买等一站式运动解决方案。
2.功能
《Keep》是一款综合性的健身应用,主要功能包括提供各种健身教学、跑步、骑行训练,以及健身饮食指导和装备购买等
《Keep》还提供了线下运动空间和智能硬件产品,并拥有一个活跃的社区,用户可以在这里分享运动成果和经验。此外,《Keep》还支持智能运动手环等可穿戴设备,这些设备能够监测用户的心率、睡眠质量等健康数据,并与《Keep》应用同步,用户还可以参加各种线上线下的运动活动和俱乐部,享受运动的乐趣。
3.界面设计
(1)登陆界面
- 首先打开软件将其登陆界面显示给用户
这个界面我将其添加了交互命令,载入时触发实现 页面跳转命令,慢慢淡入到商城界面。
(2)商城界面 - 由搜索框,图片,各种图标,文字组件组成。
- 搜索框我设置了热区命令,点击可以跳转到搜索键盘界面。
- 点击“健康食品”按钮,可以跳转到健康食品界面。
- 图片运用面板实现了滚动效果。
(3)搜索键盘界面 - 由各种组件和图片滚动面板组成。
- 点击“取消”可返回到商城界面。
- 图片运用了面板实现了滚动效果。
(4)健康食品界面 - 点击搜索键盘界面中的“取消”后,返回到商城界面。
- 点击“健康食品”图标,进入到健康食品界面。
- 由图标,文字,图片组件构成。
- 点击“<”可返回到商城界面。
- 点击“即时鸡胸肉”这个商品,可跳转到购买界面。
(5)购买界面 - 由图片滚动页面和各种按钮构成。
- 点击“<”可返回到健康食品界面。
- 点击“立即购买”图片按钮,可出现一个辅助面板弹窗,点击“X”可退出弹窗。
- 再次点击弹窗上的“立即购买”按钮,可跳转到确认订单界面。
(6)确定订单界面 - 点击“立即购买”按钮后,跳转到确认订单界面。
- 由图片,文字组件和“返回”按钮组成。
- 点击“返回”可跳转回购买界面。
4.界面切换流程图
5.实验中遇到的问题及解决方法
对于长图片滚动效果,弹窗设置,不太熟悉,与同学进行交流沟通后,并在网络上进行课程分析解决了这些问题。
三、原型设计
视频演示链接:https://www.bilibili.com/video/BV1pm41127cy/?share_source=copy_web&vd_source=c4339ef73f146be31f2f00322b6e1662
原型链接:https://rp.mockplus.cn/rps/kvMVhfGM6U? 请查看《新项目》