Axure有哪些元件? Axure元件介紹以及使用

Axure有哪些元件?經常使用Axure設計網頁原型,下面我們就來看看Axure元件的使用方法。

一、矩形等各種形狀的使用文章源自四五設計網-http://www.4968ejs.cn/43836.html

1、添加元件到畫布文章源自四五設計網-http://www.4968ejs.cn/43836.html

在左側元件庫中,選擇想要使用的元件>>按住鼠標左鍵不放拖入畫布中。文章源自四五設計網-http://www.4968ejs.cn/43836.html

Axure有哪些元件? Axure元件介紹以及使用-1文章源自四五設計網-http://www.4968ejs.cn/43836.html

2、設置元件尺寸及位置文章源自四五設計網-http://www.4968ejs.cn/43836.html

元件的位置與尺寸的調整有三種方式:直接拖拽調整、工具面板輸入數值調整、檢視功能區下的樣式中修改。文章源自四五設計網-http://www.4968ejs.cn/43836.html

Axure有哪些元件? Axure元件介紹以及使用-2文章源自四五設計網-http://www.4968ejs.cn/43836.html

3、給元件命名文章源自四五設計網-http://www.4968ejs.cn/43836.html

當我們使用到的元件非常多時,建議給每一個使用到元件進行命名,方便后期選擇與修改。文章源自四五設計網-http://www.4968ejs.cn/43836.html

Axure有哪些元件? Axure元件介紹以及使用-3文章源自四五設計網-http://www.4968ejs.cn/43836.html

4、設置元件的顯隱

當一開始我們不要某個元件顯示時,我們可以先將其隱藏,在需要時再讓其顯示。

Axure有哪些元件? Axure元件介紹以及使用-4

5、設置元件填充色

Axure有哪些元件? Axure元件介紹以及使用-5

6、設置元件陰影及邊框樣式

Axure有哪些元件? Axure元件介紹以及使用-6

7、設置元件圓角

Axure有哪些元件? Axure元件介紹以及使用-7

8、設置元件的水平/垂直翻轉

Axure有哪些元件? Axure元件介紹以及使用-8

9、設置元件的不透明度

元件的不透明度包括填充色不透明度和邊框色不透明度兩部分,在將填充以及邊框樣式的時候我們有提到,這里說另外一種方式。

Axure有哪些元件? Axure元件介紹以及使用-9

10、設置字體、字號

Axure有哪些元件? Axure元件介紹以及使用-10

11、設置行間距、項目符號以及段落對齊形式

Axure有哪些元件? Axure元件介紹以及使用-11

12、設置元件文字填充

填充在這里指元件內文字與形狀邊緣之間填充的空隙。

Axure有哪些元件? Axure元件介紹以及使用-12

 

13、設置元件/文本角度

Axure有哪些元件? Axure元件介紹以及使用-13

14、設置文本鏈接

對于一段文字或者幾個文字我們可以為其設置鏈接。例如,注冊頁中的用戶協議、隱私條款。

Axure有哪些元件? Axure元件介紹以及使用-14

15、改變形狀元件的形狀

Axure有哪些元件? Axure元件介紹以及使用-15

16、給元件設置交互樣式

在網頁端,當鼠標移動到一個可以交互的文字或者button上時,我們需要給用戶一個及時的反饋,這時候就需要對元件的在鼠標懸停下的交互樣式進行設置。另外,需要時我們還可以設置元件選中、禁用和鼠標按下時的交互樣式。

Axure有哪些元件? Axure元件介紹以及使用-16

17、將元件轉換為圖像

一般情況下我們很少這樣做,當元件中包含特殊字體時,為了避免在不含該字體的設備上瀏覽出錯我們可以考慮將其轉換為圖片。

Axure有哪些元件? Axure元件介紹以及使用-17

18、設置元件默認狀態為禁用/選中

Axure有哪些元件? Axure元件介紹以及使用-18

二、文本框

1、改變文本框為密碼/文件等

Axure有哪些元件? Axure元件介紹以及使用-19

Axure有哪些元件? Axure元件介紹以及使用-20

2、給文本框設置提示

文字并修改提示樣式一般在注冊或登錄一個網站/app時都會有關于注冊的用戶名及密碼的說明文字,這部分說明文字就可以稱之為提示文字。

Axure有哪些元件? Axure元件介紹以及使用-21

3、設置文本框提示

觸發提示觸發是針對文本框中的提示文字的,關于何時提示文字被隱藏。

Axure有哪些元件? Axure元件介紹以及使用-22

4、限制文本框的輸入字符數

Axure有哪些元件? Axure元件介紹以及使用-23

三、圖片

1、插入本地圖片

Axure RP自帶圖片元件,通過這個元件,我們可以添加本地圖片到頁面中。

操作方法是:將左側元件庫中的圖片拖入到畫布中>>雙擊圖片圖片元件。另外,也可以直接將本地照片拖入軟件頁面中。除了添加靜態圖片,還可以添加動圖。但是要注意添加的動圖大小一定不要太大,否則將無法正常顯示。動圖的添加方式與靜態圖片的添加方式基本一致。

Axure有哪些元件? Axure元件介紹以及使用-24

2、在圖片上插入文字

 

回憶之前我們講到的給形狀元件添加文字的方式為:雙擊形狀元件。而對于圖片,我們知道雙擊為插入本地圖片。所以給圖片添加文字的方式為:選中圖片>>右擊>>編輯文本。

Axure有哪些元件? Axure元件介紹以及使用-25

3、分割圖片

選中圖片元件后,右擊,在彈出的右鍵菜單中找到“分割圖片

使用分割后,圖片被分成幾個部分。

Axure有哪些元件? Axure元件介紹以及使用-26

4、裁剪圖片

選中圖片元件后,右擊,在彈出的右鍵菜單中找到“裁剪圖片”。

Axure有哪些元件? Axure元件介紹以及使用-27

5、如上圖,選擇裁剪工具后右上角會出現四個選項:1. 裁剪、剪切、復制、取消。要注意裁剪、剪切、復制的區別。

Axure有哪些元件? Axure元件介紹以及使用-28

四、列表框

下拉列表框中添加選項的方式如下圖所示。列表框中選項的添加和刪除是同樣的操作。

Axure有哪些元件? Axure元件介紹以及使用-29

五、單選按鈕

設置單選按鈕唯一選中

前面我們有介紹到單選按鈕一般是兩個或多個一起使用,那么該如何設置單選按鈕唯一選中呢?這里我們以常見的性別選項來示例。

Axure有哪些元件? Axure元件介紹以及使用-30

六、內聯框架

1、利用內聯框架嵌入網絡視頻

Axure有哪些元件? Axure元件介紹以及使用-31

除了上述圖片中的方法,還可以在“檢視>>屬性”下找到“選擇框架目標”,同樣會彈出上圖中的“鏈接屬性”面板。

2、設置預覽圖片

利用內聯框架鏈接時,我們可以根據需要設置不同的預覽圖片,給用戶一個預知提醒。

Axure有哪些元件? Axure元件介紹以及使用-32

3、設置邊框及滾動條

Axure有哪些元件? Axure元件介紹以及使用-33

七、頁面設置

不選中任何元件的情況下,在“檢視>>樣式”下可以對頁面的樣式進行修改,包括頁面排列形式、背景顏色、背景圖片及背景圖片的對齊方式和重復形式,另外還有頁面草圖效果的設置。

Axure有哪些元件? Axure元件介紹以及使用-34

八、查看原型

1、預覽原型

在制作的過程中,畫布中顯示的效果并不是實際用戶看到的效果,這就需要我們可以實時預覽,Axure也提供了這種功能。

預覽的快捷鍵為:F5?;蛟诓藛螜谶M行如下操作“發布>>預覽”。

此外,也可以對預覽進行設置,操作說明如下圖所示。

Axure有哪些元件? Axure元件介紹以及使用-35

2、生成原型

生成原型一般生成的為HTML文件,快捷鍵為:F8?;蜻M行如下操作“發布>>生成HTML文件”。彈出的“生成HTML”窗口與預覽及預覽設置窗口類似,這里不做介紹。

當我們只需要生成一部分頁面時,我們可以選中上圖彈窗中的“頁面”選擇需要生成的頁面。

Axure有哪些元件? Axure元件介紹以及使用-36

以上即是Axure元件相關知識,都是基礎教程,給新手學習參考。

繼續閱讀
我的微信
微信掃一掃
weinxin
我的微信
惠生活福利社
微信掃一掃
weinxin
我的公眾號
 
  • 本文由 四五設計網小助手 發表于 2024年3月28日09:46:35
  • 轉載請務必保留本文鏈接:http://www.4968ejs.cn/43836.html

發表評論

匿名網友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖動滑塊以完成驗證