上下文鏈接：交互設(shè)計文檔-1：經(jīng)驗和設(shè)計工具、交互設(shè)計文檔-2：設(shè)計工具的選擇 、交互設(shè)計文檔-3：Axure線框圖實例

上篇用SNS未登錄首頁的實例介紹了Axure RP Pro制作線框圖(Wireframe)的基本操作方法，嗯，那只是個入門。這個工具更多的“好東西”在這篇，以及在大家自己的研究之中。下面，我就把我所用到過的“好東西”先來分享分享，嘿嘿！

1、Masters（通用模塊）
上篇的未登錄首頁中的底部，在網(wǎng)站中是通用的內(nèi)容，因此我們可以利用到Masters（通用模塊）。在通用模塊中新增一個取名為“footer”的Masters。

雙擊“footer”模塊名進行編輯，將Home頁中footer的內(nèi)容剪貼到模塊中。為了在頁面中的準確定位，我給footer也加了一個底色框。

然后別忘了把“footer”拖到Home頁中相應(yīng)的位置哦。

一個Menu(Vertical)：垂直菜單，一個Menu(Horizontal)：水平菜單。
菜單默認的一級Menu Item（菜單選項）有3個，我們可以通過右擊某個選項來插入同級菜單(Menu Item)和增減下一級菜單(Submenu)。還可以編輯菜單

Tips：按鍵盤Tab鍵只會讓當前聚焦點在菜單選項間浮動，不能增加新菜單選項。
新增加的菜單選項的寬度會跟之前被操作的菜單的寬度相同；
另外，在菜單中修改任一菜單選項的寬度，整個菜單的寬度都會被修改。也就是說，菜單寬度值是各個一級菜單選項的和，而不是自己事先定好的寬度。

拉長或縮短整個菜單的寬度時，只有最后的一級菜單選項的寬度被改變。可以通過拖動來選擇多個菜單選項，在公共欄中對內(nèi)容顯示進行相關(guān)操作。

Tips：要先選中上級菜單選項，下級菜單才會顯示出來；
下級菜單顯示的起始位置是上級菜單的左邊線，并且無法超過左邊線。通過右擊菜單中的“Edit Rollover Style（編輯翻轉(zhuǎn)樣式）”項，可以制定鼠標移動到菜單上時的菜單樣式變化。

Apply to：
This menu item only ：只應(yīng)用到對當前菜單選項；
This menu only：只應(yīng)用到同級菜單；
This menu and all submenus：應(yīng)用到所有同級菜單和下級菜單；Tips：為菜單添加了Rollover Style之后，菜單選項的左上角會出現(xiàn)一個黑白小框，鼠標移動到小框上，就可以看到Rollover Style的預(yù)覽效果。

為菜單加上鏈接，我們選擇菜單選項“首頁”，再選擇Interactions（交互）事件中的“Quick Link”

在Link  Properties（鏈接屬性）中選擇網(wǎng)站頁面地圖中的“Home”頁。一個鏈接就添加好了。

 
當然，也可以添加外部鏈接（Link to an external url or file）、重新加載當前頁（Reload current page）、返回前一頁（Back to previous page）。
 

我們簡單模擬這個效果，尋找好友中姓“李”的朋友和叫“李查……”的朋友。實際上這個功能肯定不能像我們這樣一個字一個字地匹配的啦=。=
點這里先看看我做好的效果，下面的圖片效果：

過程講解：
用Text Panel、Text Field和Button 先做好搜索內(nèi)容。然后拖出一個Dynamic Panel（動態(tài)面板）：

在Text Field下面拉伸出一個“查詢建議”的區(qū)域來：

在Label標簽欄分別為工作區(qū)中的Text Field和Dynamic Panel命名為“keyword”和“matching”雙擊“matching”，為它加上3個State(狀態(tài))：

第一個狀態(tài)設(shè)為空內(nèi)容，雙擊第二個狀態(tài)(matching1)進行編輯，用List Box(選擇框)：

在List Box中添加多個姓“李”的好友名字選項。

注意：Allow multiple（允許多選）不要勾選?；氐焦ぷ鲄^(qū)，選擇“matching” 動態(tài)面板，雙擊第三個狀態(tài)(matching2)，繼續(xù)制作“查詢建議”菜單，這次都叫“李查……”。
以下是“matching1”和“matching2”狀態(tài)的菜單內(nèi)容。我們分別為兩個選擇框命名為“matchingList1”和“matchingList2”。
和
Tips：可以看到兩個狀態(tài)的邊緣都有一條藍色虛線，這就是我們在調(diào)用動態(tài)面板的時候為它預(yù)設(shè)的區(qū)域大小。超過藍色虛線的部分將在頁面中無法被顯示出來。

下面開始添加Interactions(交互事件)。為表單添加交互事件的方法，先選中工作區(qū)中的表單組件，然后在Interactions面板選擇“Add case..”添加事件。

或是用一些預(yù)設(shè)的交互行為作為條件，為組件添加事件。
OnClick：點擊
OnKeyUp：鍵入
OnFocus：聚焦
OnLostFocus：失去聚焦

為“keyword” 文本輸入框OnKeyUp（鍵入行為）添加事件。鍵入“李”時，顯示“matching” 動態(tài)面板中的“matching1” 狀態(tài)。

勾選Select Actions（選擇動作）中的“Set Panel state(s) to State(s)（改變動態(tài)面板的狀態(tài)）”，在“Step 3: Edit the Actions description（第三步：編輯動作描述）”中選中藍色的Set Panel鏈接，將動態(tài)面板“matching”的默認狀態(tài)“none”改為“matching1”，即前面設(shè)好的姓“李”的“查詢建議”狀態(tài)。

點擊右上角的“Edit Condition（編輯條件）”，為Case設(shè)鍵入時的keyword值。
可通過下拉菜單和輸入框設(shè)置條件：“text on widget（文本組件）”，找到“keyword”文本輸入框，equals value “李”（變量值等于“李”）。

以下還需要添加幾個Case，這里不詳說，大家試著自己做一下：
OnKeyUp行為下：
Case 2：當鍵入“李查”時，“matching”動態(tài)面板狀態(tài)變?yōu)椤癿atching2”
Case 3：當鍵入值不等于“李”時，“matching”的狀態(tài)變回為“none”
OnFocus行為下：
Case 1：keyword的值是“李”，“matching”動態(tài)面板狀態(tài)變?yōu)椤癿atching1”
Case 2：如果keyword的值是“李查”，則“matching”動態(tài)面板狀態(tài)變?yōu)椤癿atching2”
OnLostFocus行為下：
Case 1：“matching”動態(tài)面板的狀態(tài)為“none”
 
為“matching”動態(tài)面板內(nèi)的兩個狀態(tài)添加交互事件，效果是“當某個查詢建議被選中時，keyword文本輸入框的文本值變?yōu)檫x中的內(nèi)容”。
“matchin1”狀態(tài)里的“matchingList1”選擇框，OnChange行為的Case 1：

這樣的Case我們需要做5個，因為我們有5個姓李的好友。我們可以通過Copy Case和Paste Case，來復(fù)制和粘貼。

但我們需要把equals的值“李安”分別改成其他的名字……

再選擇OnChange，復(fù)制所有的Case：

到“matchin2”狀態(tài)里的“matchingList2”選擇框

將多余名字（不叫“李查”）的Case刪除“Delete Case”

別忘記需要將選擇框的名稱修改為“matchingList2”

總算好了，發(fā)布看看吧（捏汗ing~~）~~點這里看效果；and 點這里下載.rp源文件，源文件包括了前篇中制作的SNS首頁和今天講解的所有內(nèi)容。
  

4、RP Pro5.5多動作-倒計時跳轉(zhuǎn)頁面實例
RP 5.5版本之后，支持多個Action（動作）同步，這樣我們可以制作出更多的交互效果來了。比如說：倒計時跳轉(zhuǎn)頁面。
新建一個頁面，添加一個Text Panel加上內(nèi)容“將在　　秒后跳到首頁！”。在文本空格處加上一個Dynamic Panel(動態(tài)面板)，在Label中為它取名為“stopwatch”。

再為它加上“s5”到“s1” 5個狀態(tài)，分別編輯5個狀態(tài)，在里面加上內(nèi)容“5、4、3、2、1”5個倒計時秒數(shù)。
Tips：建議文本中輸入空格時用全角輸入，否則它將跟Dreamweaver一樣在HTML不能顯示全部的空格，這樣會產(chǎn)生與設(shè)計時的錯位。利用工作區(qū)下面的Page Interactions（頁面交互欄）為頁面添加事件。

雙擊“OnPageLoad”，這時我們看到5.5版本中有一個選項“Advanced Editor(高級編輯器)”

利用這個高級編輯器我們可以為頁面同時添加多個動作。選擇“Add Action”增加動作，可以不斷為頁面添加動作。

Wait Time(ms)（等待時間）是我們等下要作為倒計時用的動作，單位是毫秒(ms)，1秒=1000毫秒。我們按步驟為頁面事件添加動作：

“stopwatch”秒表跳在“s5”第5秒；
等待1秒；
“stopwatch”跳到s4；
等待1秒；
“stopwatch”跳到s3；
等待1秒；
“stopwatch”跳到s2；
等待1秒；
“stopwatch”跳到s1；
等待1秒；
跳到首頁?！癝tep 2: Select Actions”區(qū)域中的動作可以通過右上角的三個小按鈕進行“上移、下移、刪除”操作。另外，跟前面講的表單交互一樣，“Step 3”動作描述中的參數(shù)可以通過藍色文字鏈接進行修改。
完成添加事件，多個動作一次完成。點這里看效果吧！
據(jù)稱Axure是目前Windows系統(tǒng)最好的原型設(shè)計工具了，它的強大就在于這些交互事件，遠不止我說的這些。歡迎大家繼續(xù)研究、發(fā)現(xiàn)和探討。
如果你說這些交互操作太復(fù)雜了？！嗯，是的，如果你不需要用到交互效果，可以選擇其他更輕巧工具（如Mockups 或 Pancil）。但既要做原型又要達到交互效果，又加上你是Win操作系統(tǒng)的話，Axure無疑是當前最好的選擇了。而且，Axure也是有漢化包的，大家可以去google之哦~~偶已經(jīng)習(xí)慣于用“有道桌面詞典”+ 英文版軟件了=。=（這是無奈的習(xí)慣~~）
祝你“用餐”愉快~~

 終于收尾了，撒花~~~~

原文：http://p.pnq.cc/ue/?p=185