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

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

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

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

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

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

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

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

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

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

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

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