目录
一、原型设计工具比较
墨刀
Axure
Mockplus
二、原型设计实践
1.原型设计主题
2.原型设计构思
3.原型设计实现
(1).工具选择原因
(2).软件功能实现
商品展示首页
点击鞋类
点击短裤
点击手机
4.界面交互
5.界面切换流程
一、原型设计工具比较
墨刀
-
优点
-
较为丰富的组件，可以实现稍微复杂的交互功能
-
优秀的协作功能可以实现多人同时协作，大大提高效率
-
界面简单，交互方便上手时间快，学习时间较短，出作品时间周期快
-
-
缺点
- 大部分高级功能需要vip，对于偶尔使用的人或者学生来说，成本较高，且不划算
- 不支持复杂交互，如果要实现复杂交互，比较繁琐且困难
- 自定义组件功能较弱，且用户自定义组件功能限制较大
Axure
- 优点
- 功能强大，不仅支持文档，图画等功能，并且交互简单，方便上手
- 可以实现复杂且流畅的交互操作，可以实现较为真实，细腻的交互演示
- 自定义组件丰富，用户自定义组件功能较强，可以实现多样化的组件演示
- 缺点
- 由于功能强大，所以交互界面较为复杂，且交互界面，部分功能使用频率较少，界面复杂
- 学习成本高，不易上手，且需要一定时间的实际操作才能实现基本功能
- 多人交互会有延迟，无法随时随地同步操作
Mockplus
- 优点
- 交互界面简单明了，容易上手操作，学习成本低
- 交互方便，交互提示简单易懂
- 项目层次明了方便可以随时更改项目子位置与图层位置，项目目录一目了然，有ps基础同学更容易操作
- 缺点
-
无法实现较为复杂丰富的交互界面
-
组件功能还需完善，无法实现较为丰富的交互动画
-
部分组件和自定义组件交互较差，例如进度条等功能无法交互
-
二、原型设计实践
1.原型设计主题
本组的主题为设计一款购物商城的app，我先姑且将他称作为识多多
2.原型设计构思
在众多的购物app中，他们的类型越来越不纯粹，各种附带的小程序应接不暇，所以我想设计一个只含购物的app。所以我着重设计并且优化了购物功能，对排版，设计，交互，功能性和实用性重点设计，让用户纯粹的体验购物的乐趣。
3.原型设计实现
工具选择原因
结合三个不同工具的优缺点考虑，最后选择了Mockplus。主要是由于项目工程较小，而且需要多人协作来实现，况且作业时间较少，其他几个的工具学习时间长，成本大。在多人协作的时候，摹客仅需要分享一个链接就可，故选择Mockplus。
本人设计了该app的分类界面
点击不同的图片可以跳转到不同的界面，该界面的功能：1.点击鞋的图片
2.点击短裤的图片
3.点击手机的图片
4.点击搜索栏
前置条件：打开该app并且在分类界面
当点击搜索栏时，会在该界面的下方弹出键盘
前置条件：点击搜索栏
后置条件：弹出键盘页面
前置条件：点击鞋类图片
后置条件：跳转至该界面
该界面有轮播图来展示此商品的各个视角的细节图，并且能够选择尺码以及点击下方的讨论、收藏以及购买
点击左上方的返回键可以返回至分类主页
前置条件：点击中心图片
后置条件：弹出鞋类的细节图
该界面有返回键和下一张两个按键，点击返回键可返回至鞋类的页面，点击右上的界面可以观看下一张的细节图
上方两图为上一级界面的演示图
前置条件：点击短裤的图片
后置条件：打开该短裤界面
该界面包含返回键，轮播图，选择尺码以及讨论收藏和购买
前置条件：点击手机的图片
后置条件：打开该手机界面
该界面包含返回键，轮播图，选择型号以及讨论收藏和购买
4.界面交互
为了更好的体验，现提供网址：https://rp.mockplus.cn/run/RMngrrNWR5xMg/GIQ4cnJESoei1/SqTgxu7qhPg4E?nav=1&cps=expand&rps=expand&rt=1&la=0&out=0&ha=0&dt=iphoneX& 请查看《识多多》
5.界面切换流程
标签：界面,实践,点击,原型,组件,设计,交互 From： https://www.cnblogs.com/serendipityc-2/p/17357658.html