今天給各位分享axure網(wǎng)頁(yè)制作教程的知識(shí)，其中也會(huì)對(duì)axure rp設(shè)計(jì)網(wǎng)頁(yè)的思路進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、axure rp9使用教程
• 2、Axure教程 | 初級(jí)電子商務(wù)網(wǎng)站設(shè)計(jì)
• 3、axure基礎(chǔ)教程內(nèi)容是什么？

axure rp9使用教程

axure rp9使用教程如下：

1、主菜單和工具欄：位于界面的最頂部，在這里新建、新建元件庫(kù)，還可以對(duì)創(chuàng)建好的原型，進(jìn)行保存等操作。

2、站點(diǎn)地圖面板：位于左上方，站點(diǎn)地圖面板的作用是給設(shè)計(jì)人員提供了一個(gè)清晰的產(chǎn)品設(shè)計(jì)思路。

3、控制面板：位于左中方，包括圖片、文本面板、矩形等等的一個(gè)線框圖的控制。

4、模塊面板：位于左下方。

5、線框圖工作區(qū)：位于正中間，又叫做頁(yè)面工作區(qū)，制作主要場(chǎng)景。

6、頁(yè)面注釋和交互區(qū)：位于中下位置。

7、控制注釋面板：位于右上方。

8、交互面板：位于控制注釋面板底下，可以出現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果。

axure rp9功能

（1）互動(dòng)生成器 ：目前axure rp9版本的互動(dòng)生成器已經(jīng)經(jīng)過(guò)全面的優(yōu)化，已經(jīng)可以將最基本的鏈接到復(fù)雜的有條件流程。好處就是能夠幫助你在設(shè)計(jì)制作的時(shí)候原型花費(fèi)時(shí)間更短得到一定的點(diǎn)擊！

（2）印刷術(shù)控制改進(jìn) ：這里所說(shuō)的印刷術(shù)其實(shí)是針對(duì)于字符的一個(gè)間距以及刪除線、上標(biāo)等等進(jìn)行了改進(jìn)，足以保障原型有更好的圖像質(zhì)量。

（3）新款原型機(jī)改進(jìn) ：改進(jìn)過(guò)的新款原型機(jī)可以更加清晰化的展示出移動(dòng)以及桌面的原型。

Axure教程 | 初級(jí)電子商務(wù)網(wǎng)站設(shè)計(jì)

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

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

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

交互事件：Onclick

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

01

創(chuàng)建頁(yè)首母板

1

創(chuàng)建新母板

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

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

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

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

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)航按鈕

接下來(lái)，在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è)水平線，將頁(yè)首和下面的內(nèi)容分開(kāi)。

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

5

在Home頁(yè)面添加頁(yè)首

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

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

02

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

1

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

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

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

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

2

添加“快速查看”按鈕

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

“快速查看”按鈕只有在鼠標(biāo)經(jīng)過(guò)圖片時(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)過(guò)產(chǎn)品圖片時(shí)顯示“快速查看”按鈕。

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

5

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

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

使用鼠標(biāo)移出時(shí)事件隱藏“快速查看”按鈕，交互會(huì)出現(xiàn)錯(cuò)誤。因?yàn)楫?dāng)鼠標(biāo)經(jīng)過(guò)“快速查看”按鈕時(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，將矩形放在線框圖頁(yè)面的中間。

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)，打開(kāi)快速查看按鈕編輯頁(yè)，選擇“快速查看”按鈕，在Onclick事件中添加用例，設(shè)置用例動(dòng)作“顯示面板”，并將顯示面板配置到顯示ProductPopup。

4

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

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

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

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

5

添加產(chǎn)品大圖

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

編輯詳細(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)畫(huà)窗口

我們下面將使用到一個(gè)叫“開(kāi)窗”的技術(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)面板編輯器中，打開(kā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)畫(huà)“擺動(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)畫(huà)己經(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”信息

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

打開(kāi)“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事件添加用例，打開(kāi)用例編輯器。在這個(gè)用例中要添加5個(gè)動(dòng)作。

6

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

1.設(shè)置“MessagesPopup”面板到 ”P(pán)rocessing”狀態(tài)。在右下角，在進(jìn)行動(dòng)畫(huà)的下拉選單選擇“淡入淡出”。注意：“設(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)畫(huà)選擇“淡入淡出”。

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

axure基礎(chǔ)教程內(nèi)容是什么？

一、Open Link in Current Window：在當(dāng)前窗口打開(kāi)一個(gè)頁(yè)面

二、Open Link in Popup Window：在彈出的窗口中打開(kāi)一個(gè)頁(yè)面

三、Open Link in Parent Window：在原窗口中打開(kāi)一個(gè)頁(yè)面

四、Close Current Window：關(guān)閉當(dāng)前窗口

五、Open Link in Frame：在框架中打開(kāi)一個(gè)頁(yè)面

六、Set Panel state(s) to State(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài)

七、Show Panel(s)：顯示動(dòng)態(tài)面板

八、Hide Panel(s)：隱藏動(dòng)態(tài)面板

九、Toggle Visibility for Panel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)（顯示/隱藏）

十、Move Panel(s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來(lái)移動(dòng)動(dòng)態(tài)面板

十一、Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值

十二、Open Link in Parent Frame：在父頁(yè)面的嵌框架中打開(kāi)一個(gè)頁(yè)面

十三、Scroll to Image Map Region：滾動(dòng)頁(yè)面到

十四、Image Map：所在位置

十五、Enable Widget(s)：把對(duì)象狀態(tài)變成可用狀態(tài)

十六、Disable Widget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài)

十七、Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作

十八、Other：顯示動(dòng)作的文字說(shuō)明

關(guān)于axure網(wǎng)頁(yè)制作教程和axure rp設(shè)計(jì)網(wǎng)頁(yè)的思路的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。