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

圖例如下所示：

【需求分析】

通過我們對京東商城的觀察，得出如下需求：

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

【原型設(shè)計】

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

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

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

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

（5）制作加入購物車框：拖入一個矩形和購物車圖標，矩形里面寫上 “?加入購物車 ”；

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

【交互設(shè)計】

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

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

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

（3）加入購物車交互：與“ 對比 ”框類似設(shè)置加入購物車框的懸停效果，鼠標懸停的時候，設(shè)置邊框為紅色。

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

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

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