如何用Axure快速、規范地設計Tab欄?

2 評論 11454 瀏覽 17 收藏 8 分鐘

導讀: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效果,如有興趣可以留言討論。

#專欄作家#

知行之間,微信公眾號:知行之間,人人都是產品經理專欄作家。資深信息化產品。

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

題圖來自 Pixabay,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 方法三真的好用,簡單實用

    來自上海 回復
  2. 這樣做tab頁面內容切換不是還得用到動態面板嗎,倒不如直接做成動態面板

    回復