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

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

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

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

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

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

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

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

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

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

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

好了,歇歇。

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

喝杯咖啡先。

摩客 

简洁高效的原型设计工具

专注设计,而非工具

最近博客

使用Mockplus的九大理由Mon Sep 01 2014

Mockplus 的主要应用人群Mon Sep 01 2014

联系信息
时间: 2024-12-08 02:58:50

Mockplus原型交互跟我做之3 - 认识“链接点”的相关文章

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

从现在做,跟我一起来认识Mockplus的交互. Mockplus的交互,非常简单.直观.容易上手.你所需要做的,只是拖一拖鼠标,然后几步设置而已. 当然,只要你愿意,还可以实现强大的交互效果. 不废话,先来做一个,试试. 我们来做一个自动消失的消息框(Toast). 请看视频:

原型交互设计入门,我该选哪个工具?

交互设计是我们原型设计中很重要的一部分, 如何快速掌握一个原型设计工具,尽快入门,高效地完成工作? 这里选择了三款原型设计工具作对比,希望给想入门或者刚入门的童鞋提供一些参考. Axure - 知名而强大的原型设计工具 Mockplus - 新兴的快速原型设计工具 JustinMind - 高保真原型设计工具 这三个工具,都是基于桌面的应用.基于Web的在线工具,以后如果有机会再作介绍. 第一部分 设置交互 设置交互,是完成一个交互设计的开始.我暂时把交互设置分为两类:页面链接和组件交互. 设置

交互设计的职能:交互设计师具体做什么

Ⅰ. 先了解一下交互设计的基本概念: 交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的.交互设计师通过设计用户的行为,让用户更方便更有效率的通过产品去完成自己的业务目标,获得愉快的用户体验. Ⅱ.交互设计在项目流程中的位置和任务: 项目前期的流程和节点: 职能的细化就是为了让产品在每个专业环节都做到极致,提高竞争力.如果是为了走流程,每个环节都是任务式的交付,臃肿的分工除了增加成本和拖慢项目进度,没有实际意义.所以交互设计需要做的足够好,才能将这份工作做的有意义. Ⅲ.交互

MockPlus原型设计介绍

MockPlus原型设计介绍 在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们已经大概掌握了原型设计软件Axure的使用,因此在这里,我选择了另一原型设计进行介绍,与Axure有很高相似度的原型设计软件:Mockplus. 引言: Mockplus(摹客)是一款简洁快速的原型图设计工具.适合软件团队.个人在软件开发的设计阶段使用.其低保真.无需学习.快速上手.功能够用.并能够很好地表达自己的设计. 了解一点Axure

适合新人使用的Mockplus原型图设计软件

对于UI方面设计的新人来说,一是没多少经验,二是工作压力.迫切的想快速入手,AXTRUE学习起来需要一段的时间去慢慢的接触熟悉,Mockplus这款软件的横空出世,给新手带来和福音.以下本人总结的使用Mockplus的几个理由! 1.入手Mockplus简单,功能够用.不用专门学习如何使用.工具毕竟是工具,工具只是辅助你的工作,不要让工具左右你的工作,让工具成为你的负担. 2.拿着设计的原型,给项目经理和技术讲解,人家一眼就能看明白你要做什么东西了.附上简单的说明,人家就能拿你的原型图做开发了.

Mockplus原型设计工具介绍

一.原型设计工具简介 Mockplus (摹客)  一种快速原型设计工具 官网提供四个平台的下载,通用性很广. 二.原型设计的模板 Mockplus可以为设计者提供以下几种模板 其中在“手机”模板里,系统又提供了许多app应用的样式 进入”手机”模板里的”Lyst”模板 在”网页”模板里,也提供了许多网页的设计样式 进入”网页”模板里的”Mockplus”网页的模板 三.Mockplus提供的基本功能和组件功能(以下内容以”手机”模板的”AnyList”模板为例) 界面左上角为页面查看区 左下角

Axure RP——原型图设计,做一个合格的产品经理(1)

一.关于Axure Axure是一款设计页面原型图的软件工具,它可以通过拖拽组件的方式快速生成页面预览,还可以对组件进行丰富的样式和事件设定,使页面预览更接近实际效果. Axure通常用于网站或软件开发的需求分析阶段,产品经理在分析了客户提出的需求后,在团队开发能力范围内设计产品的预览效果,大致确定成品的验收标准. 二.使用Axure 1.操作页面 2.在页面目录窗口新建或删除页面,调整页面结构 3.鼠标在元件窗口选择组件或图标拖拽到工作窗口进行页面搭建 4.在检查窗口的属性版里设置触发事件.在

dedecms5.7可以做淘宝客链接跳转吗

百度在封杀淘宝客链接,不知大家用5.7做淘宝客的时候,是怎样隐藏链接的呢? 我看有的网站是这样的(不一定是dede做的站)网站一个页面有淘宝客链接,但是生成的html源码里是本站域名开头的链接,就是说淘宝客链接被转换过了,这样就躲过了百度的检查但是一旦点击之后,却是直接跳到淘宝页面的,原先的淘宝客链接出现在地址栏里. 很想知道这样的是怎样做到的呢?或者用dede5.7怎样可以做到?http://www.shaoxing.com.cn/zhongyi/jkkx/20141107/3593624.h

做个友好的链接

主要两点:a.根据具体的链接给出图片提示:b.鼠标移至链接上出现具体的内容提示:                       1.给链接添加图片 这里主要运用到css的属性选择器E[attr$="value"],表示拥有属性attr,且属性值以value结尾的元素E.举个栗子: a[href$=".zip"] { background-image:url("img/zip1.png"); } 表示href的值以".zip"结尾