介紹

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

讓我們開始吧

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

創(chuàng)建一個 Header Master

創(chuàng)建一個 Master

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

第一步是構(gòu)建一個 header，用來放置 logo 和導(dǎo)航。因為我們需要在多個頁面中使用這個 header，所以我們將它新建成 master。

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

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

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

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

添加一個 logo image

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

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

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

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

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

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

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

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

添加一條水平線

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

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

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

添加 Header 到主頁

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

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

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

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

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

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

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

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

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

添加 Quick View 按鈕

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

拖動一個 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)在圖像上時，Quick View 按鈕才顯示，所以將其設(shè)置為默認(rèn)隱藏。

通過在樣式選項卡中勾選 Hidden，然后小部件將會變黃。

動態(tài)顯示按鈕

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

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

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

添加 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ù)覽原型。移動鼠標(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)容的下面，添加一個 rectangle 部件到設(shè)計區(qū)域。然后，調(diào)整為大小為 600 x 450 的矩形。

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

添加產(chǎn)品大圖

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

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

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

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

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

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

插入 Jeans-2 和 Jeans-3 states

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

打開 state2，通過雙擊圖像將 Jeans-1 圖像換為 Jeans-2 圖像。為 state3 做同樣的事情，每個狀態(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。拖動調(diào)整圖像大小，按住 Shift 鍵來保持圖像的寬高比。

添加 OnClick 事件到縮略圖

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

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

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

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

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

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

加入購物車

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

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

拖動一個 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 信息，它們將會點擊 Add to Cart 的時候顯示。

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

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

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

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

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

當(dāng) Processing state 被選中時，點擊 Duplicate State 圖標(biāo)添加第二個 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)備給這個 case 添加5個動作。

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

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

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

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

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

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

3:設(shè)置面板 AddedtoCart 狀態(tài)。在這個動作我們設(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 動畫。

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

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

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

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

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

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

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

設(shè)置 ProductPopup 隱藏

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

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

瀏覽器定位

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

選中隱藏的動態(tài)面板，在 Properties 選項卡里面選擇 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)點擊的時候用來顯示ProductPopup。

選擇 Quick View 按鈕，添加一個 Show Panel 的點擊事件來顯示 ProductPopup。然后從更多選項中選擇 Treat as Lightbox。

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