介紹

本教程引導(dǎo)您一步一步來構(gòu)建一個(gè)電子商務(wù)網(wǎng)站的原型，將會(huì)使用的許多 Axure RP 原型的核心特性，包括 Masters 和動(dòng)態(tài)面板。我們將從頭開始創(chuàng)建整個(gè)樣本。

讓我們開始吧

首先，下載AxureEcommerce.zip并解壓縮到你的電腦。然后，啟動(dòng) Axure RP 和保存一個(gè)新文件作為電子商務(wù)原型。rp 使用文件 > 另存為。

創(chuàng)建一個(gè) Header Master

創(chuàng)建一個(gè) Master

http://wiki.jikexueyuan.com/project/axure/images/ecommerce1.png" alt="image" />

第一步是構(gòu)建一個(gè) header，用來放置 logo 和導(dǎo)航。因?yàn)槲覀冃枰诙鄠€(gè)頁面中使用這個(gè) header，所以我們將它新建成 master。

在 Masters 面板中，單擊添加按鈕。然后緩慢雙擊新 masters 改名為 Header。

http://wiki.jikexueyuan.com/project/axure/images/ecommerce2.png" alt="image" />

雙擊 Header Master 開始編輯。你可以通過查看設(shè)計(jì)區(qū)域頂部的選項(xiàng)卡來看看哪個(gè) master 或者頁面正在被編輯。

如果它指示的是 Header，說明你在正確的位置。

添加一個(gè) logo image

http://wiki.jikexueyuan.com/project/axure/images/ecommerce3.png" alt="image" />

拖出一個(gè) image 部件到設(shè)計(jì)區(qū)域。雙擊導(dǎo)入你的 logo。從壓縮包文件的 images 文件夾中選擇 logo.png 圖片。

當(dāng)被問及是否要按照?qǐng)D片大小加載，選擇 Yes。這將使用實(shí)際尺寸的圖片，而不是當(dāng)前圖像部件的大小。

添加按鈕作為導(dǎo)航

http://wiki.jikexueyuan.com/project/axure/images/ecommerce4.png" alt="image" />

接下來，我們將在圖標(biāo)下添加3個(gè) Button Shape 小部件。

在小部件窗格中，向下滾動(dòng)找到 Button Shape 部件(不是按鈕部件)。將3個(gè)按鈕形狀部件拖到設(shè)計(jì)區(qū)域。雙擊每一個(gè)更改文本。分別改為“男性”，“女性”，“出售”。

要使邊界顏色變成白色，可以選擇所有的按鈕形狀(單擊并拖動(dòng)創(chuàng)建一個(gè)選擇按鈕區(qū)域)，并通過上方的工具欄設(shè)置 Line Color 為白色。

添加一條水平線

http://wiki.jikexueyuan.com/project/axure/images/ecommerce5.png" alt="image" />

讓我們添加一條水平線，來分離的標(biāo)題下面的內(nèi)容。

將一個(gè) Horizontal Line 小部件拖到設(shè)計(jì)區(qū)域?？梢酝ㄟ^拖動(dòng)水平線的左邊或者右邊的小白點(diǎn)來調(diào)整長度。然后通過編輯模式和顏色工具欄的按鈕，使水平線變成一條藍(lán)色的虛線。

添加 Header 到主頁

http://wiki.jikexueyuan.com/project/axure/images/ecommerce6.png" alt="image" />

將 Header master 從 Masters 面板拖動(dòng)到設(shè)計(jì)區(qū)域，即可將它添加到 主頁面中。將它放到坐標(biāo)為（200，50）的位置。

默認(rèn)情況下， masters 有一個(gè)粉紅色的底色。你可以關(guān)掉，使用 View > Mask Masters。

創(chuàng)建產(chǎn)品縮略圖和 QUICK VIEW 按鈕

添加產(chǎn)品縮略圖

http://wiki.jikexueyuan.com/project/axure/images/ecommerce7.png" alt="image" />

在主頁上，將一個(gè)圖像小部件拖到設(shè)計(jì)區(qū)域，并將它放在 header 下方。

雙擊它，導(dǎo)入 Jeans1-1.png。添加第二個(gè)圖片，導(dǎo)入 jeans2-1.png。

按住 shift 鍵并拖動(dòng)圖像的角部，拉伸圖片到是 150px 寬，225px 高。

添加 Quick View 按鈕

http://wiki.jikexueyuan.com/project/axure/images/ecommerce8.png" alt="image" />

拖動(dòng)一個(gè) button shape 到第一款產(chǎn)品圖片上。雙擊并改變文字為 Quick View。

標(biāo)注并隱藏 Quick View button

http://wiki.jikexueyuan.com/project/axure/images/ecommerce9.png" alt="image" />

我們希望當(dāng)鼠標(biāo)在圖像上時(shí)，Quick View 按鈕才顯示，所以將其設(shè)置為默認(rèn)隱藏。

通過在樣式選項(xiàng)卡中勾選 Hidden，然后小部件將會(huì)變黃。

動(dòng)態(tài)顯示按鈕

http://wiki.jikexueyuan.com/project/axure/images/ecommerce10.png" alt="image" />

為了當(dāng)鼠標(biāo)在產(chǎn)品的圖片上，Quick View 按鈕才出現(xiàn)，我們將使用 OnMouseEnter 事件。

點(diǎn)擊產(chǎn)品圖片。在小部件屬性的交互選項(xiàng)卡窗格中添加一個(gè)案件 OnMouseEnter 通過雙擊 OnMouseEnter(見上圖)。這將會(huì)打開編輯器。

添加 ShowQuickViewButton

http://wiki.jikexueyuan.com/project/axure/images/ecommerce11.png" alt="image" />

在左側(cè)面板中，單擊 Show。然后在右側(cè)面板中，單擊 QuickViewButton 復(fù)選框。最后，從下拉框的 More Options 選擇 Treat as Flyout。單擊OK。

讓我們使用工具欄上的預(yù)覽圖標(biāo)預(yù)覽原型。移動(dòng)鼠標(biāo)到產(chǎn)品上方，Quick View 按鈕就要顯示，但是只要它顯示過就不能被隱藏。

產(chǎn)品詳細(xì)信息彈出窗口和幻燈片

創(chuàng)建產(chǎn)品詳細(xì)信息彈出窗口

http://wiki.jikexueyuan.com/project/axure/images/ecommerce12.png" alt="image" />

在所有內(nèi)容的下面，添加一個(gè) rectangle 部件到設(shè)計(jì)區(qū)域。然后，調(diào)整為大小為 600 x 450 的矩形。

右鍵單擊矩形并選擇 Convert to Dynamic panel。這種動(dòng)態(tài)面板標(biāo)注 ProductPopup。

添加產(chǎn)品大圖

http://wiki.jikexueyuan.com/project/axure/images/ecommerce13.png" alt="image" />

在這一步中，我們將會(huì)添加一個(gè)產(chǎn)品圖片的幻燈片，當(dāng)你點(diǎn)擊縮略圖后它會(huì)通過動(dòng)畫展示出來。

首先，雙擊打開 ProductPopup 的 State1 。拖動(dòng)圖像小部件和雙擊導(dǎo)入 jeans1-1.png。將這張照片放在在左上角的地方。

將圖像轉(zhuǎn)換為動(dòng)態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/ecommerce14.png" alt="image" />

在圖像上單擊右鍵并選擇 Convert to Dynamic Panel。標(biāo)注這個(gè)面板為 ProductSlideshow。 我們一共有3個(gè) states，在小部件管理器中選擇 state1 ，然后單擊 Duolicate State 兩次來創(chuàng)建3個(gè) states。

插入 Jeans-2 和 Jeans-3 states

http://wiki.jikexueyuan.com/project/axure/images/ecommerce15.png" alt="image" />

打開 state2，通過雙擊圖像將 Jeans-1 圖像換為 Jeans-2 圖像。為 state3 做同樣的事情，每個(gè)狀態(tài)都有不同的 Jeans 圖片。

添加產(chǎn)品圖片縮略圖

http://wiki.jikexueyuan.com/project/axure/images/ecommerce16.png" alt="image" />

拖入3張圖像小部件作為縮略圖，導(dǎo)入 Jeans1-1、Jeans1-2，Jeans1-3。拖動(dòng)調(diào)整圖像大小，按住 Shift 鍵來保持圖像的寬高比。

添加 OnClick 事件到縮略圖

http://wiki.jikexueyuan.com/project/axure/images/ecommerce17.png" alt="image" />

選擇最左邊的縮略圖，雙擊 OnClick 事件。在編輯器中，選擇 Set Panel State 操作和選擇 ProductSlideshow 面板。 在 Select the State 下拉框中，選擇 state1，然后選擇消失的動(dòng)畫為漸入和漸出。單擊OK。

復(fù)制/粘貼 case 到縮略圖2 & 3

http://wiki.jikexueyuan.com/project/axure/images/ecommerce18.png" alt="image" />

從第一縮略圖到第二和第三依次復(fù)制和粘貼新的 case。雙擊粘貼 case，讓第二個(gè)縮略圖的面板 state 為 State2，然后為 State3 做同樣的事情。

預(yù)覽您的原型。點(diǎn)擊縮略圖應(yīng)該得到面板狀態(tài)相關(guān)的牛仔圖片。

加入購物車

創(chuàng)建添加到購物車按鈕

http://wiki.jikexueyuan.com/project/axure/images/ecommerce19.png" alt="image" />

拖動(dòng)一個(gè) button shape 部件到彈出窗口的右下角。使用工具欄給它填充藍(lán)色和白色字體。改變文本為 Add to cart。

創(chuàng)建購物車消息彈出面板

http://wiki.jikexueyuan.com/project/axure/images/ecommerce20.png" alt="image" />

現(xiàn)在我們將創(chuàng)建 Processing 和 Added 信息，它們將會(huì)點(diǎn)擊 Add to Cart 的時(shí)候顯示。

拖動(dòng)一個(gè) rectangle 到彈出框的中間。讓它變成淺灰色和黑色的字體。輸入文本為“處理中…”。

右鍵單擊并選擇[Convert to Dynamic Panel]。使用復(fù)選框的樣式選項(xiàng)卡設(shè)置面板隱藏。

導(dǎo)入 Added to Cart 狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/ecommerce21.png" alt="image" />

標(biāo)注動(dòng)態(tài)面板為 MessagesPopup 和第一個(gè) state 為 Processing。

當(dāng) Processing state 被選中時(shí)，點(diǎn)擊 Duplicate State 圖標(biāo)添加第二個(gè) state。并標(biāo)注它為 AddedToCart。

創(chuàng)建 Added to cart 消息

http://wiki.jikexueyuan.com/project/axure/images/ecommerce22.png" alt="image" />

打開 AddedtoCart 狀態(tài)，當(dāng)我們確定 item 已經(jīng)被添加后，將 item 的顏色改為藍(lán)色。雙擊并更改文本 Successfully added to Cart。

添加 Add to Cart 的交互

http://wiki.jikexueyuan.com/project/axure/images/ecommerce23.png" alt="image" />

單擊 Add to Cart 按鈕后，想要展示的 Processing 的信息和 added to cart 消息，然后隱藏。

回到 ProductPopup，并選擇 added to cart 按鈕。雙擊鼠標(biāo)單擊添加 case 并打開 case 編輯器。我們準(zhǔn)備給這個(gè) case 添加5個(gè)動(dòng)作。

添加顯示/隱藏的信息的操作

http://wiki.jikexueyuan.com/project/axure/images/ecommerce24.png" alt="image" />

1:設(shè)置面板 MessagesPopup 狀態(tài)為 Processing。從動(dòng)畫的下拉框中選擇 fade。注意，設(shè)置面板狀態(tài)為自動(dòng)顯示面板，所以我們不需要添加一個(gè)顯示面板操作。

2:等待 1000ms。這設(shè)置第一個(gè)面板和第二個(gè)面板之間間隔時(shí)間。1000毫秒 = 1秒。

改變MessagePopup面板狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/ecommerce25.png" alt="image" />

3:設(shè)置面板 AddedtoCart 狀態(tài)。在這個(gè)動(dòng)作我們?cè)O(shè)置 MessagesPopup 面板從 Processing 狀態(tài)到 AddedtoCart 狀態(tài)。單擊MessagesPopup 復(fù)選框，并選擇下拉 AddedtoCart 狀態(tài)下的復(fù)選框。

4:等待1000 ms(再一次)。

添加隱藏面板交互

http://wiki.jikexueyuan.com/project/axure/images/ecommerce26.png" alt="image" />

5:隱藏面板。單擊 MessagesPopup 復(fù)選框并選擇 fade 動(dòng)畫。

單擊OK。預(yù)覽您的原型和測試。這將是我們電子商務(wù)的新手介紹的最后一部分。

隱藏/顯示產(chǎn)品信息

添加關(guān)閉 ProductPopup 按鈕

http://wiki.jikexueyuan.com/project/axure/images/ecommerce27.png" alt="image" />

接下來，我們將給 ProductPopup 添加一個(gè)關(guān)閉按鈕。

添加一個(gè) placeholder 到動(dòng)態(tài)面板的右上角。調(diào)整其大小 40×40。(提示:您可以在工具欄中編輯大小)。

給 placeholder 添加一個(gè) Hide 操作的 Onclick 事件，讓 ProductPopup 隱藏。

設(shè)置 ProductPopup 隱藏

http://wiki.jikexueyuan.com/project/axure/images/ecommerce28.png" alt="image" />

當(dāng)點(diǎn)擊 Quick View 的時(shí)候，這個(gè)面板將會(huì)被隱藏。右鍵單擊面板，選擇設(shè)置“隱藏”。

瀏覽器定位

http://wiki.jikexueyuan.com/project/axure/images/ecommerce29.png" alt="image" />

選中隱藏的動(dòng)態(tài)面板，在 Properties 選項(xiàng)卡里面選擇 Pin to Browser。選擇 Center 和 Middle，然后單擊 OK。

添加 Quick View 顯示面板

http://wiki.jikexueyuan.com/project/axure/images/ecommerce30.png" alt="image" />

現(xiàn)在，我們準(zhǔn)備添加 Quick View 按鈕的交互事件，當(dāng)點(diǎn)擊的時(shí)候用來顯示ProductPopup。

選擇 Quick View 按鈕，添加一個(gè) Show Panel 的點(diǎn)擊事件來顯示 ProductPopup。然后從更多選項(xiàng)中選擇 Treat as Lightbox。

預(yù)覽您的原型和測試。這是我們給新手帶來的電子商務(wù)介紹的最后部分，恭喜!