邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

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

Thomas 2018-05-30 15:00:39 阅读:16050

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


在原型图设计阶段,有很多工具可供我们选择。但是,选择一款合适的原型工具将会大大提高工作效率。今天,给大家推荐的还是国产原型设计工具-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做交互原型设计,一样可以做出复杂的效果。老司机或者新手小白(下载地址)都来试试吧!

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶