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

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

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

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

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

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

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

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

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

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

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

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