之前給大家分享了化妝鏡商城APP高保真原型，繼續(xù)給大家補(bǔ)充該原型的Web版。也順便分享一個(gè)化妝鏡商城web版的線框圖。關(guān)于線框圖的繪制幾乎都是經(jīng)驗(yàn)的總結(jié)，開(kāi)始時(shí)建議大家用鉛筆白紙繪制，初版概念確定后再動(dòng)手用Axure之類的工具繪制。

主要交互內(nèi)容如下：

1.會(huì)員購(gòu)物享受折扣、非會(huì)員結(jié)算時(shí)無(wú)折扣

2.首頁(yè)幻燈輪播、已購(gòu)會(huì)員和商品輪播

3.首頁(yè)熱賣商品展示（中繼器），鼠標(biāo)移入商品時(shí)顯示完整標(biāo)題

4.首頁(yè)搜索框的聯(lián)想搜索（中繼器）

5.首頁(yè)模擬快遞單號(hào)查詢

6.注冊(cè)/登錄成功后，跳轉(zhuǎn)回之前的頁(yè)面

7.模擬會(huì)員注冊(cè)/登錄（多條件）

8.點(diǎn)擊首頁(yè)任意商品進(jìn)入商品詳情頁(yè)/點(diǎn)擊任意菜單進(jìn)入商品列表頁(yè)

9.商品列表頁(yè)模擬展示不同商品數(shù)據(jù)（中繼器），按價(jià)格、銷量排序商品

10.商品列表頁(yè)已經(jīng)加商品垂直循環(huán)滾動(dòng)

11.商品上一頁(yè)/下一頁(yè)

12.商品詳情頁(yè)，圖片/視頻切換展示

13.商品星星打分

14.商品顏色選擇

15.商品數(shù)量?jī)r(jià)格同步

16.模擬加入購(gòu)物車效果

17.商品添加評(píng)論（中繼器）

18.購(gòu)物車中商品數(shù)量編輯

19.收貨人信息完善，手機(jī)號(hào)碼判斷

20.已購(gòu)商品信息、收貨人信息編輯確認(rèn)、配送方式和支付方式選擇

21.更多請(qǐng)自行探索…

效果展示：

這個(gè)Web高保真原型也是制作了完整的購(gòu)物流程（首頁(yè)、會(huì)員注冊(cè)登錄、搜索結(jié)果頁(yè)、商品詳情頁(yè)、配送信息和支付方式頁(yè)、支付頁(yè)面）

在線預(yù)覽：點(diǎn)擊預(yù)覽?（有點(diǎn)卡，建議下載到自己電腦預(yù)覽效果）

下載地址：點(diǎn)擊下載

下面是線框圖，沒(méi)有什么好介紹的，直接看預(yù)覽吧：

在線演示：點(diǎn)擊預(yù)覽

下載地址：點(diǎn)擊下載

本文為作者烏金原創(chuàng)投稿發(fā)布，轉(zhuǎn)載請(qǐng)注明來(lái)源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接