市场上有着大量的开发和设计工具支持在Mac上安装使用，今天给大家强烈推荐一款Mac上的原型设计工具-Mockplus，原型工具在产品开发设计中是必不可少的，无论是现在非常火的[url=https://www.mockplus.cn/blog/post/940]小程序设计，还是网页设计，[url=https://www.mockplus.cn/blog/post/965]移动APP设计等。在设计前期，我们都需要对产品概念进行细致的原型设计，只有这样才能确保为后期开发节省时间。
一、初识界面
原型工具-Mockplus Mac版的界面非常简洁，我们分区域来了解一下：
顶部：顶部有主工具栏，其中包含了主菜单和最常用的快捷按钮；
中间：是你创作时的工作区。在工作区底部，你可以查看到项目尺寸信息，设置工作区缩放，还可以设置软件偏好；
左上侧：是项目树面板，其中包含了项目和所属的各个页面或分组；
左下侧：是组件面板，其中包含了组件、图标、我的组件库以及母版，你可以通过选项卡做切换；
右上侧：是属性面板，其中可以设置组件属性、交互和页链接，你可以通过选项卡做切换；
右下侧：是组件大纲面板，其中包含了某个页面中组件的层次关系。
二、交互设置
只需拖一拖鼠标，即可完成交互原型设置（内置多种常用的交互方式，如弹出 / 关闭、内容切换、显示 / 隐藏、移动、调整尺寸、缩放、旋转等），交互原型设计从未如此简单。无需编程，无需了解交互的具体过程。
[url=https://ds.mockplus.cn/?hmsr=thomas]摹客设计系统上线了！三大福利送不停！
[url=https://ds.mockplus.cn/?hmsr=thomas]领取福利
三、分享方式
当完成自己的原型设计后，可以通过导出不同方式（[url=http://doc.mockplus.cn/?p=1390]8种演示方式）将其分享给自己的老板、同事或客户，随时随地查看原型。
四、交互原型设计案例分享
下面是自己使用Mac原型设计工具-Mockplus制作的几个交互案例供大家参考，让你真正体会到它的好用。
案例1：时间选择器效果图
设计方法：
使用滚动区和文本组件，将文本组件放在滚动区内部，滚动区设置为纵向滚动。
其中滚动区里的文本可以使用“[url=http://doc.mockplus.cn/?p=2811]快速格子”来做到快速填充和排版。
效果链接如下：
[url=https://run.mockplus.cn/DCmqFweEVJMaYH1c/index.html]https://run.mockplus.cn/DCmqFweEVJMaYH1c/index.html
案例2：卡片移动效果图
设计方法
1. 将图片组件放入到滚动区中。
2. 将图片组件转换为格子，调整好间距后直接使用内部素材快速填充。
3. 选中某一图片组件，对其它组件设置移动交互，对自己设置缩放及移动交互。下一相邻图片组件除对其它组件设置移动交互，对自己设置缩放及移动交互外，还需要对上一个相邻图片组件设置缩放交互。
效果链接如下：
案例3：下拉刷新效果图
设计方法
使用面板组件对自己设置2个移动交互，一个向下移动，一个向上移动（延迟执行）。
效果链接如下：
小结
以上就是Mac交互神器-最好用的原型设计工具Mockplus的一些常见操作，非常轻松的就能实现常见的交互原型效果。当然，能实现的效果远远不止这些，大家可以[url=https://www.mockplus.cn/download]下载后去找如今流行的APP临摹实操一下。相信你会很快熟悉上手并制作出自己的原型作品。
好文推荐：
[url=https://www.mockplus.cn/blog/post/876]2018年交互设计旅程中的7个设计趋势
![[致奋斗的你]TANGPION](https://img.zhisheji.com/Fk_B53cYb4RjlpM-_tz02-mCHuNB?imageMogr2/quality/100/sharpen/1/thumbnail/290x/crop/!290x180)
粤公网安备 44030902001796号 粤ICP备19041343号-3
签到成功
jongde
全部评论()
还没人评论，赶紧抢占沙发