Axure使用_詳解

1、1 認(rèn)識Axure的軟件界面  Axure的軟件界面總的來說，可以分為9大模塊1. 菜單欄：和大部分的軟件界面一樣，都是一些常規(guī)的文件、編輯、視圖2. 工具欄：是頁面進(jìn)行編輯的一些快捷操作，主要有字體設(shè)置、大小設(shè)置、頁面顯示大小和Axure本身自帶的一些快捷操作等3. 站點地圖：呈樹狀結(jié)構(gòu)、可以添加、刪除頁面、也可以對設(shè)計中的頁面進(jìn)行重命名操作4. 部件區(qū)域：組件集中地帶：矩形組件、圖片組件、動態(tài)面板組件使用方式是直接拖動部件到頁面編輯區(qū)域5. 母版區(qū)域：共用，復(fù)用6. 頁面編輯區(qū)域：拖動相關(guān)的部件進(jìn)行線框圖編輯和

2、交互具體的實施7. 頁面交互區(qū)域：8. 部件屬性區(qū)域：組件的注視、組件的交互、組件的屬性編輯9. 動態(tài)面板區(qū)域：設(shè)置動態(tài)面板的可視與隱藏二 生成網(wǎng)頁原型的三種方法方法一：菜單生成法   路徑： 生成原型彈出框  如圖：  方法二：工具欄，快速按鈕生成法  方法三：快捷鍵生成法：直接按鍵盤F5，即可生成網(wǎng)頁原型 彈出框：無論使用上面哪一種方法生成原型，最終都會彈出以下這個彈出框（如圖） 我們需要做三步動作：1. 目標(biāo)文件夾：即我們要生成的

3、網(wǎng)頁原型文件要存放的位置，默認(rèn)存放在   我的文檔我的AXURE RP原型  文件夾中，如果你不想放在默認(rèn)的位置，也可以點擊進(jìn)行自定義存放。 2. 選擇瀏覽器或者不打開，一般選擇默認(rèn)瀏覽器  3. 點擊“生成”按鈕，生成網(wǎng)頁原型，生成過后，如果你選擇了默認(rèn)瀏覽器，軟件會直接啟動你的瀏覽器，并打開生成的原型頁面，如圖：   一個簡單的登錄窗口，就生成了！你也試試吧！三 如何關(guān)閉IE瀏覽器在生成原型時候的安全警告一般情況下，如果你的瀏覽器是IE的話，在每次生成

4、網(wǎng)頁原型的時候都會彈出如下安全警告，如圖：  暫時性去除方法：單機鼠標(biāo)右鍵，選擇容許阻止內(nèi)容  徹底的方法：工具internet選項彈出窗口選擇高級把允許活動內(nèi)容在我的計算機上的文件中運行”，打上對勾點擊“應(yīng)用”即可。 四.在chrome中使用axure生成原型的問題  五. 站點地圖區(qū)域站點地圖呈樹狀的，以主頁為根節(jié)點，可以方便我們對網(wǎng)站整體模塊和不同欄目、功能劃分有一個很清晰的了解，同時也方便我們對網(wǎng)站整體頁面進(jìn)行管理（添加、刪除、重命名、調(diào)整層級、調(diào)整順序）  ：選擇一個節(jié)點，點擊這個按鈕可以實現(xiàn)在

5、這個節(jié)點下面添加子頁面：首先選中一個頁面，然后點擊這個按鈕，可以實現(xiàn)頁面的刪除，也可以單擊右鍵選擇刪除注：如果當(dāng)前頁面下含有子頁面，Axure會自動提示當(dāng)前頁面有子頁面，點擊提示中的“確認(rèn)”后會同時刪除所有子頁面 ：選中一個頁面，點擊這個按鈕可以向上調(diào)整頁面的排序：選中一個頁面，點擊這個按鈕可以向下調(diào)整頁面的排序：選中一個頁面，點擊這個按鈕可以調(diào)整頁面的層級（降級） ：選中一個頁面，點擊這個按鈕可以調(diào)整頁面的層級（升級）：選中一個頁面，點擊這個按鈕可以進(jìn)入頁面編輯狀態(tài)：搜索頁面，在頁面過多的時候可以使用，平時用的少 頁面重命名：  將頁面結(jié)構(gòu)生

6、成流程圖：  組件區(qū)域也叫做部件區(qū)域，英文為widgets，還有人稱之為控件區(qū)域，組件是axure事先準(zhǔn)備好的網(wǎng)站項目常用的零件，比如一些基本的頁面元素 Axure默認(rèn)存在2個組件庫，分別為線框圖和流程圖。同時我們也可以自己去制作一些組件加載進(jìn)來，或者從網(wǎng)絡(luò)上下載一些其他網(wǎng)友制作的組件六 認(rèn)識axure部件庫中各個部件的屬性 在axure中每一個部件都有自己的屬性，下面這個表格，我們就首先來了解認(rèn)識一下！屬性名稱屬性說明屬性舉例標(biāo)簽用來標(biāo)示部件的名稱，在axure中，部件名稱并不是唯一的。也就是說，你可以在頁面中同時有2個部件都叫做“用戶名” 坐標(biāo)

7、60;用于確定部件在頁面中的位置，頁面的坐標(biāo)以左上角為X0：Y0  尺寸 部件本身的尺寸，大部分部件都是可以設(shè)置尺寸的，比如矩形組件，也些組件事不可以設(shè)置尺寸的，如文本組件，他的高度是隨著字體的大小而變化  字體 和office辦公軟件類似  字體大小 字體的尺寸大小，和office辦公軟件類似  字體樣式 黑體、斜體、下劃線  字體顏色   邊框顏色 部件的邊框的顏色  邊框粗細(xì) &#

8、160; 邊框樣式   填充顏色   部件的層次 部件在不同的時間拖動到編輯區(qū)域，他們所在層次是不一樣的，有時候需要調(diào)整彼此的層次，以免部件被其他層次部件遮蓋  鎖定部件 鎖定過后，組件不可以進(jìn)行編輯，除非解鎖  字體對齊 和office辦公軟件類似 7. 圖片組件axure線框圖部件庫介紹我們在后面的組件使用中，都統(tǒng)一使用“從部件區(qū)域拖拽圖片組件到頁面區(qū)域中” 1.  圖片載入2.1.1 將圖片組件拖拽到頁面區(qū)域1

9、.2 雙擊圖片組件1.3 選擇合適圖片，點擊打開1.4 載入圖片時會詢問是進(jìn)行優(yōu)化。 1.5載入圖片時會詢問是否自動調(diào)整圖片大小。  2. 圖片尺寸大小調(diào)整   3. 懸停圖片設(shè)置以同樣的操作方式，我們還可以設(shè)置鼠標(biāo)按下圖片、編輯選中圖片、編輯禁用圖片  4. 圖片切割選擇圖片，單機右鍵，選擇切割圖片  根據(jù)需要，可以選擇 十字切割，橫向切割，縱向切割在圖片切割狀態(tài)下，按下鍵盤上的ESC鍵或者取消按鈕，可以退出切割狀態(tài)

10、0; 以上內(nèi)容都比較簡單，只需要每一個菜單都去嘗試一下 就可以知道 具體怎么去使用了！一定要自己去嘗試下！  八.文本面板axure線框圖部件庫介紹文本部件用于在頁面中顯示文字，對于文字的格式可以隨意的更改，設(shè)定不同的字體、尺寸和顏色。特別注意：文本面板的高度無法直接調(diào)整，它的高度是隨著字體的大小自動變化的在6.5版本中，對文本的排版都有2個位置，可以進(jìn)行調(diào)整，如圖所示，設(shè)置文本的字體： 1. 設(shè)置文本的字體、顏色、大小  2. 設(shè)置文本的行間距     Axure

11、 6.5版本新增的屬性：調(diào)整字體的行間距，當(dāng)有多行文本的時候，我們可以像在word中一樣去設(shè)置文本的行間距，這個是新增的功能，以往我們需要調(diào)整文本的行間距需要拖動多個文本面板進(jìn)行布局！  3. 給文本設(shè)置超連接在6.5之前的版本都是有一個單獨的超鏈接組件的，和文本組件最大的區(qū)別就是，超鏈接組件的顏色是藍(lán)色的并且有下劃線，6.5版本后把這個組件融入到了工具欄中，不過個人認(rèn)為這個組件的可用度并不大，因為axure本身提供了交互設(shè)置區(qū)域。第一步：選擇需要添加超鏈接的文本第二步：單擊工具欄的超鏈接按鈕第三步：在彈出的對話框中輸入需要連接的地址，單擊確定即可

12、60; 九.矩形、占位符組件axure線框圖部件庫介紹 矩形組件和占位符沒有太多的區(qū)別，這里我們主要講解矩形組件的操作和使用，占位符的操作各位可以按照矩形的操作方法進(jìn)行練習(xí)一下。矩形組件是一個矩形，它可以用來做很多的工作，比如頁面上需要一塊藍(lán)色的背景，就可以用一個填充為藍(lán)色的矩形組件，我們還可以用它來做頁面布局，是我們最常用的部件。 1. 可以用來做頁面布局2. 可以變化成為其他的形狀：三角形、圓形、橢圓等很多的形狀3. 可以填充顏色：用著背景和層次4. 可以用來制作表格5. 可以直接輸入文字6. 可以添加很多的交

13、互 首先我們將矩形組件拖動到頁面編輯區(qū)域 1. 調(diào)整矩形的形狀：單擊鼠標(biāo)右鍵選擇編輯按鈕形狀選擇形狀選擇需要變換的形狀 具體對應(yīng)的每一種形狀，自己嘗試一下。比如我們在做導(dǎo)航的時候，就需要頂部是圓角的矩形。  2. 練習(xí)矩形的顏色填充和漸變?nèi)绻霈F(xiàn)那種很有質(zhì)感的填充效果，必須選擇線性漸變，并且在數(shù)值填充處輸入90 3. 屏幕取色器的使用 有時候，我們需要獲取其他地方的顏色的16進(jìn)制值，可以借助顏色取色器，通過直接在顏色輸入寬輸入數(shù)值的話會更加精準(zhǔn) 屏幕取色器下載十.水平線、垂直線axure線框圖

14、部件庫介紹1. 將水平線、垂直線拖動到axure頁面編輯區(qū)域，如圖：  2. 水平線、垂直線相關(guān)屬性設(shè)置主要屬性有、線條的顏色、粗細(xì)、線條的樣式、箭頭的樣式   十一. 圖片熱區(qū)axure線框圖部件庫介紹本文標(biāo)簽： axure , 圖片熱區(qū) 首先，我們將圖片熱區(qū)組建拖動到axure頁面編輯區(qū)域1. 圖片熱區(qū)為頁面圖片或者其他部件添加熱區(qū)，添加交互  我們一般在做專題的時候，會遇到一些組合商品，但是又需要單獨分別設(shè)置連接，如果是2張圖片還好辦點，可是如果和下圖一樣是集成在一張圖片中的，可能就需要我們借用圖片熱區(qū)組件，

15、給每一束鮮花添加熱區(qū)，然后再設(shè)置交互，在新窗口打開鏈接地址。我們?yōu)樯厦娴膱D片添加熱區(qū)，設(shè)置點擊鮮花圖片，單獨開新的連接地址 2. 圖片熱區(qū)作為頁面錨點的使用我們經(jīng)常在有些網(wǎng)站看到一些樓層快速直達(dá)的鏈接按鈕,如圖: 其實,使用axure的頁面錨點功能我們也可以制作出類似的效果 對于拖動出來的圖片熱區(qū),我們必須首先給他設(shè)置標(biāo)簽,這樣在設(shè)置交互的時候,我們才知道要滾動到哪一個錨點   如果頁面沒有發(fā)生相應(yīng)的滾動效果，可能是你的頁面設(shè)置不夠長，隨便放上個組件，把頁面撐長。頁面夠長了，點擊按鈕時才能體現(xiàn)出滾動效果。 十二. 文本框、文

16、本編輯框、按鈕axure線框圖部件庫介紹1. 與文本面板組合設(shè)計表單文本框主要是在設(shè)計頁面表單的時候，用的最多，通過與文本面板的組合使用，下面我們通過文本面板和文本框設(shè)計了一個簡單的注冊表單對于，文本框中的文字，只需要雙擊即可編輯文字  2. 注冊表單中的密碼遮罩設(shè)置 選中需要設(shè)置密碼隱藏的文本框，單擊鼠標(biāo)右鍵選擇編輯文本字段選擇隱藏文本（密碼框）即可  3. 文本框、文本編輯框組合設(shè)計留言表單 文本編輯框，適合做大面積內(nèi)容輸入的設(shè)計，比如一般的編輯器 十三. 如何安裝（裝載）axure組件（部件）我們在網(wǎng)絡(luò)上經(jīng)?？梢韵螺d到

17、很多網(wǎng)友精心設(shè)計的axure組件，這些組件給我們節(jié)省了很多的時間，方便了我們進(jìn)行原型設(shè)計，可是對于很多剛剛接觸axure的朋友就遇到了2個問題：第一：到哪里去下載這些組件1. 精選組件：2. axure官方組件下載：3.webppd精選組件下載： （必須是會員，而且需要虛擬幣）第二：如何安裝已經(jīng)下載到本地的組件庫 1. 點擊部件中的 線框圖下拉，選擇 載入部件庫2. 選擇部件的所在位置，并選中3. 載入后的效果，單擊選中axure圖標(biāo)16*16，可到對應(yīng)的組件庫中使用和線框圖中的組件方法一樣，都是直接點擊選中然后直接拖拽到頁面編輯區(qū)域，部分組件也可以進(jìn)行相應(yīng)屬性的設(shè)置十四. 動態(tài)面板

18、axure線框圖部件庫介紹1、什么是Axure的動態(tài)面板按照Axure官方網(wǎng)站的解釋 ：動態(tài)面板控件（Dynamic Panel）可以讓你實現(xiàn)高級的交互功能，實現(xiàn)原型的高保真度。動態(tài)面板包含有多個狀態(tài)（states），每個狀態(tài)可包含一系列控件（你可以把一個狀態(tài)理 解成一個獨立的頁面）。任何時候都只有一個狀態(tài)（頁面）是可見的，或整個動態(tài)面板可以被隱藏。結(jié)合交互動作，可以讓動態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。 像添加其它控件一樣，可以在控件面板中拖放動態(tài)面板控件到線框圖中。簡單的說，動態(tài)面板就是展示在頁面不跳轉(zhuǎn)的情況下所能實現(xiàn)的交互狀態(tài)。而動態(tài)面板的每一個狀態(tài)都可以看作是產(chǎn)生的一個新的交互結(jié)果。簡

19、單的說，動態(tài)面板就是展示在頁面不跳轉(zhuǎn)的情況下所能實現(xiàn)的交互狀態(tài)     “動態(tài)面板組件式axure中功能最強大的部件，是一個化腐朽為神奇的組件。通過這個組件，我們可以實現(xiàn)很多其他原型軟件不能實現(xiàn)的動態(tài)效果。”網(wǎng)站藍(lán)圖axure        一直想把動態(tài)面板的內(nèi)容，放在最后面才介紹，因為這個組件，在剛開始學(xué)習(xí)的時候，很難讓人去理解。其實如果不考慮復(fù)雜的交互行為，這個動態(tài)面板不去搭理她，我們也能設(shè)計出滿足我們需求的線框圖，但是想交互更加完美就必須見識一下動態(tài)面板的魅力。 2、A

20、xure的動態(tài)面板可以用來做什么1）tab式頁簽的切換效果：Axure的官方給出的實例就是這個2）鼠標(biāo)觸發(fā)式和點擊觸發(fā)式的下拉菜單效果：這個可以結(jié)合Axure的默認(rèn)組件中的“垂直菜單”、“水平菜單”來實現(xiàn)，常用于導(dǎo)航的原型制作。3）鼠標(biāo)觸發(fā)式的浮窗效果：類似“Alt”的效果，常用于瀏覽提示和觸發(fā)式廣告。4）JS的鼠標(biāo)點擊彈層效果：這個是目前使用被廣泛使用的效果之一。5）注冊表單中的根據(jù)焦點判斷提示的效果：當(dāng)焦點在輸入框內(nèi)的時候提示該表單欄目填寫規(guī)范，當(dāng)焦點離開輸入框的時候根據(jù)填寫的結(jié)果提示正確或者錯誤原因，這個需要動用高級設(shè)計交互編輯功能結(jié)合Axure的邏輯條件和設(shè)置變量功能來實現(xiàn)。 

21、;3. 關(guān)于動態(tài)面板和其中狀態(tài)的理解其實動態(tài)面板，我們可以這樣的去理解它，首先動態(tài)面板是一個大的容器，這個容器中可以有很多的狀態(tài)，在每一個狀態(tài)中，都可以放置一定的內(nèi)容，然后我們通過事件來選擇顯示動態(tài)面板的相應(yīng)狀態(tài) 在默認(rèn)的狀態(tài)下，只有位置一的內(nèi)容是可見的，其他的是隱藏的，如果你想其他狀態(tài)可見，只需要把這個狀態(tài)移動到最上面4. 現(xiàn)實中關(guān)于動態(tài)面板不同狀態(tài)的應(yīng)用案例 以上摘取的使淘寶網(wǎng)2種不同登錄方式的狀態(tài)變化，使用動態(tài)面板就可以制作出來十五. 單選按鈕、復(fù)選按鈕axure線框圖部件庫介紹有時候發(fā)現(xiàn)這做事情堅持下來是一件很不容易的，寫教程也一樣，不過聽到很多朋友對我說 這個全部

22、是圖片的教程 對他們?nèi)腴T幫助很多，我就想想 在堅持堅持把基礎(chǔ)部分先完善了！1. 簡單的問卷調(diào)查：您的性別？  答案：男   女當(dāng)然我們首先需要分析一下，這個問題，問性別 你只可能是男或者是女，2者只能是其一，不能即是男也是女是把，所以我們這個問卷調(diào)查的題目是一個單選題：要設(shè)置這樣的一個問題，其實學(xué)到這個教程這個階段，很多人都很清楚該如何去做了，第一步是拖動你需要的單選按鈕到頁面編輯區(qū)域，和一個文本面板，分別雙擊設(shè)置對應(yīng)的文字，如圖：您的愛好？ 籃球  足球  羽毛球  蒼老師同樣我們也進(jìn)行一下分析，一個人可以同時喜歡籃球 足球 羽毛球

23、 還有蒼老師（這個是世界的）所以啊，這個是一個多選題，只要你有精力 你可以全部喜歡所以我們的問題設(shè)置，如圖：這樣我們就簡單的制作了問卷調(diào)研中最重要的2類題型。單選題，多選題 2.設(shè)定單選組問題做好上面的單選題設(shè)置后，肯定很多人在設(shè)置原型后，發(fā)現(xiàn)了，為什么我的男、女都可以選中，不是說是單選題嗎，為什么不能像正規(guī)網(wǎng)站一樣，只能選中一個了，其實這里面我們忘記了一個設(shè)置，就是設(shè)置單選按鈕組，我們必須保證這2個單選選項是一組的，這樣才能實現(xiàn)我們想要的效果：只能選中男或者女，如圖： 十六. 內(nèi)部框架axure線框圖部件庫介紹 網(wǎng)頁框架代碼<iframe border=0 name

24、=lantk src="要嵌入的網(wǎng)頁地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面這段代碼，很多人肯定認(rèn)出這是html語言中的框架引用，在axure中也可以實現(xiàn)這樣的框架效果?？梢栽陧撁嬷幸昧硪豁撁娴膬?nèi)容 1. 內(nèi)部框架引用外部網(wǎng)頁彈出鏈接屬性對話框，如果只是是鏈接原型中頁面   可以選擇  第一個  ，這里面鏈接的是

25、我的個人博客2. 如何應(yīng)用內(nèi)部框架引用視頻內(nèi)容如果只需要視頻內(nèi)容，不需要網(wǎng)頁的內(nèi)容，記得復(fù)制flash地址，框架的大小是視頻播放的大小十七. 菜單組件axure線框圖部件庫介紹軟件類的教程，我寫不出長篇大論，這里面的都是基礎(chǔ)的操作，希望初學(xué)者，根據(jù)一個功能演示，可以自己測試其他功能菜單的效果！Axure自帶的菜單組件，我?guī)缀鯖]有用到過，做菜單導(dǎo)航，我第一時間想到的還是矩形組件，大家有興趣可以看看我使用矩形制作的電商網(wǎng)站通用頭部，其中就有矩形組件制作的導(dǎo)航菜單。菜單組件的分類（橫向、縱向） 菜單組件的相關(guān)設(shè)置這里我們選擇的是添加子菜單，具體的每個選項的作用，大家挨個嘗試一下 就可以看到

26、效果十八axure日常使用問題1. axure生成的原型文件，如何自動隱藏sitemap和page notes答：axure默認(rèn)打開的都是index為索引的文件，我們只需要打開其他的頁面文件，就可以自動隱藏sitemap和page notes2. axure 6.5版 如何讓一個部件在頁面向下翻滾時始終固定在頂部 答：Axure6.5下，將部件轉(zhuǎn)換成動態(tài)面板，右擊該動態(tài)面板，選擇編輯動態(tài)面板 > 固定到瀏覽器即可3. axure 6.5版 可以添加GIF圖片嗎？答：可以，直接使用圖片組件導(dǎo)入即可：十九.樹axure線框圖部件庫介紹 終于到最后一個組件的介紹了！到這里基礎(chǔ)的應(yīng)用應(yīng)該算完成了

27、！ 1. 拖動樹組件，到頁面編輯區(qū)域 2.添加節(jié)點，可以添加子節(jié)點也可以在該節(jié)點的前后添加平級節(jié)點 3. 編輯節(jié)點圖標(biāo) 做好上面的那一步，圖標(biāo)還不會顯示，還需要對樹的熟悉進(jìn)行編輯效果圖： 二十.Axure自動備份功能，讓失誤不在可怕忘記保存了！電腦意外重啟了。不小心刪除了。每次做axure的時候，多有了太多的意外了！ 1. 備份時間設(shè)置默認(rèn)備份時間是15分鐘，你可以進(jìn)行數(shù)值調(diào)整 2. 從備份中恢復(fù)文件第二步：選擇你最近的文件名稱，然后單擊恢復(fù)，選擇新的保存路徑即可 二十一.axure母版（模板）

28、區(qū)域介紹axure的模板區(qū)域是非常重要的一個功能，網(wǎng)站的頭部、尾部部分等很多頁面同時用到的內(nèi)容，都可以使用母版，因為在母版中只需要修改一次，就可以實現(xiàn)所有的頁面更新，可以大大的加速原型的制作速度。需要重復(fù)理解復(fù)用的概念！1. 母版圖示介紹2. 母版菜單工具操作介紹：選擇一個節(jié)點，點擊這個按鈕可以實現(xiàn)在這個節(jié)點下面添加子模板：首先選中一個模板，然后點擊這個按鈕，可以實現(xiàn)頁面的刪除，也可以單擊右鍵選擇刪除注：如果當(dāng)前原型中下含有子母版，Axure會自動提示當(dāng)前母版正在使用中，必須先刪除頁面中的母版才能刪除母版本身：選中一個模板，點擊這個按鈕可以向上調(diào)整模板的排序：選中一個模板，點擊這個按鈕可以向下調(diào)整模板的排序：選中一個模板，點擊這個按鈕可以調(diào)整模板的層級（降級）：選中一個模板，點擊這個按鈕可以調(diào)整模板的層級（升級）：選中一個模板，點擊這個按鈕可以進(jìn)入