從頭開始學(xué)習(xí)創(chuàng)建一個(gè)電子商務(wù)網(wǎng)站

本教程將引導(dǎo)您逐步構(gòu)建一個(gè)電子商務(wù)網(wǎng)站，在創(chuàng)建過程中，將使用Axure原型的多個(gè)核心功能：如母板、動(dòng)態(tài)面板。我們將從頭開始整個(gè)創(chuàng)建整個(gè)過程。

部件使用：圖片、矩形、按鈕形狀、圖片熱區(qū)、動(dòng)態(tài)面板、占位符、文本框、文本面板

交互事件：Onclick

動(dòng)作：“移動(dòng)面板”、“隱藏面板”、“設(shè)置面板狀態(tài)為指定狀態(tài)”、“將面板置于頂層”、“將面板置于底層”、“等待時(shí)間（毫秒）”

01

創(chuàng)建頁首母板

1

創(chuàng)建新母板

第一步，創(chuàng)建一個(gè)有LOGO和導(dǎo)航的頁首。在多個(gè)頁面中都會(huì)使用到這個(gè)頁首，所以將使用母板來制作頁首。

在母板窗口，點(diǎn)擊“添加母板”按鈕。輕點(diǎn)新建的母板名稱并修改名稱為“Header”。

雙擊Header母板打開編輯窗口，在線框圖窗口的頂部標(biāo)簽頁，可以查看正在編輯的頁面和母板。

如果標(biāo)簽頁顯示，正在編輯的頁面為“Header”,那么Header母板己經(jīng)被打開。

2

添加Logo圖片

第二步從部件窗口拖圖片部件到線框圖中，雙擊圖片部件導(dǎo)入壓縮包中的“Logo.png”圖片。

導(dǎo)入提示是否自動(dòng)調(diào)整對(duì)象大小，如果需要自動(dòng)調(diào)整就選擇“確定”。圖片會(huì)保持原大小被導(dǎo)入，而不按部件的大小導(dǎo)入。

3

添加導(dǎo)航按鈕

接下來，在Logo下，添加3個(gè)按鈕形狀部件。

向下拖動(dòng)部件窗口下拉條，找出按鈕形狀部件（不是按鈕部件）。拖3個(gè)按鈕形狀部件到線框圖。雙擊每個(gè)按鈕部件修改部件文本，并修改部件標(biāo)簽內(nèi)容分別為：Men’s, Women’s, 和Sale.

全選3個(gè)按鈕形狀，使用工具欄中的“線條顏色”設(shè)置按鈕邊線為白色（鼠標(biāo)點(diǎn)擊并在按鈕上拖出一個(gè)選擇區(qū)，即可全選3個(gè)按鈕）。

4

添加水平線

添加一個(gè)水平線，將頁首和下面的內(nèi)容分開。

拖動(dòng)"水平線"部件到線框圖中，拖拽水平線左右兩端的修改尺寸的控制柄，可以調(diào)整水平線的長(zhǎng)度。用工具欄中的“線條樣式”、“線條顏色”編輯樣式為點(diǎn)虛線、顏色為藍(lán)色。

5

在Home頁面添加頁首

從母板窗口拖頁首母板到Home頁面。定位在X:200;Y50

母板默認(rèn)有粉色的遮罩，如果要關(guān)閉遮罩，可以在主菜單欄選擇“線框圖->顯示母板遮罩”。

02

創(chuàng)建產(chǎn)品縮略圖和“快速查看”按鈕

1

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

Home頁面，拖入圖片部件并交圖片部件放在頁首母板的下面。

雙擊部件導(dǎo)入 “Jeans1-1.png”文件，添加第二個(gè)圖片部件，導(dǎo)入“Jeans2-1.png”文件。

按住shift鍵并拖拽圖片一角，調(diào)整圖片比例為寬150；高225。

2

添加“快速查看”按鈕

拖一個(gè)按鈕形狀到第一張產(chǎn)品圖片上，雙擊按鈕形狀修改文本為“快速查看”

“快速查看”按鈕只有在鼠標(biāo)經(jīng)過圖片時(shí)才會(huì)顯示。所以要將圖片轉(zhuǎn)換為動(dòng)態(tài)面板才可以動(dòng)態(tài)的顯示或隱藏按鈕。右鍵按鈕形狀，快捷菜單選擇“轉(zhuǎn)換->按換為動(dòng)態(tài)面板”，將圖片放入動(dòng)態(tài)面板中。

3

編輯名稱并隱藏快速視圖按鈕

在動(dòng)態(tài)面板管理窗口，修改動(dòng)態(tài)面板名稱為：QuickViewButton。修改名稱可以讓面板在設(shè)置交互時(shí)更易辨認(rèn)。

右鍵動(dòng)態(tài)面板，快捷菜單選擇“編輯動(dòng)態(tài)面板->設(shè)為隱藏”，將按鈕設(shè)置為默認(rèn)隱藏。這時(shí)動(dòng)態(tài)面板會(huì)變成黃色。

4

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

使用“鼠標(biāo)移入時(shí)”事件，設(shè)置當(dāng)鼠標(biāo)經(jīng)過產(chǎn)品圖片時(shí)顯示“快速查看”按鈕。

點(diǎn)擊產(chǎn)品圖片，在部性屬性面板窗口的交互標(biāo)簽，雙擊“鼠標(biāo)移入時(shí)”事件添加用例，打開用例編輯器。

5

添加“顯示快速查看按鈕”動(dòng)作

左邊欄中，選擇“顯示面板”。然后在右邊欄中選中QuickViewButton復(fù)選框，配置顯示的面板，點(diǎn)擊確認(rèn)。

主菜單欄選擇“生成->原型”生成原型。移動(dòng)鼠標(biāo)經(jīng)過產(chǎn)品圖片，會(huì)顯示“快速查看”按鈕，但按鈕一但顯示，就不能隱藏了。

提示:鼠標(biāo)移出時(shí)與圖像映射區(qū)域

使用鼠標(biāo)移出時(shí)事件隱藏“快速查看”按鈕，交互會(huì)出現(xiàn)錯(cuò)誤。因?yàn)楫?dāng)鼠標(biāo)經(jīng)過“快速查看”按鈕時(shí)，鼠標(biāo)移出時(shí)事件就被啟動(dòng)，“快速查看”按鈕將被隱藏。

可以在產(chǎn)品圖片四邊環(huán)繞圖像映射區(qū)，再在圖像映射區(qū)域上使用“鼠標(biāo)移入時(shí)”事件，就可以隱藏“快速查看”按鈕了。

圖片映射區(qū)是可以設(shè)置交互和注釋的透明區(qū)域。

6

創(chuàng)建圖片“熱區(qū)”

在產(chǎn)品圖片上拖入一個(gè)圖片熱區(qū)，圖片熱區(qū)的四個(gè)邊要比產(chǎn)品圖片的四個(gè)邊留多10px。

右鍵快捷菜單，選擇“順序->置于底層”，將圖片熱區(qū)放到產(chǎn)品圖片和動(dòng)態(tài)面板的下面。

7

使用圖片熱區(qū)隱藏動(dòng)態(tài)面板

選中圖片熱區(qū)，雙擊部件屬性窗口交互標(biāo)簽中的“當(dāng)鼠標(biāo)移入時(shí)”事件。
用例編輯器中，左邊欄選擇“隱藏面板”動(dòng)作，右邊欄中點(diǎn)選QuickViewButtont復(fù)選框，選擇確定。

03

詳細(xì)產(chǎn)品彈出面板和圖片播放器

1

創(chuàng)建詳細(xì)產(chǎn)品彈出面板

添加矩形部件到線框圖，修改矩形大小為：600*450，將矩形放在線框圖頁面的中間。

2

轉(zhuǎn)換為動(dòng)態(tài)面板并設(shè)置為隱

當(dāng)“快速查看”按鈕被點(diǎn)擊時(shí)，詳細(xì)產(chǎn)品彈出面板要?jiǎng)討B(tài)的顯示，所以將詳細(xì)產(chǎn)品彈出面板轉(zhuǎn)換為動(dòng)態(tài)面板。

右鍵矩形，快捷菜單選擇“轉(zhuǎn)換->轉(zhuǎn)換為動(dòng)態(tài)面板”，并將轉(zhuǎn)換的動(dòng)態(tài)面板命名為“ProductPopup”。

在“快速查看”按鈕被點(diǎn)擊前，詳細(xì)產(chǎn)品彈出面板要被隱藏，所以右鍵動(dòng)態(tài)面板，快捷菜單選擇“編輯動(dòng)態(tài)面板->設(shè)為隱藏”。

3

快速查看按鈕添加顯示面板

現(xiàn)在給快速查看按鈕添加交互，當(dāng)快速按鈕被點(diǎn)擊時(shí)，顯示詳細(xì)產(chǎn)品彈出層.

動(dòng)態(tài)面板管理窗口，雙擊QuickStartButton面板下的State1(狀態(tài)1)，打開快速查看按鈕編輯頁，選擇“快速查看”按鈕，在Onclick事件中添加用例，設(shè)置用例動(dòng)作“顯示面板”，并將顯示面板配置到顯示ProductPopup。

4

關(guān)閉按鈕添加隱藏面板動(dòng)作

下一步，在“詳細(xì)產(chǎn)品彈出面板”添加關(guān)閉彈出面板按鈕

動(dòng)態(tài)面板管理窗口，雙擊ProductPopup面板下的State1(狀態(tài)1)打開狀態(tài)編輯頁，添加占位符在右上角。調(diào)整尺寸為：40*40。提示：在工具欄可以編輯部件尺寸。

placeholder面板OnClick事件用例，用例設(shè)置“隱藏ProductPopup”動(dòng)作。

5

添加產(chǎn)品大圖

在這步中，添加當(dāng)點(diǎn)擊縮略圖時(shí)，產(chǎn)品圖片播放的動(dòng)畫視圖。

編輯詳細(xì)產(chǎn)品彈出面板，拖入圖片部件到線框圖，雙擊導(dǎo)入“Jeans1-1.png”。將圖片放到左上角。

6

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

拖入3個(gè)圖片部件到圖片的下方，導(dǎo)入Jeans1-1, Jeans1-2, 和Jeans1-3，做為縮略圖。拖拽圖片邊框調(diào)整圖片尺寸時(shí)，按住shift鍵，保存圖片按比例縮放。

7

建立圖片播放動(dòng)畫窗口

我們下面將使用到一個(gè)叫“開窗”的技術(shù)，即我們將一個(gè)動(dòng)態(tài)面板放置到另一個(gè)動(dòng)態(tài)面板內(nèi)。利用外部面板的尺寸，控制只顯示里面動(dòng)態(tài)面板的一部分。

右鍵產(chǎn)品大圖，快捷菜單選擇“轉(zhuǎn)換->轉(zhuǎn)換為動(dòng)態(tài)面板”，將產(chǎn)品大圖轉(zhuǎn)換為動(dòng)態(tài)面板。在動(dòng)態(tài)面板編輯器中，重命名面板名稱為““SlideshowWindow”。注意：部件屬性窗口的標(biāo)簽欄也自隨著面板重命名自動(dòng)修改了名稱。

8

將多產(chǎn)品圖片轉(zhuǎn)換為動(dòng)態(tài)面板

動(dòng)態(tài)面板編輯器中，打開SlideshowWindow面板的State1(狀態(tài)1)，在Jeans1-1圖片的右邊添加Jean1-2和Jeans1-3圖片。

要使用這三張圖片在窗口中動(dòng)態(tài)的切換，我們將三張圖片轉(zhuǎn)換為動(dòng)態(tài)面板。

全選三張圖片（按住shift鍵點(diǎn)擊每張圖片，或者點(diǎn)擊拖動(dòng)鼠標(biāo)圈選所有圖片）右鍵，快捷菜單選擇“轉(zhuǎn)換->轉(zhuǎn)換為動(dòng)態(tài)面板”，將三張圖片轉(zhuǎn)換為動(dòng)態(tài)面板。在動(dòng)態(tài)面板管理窗口重新命名動(dòng)態(tài)面板為“SlideshowContent”。

9

添加OnClick事件移動(dòng)動(dòng)態(tài)面板

下一步，添加交互讓SlideshowContent面板從左邊移動(dòng)到右邊。

返回ProductPopup面板，點(diǎn)擊第一個(gè)縮略圖添加OnClick事件用例。在用例編輯器中，選擇"移動(dòng)面板"動(dòng)作，設(shè)置移動(dòng)面板SlideshowContent到坐標(biāo)：X0；Y0。注意：要設(shè)置為移動(dòng)到（絕對(duì)定位），而不是移動(dòng)在（相對(duì)定位）。然后設(shè)置動(dòng)畫“擺動(dòng)”，時(shí)間500ms。

10

重復(fù)設(shè)置另外兩個(gè)縮略圖

在另外兩個(gè)縮略圖上重復(fù)設(shè)置Click事件。因?yàn)閳D片的寬度是240px,所以第二個(gè)縮略圖的事件動(dòng)作設(shè)置為“移動(dòng)SlideshowContent到 -240x,0y”。第三個(gè)縮略圖動(dòng)作設(shè)置為“移動(dòng)SlideshowContent到-480x, 0y”。

如果想查看交互效果，可以生成原型，圖片播放動(dòng)畫己經(jīng)可以顯示了。

04

“加入購(gòu)物車”

1

創(chuàng)建“加入購(gòu)物車”按鈕

拖入按鈕形狀部件到彈出面板的右下角。在工具欄將按鈕顏色設(shè)置為藍(lán)色，字體顏色設(shè)置為白色。按鈕形狀文本修改為“Add to Cart”。

2

創(chuàng)建購(gòu)物信息彈出面板

下一步，創(chuàng)建點(diǎn)擊“Add to Cart”按鈕時(shí)顯示的“處理中”和“己添加”提示信息。

拖一個(gè)矩形部件到彈出面板的中間。設(shè)置背景色為淡灰色；字體顏色為黑色。編輯矩形文本為“Processing...（處理中）”。

右鍵矩形部件，快捷菜單中選擇“轉(zhuǎn)換->轉(zhuǎn)換為動(dòng)態(tài)面板”。右鍵動(dòng)態(tài)面板，快捷菜單選擇“編輯動(dòng)態(tài)面板->設(shè)為隱藏”

3

添加“Added to Cart”狀態(tài)

命名動(dòng)態(tài)面板為“MessagesPopup”，并設(shè)置狀態(tài)1名稱為“Processing（處理中）”。

右鍵“Processing”狀態(tài)，快捷菜單選擇“添加狀態(tài)”，添加狀態(tài)2，重新命名狀態(tài)2為“AddedToCart”。

4

創(chuàng)建“added to cart”信息

打開 “Processing”狀態(tài)，右鍵點(diǎn)擊矩形，快捷菜單選擇“復(fù)制”。下一步

打開“AddedToCart”狀態(tài)，右鍵空線框圖，快捷菜單選擇“粘貼”。

編輯按鈕屬性 - 設(shè)置當(dāng)確認(rèn)選項(xiàng)己經(jīng)被添加到購(gòu)物車時(shí)，按鈕填充色為綠色。雙擊編輯按鈕文本為“Successfully added to Cart（己成功加入購(gòu)物車）”。

5

設(shè)置加入購(gòu)物車交互

下一步，設(shè)置交互：點(diǎn)擊“add to cart（加入購(gòu)物車）”按鈕，顯示“Processing（處理中）”1秒鐘，再顯示“Added to Cart（己成功加入購(gòu)物車）”1秒鐘，然后隱藏彈出面板。

返回ProductPopup面板，選中““Add to Cart（加入購(gòu)物車）”按鈕。雙擊OnClick事件添加用例，打開用例編輯器。在這個(gè)用例中要添加5個(gè)動(dòng)作。

6

添加顯示/隱藏購(gòu)物信息彈出面板動(dòng)作

1.設(shè)置“MessagesPopup”面板到 ”Processing”狀態(tài)。在右下角，在進(jìn)行動(dòng)畫的下拉選單選擇“淡入淡出”。注意：“設(shè)置面板到指定狀態(tài)”動(dòng)作將自動(dòng)顯示面板,所以不需要再添加“顯示面板”動(dòng)作。

2.等待1000毫秒，這個(gè)動(dòng)作設(shè)置第一個(gè)面板在第二個(gè)運(yùn)作發(fā)生前，持續(xù)顯示1秒。1000毫秒=1秒。

7

切換購(gòu)物信息彈出面板狀態(tài)

3.設(shè)置面板狀態(tài)到“AddedtoCart”。設(shè)置“MessagesPopup”面板從“Processing”狀態(tài)切換到“AddedtoCart”狀態(tài)。勾選“MessagesPopup”復(fù)選框，在復(fù)選框下方的“選擇狀態(tài)”下拉選單中，選擇“AddedtoCart”狀態(tài)。

4.再次等待1000毫秒。

8

添加隱藏購(gòu)物信息彈出面板動(dòng)作

5.隱藏面板。勾選MessagesPopup復(fù)選框，動(dòng)畫選擇“淡入淡出”。

點(diǎn)擊“確定”。生成原型并測(cè)試，新手電子商務(wù)網(wǎng)站制作教程部分介紹完畢。