導讀：Axure入門很容易，甚至花不到1天時間就可以基本掌握常見的交互設計。但對于一項工具的使用，新手和高手的區別不在于是否能完成任務目標，而應該拓展到實現過程是否快速、規范。本文作者對這兩點展開了分析討論，與大家分享。

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

本文舉原型設計中常見的Tab欄為例：

反面示例一

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

1. 設置Tab選中狀態的交互樣式

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

2. 復制N個Tab按鈕，并命名

為元件命名一般是為了區分多個相似對象，使交互事件更條例。為了下一步交互事件設置的方便，這一步為每一種狀態的Tab進行命名。

3. 給N個Tab設置交互事件

單擊時，當前元件的選中狀態為“true”，其他所有均為“false”。每一個Tab的交互事件都不相同，需要注意的是，此方法Tab越多出錯的可能性就越高。

4. 完成效果

Tab效果就完成了。

反面示例二

利用動態面板，這其實是一個枚舉法，每一種Tab狀態對應一個動態面板狀態。雖然也可以實現Tab效果，但是這里使用動態面板是大材小用了，殺雞不該用牛刀。

1. 設置每一種選中狀態的樣式

先把所有狀態的Tab枚舉出來，也就是通過復制的辦法，畫出所有狀態的Tab。

2. 為每一種狀態設置動態面板

為每一個Tab狀態設置一個動態面板狀態，然后把Tab狀態放入動態面板當中。

3. 給N個Tab設置交互事件

這一步設置Tab的交互事件，點擊Tab顯示為對應的動態面板狀態。

正確示例

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

1. 設置Tab的選中狀態的交互樣式&交互事件

在這里，只需要設置一個狀態的Tab便可以復用（復制）為其他Tab狀態，這里的交互樣式同反面示例1的第一步。

同時設置交互事件，Tab點擊時的選中狀態為“true”。

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

2. 為Tab設置選項組名稱

敲重點，這一步十分重要，很少用到的功能，在同一個選項組當中只會有一個被選中狀態。這一個小小的設置就替代了示例一中繁瑣的交互事件。

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

3. 復制為N個Tab

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

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

作者：產品范，微信公眾號：產品范，O2O新零售電商產品經理

本文由 @產品范 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議