筆者在本文中介紹了如何用Axure實現(xiàn)規(guī)格效果的操作步驟，以及實現(xiàn)過程中的一些心得體會，與大家分享。

這篇文章是繼《Axure教程：數(shù)量加減的實現(xiàn)》之后的下一篇拆解《Axure教程：實現(xiàn)商品規(guī)格選擇功能》的文章《Axure教程：規(guī)格的實現(xiàn)》。主要講解規(guī)格的選擇時的操作。

原型預覽

尚未選擇規(guī)格時的顯示：

選擇“比卡丘”后的顯示：

選擇“藍色”后的顯示：

選擇“比卡丘”“藍色”后的顯示：

取消選擇“比卡丘”后的顯示：

原型預覽地址：https://mwb2of.axshare.com

所需元件

所需元件就10個（但還是要命好名），其中6個是純文本，需要設置交互的元件就只有三個：（黃色）矩形、（藍色）矩形、（比卡丘）矩形。

操作步驟

（1）將（黃色）矩形、（藍色）矩形放在一個選項組“顏色”。

將兩個元件放在設置選項組的作用是它們之間只有一個選中狀態(tài)為true。

（2）設置三個矩形的交互樣式——選中

這里的交互樣式我參考的是某寶的交互樣式。

（3）設置三個矩形的交互——鼠標單擊時

1）這個原型的難點在于要將三個設置了交互的矩形的條件考慮周到，所以我使用了Excel表格將所有情況都列了出來。

將所有情況都列好了之后我們就開始根據(jù)表格一個一個去對應地增加交互和交互的條件。

2）“比卡丘”矩形的前3個Case。

3）“比卡丘”矩形的后3個Case。

4）“藍色”矩形的4個Case。

5）“黃色”矩形的4個Case。

這里可以看到“藍色”矩形的交互和“黃色”矩形的交互基本相同，所以我們設置好“藍色”矩形的交互后可以直接把“藍色”矩形的交互粘貼到“黃色”矩形的交互，然后再修改一些小細節(jié)，這樣就可以省下很多時間了。

（4）第三步都搞定后就可以按F5預覽原型看看效果了。

小記

1. 這個原型案例里最復雜、有難度的地方就是第三步了，如果不先使用一個Excel表格來將所有情況列清楚，而是邊做邊想的話很容易就漏這漏那，所以這原型還考驗到了我們的邏輯性。
2. 這個原型案例是我做過的Case、條件最多的案例了。這里我的規(guī)格選項里我涂方便就使用了三個，如果放到真實案例里，可能會有6，7個，這樣的話條件、Case也就更多了。當然這是在追求高保真的前提下，一般實際制作原型我們只需要做到這里讓開發(fā)去看也就夠了。
3. 當然你也可以考驗下自己，如果款式有3個，顏色有3個的時候會有多少種情況，將他們在Excel表格里清晰地列出來，鍛煉自己的邏輯能力。
4. 案例里的價格（12.8、25.8）、庫存（2520、94、98）都是我隨便設的。
5. 可能我實現(xiàn)這個案例的方法不是最佳的，希望有大佬可以站出來指點一下。

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

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