網頁原型設計軟件Axure介紹及基本操作

Axure 設計 軟件 鼠標 設計師 瀏覽器 Windows iOS 佐佑藝術設計 2019-05-23

一、什麼是 Axure

1.Axure的概述

Axure是一個快速的原型工具,主要是針對負責定義需求、定義規格、設計功能、設計界面的專家,包括用戶體驗設計師(UX)、交互設計師(UI)、業務分析師(BA)、信息架構師(IA)、可用性專家(UE)和產品經理(PM)等。

Axure能讓你快速的進行原型的設計,讓相關人員對你的設計進行體驗和驗證,向用戶進行演示、溝通交流以確認用戶需求,並能自動生成規格說明文檔。另外,Axure還能讓團隊成員進行多人協同設計,並對設計進行方案版本控制管理。

Axure使原型設計及和客戶的交流方式發生了變革:

l 進行更加高效的設計;

l 讓你體驗動態的原型;

l 更加清晰的交流想法;

2.Axure與墨刀、Sketch的比較

1.Axure流程圖原型界oldschool,windows系統,PC端web界面原型和APP界面原型都靜態、動態能做,也適用於項目流程圖的製作。適合做低保真原型,給視覺設計師為參考流程來出視覺稿。

2.sketch原型界newschool,iOS系統,適合後期做交互高保真原型。初學者不建議用,花時間,效率低,但後期出效果做交互、產品發佈會等等,sketch做出來的東西專業視覺美觀佳。

3.墨刀 原型界的“明日之子”正流行,推薦使用,在線工具,有網就可以搞,不管啥系統,庫模板豐富。

3.Axure界面介紹

軟件界面大致的劃分為8大塊區域:

菜單欄、工具欄、頁面區域、元件庫區域、母版區域、工作區域、檢視區、頁面概要區域

網頁原型設計軟件Axure介紹及基本操作

二、Axure基本操作

使用元件

基礎1:添加元件到畫布

在左側元件庫中選擇要使用的元件,按住鼠標左鍵不放,拖動到畫布適合的位置上鬆開注意安裝資源包中一般都有特殊元件的元件素材,可以載入至軟件中使用。

網頁原型設計軟件Axure介紹及基本操作

網頁原型設計軟件Axure介紹及基本操作

基礎2:添加元件名稱

文本框屬性中輸入元件的自定義名稱,建議採用英文命名。

建議格式:PasswordInput01 或Password01。名稱含義:序號01 的密碼輸入框。

格式說明:“Password”表示主要用途;“Input”表示元件類型,一般情況下可省略,當有不同類型的同名元件需要區分或名稱不能明確表達用途的時候使用;“01”表示出現多個同名元件時的編號;單詞首字母大寫的書寫格式便於閱讀。同時注意在畫原型元件時,要以座標軸左上角開始製作。

網頁原型設計軟件Axure介紹及基本操作

基礎3:設置元件位置/ 尺寸

元件的位置與尺寸可以通過鼠標拖曳調整,也可以在快捷功能或元件樣式中進行輸入調整

x:指元件在畫布中的x 軸座標值。

y:指元件在畫布中的y 軸座標值。

網頁原型設計軟件Axure介紹及基本操作

在輸入數值調整元件尺寸時,可以在樣式中設置,讓元件【保持寬高比例】

w:指元件的寬度值。

h:指元件的高度值。

網頁原型設計軟件Axure介紹及基本操作

基礎4:設置元件默認角度

方式一:選擇需要改變角度的元件,按住<Ctrl> 鍵的同時,用鼠標拖動元件的節點到合適的角度。

方式二:在元件樣式中進行角度的設置,元件的角度與元件文字的角度可以分開設置。

網頁原型設計軟件Axure介紹及基本操作

基礎5:設置元件顏色與透明

選擇要改變顏色的元件,單擊快捷功能區中的背景顏色設置按鈕,選取相應的顏色,或者在元件樣式中進行設置。

網頁原型設計軟件Axure介紹及基本操作

基礎6:設置形狀或圖片圓角

可以通過拖動元件左上方的圓點圖標進行調整,也可以在元件樣式中設置圓角半徑來實現

1.圓角半徑數值 2.設置圓角半徑 3.拖動改變圓角 4.取消部分圓角

網頁原型設計軟件Axure介紹及基本操作

基礎7:設置矩形僅顯示部分邊框

在Axure RP 8 的版本中,矩形的邊框可以在樣式中設置顯示全部或部分

網頁原型設計軟件Axure介紹及基本操作

基礎8:設置線段/ 箭頭/ 邊框樣式

線段、箭頭和元件邊框的樣式可以在快捷功能或者元件樣式中進行設置

網頁原型設計軟件Axure介紹及基本操作

基礎9:設置元件文字邊距/ 行距

在元件樣式中可以設置元件文字的【行間距】與【填充】

行間距:是指文字段落行與行之間的空隙。 填充:是指文字與形狀邊緣之間填充的空隙。

網頁原型設計軟件Axure介紹及基本操作

基礎10 設置元件默認隱藏

選擇要隱藏的元件,在快捷功能或者元件樣式中勾選【隱藏】選項

網頁原型設計軟件Axure介紹及基本操作

基礎11:設置文本框輸入為密碼

文本框屬性中選擇文本框的{ 類型} 為【密碼】。

網頁原型設計軟件Axure介紹及基本操作

基礎12:設置打開選擇文件窗口

文本框屬性中選擇文本框的{ 類型} 為【文件】,即可在瀏覽器中變成打開選擇本地文件的按鈕。該按鈕樣式各瀏覽器略有不同

網頁原型設計軟件Axure介紹及基本操作

元件庫大致分為六大類,功能大多數是所見即所得,英譯漢的版本也很好理解。對應每個元件,大家拖著拽到工作區一一使用,並研究它們的屬性設置,便可以很好的應用了。英譯漢的版本也很好理解。

下面首先我們著重說兩個交互元件的應用:熱區、動態面板並舉例說明;後續我們會對整個元件庫的特殊元件進行一個概括性的示意圖演示並舉例說明交互狀態中的四種模式(1)鼠標懸停變色(2)鼠標按下跳轉(3)鼠標選中/移開 跳轉(4)交互禁用;

基礎13:元件庫的分類

1.元件庫分為六大類

(1)默認的常見的元件 (2)默認表單元件 (3)默認菜單和表的元件

(4)默認的標記的元件 (5)默認的流程圖元件 (6)經常會用到的icon元件。

網頁原型設計軟件Axure介紹及基本操作

2.元件庫常見元件瀏覽器預覽效果

網頁原型設計軟件Axure介紹及基本操作

3.其他元件庫元件示意圖

網頁原型設計軟件Axure介紹及基本操作

總結

通過今天Axure的基本介紹,你學會了Axure的基本操作方法,包括:

1.添加元件到畫布

2.添加元件名稱

3.設置元件位置/尺寸

4.設置元件默認角度

5.設置元件顏色與透明

6.設置形狀或圖片圓角

7.設置矩形僅顯示部分

8.設置線段/箭頭/邊框

9.設置元件文字邊距/行距

10.設置元件默認隱藏

11.設置文本框輸入為密碼

12.設置打開選擇問卷窗口

13.元件庫的分類

知識就是力量,學習改變命運;感謝您的關注,點擊我的頭像,進入頭條主頁,查看全部內容;我將持續為您分享藝術設計乾貨。

如果需要Axure安裝包的同學,歡迎在下方點贊留言:我要Axure;

並且私信佐佑:axure;免費領取Axure安裝包

相關推薦

推薦中...