Mockplus进阶：交互原型设计实例赏析

交互原型设计是交互设计师最主要的工作之一，也是体现优秀交互设计师能力的重要参考点。想做好原型设计，你需要学习并掌握大量的知识。比如交互规范、设计原则、心理学、排版、用户体验、原型图制作等，它是产品概念和构想的形象化表达。

在原型图设计阶段，有很多工具可供我们选择。但是，选择一款合适的原型工具将会大大提高工作效率。今天，给大家推荐的还是国产原型设计工具-Mockplus。很多小伙伴反馈说，很多效果无法用Mockplus设计。小编得为Mockplus说句公道话了，那可能是你没用心去研究。Mockplus设计交互采取的是一键拖拽的方式，所见即所得。软件看似简单，实际上通过一些小小的叠加设置，可以实现很多复杂的效果。下面，以几个交互原型设计实例，带大家一起进阶学习Mockplus。

交互效果之-滚动停留

相信平时喜欢网购的朋友都会发现这个交互，我们在淘宝网上看中一件商品，点击后会进入商品页面。当我们滚动页面一段距离后，页面中的“宝贝详情”、“累计评论”及“专享服务”这个选项卡会停留在页面最顶端。那么，在Mockplus中该如何实现这种交互原型效果呢？

先来看看效果：

演示地址：https://run.mockplus.cn/raYgbWVi4uo2tdTl/index.html

实现方法：两个滚动区的嵌套使用

具体实现步骤分析：

1. 新建一个滚动区（滚动区1），在滚动区里放“宝贝详情”、“累计评论”、“专享服务”选项卡及其上面的组件。

2. 在滚动区1里面嵌套一个滚动区2，放“宝贝详情”、“累计评论”、“专享服务”选项卡下面的组件。

3. 回到滚动区1，点击滚动区1“+”号，将高度调至“宝贝详情”、“累计评论”、“专享服务”选项卡正好在顶部时。

4. 将滚动区2的高度调至一定高度（网页项目）；或是将滚动区2的高度调至手机满屏高度（移动项目）。

5. 退出滚动区编辑状态，就实现该效果了，演示时注意鼠标位置，滚动“宝贝详情”、“累计评论”、“专享服务”选项卡上面时，鼠标放在上面区域，滚动下面时，鼠标放在下面区域。

交互效果之-动态进度条

进度条是产品原型中比较常见的进度展示功能。在Mockplus封装的组件库中，进度条都是静态的，那么如何做出动态的原型效果呢？其实也非常简单，简单几步就能搞定。

先来看看效果：

演示地址：https://run.mockplus.cn/k1BzSNsIJEWnaAFy/index.html

实现方法：移动+调整尺寸

具体实现步骤分析：

• 在图一中，“按钮”组件直接对圆形组件设置移动交互即可。
• 在图二中，“按钮”组件直接对形状组件设置调整尺寸交互即可。
• 在图三中，“按钮”组件对图片组件设置移动交互，对形状组件设置调整尺寸交互。

交互效果之-移动支付

在支付界面，我们首先要求用户选择某一种支付方式（如：支付宝、微信、银行卡等）。选定后，点击“下一步”按钮时，会弹出相应的支付界面。目前在Mockplus中是无法实现条件判断的，那么这种原型设计效果该如何实现呢？

先来看看效果：

演示地址：https://run.mockplus.cn/2l8U5FQac2PUnQPB/index.html

具体实现步骤分析：

1. 克隆三个“下一步”按钮。
2. 选择某一支付方式（如：支付宝）对某一个“下一步”按钮设置“显示”交互，对其它两个“下一步”按钮设置“隐藏”交互。
3. 选择其它支付方式，以步骤2方法设置同样交互。
4. 用“下一步”按钮对相应的支付界面设置“弹出”交互。
5.将其中的任意两个“下一步”按钮设为不可见，再和另外一个“下一步”按钮重叠后，置于底层。

结语：

只要你用心多研究，使用更快更简单的原型设计工具-Mockplus做交互原型设计，一样可以做出复杂的效果。老司机或者新手小白（下载地址）都来试试吧！

【摹客七月震撼回馈：199元原型设计终身用！】

即日起至8月5日，摹客在线原型，终身特权；Mockplus个人终身版，感恩钜惠。还有老用户专属福利等你领！

一半价格，双倍体验！

活动地址：https://www.mockplus.cn/buy/mockplus-perpetual