文章出處

首先做個聲明:此次教程里為了快速完成,借用了一些網上已有教程的圖文,不是剽竊,只圖方便。另外,因為漢化版本可能功能名稱等略有差別,請自行理解。

名詞解釋:

線框圖:一般就是指產品原型,比如:把線框圖盡快畫出來和把原型盡快做出來是一個意思。

axure元件:也叫axure組件或axure部件,系統自帶了一部分最基礎常用的,網上也有很多別人做好的,軟件使用到一定階段可以考慮自己制作元件,以便提高產品原型的制作速度。

生成原型:是指把繪制好的原型通過axure rp生成靜態的html頁面,檢查原型是否正確,同時,方便演示。建議生成時選擇用谷歌瀏覽器打開(第一次會有提示安裝相關插件),ie會每次都有安全提示,不如谷歌瀏覽器方便。

(一)  Axure rp的界面

1-主菜單工具欄:大部分類似office軟件,不做詳細解釋,鼠標移到按鈕上都有對應的提示。

2-主操作界面:繪制產品原型的操作區域,所有的用到的元件都拖到該區域。

3-站點地圖:所有頁面文件都存放在這個位置,可以在這里增加、刪除、修改、查看頁面,也可以通過鼠標拖動調整頁面順序以及頁面之間的關系。

4-axure元件庫:或者叫axure組件庫、axure部件庫,所有軟件自帶的元件和加載的元件庫都在這里,這里可以執行創建、加載、刪除axure元件庫的操作,也可以根據需求顯示全部元件或某一元件庫的元件。

5-母版管理:這里可以創建、刪除、像頁面頭部、導航欄這種出現在每一個頁面的元素,可以繪制在母版里面,然后加載到需要顯示的頁面,這樣在制作頁面時就不用再重復這些操作。

6-頁面屬性:這里可以設置當前頁面的樣式,添加與該頁面有關的注釋,以及設置頁面加載時觸發的事件onpageload。

7-元件屬性:這里可以設置選中元件的標簽、樣式,添加與該元件有關的注釋,以及設置頁面加載時觸發的事件;

A-交互事件:元件屬性區域閃電樣式的小圖標代表交互事件;

B-元件注釋:交互事件左面的圖標是用來添加元件注釋的,在這里我們能夠添加一些元件限定條件的注釋,比如:文本框的話,可以添加注釋指出輸入字符長度不能超過20。

C-元件樣式:交互事件右側的圖標是用來設置元件樣式的,可以在這里更改原件的字體、尺寸、旋轉角度等,當然也可以進行多個元件的對齊、組合等設置。

8 動態面板:這個是很重要的區域,在這里可以添加、刪除動態面板的狀態,以及狀態的排序,也可以在這里設置動態面板的標簽;當繪制原型動態面板被覆蓋時,我們可以在這里通過點擊選中相應的動態面板,也可以雙擊狀態進入編輯。

Axure rp的界面就介紹到這里,界面中的各個區域基本上在做產品原型的過程中,使用都很頻繁,所以建議不要關閉任何一個區域。如果不小心關閉了,可以通過主菜單工具欄—視圖—重置視圖來找回。

(二)Axure rp的線框圖元件

l  圖片

圖片元件拖入編輯區后,可以通過雙擊選擇本地磁盤中的圖片,將圖片載入到編輯區,axure會自動提示將大圖片進行優化,以避免原型文件過大;選擇圖片時可以選擇圖片原始大小,或保持圖片元件的大小。

l  文本

在網頁中文本的名稱是lable,用于頁面中添加說明文字、文字連接,或一些動態的提示。

l  矩形

矩形的應用比較廣泛,比如作為頁面的背景、按鈕、以及一些元件的遮蓋等;矩形的形狀可以通過鼠標右鍵點擊–編輯選項—改變形狀,來變成我們需要的形狀,比如做選項卡時候我們需要頂部圓角的矩形,就可以通過改變矩形的形狀來實現。

l  占位符

制作原型時,可以用它來代替對一些沒有交互或者交互比較簡單容易說明的區域;也可以做成關閉按鈕。占位符在保真比較高的產品原型中作用不大。

l  圓角矩形

這個個人認為是因為圓角矩形應用廣泛,所以單獨拿出來作為元件給使用者,免去了對矩形的設置。

l  動態面板

非常重要的axure元件,必須要學會使用的元件,動態面板的顯示、隱藏、多狀態等,都是非常有用的。在這里不過多介紹,詳細介紹請參考:小樓axure圖文教程(五)動態面板的使用。

l  水平線

就是一條水平的線,可以作為表示頁面一些區域分割時使用,比如在兩塊不同區域之間添加一條水平線,來明顯的區分。水平線可以通過設置元件屬性中的角度Rotº變成斜線來使用。

l  垂直線

沒什么好說的,和水平線一樣的作用。

l  圖片熱區

用于點擊圖片中某個區域產生交互事件時使用,圖片熱區也是矩形的一種,可以通過設置矩形無邊框,背景色100%透明度來實現。

l  文本框(單行)

用于輸入文字的axure元件,用于登錄、標題、密碼框(鼠標右鍵–編輯選項–隱藏文本)等功能。

l  文本框(多行)

從字面意思就知道了它的功能,用于實現更多文字內容輸入的axure元件,用于回復、評論、微博發布框這類的功能。

l  下拉列表(框)

鼠標點擊時展開多個選項的axure元件,主要用來類別選擇或多條件查詢效果時使用。

l  列表框

一個多選項的列表,帶滾動條效果,個人認為樣子很丑,應用不是很多,應用場景可以參考word自定義快速訪問工具欄中選擇添加項的效果。

l  復選框

復選框用于同類別內容可以同時選擇多個時候使用,比如注冊時候個人興趣的選擇,又比如批量刪除郵件時選擇多個郵件的功能。

l  單選按鈕

多個選項僅能選擇其一時候使用,比如性別選擇。多個單選按鈕聯動效果需要同時選中多個需要聯動的單選按鈕—鼠標右鍵—編輯選項–指定單選按鈕組來實現。不嫌麻煩的話也可以通過設置每個單選按鈕的onclick事件來實現。

l  內部框架

用于在頁面中嵌入其他頁面的axure元件,可以設置好大小后雙擊它,指定要嵌入的頁面。框架可以通過編輯選項取消滾動條,應用場景多見于網站后臺原型和移動互聯網產品原型。

l  表格

表格很常見,就不多做解釋,每個表格都可以設置單獨的事件,但是axure還不支持單元格的合并。

l  菜單縱向

主要用于網站導航。多使用于網站后臺。

l  菜單橫向

主要用于網站導航,多使用于網站前臺。

l  樹

主要用于網站導航。多使用于網站后臺。


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()