|
Axure RP的widgets工具欄，就是我們用來畫線框圖wireframe、流程圖flow的工具，也可以說是組成我們最終輸出圖表的零件。好比我們小時(shí)候玩的組裝積木，這些工具就是組裝積木里的一個(gè)個(gè)小部件，組成什么？組合得怎樣？完全依靠個(gè)人的經(jīng)驗(yàn)和智慧。因此，熟悉每一個(gè)工具的用法和用途，才能隨心所欲的畫出腦海中的圖形。
Widgets工具欄，下分兩類工具：
wireframe線框圖工具：基本上對(duì)應(yīng)著web頁(yè)面中的各種圖形。針對(duì)頁(yè)面中交互行為的表達(dá)，Axure RP專門增加了image map region 圖像映射區(qū)、dynamic panel動(dòng)態(tài)面版、menu（vertical/horizontal）水平/垂直菜單等幾個(gè)特殊的工具。
Flow工具：流程圖所需的基本圖形框架。
我們先談wireframe線框圖工具。學(xué)習(xí)這部分工具，如果事先有html基礎(chǔ)，或者對(duì)web頁(yè)面元素有比較充分的理解，就很容易入手。以下我根據(jù)圖片中的編碼，依次講解。
- 1、image圖片：給wireframe中插入一個(gè)圖片站位，也可以直接置入真實(shí)的圖片。
- 2、text panel文本：插入文本。相當(dāng)于插入了一個(gè)< text >標(biāo)簽。是不帶鏈接的文本。但是其實(shí)也可以帶鏈接，在interactions中我們會(huì)提到。
- 3、hyperlink超鏈接：插入帶鏈接的文本。相當(dāng)于插入了一段帶< a >標(biāo)簽的文字。但其實(shí)在Axure中它與普通文本除了外型不同，沒有本質(zhì)區(qū)別。
之所以將兩類文字區(qū)分開來，目的還是為了在視覺表達(dá)中讓人直觀的理解鏈接文本和普通文本，而這對(duì)于設(shè)計(jì)人員理解也非常重要，因此建議畫圖時(shí)盡量標(biāo)準(zhǔn)的區(qū)分鏈接文本和普通文本。
- 4、rectangle矩形：插入一個(gè)矩形。可以對(duì)其進(jìn)行圖形樣式編輯。此圖形通暢被用來表達(dá)板塊的邊界。
- 5、placeholder占位符：插入一個(gè)占位符。占位符通常用來表達(dá)在頁(yè)面中某些特殊區(qū)域，比如情況復(fù)雜，或者在系統(tǒng)升級(jí)中不需要修改，又或者無關(guān)緊要的區(qū)域等等。作者需要結(jié)合說明文字，進(jìn)行對(duì)應(yīng)的詳細(xì)表達(dá)。
- 6、button按鈕：插入一個(gè)按鈕，相當(dāng)于< button >標(biāo)簽。按鈕一般結(jié)合表單使用，當(dāng)然也可以作為強(qiáng)化的提示鏈接使用。
- 7、teble表格：插入一個(gè)表格。Axure的表格使用起來不是很方便，增加行、列，修改行、列寬度都不方便，算是一個(gè)敗筆。期待在下一個(gè)版本的時(shí)候能夠有更好的進(jìn)步。與標(biāo)準(zhǔn)化制作網(wǎng)頁(yè)一樣，表格的使用在畫wireframe的時(shí)候就應(yīng)該明確其作用，是用來作為數(shù)據(jù)列表展示使用，而不是作為網(wǎng)頁(yè)布局的控件。
- 8、text field文本輸入框：結(jié)合表單使用。一般用作表單中提交數(shù)據(jù)。比如搜索框、用戶登錄框、注冊(cè)信息填寫框等。用作字段提交或單行數(shù)據(jù)提交。
- 9、text area文本區(qū)：結(jié)合表單使用。一般用作大段文字編輯、提交。比如文章編輯、留言等板塊。
- 10、droplist下拉列表框：結(jié)合表單使用。一般用作下拉菜單或者下拉列表選項(xiàng)，比如在搜索中，可以通過下拉列表框來定位搜索分類的范圍。也有人用它來做友情鏈接，可以通過下拉選擇直接進(jìn)行頁(yè)面跳轉(zhuǎn)。
- 11、listbox列表選擇框：結(jié)合表單使用。通過文本框列表選項(xiàng)，通常使用在多項(xiàng)列表選擇，比如在填寫簡(jiǎn)歷表的時(shí)候，選擇你所感興趣的行業(yè)，會(huì)提供列表選擇框。不過列表選擇框都會(huì)結(jié)合按鈕使用。
- 12、checkbox多項(xiàng)選擇：多項(xiàng)選擇通常使用在表單中，以提供多項(xiàng)選擇。比如在有些有些注冊(cè)要求用戶選擇興趣愛好，會(huì)提供十多個(gè)選項(xiàng)，因?yàn)檫x項(xiàng)可以并列進(jìn)行，因此使用的是多項(xiàng)選擇。
- 13、raido button單項(xiàng)選擇：在一組選擇中選擇適合選項(xiàng)，選項(xiàng)關(guān)系非此即彼。比如在填寫性別的時(shí)候提供男女選擇，用戶非男即女，只取一項(xiàng)。當(dāng)然，不排除再多提供一個(gè)雙性選擇，這樣就是三選一，但是同樣是非此即彼的單一選擇。
- 14、15、horizontal line水平線、vertical line垂直線：用以分割頁(yè)面中的不同板塊區(qū)域。由于web頁(yè)面中只能存在垂直與水平線，為了系統(tǒng)生成用于演示的html文件，特將兩種線條分開使用。
- 16、button shape形狀按鈕：相當(dāng)于圖形按鈕，多用于導(dǎo)航，或者多幀切換的版面切換按鈕�？蛇M(jìn)行邊角編輯。
- 17、image map region圖像映射區(qū)：它用于在web頁(yè)面中制造一片不可見的區(qū)域，一般是圖片的部分區(qū)域，相當(dāng)于圖片的熱區(qū)，從而添加說明與互動(dòng)。在現(xiàn)實(shí)的網(wǎng)頁(yè)中經(jīng)常會(huì)有一張大圖中有某個(gè)區(qū)域是觸發(fā)按鈕，而圖像映射區(qū)就可以用來說明這個(gè)區(qū)域的的功能和互動(dòng)內(nèi)容。
- 18、inline frame框架：類似于html中的< iframe >對(duì)象。用于在頁(yè)面中制造頁(yè)面框架，每個(gè)框架中嵌入不同的頁(yè)面。我們經(jīng)�？吹胶笈_(tái)系統(tǒng)分左右兩欄，一般都是使用了框架，左側(cè)載入的是導(dǎo)航頁(yè)面，右側(cè)是載入的管理頁(yè)面。
Axure的缺點(diǎn)是，暫時(shí)不支持百分比，因此iframe都是按像素度量的，和實(shí)際頁(yè)面效果還是有差距。
- 19、dynamic panel動(dòng)態(tài)面版：是Axure為了表現(xiàn)多幀區(qū)域內(nèi)容而制造的一個(gè)工具。它的圖標(biāo)很形象的說明了它的結(jié)構(gòu)。它是不同的state疊加的一個(gè)動(dòng)態(tài)區(qū)域，默認(rèn)顯示其中一個(gè)state，當(dāng)用戶觸發(fā)按鈕、圖片或者下拉列表等時(shí)，可以設(shè)置相應(yīng)動(dòng)態(tài)面版切換到不同的state。不同state的關(guān)系，類似于photoshop的層，也類似于html中的css屬性layer。
我們可以通過右擊dynamic panel進(jìn)行state編輯，然后通過打開對(duì)應(yīng)state進(jìn)行編輯，編輯方式和編輯頁(yè)面相同。
- 20、21、menu（vertical/horizontal）水平/垂直菜單：用于制作水平或者垂直的菜單，可以添加漂浮的的子菜單，添加方法很簡(jiǎn)單，就是選擇所要添加的菜單項(xiàng)，添加submenu。
出處：
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) Widget工具 [2]
|
第 1 頁(yè) Widget工具 [1]
第 2 頁(yè) 
