一、前言
-
本文内容和使用人群？
本文是为有原型设计软件基础的读者而设计的进阶指南。以建立一个拥有悬停组件和滚屏组件的界面为例，进一步介绍墨刀常见的用法，主要讲解跳转页面，切换页面状态，切换组件状态。
阅读本文后您将达到可以制作如下原型界面的水品：
image.png
（上图为复刻出的豆瓣读书首页，网址为豆瓣)
如果您还不熟悉墨刀的基本界面，建议先阅读系列学习（一）入门篇。链接如下：
用墨刀做原型设计（一）入门。
二．跳转页面（首先要保证您至少已经创建了两个页面）
在入门教程里，我们提到了拖动闪电图标创建链接的方式。这种方式等价于用单机鼠标来出发的跳转界面。
我们可以选中一个组件或图片来制作更为丰富的跳转界面。
- 选择触发方式
选中一个组件，在右上角选择事件，单机添加事件，把默认的单击触发方式改为”长按“。
image.png
（可以自由选择想要胡触发方式） - 选择目标页面：
目标页面：触发组件后弹出的页面。需要在设置跳转界面前创建好目标界面。
image.png -
选择动画效果
这里的效果类似PPT中翻页时胡过渡动画。通常的网页里选择不设置动画效果，如果是做手机端app原型设计的话，可以选择喜欢的效果。
image.png
设计完毕后，我们就完成了跳转界面的设置。
三、跳转页面实例
-
以我创建的原型界面为例：
-
选中搜索按钮。（在这之前要创建一个点击搜索按钮后跳转至的目标页面。
image.png 按照二.跳转页面的操作：
- 选择自己想要的触发事件方式。
- 在行为栏选择跳转页面
-
选择切换目标：要跳转到的页面
-选择重复目标页滚动位置，选择无动效。
image.png
-
预览：
image.png
单击后跳转：
image.png
（提前在目标界面中放置URL为目标链接的WebPage组件）
-
切换页面状态
以鼠标悬停字体变色效果为实例：
-
创建目标状态页面：
1.1复制主页的所有内容，（CTRL+A）→新建状态→把主页内容粘贴至新建状态
image.png
1.2讲新建状态中状态的“购书”白底黑字改为黑底白字，字体加粗：，
image.png
-
设置主页→目标的链接：
单击主页的“购书”文字，按照以下步骤添加事件：
2.1 选择触发方式为“鼠标移入”
2.2选择行为“切换页面状态”
2.3选择为目标为：“状态2”（或其他你想要转到的页面）
image.png -
设置目标→主页的返回链接：
从右侧最上方的状态栏进入状态2，单击“购书”文字，按照以下步骤添加事件：
2.1 选择触发方式为“鼠标移出”
2.2选择行为“切换页面状态”
2.3选择为目标为：状态1
2.4选择动效为神奇移动，时常为400ms
image.png
4.预览：
鼠标移至“购买”字样时，字体变白，背景色变黑
image.png
鼠标移开“购买“，字体变回初始状态
image.png
这样我们就完成了鼠标悬停效果的设计。
以上是进阶部分的内容，讲解了网络上认为很难处理的”鼠标悬停“效果。
如果您还有疑惑，可以在评论里提问，如有必要我还会出第三期教程来解答。
