目錄:
前言
Axure簡介
Axure工作界面
Axure元件樣式
Axure基礎操作
Axure特點
Axure與墨刀的區別
前言
在上一節軟件開發與創新課程設計課上,王文娟老師發布了在個人博客上介紹主流原型設計工具,可以對比介紹幾種不同的原型設計工具的特點和使用方法,也可以重點介紹其中一種的學習任務,因此,這是我為軟件開發與創新課程設計寫的第二篇博客。
一、Axure簡介
Axure是一個專業的快速原型設計工具。Axure是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。Axure已被一些大公司采用。Axure 的使用者主要包括商業分析師、信息架構師、可用性專家、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、界面設計師等,另外,架構師、程序開發工程師也在使用Axure。
1、Axure工作界面(Axure9)
Axure9的工作界面截圖:
通過截圖,我們可以將Axure9的工作界面分為以下11個部分:
(1)菜單欄
主要包含文件、編輯、視圖、項目、布局、發布、團隊、賬戶、幫助幾個菜單。
文件:新建、新建元件庫、打開、保存、另存為、從RP文件導入、新建團隊項目、新建團隊元件庫、獲取並打開團隊項目、紙張尺寸與設置、打印、導出頁面為圖片、自動備份設置、從備份中恢復、偏好設置(常規、畫布、網格、輔助線、元件對齊、母版)、退出等功能;
編輯:撤銷、重做、剪切、復制、粘貼、查找、替換、全選、刪除等功能;
視圖:工具欄、樣式欄、頁面、元件、母版、交互、說明、樣式、摘要是否顯示控制、重置視圖、標簽/網格輔助線設置、遮罩設置;
項目:元件樣式管理、頁面樣式管理、說明字段設置、全局變量設置和項目設置、自適應視圖;
布局:元件的組合與取消組合、元件的顯示層次控制、元件的對齊方式、分布方式、鎖定元件轉換母版、轉換動態面板、重置連接線;。
發布:預覽原型、預覽選項設置、發布到axure雲、生成HTML文件、生成word說明書、生成管理配置文件;
團隊:團購項目文件的簽入、遷出等管理;
賬戶:Axure賬號登錄、退出,代理設置;
幫助:在線學習、在線培訓、Axure論壇、意見反饋、歡迎界面、管理授權、檢查更新、關於Axure等。
(2)基本工具欄
可通過“菜單---視圖---工具欄---自定義基本工具欄列表”控制工具列表顯示。以下是默認顯示工具說明。
剪貼板:對元件的剪切、復制、粘貼;
選擇模式:包含選擇、相交選擇;
連線工具:用於連接元件;
插入:繪畫、矩形、圓形、線段、文本、圖片、形狀;
點:編輯形狀的頂點;
頂層:將元件至於頂層;
底層:將元件至於底層;
組合:將多個元件組合成一個整體;
取消組合:將組合拆散;
縮放:縮放比例支持10%、25%、50%、80%、100%、150%、200%、300%、400%、800%、自定義縮放比列;
分布:水平左側、居中、右側,垂直頂部、中部、底部,水平平均分布、垂直平均分布;
預覽:用瀏覽器預覽HTML原型效果;
共享:將原型文件上傳至Axure雲端;
賬號:登錄、退出Axure雲端。
(3)樣式工具欄
樣式工具欄主要是對元件樣式的管理,以下是詳細說明。
管理元件樣式:自由靈活設置各類型元件的樣式,包含顏色、字體、字號、邊框、對齊、填充、透明度、陰影等;
文字:字體、字重、字號、文字顏色、加粗、斜體、下划線、項目符號;
文本對齊方式:左對齊、左右居中、右對齊、兩端對齊、頂部對齊、上下居中、底部對齊;
元件:背景色顏色、陰影設置;
邊框線段:粗細、演示、虛線、箭頭;
位置大小:元件X軸、Y軸、寬度、高度,寬高比鎖定控制。
(4)頁面面板
頁面面板主要用於顯示當前RP文件的所有頁面,同時管理RP文件頁面的增刪改查。
添加:添加文件夾、添加同級頁面、添加子頁面、上方添加頁面、下方添加頁面;
移動:上移、下移、降級、升級;
剪貼:剪切、復制、粘貼、刪除;
命名:重新命名當前頁面;
重復:復制頁面,復制文件夾、復制分支(下級內容);
圖表類型:頁面、流程圖;
搜索:當頁面較多時,可通過頁面名稱快捷搜索查找定位。
(5)概要面板
當前操作頁面的所有元件管理,可以控制某個、某些、全部元件是否在概要面板中展示。
根據元件類型展示:展示全部元件、展示母版元件、展示動態面板面板、展示動態面板或母版,單選互斥;
根據元件說明展示:展示具有名稱的元件、展示具有腳注的元件,單選互斥;
根據元件顯示隱藏規則展示:展示“全部元件”、展示“顯示元件”、展示“隱藏元件”,單選互斥;
展示規則:元件類型、元件說明、顯示隱藏 三個規則可同時生效,用於控制元件是否在概要面板展示;
元件排序:按照頂層至底層排序、按照底層至頂層排序;
元件搜索:當元件數量較多時,可通過元件名稱快捷搜索查找定位。
(6)元件面板
元件面板自帶默認元件、流程元件、Icon元件,同時可通過元件面板管理外部元件庫。
注1:選中元件面板中的元件,拖動到工作區中,即可使用;
注2:可將自己做好的組合元件保存在元件庫中,下次可直接拖動使用;
默認元件:包括基本元件、表單元件、菜單/表格、標記元件;
流程元件:通過流程元件可實現類似於visio的功能;
icon元件:web應用、輔助功能、手勢、運輸工具、性別、文件類型、加載中、表單控件等icon元件;
元件庫:元件庫的導入、移除、編輯;
搜索:對所有元件的快捷搜索。
(7)母版面板
Axure中的母版可以簡單理解為公共元件模板,將母版應用到相應頁面中后,母版內容或樣式發生變化,那么引用母版的頁面內容或樣式同樣會跟着變化,常用於制作頁面頭部或底部內容。
母版面板主要用於管理母版元件的增刪改查。
添加:添加文件夾、添加同級母版、添加子母版、上方添加母版、下方添加母版;
移動:上移、下移、降級、升級;
剪貼:剪切、復制、粘貼、刪除;
命名:重新命名當前母版;
重復:復制母版,復制文件夾、復制分支(下級內容);
拖放行為:拖放到任意位置、拖放到固定位置、脫離母版;
添加到頁面中:選擇指定一個、多個、全部頁面進行母版添加,母版添加位置,母版去重;
從頁面中移除:選擇指定一個、多個、全部頁面進行母版移除;
使用情況:當前母版在各頁面中的使用情況;
搜索:當頁面較多時,可通過頁面名稱快捷搜索查找定位。
(8)樣式面板
樣式面板包含元件樣式、頁面樣式。
元件樣式:名稱、位置、尺寸、是否顯示、顏色、字體、字號、邊框、對齊、填充、透明度、陰影等樣式控制,不同元件的樣式稍有差別;
頁面樣式:頁面尺寸、頁面排列、頁面背景填充。
(9)交互面板
交互面板包含頁面交互、元件交互,其中元件交互又分為事件交互、樣式交互。
頁面交互:頁面載入時、窗口尺寸改變時、窗口滾動時、頁面單擊、頁面鼠標操作時等;
元件---樣式交互:鼠標懸停、鼠標按下、選中、禁用、獲取焦點時交互;
元件---事件交互:單擊、雙擊、鼠標按下、鼠標移入、鼠標移出、移動時、旋轉時、尺寸改變時、焦點獲取時、內容改變時等交互,不同元件事件交互稍有差別。
(10)說明面板
說明面板主要是用於管理元件的注釋,目前僅支持文本注釋,可對注釋內容進行富文本編輯。
(11)工作區
工作區也就是我們操作區域、操作邊界,所有的元件操作應用都基於工作區進行。
可通過樣式面板的頁面尺寸設置工作區域大小;
可通過基本工具欄中的縮放 放大、縮小工作區展示方式。
2、Axure元件樣式
(1)透明度
可以調整元件的透明度。0%為完全透明。這個值是整個元件的透明度,會和文字顏色、填充背景顏色里面設置的透明度疊加。
(2)文字排版
字體設置可以設置字體、字形、字號、顏色。
排版樣式可以設置行高、文字間距。
更多設置里還能設置項目符號、斜體、粗體、下划線、刪除線、上標和下標、英文大小寫切換。
段落格式:可以設置段落的水平方向對齊方式(居左、居中、居右、兩端對齊)、垂直方向上中下對齊。
(3)填充
顏色填充支持純色填充、也支持線性漸變和徑向漸變
圖像填充可以引入一個圖片作為元件的背景。並且可以設置填充位置和樣式。
(4)邊線
可以設置邊框或線段的樣式。包括顏色、線寬(線寬設置為0即為不顯示邊框)、線形(實線、虛線等8種樣式可選)。
矩形類的元件,可以設置上下左右各個邊框的可見性。
線段和連接線可以設置箭頭樣式。
(5)陰影
設置元件的外部陰影或內部陰影。可以自定義陰影位置、模糊度、顏色。
(6)圓角
可以設置矩形類元件的圓角屬性。圓角半徑數值控制圓角的大小,單位為像素。也可以設置四個圓角的可見性。
在畫布中,選中的矩形元件,拖動左上角的黃色三角形把手,也可以改變圓角半徑。
注意:邊線可見性會影響圓角屬性。角對應的兩條邊線必須都可見,圓角效果才會出現。(邊線寬度為0不影響)
(7)內邊距
內邊距屬性可以控制文字在元件內部的位置。可以分別設置上下左右的參數值。單位為像素。
3、Axure基礎操作(使用元件為例)
(1)添加元件到畫布
在左側元件庫中選擇要使用的元件,按住鼠標左鍵不放,拖動到畫布適合的位置上松開
(2)添加元件名稱
文本框屬性中輸入元件的自定義名稱,建議采用英文命名。建議格式:PasswordInput01或Password01,名稱含義:序號01的密碼輸入框,格式說明:“Password”表示主要用途;“Input”表示元件類型,一般情況下可省略,當有不同類型的同名元件需要區分或名稱不能明確表達用途的時候使用;“01”表示出現多個同名元件時的編號;單詞首字母大寫的書寫格式便於閱讀。
(3)設置元件位置/尺寸
元件的位置與尺寸可以通過鼠標拖拽調整,也可以在快捷功能或元件樣式中進行輸入調整。
x:指元件在畫布中的x軸坐標值。
y:指元件在畫布中的y軸坐標值。
w:指元件的寬度值。
h:指元件的高度值。
在輸入數值調整元件尺寸時,可以在樣式中設置,讓元件保持寬高比例。
(4)設置元件默認角度
選擇需要改變角度的元件,按住鍵的同時,用鼠標拖動元件的節點到合適的角度。
(5)設置元件顏色與透明
選擇要改變顏色的元件,點擊快捷功能區中的背景顏色設置按鈕,選取相應的顏色,或者在元件樣式中進行設置。
(6) 設置形狀或圖片圓角
可以通過拖動元件左上方的圓點圖標進行調整,也可以在元件樣式中設置圓角半徑來實現。
(7)設置矩形僅顯示部分邊框
在Axure RP 8的版本中,矩形的邊框可以在樣式中設置顯示全部或部分。
(8) 設置線段/箭頭/邊框樣式
線段、箭頭和元件邊框的樣式可以在快捷功能或者元件樣式中進行設置。
(9)設置元件文字邊距/行距
在元件樣式中可以設置元件文字的行間距與填充。
行間距:是指文字段落行與行之間的空隙。填充:是指文字與形狀邊緣之間填充的空隙。
(10) 設置元件默認隱藏
選擇要隱藏的元件,在快捷功能或者元件樣式中勾選隱選項。
4、Axure特點
優點:
(1)溝通,傳輸,修改較為方便;
(2)熟練使用庫和自定義控件后,效率大幅提升,遠勝專業型;
(3)生成的HTML頁面自帶左側目錄邊欄。。
(3)有組件庫。在制定組件化規范后,可以快速利用組件庫制作低保真原型。
(4)能完成簡單的交互,上手快,行業內都用
(5)團隊協作很方便。
缺點:
生成的原型在移動端很難用
5、Axure與墨刀的區別
(1)原型圖工具有axure、墨刀、摩客(Mockplus)、xiaopiu、Sketch等,其中現在最常用的原型圖工具主要包括axure和墨刀。Axure作為老牌的原型圖工具,功能最齊全,交互最多樣,基本任何想要的效果都可以實現,尤其在制作PC端原型圖上有優勢。
(2)Axure缺點同樣也相當明顯,Axure的動態面板、中繼器等功能都是強大的,但是不容易搞懂。AXURE的素材也是一個的問題,大部分PM 都會在AXURE原型庫、素材庫去尋找相應的第三方素材庫,進行載入,需要花費相應的時間。
(3)墨刀對於APP的原型設計真的是體驗非常好,其控件的拖拉、大小的調整,都會自然的去匹配相應的母版大小。無需去擔心有多移動一點或多選擇一點。並且墨刀的系統控件都是基於APP,以及系統平台IOS和安卓,因此在里面可以首先選擇相應的設備布局,減少了不少工作環節。
(4)墨刀的缺點就是相應的就是不自由,首先這也於墨刀的產品定位有關,清晰定位為移動端原型設計工具,因此在交互效果上、控件組合上,操作面板的選擇上都不如Axure 靈活,並且效果切換因為是采用連線的方式,有時候會讓使用者腦子錯亂的感覺。並且目前原型的交互效果系統自帶的還比較少,但基本滿足日常所有原型的使用。另外需要充費才能夠使用更強大的共享創建功能
(5)總的來說墨刀和Axure就像美圖秀秀和photoshop。前者都是簡化了基礎的操作,很像封裝好了一個函數,你直接調用就可以了。大部分小伙伴外出拍了照片肯定是美圖秀秀,選選效果,感覺不錯之后立即分享。但是真的設計到很多的圖層組合,可控地調整頁面元素,還是會用到photoshop這就涉及到不同的需求,你用這個軟件是想達到什么目的,是更想研究邏輯結構還是更像展現原型效果。
(6)墨刀更加方便快捷,可以做一個簡單的DEOM和領導溝通;如果是給技術將詳細功能會用axure繪制原型圖,交互更多更加自由,也可以更加方便的增加備注標簽,方便研發人員理解。