Axure小白的福利又來了，本教程包含基礎(chǔ)元件的介紹和操作，通過對(duì)這部分的學(xué)習(xí)，就可以掌握Axure元件的基本使用方法。希望大家邊學(xué)邊操作，學(xué)習(xí)效果更佳哦。

Axure RP8 教程 ：基礎(chǔ)元件的使用

1. 添加元件到工作區(qū)

在左側(cè)元件中選擇要使用的元件，按住鼠標(biāo)左鍵不放，拖到畫布適合的位置上松開。

2. 添加元件名稱

在檢視面板的元件名稱文本框中輸入元件自定義名稱。

3. 設(shè)置元件位置/尺寸

元件的位置和尺寸可以通過鼠標(biāo)拖拽調(diào)整，也可以在快捷鍵功能或者元件樣式中進(jìn)行輸入調(diào)整

• X：指元件在畫布中x軸的坐標(biāo)值。
• Y：指元件在畫布中y軸的坐標(biāo)值。
• W：指元件的寬度值。
• ?H：值元件的高度值。

在輸入數(shù)值調(diào)整元件尺寸時(shí)，可以在樣式中設(shè)置，讓元件[保持寬高比例]。

4. 設(shè)置元件的默認(rèn)角度

• 選擇需要改變角度的元件，按住Ctrl的同時(shí)，用鼠標(biāo)拖拽元件節(jié)點(diǎn)到合適的角度。
• 在元件的樣式中進(jìn)行角度設(shè)置，元件的角度與元件的文字角度可以分開設(shè)置。

5. 設(shè)置元件的顏色與透明

選擇要改變的顏色的元件，單機(jī)快捷功能區(qū)中的背景顏色設(shè)置按鈕，選取相應(yīng)的顏色，或者再元件的樣式中進(jìn)行設(shè)置。

6. 設(shè)置形狀或者圓角

可以通過拖動(dòng)元件左上方的原點(diǎn)圖標(biāo)進(jìn)行調(diào)整，也可以在元件樣式中設(shè)置圓角半徑來實(shí)現(xiàn)。

7. 設(shè)置矩形僅僅顯示部分邊框

在Axure RP 8的版本里，矩形的邊框可以再樣式中設(shè)置顯示的全部或者部分。

8. 設(shè)置線段/箭頭/邊框樣式

線段，箭頭，邊框的樣式可以在快捷鍵或者元件樣式中進(jìn)行設(shè)置。

9. 設(shè)置元件文字邊距/行間距

在元件樣式中可以設(shè)置元件文字的[行間距]和[邊距]。

• 行間距：文字段落與行之間的空隙。
• 邊距：文字與形狀邊緣之間的空隙。

10.設(shè)置元件默認(rèn)隱藏

選擇要隱藏的元件，在快捷功能或者元件樣式中勾選“隱藏”選項(xiàng)。

11.設(shè)置文本框輸入為密碼

文本框?qū)傩灾羞x擇文本框的“類型”為“密碼”。

12.設(shè)置打開選擇文件窗口

文本框?qū)傩灾羞x擇文本框的“類型”為“文件”，即可以在瀏覽器中變成打開本地文件的按鈕。

13.限制文本框輸入字符位數(shù)

在文本框?qū)傩灾休斎胛谋究虻摹白畲箝L(zhǎng)度”為指定長(zhǎng)度的數(shù)字。

14. 設(shè)置文本框提示文字

在文本框?qū)傩灾休斎胛谋究虻摹疤崾疚淖帧?。提示文字的字體，顏色，對(duì)齊方式等可以單擊提取樣式進(jìn)行設(shè)置。

提示文字設(shè)置包含“隱藏提示觸發(fā)”，其中：

• 輸入：值用戶開始輸入時(shí)提示文字消失。
• 獲取焦點(diǎn)：光標(biāo)進(jìn)入文本框時(shí)提示文字消失。

15. 設(shè)置鼠標(biāo)移入元件的提示

在文本框?qū)傩灾小霸崾尽敝休斎胩崾緝?nèi)容即可。在瀏覽器里查看此效果時(shí)，鼠標(biāo)指針需要在元件上懸停一秒以上。

16.設(shè)置矩形為其他形狀

在操作區(qū)中單擊矩形上方的圓點(diǎn)就可以打開形狀列表。

17.設(shè)置自定義形狀

在形狀上單擊鼠標(biāo)右鍵或者直接在形狀列表中選擇自定義形狀，就可以對(duì)形狀進(jìn)行編輯。

18.設(shè)置形狀水平/垂直翻轉(zhuǎn)

在形狀的屬性中可以對(duì)形狀進(jìn)行水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)。

19. 設(shè)置列表框的內(nèi)容

下拉列表框與列表框都可以設(shè)置內(nèi)容-列表項(xiàng)?？梢酝ㄟ^“屬性”-“列表項(xiàng)”的選項(xiàng)進(jìn)行設(shè)置，也可以通過鼠標(biāo)雙擊元件來進(jìn)行設(shè)置。

20. 設(shè)置元件中默認(rèn)選和禁用

元件的屬性中可以對(duì)一些元件的默認(rèn)狀態(tài)進(jìn)行設(shè)置，可以設(shè)置的狀態(tài)包括“選中”和“禁用”，默認(rèn)狀態(tài)的設(shè)置，可以觸發(fā)屬性中設(shè)置的交互樣式。除了禁用與選擇個(gè)別元件還具有“只讀”的設(shè)置。

21. 設(shè)置單選按鈕唯一選中

全選所有的單選按鈕，在元件屬性中“設(shè)置單選按鈕組名稱”，即可實(shí)現(xiàn)唯一選中效果。

22. 設(shè)置元件不同狀態(tài)的交互樣式

單擊元件屬性中各個(gè)交互樣式的名稱，即可設(shè)置元件在不同狀態(tài)下呈現(xiàn)的不同樣式。這些樣式在交互被觸發(fā)時(shí)，就會(huì)顯示出來。

23. 切割/裁剪圖片

在圖片的元件屬性中，設(shè)有切割和剪裁功能的圖標(biāo)，單擊即可使用相應(yīng)功能。

• 切割：將圖片進(jìn)行水平與垂直的切割，將圖片分割開。
• 裁剪：裁剪分為裁剪，剪切，復(fù)制。其中：裁剪只保留被選中區(qū)域；剪切是將選中部分從原圖上扣掉剪切到系統(tǒng)的剪貼板上；復(fù)制是將選取的部分復(fù)制，對(duì)原圖沒有影響。

（1）切割

（2）裁剪

（3）剪切

（4）復(fù)制

24.調(diào)整元件的層級(jí)

元件的層級(jí)可以通過單擊快捷功能中的圖標(biāo)或者右鍵菜單中的“順序”進(jìn)行調(diào)整，也可以在頁(yè)面內(nèi)容概要中通過拖動(dòng)進(jìn)行調(diào)整。概要中層級(jí)順序?yàn)橛缮现料?，最底部的元件為最頂層?/p>

25. 組合/取消組合元件

通過快捷鍵功能圖標(biāo)或者右鍵菜單可以將多個(gè)組件合到一起，達(dá)到共同移動(dòng)/選取/添加等操作。自合/取消組合的快捷鍵為Ctrl+G和Ctrl+Shift+G。

26. 轉(zhuǎn)換元件為圖片

形狀/文件標(biāo)簽/線段等元件可以通過鼠標(biāo)右鍵，選擇將元件轉(zhuǎn)換為圖片，避免在未安裝字體的設(shè)備上瀏覽原型不能正常顯示。

27. 載入元件庫(kù)

除了使用軟件自帶的元件庫(kù)之外，用戶還可以添加自定義元件庫(kù)。加載自定義元件庫(kù)只需要單擊功能圖標(biāo)，在列表選項(xiàng)選擇“載入元件庫(kù)”。

28. 切換元件庫(kù)

在元件庫(kù)功能面板中，可以通過單擊元件庫(kù)列表，選擇不同的元件進(jìn)行使用。

本文由 @Arthur 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議