為了方便用選購(gòu)商品，現(xiàn)在的電商網(wǎng)站，通常都會(huì)有對(duì)比、關(guān)注、加入購(gòu)物車(chē)這三個(gè)功能。我們以京東商城為例，看看如何通過(guò)Axure實(shí)現(xiàn)這三個(gè)功能。

圖例如下所示：

【需求分析】

通過(guò)我們對(duì)京東商城的觀察，得出如下需求：

1. 當(dāng)鼠標(biāo)移入“ 對(duì)比 ”框的時(shí)候，文字和邊框變成紅色，當(dāng)鼠標(biāo)移出的時(shí)候，恢復(fù)默認(rèn)樣式黑色；
2. 當(dāng)鼠標(biāo)移入“ 關(guān)注 ”框的時(shí)候，關(guān)注和邊框變成紅色，并且黑色的心型圖標(biāo)向上滑動(dòng)，切換為紅色，當(dāng)鼠標(biāo)移出的時(shí)候，回復(fù)默認(rèn)樣式；
3. 當(dāng)鼠標(biāo)移入“?加入購(gòu)物車(chē) ”框的時(shí)候，邊框變成紅色，移出以后，邊框顏色恢復(fù)為黑色。

【原型設(shè)計(jì)】

（1）先往畫(huà)布放置寶貝圖片、價(jià)格、名稱(chēng)、評(píng)價(jià)數(shù)量等元件，這里請(qǐng)各位同學(xué)自己完成，小猿不做贅述；

（2）制作對(duì)比框：拖入兩個(gè)矩形，調(diào)整尺寸為一大一小，在大的矩形里面錄入文字 “ 對(duì)比 ”；

（3）制作關(guān)注框：拖入兩個(gè)矩形，調(diào)整為一大一小，對(duì)于小的矩形框，點(diǎn)擊右鍵，在彈出菜單里面點(diǎn) “?選擇形狀 ”，然后選擇心形，就可以把矩形框調(diào)整為心形框。

（4）選中心形，把這個(gè)形狀轉(zhuǎn)換為動(dòng)態(tài)面板，為該動(dòng)態(tài)面板添加狀態(tài)2，狀態(tài)2里面復(fù)制同樣的心形元件，只是把原色改成紅色；

（5）制作加入購(gòu)物車(chē)框：拖入一個(gè)矩形和購(gòu)物車(chē)圖標(biāo)，矩形里面寫(xiě)上 “?加入購(gòu)物車(chē) ”；

（6）到此，原型設(shè)計(jì)完成，效果如下所示：

【交互設(shè)計(jì)】

（1）對(duì)比框交互：把對(duì)比框的兩個(gè)矩形框組合，設(shè)置該組合的交互樣式，當(dāng)鼠標(biāo)懸停的時(shí)候，設(shè)置矩形的邊框?yàn)榧t色，字體為紅色；這里要注意一點(diǎn)，就是要設(shè)置該組能夠 “?觸發(fā)內(nèi)部元件鼠標(biāo)交互樣式 ”。

（2）關(guān)注對(duì)比框：同樣把對(duì)比框的動(dòng)態(tài)面板和矩形組合，設(shè)置該組合的鼠標(biāo)事件：

1. 設(shè)置對(duì)比框的選中交互樣式，當(dāng)選中的時(shí)候，設(shè)置字體和邊框?yàn)榧t色；
2. 當(dāng)鼠標(biāo)移入時(shí)，設(shè)置選中對(duì)比框，并且設(shè)置動(dòng)態(tài)面板的狀態(tài)為2（紅色），設(shè)置切換效果為向上移動(dòng)；
3. 當(dāng)鼠標(biāo)移出時(shí)，設(shè)置取消選中對(duì)比框，并且設(shè)置動(dòng)態(tài)面板的狀態(tài)為1（黑色），設(shè)置切換效果為向上移動(dòng)；

（3）加入購(gòu)物車(chē)交互：與“ 對(duì)比 ”框類(lèi)似設(shè)置加入購(gòu)物車(chē)框的懸停效果，鼠標(biāo)懸停的時(shí)候，設(shè)置邊框?yàn)榧t色。

到了這里，商品的對(duì)比\關(guān)注\購(gòu)物車(chē)功能就算做好了，同學(xué)們趕緊去試試吧。

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

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