一、前言
-
本文內(nèi)容和使用人群醉蚁？
本文是為有原型設(shè)計(jì)軟件基礎(chǔ)的讀者而設(shè)計(jì)的進(jìn)階指南燃辖。以建立一個(gè)擁有懸停組件和滾屏組件的界面為例鬼店，進(jìn)一步介紹墨刀常見的用法，主要講解跳轉(zhuǎn)頁面黔龟，切換頁面狀態(tài)妇智，切換組件狀態(tài)滥玷。
閱讀本文后您將達(dá)到可以制作如下原型界面的水品：
image.png
（上圖為復(fù)刻出的豆瓣讀書首頁，網(wǎng)址為豆瓣)
如果您還不熟悉墨刀的基本界面巍棱，建議先閱讀系列學(xué)習(xí)（一）入門篇惑畴。鏈接如下：
用墨刀做原型設(shè)計(jì)（一）入門。
二．跳轉(zhuǎn)頁面（首先要保證您至少已經(jīng)創(chuàng)建了兩個(gè)頁面）
在入門教程里航徙，我們提到了拖動(dòng)閃電圖標(biāo)創(chuàng)建鏈接的方式如贷。這種方式等價(jià)于用單機(jī)鼠標(biāo)來出發(fā)的跳轉(zhuǎn)界面。
我們可以選中一個(gè)組件或圖片來制作更為豐富的跳轉(zhuǎn)界面到踏。
- 選擇觸發(fā)方式
選中一個(gè)組件杠袱，在右上角選擇事件，單機(jī)添加事件窝稿，把默認(rèn)的單擊觸發(fā)方式改為”長按“楣富。
image.png
（可以自由選擇想要胡觸發(fā)方式） - 選擇目標(biāo)頁面：
目標(biāo)頁面：觸發(fā)組件后彈出的頁面。需要在設(shè)置跳轉(zhuǎn)界面前創(chuàng)建好目標(biāo)界面伴榔。
image.png -
選擇動(dòng)畫效果
這里的效果類似PPT中翻頁時(shí)胡過渡動(dòng)畫纹蝴。通常的網(wǎng)頁里選擇不設(shè)置動(dòng)畫效果，如果是做手機(jī)端app原型設(shè)計(jì)的話踪少，可以選擇喜歡的效果塘安。
image.png
設(shè)計(jì)完畢后，我們就完成了跳轉(zhuǎn)界面的設(shè)置秉馏。
三耙旦、跳轉(zhuǎn)頁面實(shí)例
-
以我創(chuàng)建的原型界面為例：
-
選中搜索按鈕。（在這之前要?jiǎng)?chuàng)建一個(gè)點(diǎn)擊搜索按鈕后跳轉(zhuǎn)至的目標(biāo)頁面萝究。
image.png 按照二.跳轉(zhuǎn)頁面的操作：
- 選擇自己想要的觸發(fā)事件方式免都。
- 在行為欄選擇跳轉(zhuǎn)頁面
-
選擇切換目標(biāo)：要跳轉(zhuǎn)到的頁面
-選擇重復(fù)目標(biāo)頁滾動(dòng)位置，選擇無動(dòng)效帆竹。
image.png
-
預(yù)覽：
image.png
單擊后跳轉(zhuǎn)：
image.png
（提前在目標(biāo)界面中放置URL為目標(biāo)鏈接的WebPage組件）
-
切換頁面狀態(tài)
以鼠標(biāo)懸停字體變色效果為實(shí)例：
-
創(chuàng)建目標(biāo)狀態(tài)頁面：
1.1復(fù)制主頁的所有內(nèi)容绕娘，（CTRL+A）→新建狀態(tài)→把主頁內(nèi)容粘貼至新建狀態(tài)
1.2講新建狀態(tài)中狀態(tài)的“購書”白底黑字改為黑底白字，字體加粗：栽连，
-
設(shè)置主頁→目標(biāo)的鏈接：
單擊主頁的“購書”文字险领，按照以下步驟添加事件：
2.1 選擇觸發(fā)方式為“鼠標(biāo)移入”
2.2選擇行為“切換頁面狀態(tài)”
2.3選擇為目標(biāo)為：“狀態(tài)2”（或其他你想要轉(zhuǎn)到的頁面）
image.png -
設(shè)置目標(biāo)→主頁的返回鏈接：
從右側(cè)最上方的狀態(tài)欄進(jìn)入狀態(tài)2，單擊“購書”文字秒紧，按照以下步驟添加事件：
2.1 選擇觸發(fā)方式為“鼠標(biāo)移出”
2.2選擇行為“切換頁面狀態(tài)”
2.3選擇為目標(biāo)為：狀態(tài)1
2.4選擇動(dòng)效為神奇移動(dòng)绢陌，時(shí)常為400ms
image.png
4.預(yù)覽：
鼠標(biāo)移至“購買”字樣時(shí)，字體變白熔恢，背景色變黑
鼠標(biāo)移開“購買“脐湾，字體變回初始狀態(tài)
這樣我們就完成了鼠標(biāo)懸停效果的設(shè)計(jì)。
以上是進(jìn)階部分的內(nèi)容叙淌，講解了網(wǎng)絡(luò)上認(rèn)為很難處理的”鼠標(biāo)懸统诱疲“效果愁铺。
如果您還有疑惑，可以在評論里提問闻鉴，如有必要我還會(huì)出第三期教程來解答茵乱。
