Mockplus原型交互跟我做之3 - 认识“链接点”

Mockplus能够快速设置交互,其中有一个东西,你必须熟悉,就是“链接点”。

上两次,我们已经快速地做了一个可以实用的交互(自动消失的消息框),还做了一个花哨但没用的东西,旋转的风车。

暂时缓缓往下走,我们先来了解点“基本知识”,Mockplus几乎不需要学习,不过呢,如果多了解一点,上手更快。

Mockplus能够快速设置交互,其中有一个东西,你必须熟悉,就是“链接点”。

选中一个组件,组件的右上方,会出现一个小圆点,如图:

Mockplus原型交互跟我做之3 - 认识“链接点”

 

把鼠标移动到小点之上,会弹出一个工具条,如图:

Mockplus原型交互跟我做之3 - 认识“链接点”

当我们需要做页面链接的时候,按住这个小圆点,不放开鼠标,往项目树上拉动,到达一个页面上后,放开。这样,就在按钮和目标页面之间做了一个链接,这个链接表明,当我点击按钮时,会跳转到目标页面。如图:

Mockplus原型交互跟我做之3 - 认识“链接点”

按下F5,进入演示,点击这个按钮,此时,你看到页面跳转了。

当我们需要做页内的组件交互时(比如,点击按钮,图片往右移动),按住这个小圆点,不放开鼠标,往图片上拉动,到达图片后,放开(之后,会弹出一个选择交互命令的对话框)。这样,就在按钮和图片页面之间做了一个链接,这个链接表明,当我点击按钮时,会让图片移动。如图:

Mockplus原型交互跟我做之3 - 认识“链接点”

看到对话框,选择“移动”,之后确定。

Mockplus原型交互跟我做之3 - 认识“链接点”

按下F5,进入演示,点击这个按钮,此时你可以看到图片移动了。

Mockplus原型交互跟我做之3 - 认识“链接点”

 

好了,歇歇。

关于链接点和链接小工具条,还有些是可以了解的,不过,以后碰到我们再说。

喝杯咖啡先。

原创文章,作者:yanz kontol,如若转载,请注明出处:https://www.iamue.com/12393/

(0)
yanz kontolyanz kontol
上一篇 2016-01-21
下一篇 2016-01-22

相关推荐

  • Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

    弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。 内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。 一、自动关闭 默认情况下,弹出面板弹出后,…

    2016-07-07
  • Mockplus原型交互跟我做之6 - 快速给弹出面板命名

    在交互设计中,我们经常需要给弹出面板起一个名字,便于查看。

    一般的方式,是在属性面板中,通过“名称”来修改。

    但是还有更快捷的方式,就是选中弹出面板,按下空格键,然后输入名字。请看视频:

    2016-02-18
  • 【Mockplus教程】MAC上安装Mockplus

    1 下载 进入摩客官网桌面端下载页面,选择MAC版本下载; 2 安装 下载完成后,打开dmg包,将Mockplus图标拖动到Applications快捷图标上面即可完成安装。 整个过程见下方视频:

    Mockplus 2015-08-12
  • [Mockplus教程]重命名

    对页面和分组的重命名可以选中单个页面,然后使用F2进入名字修改状态,改完之后鼠标随便 点击其它地方即可完成修改。 对于选中页面也可以双击页面节点进入修改状态。 完整演示如下:

    Mockplus 2015-09-18
  • Chinco(摩客串串)——App原型交互演示利器

    Chinco是继国产原型设计软件Mockplus之后,由摩客团队独立设计开发,秉持了摩客团队“关注设计,而非工具”的一贯理念和产品风格。 Chinco是一款用于App原型交互演示的工具,为UX/UI设计师、交互设计师、视觉设计师的…

    2015-11-18
  • 【Mockplus教程】MAC 安全提示无法安装怎么办?

    在 Mac 上安装时可能会出现上图中的提示导致无法安装。 这个时候,只需要按住 Control 键,然后点按该程序的图标,选择打开。就可以安装了。

    2015-08-12
  • Mockplus原型交互跟我做之12–使用滚动区组件实现页面滚动

    Mockplus使用滚动区组件实现页面滚动

    2016-07-18
  • Mockplus原型交互跟我做之11–显示隐藏编辑背景

    在我们对弹出面板、抽屉、面板、滚动区等组件进行编辑时候,默认地,“外面”的编辑背景,会半透明地显示出来。 这对于编辑有好处,就是我们可以比较清楚地看到外面的情况,便于我们判断位置,放置组件,对齐组件等。…

    2016-07-14
  • 【Mockplus教程】删除

    1 删除单个页面或分组 直接选中需要删除的页面或分组,在右键菜单中选择“删除”,或者使用Delete键删除; 2 删除多个页面或分组 在同一个分组下,按住Ctrl键,鼠标单击页面选择多个需要删除的页面或分组,然后右击选…

    Mockplus 2015-09-10
  • Mockplus原型交互跟我做之9–再说“链接点”

    上次我们已经对链接小圆点进行了图文并茂的说明,其实无论是跨页链接还是页内链接,在链接创建好了之后,选中按钮,当你把鼠标移动到小圆点的时候,它会自动指示链接目标(链接到的页面或者组件),请参考如下演示…

    2016-07-07