Axure RP 9基礎教程（2）——互動樣式

原文連結：Axure RP 9基礎教程（2）——互動樣式

正文：

上一篇文章我們學習了Axure的介面以及基本操作，明白了哪些區域的功能是用來幹什麼的，也能夠透過基本的操作來自己做一些簡單的頁面互動

在這篇文章我們將繼續學習互動效果，我們將學習到互動效果中的互動樣式的兩個常規操作，讓你的頁面看起來更高階

在開始學習之前，我們先了解一下互動的意義

互動，即交流互動，那麼我們做的互動效果中的互動是誰跟誰在互動呢？

這個問題沒有標準答案，你可以理解為使用者與資訊之間的互動，頁可以理解為使用者與產品之間的互動

這裡就拿使用者與一個產品的互動為例，比如我作為一個使用者和Google之間的互動：

這裡是Google的一個新建標籤頁，我要如何與它對話呢？它又如何與我交流呢？

看我接下來的操作：

我作為一個使用者，想要進入Google新建標籤頁中的嗶哩嗶哩網站，也就是這個：

圖1

那麼作為一個使用者，作為一個沒有殘疾大腦正常的我應該怎麼做呢？

是的，我們會把滑鼠指標先移動到這個紅色方框內，然後點選它，於是我們就成功地進入了嗶哩嗶哩網站：

圖2

圖3

注意，在這個過程中發生了什麼呢？使用者與產品之間進行了哪些對話？互相交換了哪些資訊呢？

我們把使用者從Google標籤頁進入B站的過程分成下面幾個步驟：

①找到嗶哩嗶哩網站的圖示。如圖1

②將滑鼠指標移動到嗶哩嗶哩網站圖示上。如圖2

③好，確定瞄準圖示了，點選滑鼠左鍵！如圖3

於是你成功到達嗶哩嗶哩首頁門戶

那麼，在上面這個過程中，Google做了什麼呢？

讓我們用Google的視角重新看一下圖1、圖2、圖3

①告訴你嗶哩嗶哩網站的圖示在哪。如圖1（得有一個按鈕讓你的眼睛看到）

②告訴你你的滑鼠指標真的移動到了圖示上面了。如圖2（這裡就是利用一個填充效果的改變讓你觀察到）

③讓使用者跳轉進入介面。如圖3（設定一個跳轉的連結實現頁面跳轉）

所以，在你從Google進入B站的過程中，看似稀疏平常。可實際上，你們之間已經進行了三次你沒有察覺到的交流互動。

那麼現在，就讓我們用Axure來學習上面這三種交流互動：

實戰：製作原型—從Google到Bilibili

第一步：首先我們要做的第一步是什麼呢？建立我們需要的頁面環境，我們需要兩個頁面：分別是Google和Bilibili，在站點地圖建立好：

我們假設我們建立的Google就是Google，我們的Bilibili就是Bilibili，我們拉出兩個一級標題來標註一下

第二步：接下來我們按照剛剛的操作步驟來對介面進行處理：

使用者操作的第一步是用眼睛找到Bilibili的圖示，那麼我們先建立一個圖示，作為傳送門幫助使用者跳轉介面，從元件庫拉出一個矩形，調整一下大小，雙擊輸入文字，移動位置放到標題下方對齊（這裡也可以用到我們第一課學習到的居中對齊功能，選中兩個元件，點選居中對齊即可）：

現在我們就讓使用者用眼睛能夠找到圖示了

第三步：接下來我們讓使用者能夠確認滑鼠指標有沒有移動到圖示上

這裡我們用到了互動功能中的互動樣式，我們選中元件，點選互動—新建互動—選擇“互動樣式”中的“滑鼠懸停”：

意思是設定滑鼠指標懸停到該元件時，元件表現出不同的樣式，用這種方式來讓使用者判定自己的滑鼠指標有沒有放置到元件上面

我們點選“滑鼠懸停”後出先一個樣式面板供我們對樣式進行設定：

注意，這個時候元件屬性頁面的“樣式”下的樣式和“互動”下的樣式是兩種不同的樣式，前者是元件本身的樣式，後者是我們設定了“互動樣式：滑鼠懸停”之後，滑鼠指標懸停在元件上時，元件表現出來的樣式

為了大家更直觀的理解，我們這裡把元件本身的樣式設定為填充色為紅色，互動樣式設定為滑鼠懸停時，填充色為藍色，點選“預覽”：

是的，元件本身的樣式被設定成了紅色，所有滑鼠指標沒有移動到元件上時，它一直是紅色

當你把滑鼠指標放置在元件上時，它就會變成藍色，用一種無聲的語言告訴你：“你已經瞄準了我，可以開始點選了。”

第四步：像我們第一課中學習到的那樣，新建互動—單擊時—開啟連結—選擇“Bilibili”頁面即可實現單擊圖示時介面跳轉：

就這樣我們利用Axure實現了從Google到Bilibili頁面跳轉的互動效果製作，自己試試吧！

​我整理了一套產品經理學習大禮包福利。

含BAT大廠培訓內部資料、PRD模板、面試真題。

微信公眾號搜尋“鹹拾亂碼”或掃描文末圖片，關注公眾號【鹹拾亂碼】傳送【禮包】即可免費領取！公眾號也會定期更新產品乾貨！

​

​