導(dǎo)讀：Axure入門很容易，甚至花不到1天時(shí)間就可以基本掌握常見的交互設(shè)計(jì)。但對于一項(xiàng)工具的使用，新手和高手的區(qū)別不在于是否能完成任務(wù)目標(biāo)，而應(yīng)該拓展到實(shí)現(xiàn)過程是否快速、規(guī)范。本文作者對這兩點(diǎn)展開了分析討論，與大家分享。

作者總結(jié)兩點(diǎn)對于好的Axure原型的標(biāo)準(zhǔn)：維護(hù)成本低，復(fù)用性高。維護(hù)成本低，就是便于修改，這就要求能用最簡單的方法實(shí)現(xiàn)某一效果，比如一個(gè)自帶函數(shù)就可以實(shí)現(xiàn)的功能，就不用再寫代碼進(jìn)行二次開發(fā)。復(fù)用性高，其實(shí)也是程序員評估代碼質(zhì)量的一個(gè)維度。把原型模塊組件化、母版化，核心在于批量操作，避免重復(fù)造輪子。

本文舉原型設(shè)計(jì)中常見的Tab欄為例：

反面示例一

此方法的核心是使用交互事件，「選中」和「取消選中」事件。

1. 設(shè)置Tab選中狀態(tài)的交互樣式

點(diǎn)擊元件屬性中交互樣式設(shè)置下的「選中」按鈕來設(shè)置元件的選中狀態(tài)的效果，分別用了字體顏色、線段顏色、線寬、邊框可見性這四個(gè)屬性。除了選中效果還可以設(shè)置其他如：鼠標(biāo)懸停、鼠標(biāo)按下和禁用的效果。

2. 復(fù)制N個(gè)Tab按鈕，并命名

為元件命名一般是為了區(qū)分多個(gè)相似對象，使交互事件更條例。為了下一步交互事件設(shè)置的方便，這一步為每一種狀態(tài)的Tab進(jìn)行命名。

3. 給N個(gè)Tab設(shè)置交互事件

單擊時(shí)，當(dāng)前元件的選中狀態(tài)為“true”，其他所有均為“false”。每一個(gè)Tab的交互事件都不相同，需要注意的是，此方法Tab越多出錯(cuò)的可能性就越高。

4. 完成效果

Tab效果就完成了。

反面示例二

利用動(dòng)態(tài)面板，這其實(shí)是一個(gè)枚舉法，每一種Tab狀態(tài)對應(yīng)一個(gè)動(dòng)態(tài)面板狀態(tài)。雖然也可以實(shí)現(xiàn)Tab效果，但是這里使用動(dòng)態(tài)面板是大材小用了，殺雞不該用牛刀。

1. 設(shè)置每一種選中狀態(tài)的樣式

先把所有狀態(tài)的Tab枚舉出來，也就是通過復(fù)制的辦法，畫出所有狀態(tài)的Tab。

2. 為每一種狀態(tài)設(shè)置動(dòng)態(tài)面板

為每一個(gè)Tab狀態(tài)設(shè)置一個(gè)動(dòng)態(tài)面板狀態(tài)，然后把Tab狀態(tài)放入動(dòng)態(tài)面板當(dāng)中。

3. 給N個(gè)Tab設(shè)置交互事件

這一步設(shè)置Tab的交互事件，點(diǎn)擊Tab顯示為對應(yīng)的動(dòng)態(tài)面板狀態(tài)。

正確示例

這個(gè)方法的核心是利用選項(xiàng)組。很多童鞋可能沒有用過選項(xiàng)組這個(gè)方法，選項(xiàng)組其實(shí)就是為了實(shí)現(xiàn)類似于Tab功能而存在的，同一個(gè)選項(xiàng)組中的元件只能有一個(gè)選中狀態(tài)。這個(gè)功能就好比Excel中內(nèi)置的一個(gè)函數(shù)，雖然也可以通過基本的算術(shù)運(yùn)算實(shí)現(xiàn)。通過內(nèi)置函數(shù)可以減少用戶大量的時(shí)間成本，而且出錯(cuò)的可能性更低，也會(huì)讓你更專業(yè)。

1. 設(shè)置Tab的選中狀態(tài)的交互樣式&交互事件

在這里，只需要設(shè)置一個(gè)狀態(tài)的Tab便可以復(fù)用（復(fù)制）為其他Tab狀態(tài)，這里的交互樣式同反面示例1的第一步。

同時(shí)設(shè)置交互事件，Tab點(diǎn)擊時(shí)的選中狀態(tài)為“true”。

關(guān)于選中狀態(tài)文字下面橫線的效果，很多人會(huì)用水平線和矩形組合來實(shí)現(xiàn)，這其實(shí)是極其不專業(yè)的做法。最簡單且正宗的方法是在交互樣式設(shè)置中設(shè)置邊框的可見性?？梢匀我庠O(shè)置矩形邊框的顯示和隱藏。

2. 為Tab設(shè)置選項(xiàng)組名稱

敲重點(diǎn)，這一步十分重要，很少用到的功能，在同一個(gè)選項(xiàng)組當(dāng)中只會(huì)有一個(gè)被選中狀態(tài)。這一個(gè)小小的設(shè)置就替代了示例一中繁瑣的交互事件。

首先選中元件，然后在右側(cè)屬性欄中找到設(shè)置選項(xiàng)組名稱。在輸入框中填寫任意名稱即可，之后就會(huì)被保存下來，可供其他元件選擇并加入該選項(xiàng)組。

3. 復(fù)制為N個(gè)Tab

只需要暴力的復(fù)制就好，不需二次設(shè)置交互事件，用這個(gè)方法每個(gè)Tab的交互事件和選中效果完全相同，不需要做其他特定的修改。

這里表達(dá)一個(gè)思想是好的方法一定是最簡單的。Axure有很多正統(tǒng)的使用方法一直被埋沒，利用這些方法可以極大地提升你的原型效率。也許你還有其他方法來實(shí)現(xiàn)Tab效果，如有興趣可以留言討論。

#專欄作家#

知行之間，微信公眾號：知行之間，人人都是產(chǎn)品經(jīng)理專欄作家。資深信息化產(chǎn)品。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pixabay，基于 CC0 協(xié)議