Axure教程：實現商品規格選擇功能

這篇文章分別使用到了我先前的四篇文章：《Axure教程：實現商品分享功能》、《Axure教程：數量加減的實現》、《Axure教程：規格的實現》、《Axure教程：使用動態面板實現收藏→已收藏》。參考第一篇文章的一部分功能；照搬第二、三、四篇文章的功能就完工啦！

預覽圖

點選“規格”後：

點選“比卡丘”“黃色”，點3下“+”後：

再次點選“比卡丘”，點3下“-”後：

預覽地址：https：//5j0xci。axshare。com

所需元件

這裡不對元件進行詳細描述，就放一張展示全體元件的圖片以及（展示圖片）動態面板的三個面板下的內容。

全體元件圖：

（展示圖片）動態面板下的“通用”面板：

（展示圖片）動態面板下的“哆啦A夢”面板：

（展示圖片）動態面板下的“比卡丘”面板：

操作步驟

（1）參照《 Axure教程：實現商品分享功能》中操作步驟的（1）和（2）去實現點選“選擇規格”矩形後顯示“選擇規格”面板功能。

（2）在“選擇規格”動態面板下襬放好元件的位置。

（3）參照《Axure教程：數量加減的實現》實現購買數量的加減功能。

（4）參照《Axure教程：規格的實現》、《Axure教程：使用動態面板實現收藏→已收藏》分別實現規格選擇時的提示資訊的改變，展示圖片的改變。

（5）完工，按F5預覽原型操作看看。

小記

1。這篇文章是拆分成了前面幾篇文章後，再將它們組合起來後完成。之所以有這種想法是因為我在完成文章《Axure教程：實現商品分享功能》時，我將所有的功能集中在了一篇文章裡講解，這樣導致的結果就是篇幅過長（也是我寫過最長的一篇文章），讓很多人望而卻步，就連我自己寫完後也沒有去看它多幾眼。所以這篇文章在寫之前我先將它拆分成幾個文章來寫，這樣子更加清晰易懂些。

2。在製作這個原型案例的時候我也不是先將整個都製作出來了再去將它拆開成幾個原型來講解而是跟文章順序一樣先完成加減功能再完成規格選擇功能最後再集合起來完成，就跟建樓一樣。所以在製作一個大的原型的大體思路是：

確定總體框架->細分框架->實現每一個小原型->拼裝小原型->產出大原型。

本文由 @Nilz 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash ，基於 CC0 協議