軟件界面原型是交互設計師與需求工程師、產品經理和研發(fā)工程師溝通最直觀的工具。在做一個產品成型的框架之前，先做一個簡單的框架，這個框架包括產品的界面排版和布局、頁面元素、業(yè)務流程，甚至可以表現最終產品需

軟件界面原型是交互設計師與需求工程師、產品經理和研發(fā)工程師溝通最直觀的工具。在做一個產品成型的框架之前，先做一個簡單的框架，這個框架包括產品的界面排版和布局、頁面元素、業(yè)務流程，甚至可以表現最終產品需要實現的各種效果。一個完整的、優(yōu)秀的界面原型能夠幫助設計師、軟件工程師等更好地了解產品需求，從而最大限度地實現預期的功能。

有很多工具可以制作原型，比如一張紙和一支筆就可以畫草圖，但是做出的原型過于粗糙。也可以使用Visio、Excel等工具，但是實現一些復雜的交互操作就顯得力不從心了，比如TAB標簽的動態(tài)切換、定位頁面錨點、全選效果、登錄框效果、圖片輪播等等。因此，專業(yè)的Axure原型設計工具在設計原型的過程中使用方便、效率高，而且能模擬的效果很多。目前我使用的是Axure 6.5版本。

如何實現TAB切換的復雜動態(tài)效果

首先想好一個需要TAB切換效果的主題，比如學生查看任課教師對他上交的作業(yè)的批改情況。需要查看的內容包括老師給自己作業(yè)的分數和評語，老師對全班作業(yè)的點評以及發(fā)布哪些同學的作業(yè)可以參考，最后能看到自己本次作業(yè)提交了什么內容。根據這個主題，可以進行三種內容的切換。

首先，在頁面上拖拽三個矩形，調整它們成為高35、寬110的按鈕樣式，并列排好。在每個按鈕上寫上“作業(yè)批閱結果”、“作業(yè)總體點評”和“我的作業(yè)內容”。然后在按鈕的下方再拖拽一個矩形，我們將在這個矩形區(qū)域顯示不同的內容。

在矩形區(qū)域添加第一個按鈕要顯示的內容，然后選中內容和矩形，右鍵轉換為動態(tài)面板。這里之所以這么做，是為了便捷制作原型。轉換成動態(tài)面板后，雙擊面板，在彈出的動態(tài)面板管理對話框中對面板進行命名為“學生查看已批閱作業(yè)”，然后對面板的狀態(tài)1重命名為“作業(yè)批改結果”。接下來，在這個面板管理對話框中增加兩個面板狀態(tài)，分別用來顯示作業(yè)總體點評信息和學生的作業(yè)內容信息，并按照步驟4進行重命名。

接下來給步驟5新添加的兩個狀態(tài)添加顯示內容。在Axure界面的右下方有一個動態(tài)面板管理區(qū)，可以看到我們剛剛做好的動態(tài)面板的名字以及所包含的所有狀態(tài)。雙擊狀態(tài)“作業(yè)總體點評”添加內容，然后重復這個步驟將所有的內容添加好。

設置按鈕點擊后顯示對應的內容。首先選擇按鈕“作業(yè)批閱結果”，在頁面的右側部件屬性面板中對“onclick（點擊時）”事件添加用例。在彈出的用例面板中選擇“設置面板狀態(tài)為指定狀態(tài)”，在右側配置動作下找到剛剛添加的“學生查看已批閱作業(yè)”動態(tài)面板，并選擇狀態(tài)1“作業(yè)批閱結果”。如果希望點擊后顯示內容時有一些特效，在進行動畫設置時可以進行設置。

接下來設置第二個按鈕“作業(yè)總體點評”，按照步驟6設置顯示動態(tài)面板的狀態(tài)2“作業(yè)總體點評”。然后設置第三個按鈕。

生成原型，在瀏覽器中預覽這個TAB切換效果吧。生成原型時可以選擇瀏覽器，不過有些瀏覽器需要一些設置，比如Chrome?？梢赃x擇IE進行預覽。

在IE中點擊三個按鈕，可以看到內容已經隨著按鈕變化了，并且還有淡入淡出的效果。