Axure RP基礎(chǔ)知識——wireframe線框圖工具

wireframe線框圖工具：基本上對應(yīng)著web頁面中的各種圖形。針對頁面中交互行為的表達(dá)，Axure RP專門增加了image map region 圖像映射區(qū)、dynamic panel動態(tài)面版、menu（vertical/horizontal）水平/垂直菜單等幾個特殊的工具。

1、image圖片：給wireframe中插入一個圖片站位，也可以直接置入真實(shí)的圖片。

2、text panel文本：插入文本。相當(dāng)于插入了一個< text >標(biāo)簽。是不帶鏈接的文本。但是其實(shí)也可以帶鏈接，在interactions中我們會提到。

3、hyperlink超鏈接：插入帶鏈接的文本。相當(dāng)于插入了一段帶< a >標(biāo)簽的文字。但其實(shí)在Axure中它與普通文本除了外型不同，沒有本質(zhì)區(qū)別。

之所以將兩類文字區(qū)分開來，目的還是為了在視覺表達(dá)中讓人直觀的理解鏈接文本和普通文本，而這對于設(shè)計(jì)人員理解也非常重要，因此建議畫圖時盡量標(biāo)準(zhǔn)的區(qū)分鏈接文本和普通文本。

4、rectangle矩形：插入一個矩形?？梢詫ζ溥M(jìn)行圖形樣式編輯。此圖形通暢被用來表達(dá)板塊的邊界。

5、placeholder占位符：插入一個占位符。占位符通常用來表達(dá)在頁面中某些特殊區(qū)域，比如情況復(fù)雜，或者在系統(tǒng)升級中不需要修改，又或者無關(guān)緊要的區(qū)域等等。作者需要結(jié)合說明文字，進(jìn)行對應(yīng)的詳細(xì)表達(dá)。

6、button按鈕：插入一個按鈕，相當(dāng)于< button >標(biāo)簽。按鈕一般結(jié)合表單使用，當(dāng)然也可以作為強(qiáng)化的提示鏈接使用。

7、 teble表格：插入一個表格。Axure的表格使用起來不是很方便，增加行、列，修改行、列寬度都不方便，算是一個敗筆。期待在下一個版本的時候能夠有 更好的進(jìn)步。與標(biāo)準(zhǔn)化制作網(wǎng)頁一樣，表格的使用在畫wireframe的時候就應(yīng)該明確其作用，是用來作為數(shù)據(jù)列表展示使用，而不是作為網(wǎng)頁布局的控件。

8、text field文本輸入框：結(jié)合表單使用。一般用作表單中提交數(shù)據(jù)。比如搜索框、用戶登錄框、注冊信息填寫框等。用作字段提交或單行數(shù)據(jù)提交。

9、text area文本區(qū)：結(jié)合表單使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。

10、droplist下拉列表框：結(jié)合表單使用。一般用作下拉菜單或者下拉列表選項(xiàng)，比如在搜索中，可以通過下拉列表框來定位搜索分類的范圍。也有人用它來做友情鏈接，可以通過下拉選擇直接進(jìn)行頁面跳轉(zhuǎn)。

11、listbox列表選擇框：結(jié)合表單使用。通過文本框列表選項(xiàng)，通常使用在多項(xiàng)列表選擇，比如在填寫簡歷表的時候，選擇你所感興趣的行業(yè)，會提供列表選擇框。不過列表選擇框都會結(jié)合按鈕使用。

12、checkbox多項(xiàng)選擇：多項(xiàng)選擇通常使用在表單中，以提供多項(xiàng)選擇。比如在有些有些注冊要求用戶選擇興趣愛好，會提供十多個選項(xiàng)，因?yàn)檫x項(xiàng)可以并列進(jìn)行，因此使用的是多項(xiàng)選擇。

13、radio button單項(xiàng)選擇：在一組選擇中選擇適合選項(xiàng)，選項(xiàng)關(guān)系非此即彼。比如在填寫性別的時候提供男女選擇，用戶非男即女，只取一項(xiàng)。當(dāng)然，不排除再多提供一個雙性選擇，這樣就是三選一，但是同樣是非此即彼的單一選擇。

14、15、horizontal line水平線、vertical line垂直線：用以分割頁面中的不同板塊區(qū)域。由于web頁面中只能存在垂直與水平線，為了系統(tǒng)生成用于演示的html文件，特將兩種線條分開使用。

16、button shape形狀按鈕：相當(dāng)于圖形按鈕，多用于導(dǎo)航，或者多幀切換的版面切換按鈕?？蛇M(jìn)行邊角編輯。(什么東西）

17、 image map region圖像映射區(qū)：它用于在web頁面中制造一片不可見的區(qū)域，一般是圖片的部分區(qū)域，相當(dāng)于圖片的熱區(qū)，從而添加說明與互動。在現(xiàn)實(shí)的網(wǎng)頁中經(jīng)常 會有一張大圖中有某個區(qū)域是觸發(fā)按鈕，而圖像映射區(qū)就可以用來說明這個區(qū)域的的功能和互動內(nèi)容。（使用案例？）

18、inline frame框架：類似于html中的< iframe >對象。用于在頁面中制造頁面框架，每個框架中嵌入不同的頁面。我們經(jīng)?？吹胶笈_系統(tǒng)分左右兩欄，一般都是使用了框架，左側(cè)載入的是導(dǎo)航頁面，右側(cè)是載入的管理頁面。

Axure的缺點(diǎn)是，暫時不支持百分比，因此iframe都是按像素度量的，和實(shí)際頁面效果還是有差距。

19、 dynamic panel動態(tài)面版：是Axure為了表現(xiàn)多幀區(qū)域內(nèi)容而制造的一個工具。它的圖標(biāo)很形象的說明了它的結(jié)構(gòu)。它是不同的state疊加的一個動態(tài)區(qū)域，默認(rèn)顯示其中一個state，當(dāng)用戶觸發(fā)按鈕、圖片或者下拉列表等時，可以設(shè)置相應(yīng)動態(tài)面版切換到不同的state。不同state的關(guān)系，類似于 photoshop的層，也類似于html中的css屬性layer。

我們可以通過右擊dynamic panel進(jìn)行state編輯，然后通過打開對應(yīng)state進(jìn)行編輯，編輯方式和編輯頁面相同。

20、21、menu（vertical/horizontal）水平/垂直菜單：用于制作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡單，就是選擇所要添加的菜單項(xiàng)，添加submenu。