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

預(yù)覽圖

點擊“規(guī)格”后：

點擊“比卡丘”“黃色”，點3下“+”后：

再次點擊“比卡丘”，點3下“-”后：

預(yù)覽地址：https://5j0xci.axshare.com

所需元件

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

全體元件圖：

（展示圖片）動態(tài)面板下的“通用”面板：

（展示圖片）動態(tài)面板下的“哆啦A夢”面板：

（展示圖片）動態(tài)面板下的“比卡丘”面板：

操作步驟

（1）參照《?Axure教程：實現(xiàn)商品分享功能》中操作步驟的（1）和（2）去實現(xiàn)點擊“選擇規(guī)格”矩形后顯示“選擇規(guī)格”面板功能。

（2）在“選擇規(guī)格”動態(tài)面板下擺放好元件的位置。

（3）參照《Axure教程：數(shù)量加減的實現(xiàn)》實現(xiàn)購買數(shù)量的加減功能。

（4）參照《Axure教程：規(guī)格的實現(xiàn)》、《Axure教程：使用動態(tài)面板實現(xiàn)收藏→已收藏》分別實現(xiàn)規(guī)格選擇時的提示信息的改變，展示圖片的改變。

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

小記

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

2.在制作這個原型案例的時候我也不是先將整個都制作出來了再去將它拆開成幾個原型來講解而是跟文章順序一樣先完成加減功能再完成規(guī)格選擇功能最后再集合起來完成，就跟建樓一樣。所以在制作一個大的原型的大體思路是：確定總體框架->細分框架->實現(xiàn)每一個小原型->拼裝小原型->產(chǎn)出大原型。

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

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