专栏首页无原型不设计交互神器-最好用的Mac原型设计工具

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

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

一、初识界面

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

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

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

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

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

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

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

二、交互设置

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

摹客设计系统上线了!三大福利送不停!

领取福利

三、分享方式

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

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

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

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

设计方法:

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

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

效果链接如下:

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

案例2:卡片移动效果图

设计方法

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

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

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

效果链接如下:

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

案例3:下拉刷新效果图

设计方法

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

效果链接如下:

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

小结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你所不知道的快速原型设计技巧

    快速原型设计工具,怎么选?当然是要快,要简单,这样回答很正确,但太笼统。具体来讲,交互设置要简单方便,组件的交互和样式要复用高效,方便重复使用,才能算真正的更快...

    奔跑的小鹿
  • 如何构建UI组件设计规范?

    以下内容由摹客团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。

    奔跑的小鹿
  • 照虎画虎——简单WeUI模板UX设计学习

    艺术虽然分为独立的各个领域,但是总有相通之处。UI/UX设计也是一种艺术,就像美术一样,UI/UX的设计也需要大量的临摹其他优秀作品来提高自己的水平。 不过...

    奔跑的小鹿
  • 去中心化支付系统 Stellar

    在这一篇文章中,我们将介绍去中心化的支付系统 Stellar,它被设计与实现的目的就是在区块链和传统中心化的金融机构之间构建一个桥梁;其目的并不是创建一套完整的...

    哲洛不闹
  • 解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

    关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。

    Eller
  • 3 个 React 状态管理的规则

    React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook,负责管理功能组件内部的状态。

    疯狂的技术宅
  • 5个要点,决定你的交互设计是否成功!

    交互设计(Interaction Design):定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以...

    BestSDK
  • WEB也玩虚拟现实,网页的未来可以更智能;

    记得n年前,曾经有一个组织声明要在网页上实现显示3D图形的技术,当然,之后就杳无音信了。

    舒克
  • 开发 | 小程序自定义组件怎么用?看完这篇文章你就知道了

    之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。

    知晓君
  • 通过案例分析MySQL中令人头疼的Aborted告警

    这篇文章通过案例跟大家分析了MySQL中令人头疼的Aborted告警的相关资料,文中将Aborted告警介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友...

    拓荒者

扫码关注云+社区

领取腾讯云代金券