首先做個聲明:此次教程里為了快速完成,借用了一些網上已有教程的圖文,不是剽竊,只圖方便。另外,因為漢化版本可能功能名稱等略有差別,請自行理解。
名詞解釋:
線框圖:一般就是指產品原型,比如:把線框圖盡快畫出來和把原型盡快做出來是一個意思。
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 樹
主要用于網站導航。多使用于網站后臺。
文章列表