邮箱订阅

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

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

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

热门文章

Mockplus是什么?

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

了解更多

交互神器-最好用的Mac原型设计工具

Thomas 2018-07-26 08:59:46 阅读:1474

市场上有着大量的开发和设计工具支持在Mac上安装使用,今天给大家强烈推荐一款Mac上的原型设计工具-Mockplus,原型工具在产品开发设计中是必不可少的,无论是现在非常火的小程序设计,还是网页设计,移动APP设计等。在设计前期,我们都需要对产品概念进行细致的原型设计,只有这样才能确保为后期开发节省时间。


一、初识界面


原型工具-Mockplus Mac版的界面非常简洁,我们分区域来了解一下:


mac原型设计工具介绍-软件界面


顶部:顶部有主工具栏,其中包含了主菜单和最常用的快捷按钮;

中间:是你创作时的工作区。在工作区底部,你可以查看到项目尺寸信息,设置工作区缩放,还可以设置软件偏好;

左上侧:是项目树面板,其中包含了项目和所属的各个页面或分组;

左下侧:是组件面板,其中包含了组件、图标、我的组件库以及母版,你可以通过选项卡做切换;

右上侧:是属性面板,其中可以设置组件属性、交互和页链接,你可以通过选项卡做切换;

右下侧:是组件大纲面板,其中包含了某个页面中组件的层次关系。


二、交互设置


只需拖一拖鼠标,即可完成交互原型设置(内置多种常用的交互方式,如弹出 / 关闭、内容切换、显示 / 隐藏、移动、调整尺寸、缩放、旋转等),交互原型设计从未如此简单。无需编程,无需了解交互的具体过程。


mac原型设计工具-交互设置


三、分享方式


当完成自己的原型设计后,可以通过导出不同方式(8种演示方式)将其分享给自己的老板、同事或客户,随时随地查看原型。


四、交互原型设计案例分享


下面是自己使用Mac原型设计工具-Mockplus制作的几个交互案例供大家参考,让你真正体会到它的好用。


案例1:时间选择器效果图


mac 版mockplus时间选择器的做法


设计方法:

使用滚动区和文本组件,将文本组件放在滚动区内部,滚动区设置为纵向滚动。

其中滚动区里的文本可以使用“快速格子”来做到快速填充和排版。

效果链接如下:

https://run.mockplus.cn/DCmqFweEVJMaYH1c/index.html

案例2:卡片移动效果图


mac版mockplus 制作卡片移动


设计方法

1. 将图片组件放入到滚动区中。

2. 将图片组件转换为格子,调整好间距后直接使用内部素材快速填充。

3. 选中某一图片组件,对其它组件设置移动交互,对自己设置缩放及移动交互。下一相邻图片组件除对其它组件设置移动交互,对自己设置缩放及移动交互外,还需要对上一个相邻图片组件设置缩放交互。


mac版mockplus卡片移动交互设置


效果链接如下:

https://run.mockplus.cn/xZ5msZhbVMFOk4Kt/index.html

案例3:下拉刷新效果图


下拉刷新


设计方法

使用面板组件对自己设置2个移动交互,一个向下移动,一个向上移动(延迟执行)。

效果链接如下:

https://run.mockplus.cn/3TVtugzReNZgdbWm/index.html

小结

以上就是Mac交互神器-最好用的原型设计工具Mockplus的一些常见操作,非常轻松的就能实现常见的交互原型效果。当然,能实现的效果远远不止这些,大家可以下载后去找如今流行的APP临摹实操一下。相信你会很快熟悉上手并制作出自己的原型作品。


好文推荐:

2018年交互设计旅程中的7个设计趋势

掌握这6条“讲故事”原则,助你提高用户体验

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

_____

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

免费下载
logo
咨询客服

在线客服

置顶