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

本文目錄一覽：

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

axure rp9使用教程

axure rp9使用教程如下：

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

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

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

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

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

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

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

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

axure rp9功能

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

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

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

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

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

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

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

交互事件：Onclick

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

01

創(chuàng)建頁首母板

1

創(chuàng)建新母板

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

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

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

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

2

添加Logo圖片

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

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

3

添加導(dǎo)航按鈕

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

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

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

4

添加水平線

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

拖動"水平線"部件到線框圖中，拖拽水平線左右兩端的修改尺寸的控制柄，可以調(diào)整水平線的長度。用工具欄中的“線條樣式”、“線條顏色”編輯樣式為點(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”文件，添加第二個圖片部件，導(dǎo)入“Jeans2-1.png”文件。

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

2

添加“快速查看”按鈕

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

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

3

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

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

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

4

動態(tài)顯示按鈕

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

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

5

添加“顯示快速查看按鈕”動作

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

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

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

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

6

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

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

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

7

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

選中圖片熱區(qū)，雙擊部件屬性窗口交互標(biāo)簽中的“當(dāng)鼠標(biāo)移入時”事件。

用例編輯器中，左邊欄選擇“隱藏面板”動作，右邊欄中點(diǎn)選QuickViewButtont復(fù)選框，選擇確定。

03

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

1

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

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

2

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

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

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

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

3

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

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

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

4

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

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

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

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

5

添加產(chǎn)品大圖

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

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

6

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

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

7

建立圖片播放動畫窗口

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

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

8

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

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

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

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

9

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

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

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

10

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

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

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

04

“加入購物車”

1

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

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

2

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

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

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

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

3

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

命名動態(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)被添加到購物車時，按鈕填充色為綠色。雙擊編輯按鈕文本為“Successfully added to Cart（己成功加入購物車）”。

5

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

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

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

6

添加顯示/隱藏購物信息彈出面板動作

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

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

7

切換購物信息彈出面板狀態(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

添加隱藏購物信息彈出面板動作

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

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

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

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

二、Open Link in Popup Window：在彈出的窗口中打開一個頁面

三、Open Link in Parent Window：在原窗口中打開一個頁面

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

五、Open Link in Frame：在框架中打開一個頁面

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

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

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

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

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

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

十二、Open Link in Parent Frame：在父頁面的嵌框架中打開一個頁面

十三、Scroll to Image Map Region：滾動頁面到

十四、Image Map：所在位置

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

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

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

十八、Other：顯示動作的文字說明

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