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

預(yù)覽圖

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

點(diǎn)擊“比卡丘”“黃色”，點(diǎn)3下“+”后：

再次點(diǎn)擊“比卡丘”，點(diǎn)3下“-”后：

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

所需元件

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

全體元件圖：

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

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

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

操作步驟

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

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

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

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

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

小記

1.這篇文章是拆分成了前面幾篇文章后，再將它們組合起來后完成。之所以有這種想法是因?yàn)槲以谕瓿晌恼隆?a class="title" href="http://www.codemsi.com/rp/3154135.html" target="_blank" rel="noopener">Axure教程：實(shí)現(xiàn)商品分享功能》時(shí)，我將所有的功能集中在了一篇文章里講解，這樣導(dǎo)致的結(jié)果就是篇幅過長（也是我寫過最長的一篇文章），讓很多人望而卻步，就連我自己寫完后也沒有去看它多幾眼。所以這篇文章在寫之前我先將它拆分成幾個(gè)文章來寫，這樣子更加清晰易懂些。

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

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

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