實現TAB切換的復雜動態效果

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

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

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

如何實現TAB切換的復雜動態效果

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

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

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

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

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

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

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

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