中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

圖例如下所示：

【需求分析】

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

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

【原型設計】

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

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

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

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

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

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

【交互設計】

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

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

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

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

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

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

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