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教程】标尺和参考线

    每个页面都拥有单独的标尺和参考线,可以用于辅助组件的对齐以及尺寸调整。   1. 使用标尺   新建页面之后,在主菜单中选择“显示标尺”即可看到工作区左边和上边显示出 标尺。标尺有两种显示方式:百分比…

    Mockplus 2015-08-31
  • 【Mockplus教程】复制/克隆

    复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在需要粘贴的位置鼠标右击,在弹出的菜单中选择“粘贴”。 2. …

    Mockplus 2015-09-10
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • 微信小程序的原型设计尝鲜

    "小程序”来了,大世界要变了?微信小程序可能是近期业绩最火的话题之一了。这个根植于微信流量巨无霸的应用,将对应用市场、对微商、电商、对企业的开发成本、获客成本将产生深远影响?将制造出绕开Google Play和Ap…

    2016-10-17
  • 【Mockplus教程】界面闪烁花屏怎么办?

    在个别笔记本电脑上,运行Mockplus桌面版出现软件界面闪动或者界面出现黑色块。 在这种情况下,请更新您的显卡驱动程序,问题一般可解决。 或者,如果你有多个显卡,尝试切换到集成显卡。 如何切换显卡:http://ask…

    Mockplus 2015-08-12
  • 【Mockplus教程】MAC上安装Mockplus

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

    Mockplus 2015-08-12
  • Mockplus原型交互跟我做之7 - 拉长页面做滚动,并固定顶部和底部

    在Mockplus的App项目,你可以快速地拉长页面做滚动,并且固定顶部和底部。请看视频:

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

    进入摩客官网桌面端下载页面,选择对应的版本(windows/MAC)下载。 下载完成后,即可按照向导开始安装。 windows安装的整个过程见下方视频:  

    2015-08-12
  • [桌面版] 在 Mockplus 2.1 (预览版)中使用滚动区

    1、添加一个滚动区。为方便查看,可以设置一个背景色 2、双击编辑滚动区 3、点击滚动条两端的按钮可以扩展或收缩滚动区中的内容。在两端按钮按下的同时,按住Ctrl键,可以加速扩展或收缩。也可以直接把内容组件拖到…

    2015-11-12
  • Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框(Toast)

    从现在做,跟我一起来认识Mockplus的交互。 Mockplus的交互,非常简单、直观、容易上手。你所需要做的,只是拖一拖鼠标,然后几步设置而已。 当然,只要你愿意,还可以实现强大的交互效果。 不废话,先来做一个,试…

    2016-01-18