Axure-RP-8交互原型設(shè)計案例教程第3章-圖像元件

1、第3章 圖像元件Axure RP 8 交互原型設(shè)計案例教程可以在【元件庫】面板中的默認元件庫和流程圖元件庫中分別找到圖像元件，然后將圖像元件從【元件庫】拖到頁面中。與矩形元件相比，圖像元件也有一個黃色的小三角，但沒有灰色的小圓點，這表示圖像元件無法轉(zhuǎn)換成其他形狀，如圖3-1 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.1 置入圖像3.1.1 認識圖像元件圖 3-1 圖像元件的外觀在Axure RP 中置入圖像的方法有3 種。1. 使用圖像元件置入圖像從【元件庫】中將圖像元件拖曳到頁面中，然后執(zhí)行下列任意一種操作。 雙擊該圖像元件。 右擊該元件，從彈出的快捷鍵菜單中執(zhí)行【導(dǎo)

2、入圖片】命令。 選擇圖像元件后，在【檢視】【樣式】子面板中單擊【導(dǎo)入】按鈕。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.1 置入圖像3.1.2 置入圖像的方法2. 將圖像直接拖曳至頁面中還可以在資源管理器窗口中選擇圖片，使用鼠標將其拖曳到Axure RP 頁面中，使用此方法可以在Axure RP 中同時導(dǎo)入多幅圖片。3. 使用【粘貼】命令從其他程序中復(fù)制圖像或者使用抓圖軟件抓圖后，在Axure RP 中執(zhí)行【編輯】【粘貼】（【Ctrl+V】）命令也可以獲取圖像。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.1 置入圖像3.1.2 置入圖像的方法從外部程序復(fù)制圖形，

3、或者從Axure RP 頁面復(fù)制圖形后，都可以在Axure RP 頁面上右擊鼠標，從彈出的快捷菜單中執(zhí)行【特殊粘貼】【粘貼為圖片】命令，將矢量圖變成位圖。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.1 置入圖像3.1.3 將圖形粘貼為圖像如果要將Axure RP 頁面中的圖形轉(zhuǎn)換為圖像，可以右擊該圖形，從彈出的快捷菜單中執(zhí)行【轉(zhuǎn)成圖片】命令。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.1 置入圖像3.1.4 將圖形轉(zhuǎn)為圖像該功能可以控制導(dǎo)入的圖像是按其原始大小顯示還是按照用戶設(shè)置的大小來顯示。在【檢視】【樣式】子面板中可以找到【適合圖像】按鈕。下面練習(xí)【適合圖像

4、】工具的用法。首先從【元件庫】面板中拖動一個圖像元件到頁面中，然后調(diào)整到合適的大小。雙擊該圖像元件導(dǎo)入一幅尺寸大于圖像元件的圖像，此時圖像元件會自動變大。改變圖像尺寸后，在【樣式】子面板中單擊【適合圖像】按鈕，則圖像又會變成剛導(dǎo)入時的大小。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.1 適合圖像該功能可以在拉伸圖像大小時，限定拉伸的范圍。執(zhí)行該命令的方法有兩種。 在【檢視】【樣式】子面板中單擊【固定邊角】按鈕。 右擊圖像，從彈出的快捷菜單中執(zhí)行【固定邊角】命令。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.2 固定邊角執(zhí)行【

5、固定邊角】命令后，圖像左側(cè)和頂部位置分別出現(xiàn)兩個紅色的小三角控制點，拖動這些控制點可以設(shè)置固定邊角的范圍，如圖3-2 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.2 固定邊角圖 3-2 調(diào)整固定邊角范圍調(diào)整好圖像邊角固定的范圍后，再對圖像進行縮放，可以使固定邊角范圍的圖像基本不變，固定邊角范圍之外的區(qū)域會被拉伸，如圖3-3 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.2 固定邊角圖 3-3 改變圖像大小該功能可以對圖像進行裁剪。執(zhí)行該命令的方法有3 種。 在【檢視】【樣式】子面板中單擊【裁剪圖片】按鈕。 右擊圖

6、像，從彈出的快捷菜單中執(zhí)行【裁剪圖片】（【Ctrl+7】）命令。 在主工具欄中也可以找到【裁剪】（【Ctrl+7】）按鈕。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.3 裁剪圖像默認狀態(tài)下，執(zhí)行【裁剪圖片】后，圖像上會出現(xiàn)一個矩形框，同時右上方出現(xiàn)一行灰底的文本菜單命令。矩形框就是裁剪圖像的范圍，也叫裁剪框，可使用鼠標調(diào)整裁剪范圍；右上方的文本菜單命令可以控制裁剪的方式，裁剪完畢雙擊裁剪范圍，如圖3-4 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.3 裁剪圖像圖 3-4 執(zhí)行裁剪圖片命令后的初始狀態(tài)該功能可以將圖片橫

7、向或者縱向切割，也可以同時對圖片進行橫向和縱向切割。執(zhí)行該命令的方法有3 種。 在【檢視】【樣式】子面板中單擊切割圖片按鈕。 右擊圖像，從彈出的快捷菜單中執(zhí)行【切割圖片】（【Ctrl+6】）命令。 在主工具欄中也可以找到【切割】（【Ctrl+6】）按鈕。執(zhí)行切割圖片命令后，鼠標指針會變成標志，同時根據(jù)選擇的切割方式顯示切割的輔助線，如圖3-5 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.4 切割圖像Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.4 切割圖像圖 3-5 切割時的狀態(tài)對圖片進行圓角化的方法有兩種。 使用鼠標

8、拖動圖片左上角的黃色小三角標志，如圖3-6 所示。 在【檢視】【樣式】子面板中輸入圓角半徑的大小，如圖3-7 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.5 圓角化圖像Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.5 圓角化圖像圖 3-6 鼠標控制圖片圓角化圖3-7 使用數(shù)值控制圓角化大小使用【樣式】子面板中的“圓角半徑”參數(shù)右側(cè)的按鈕，還可控制圓角化作用在哪個角上，如圖3-8 所示。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.5 圓角化圖像圖 3-8 控制圓角化的半徑在Axure

9、RP 中，可以為圖像添加普通圖形元件那樣的邊框效果。對圖像添加邊框有兩種方法。 在【檢視】【樣式】子面板中設(shè)置“描邊”參數(shù)，包括線寬、邊框顏色和邊框類型3 個按鈕。 在主工具欄中也可以找到與【樣式】子面板中相同的邊框設(shè)置按鈕。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.6 給圖像添加邊框該功能可以在保證圖片基本質(zhì)量不變的情況下減小圖片大小，目的主要是提高圖片預(yù)覽時下載的速度。不過，將圖片優(yōu)化后，或多或少都會導(dǎo)致圖片有些模糊，尤其是文本部分，模糊得更加嚴重一些。當Axure RP 導(dǎo)入的圖片大于500KB 時，會自動彈出一個優(yōu)化圖像的警告對話框，單擊【是】按鈕可優(yōu)化圖片，單擊【否】按鈕不優(yōu)化圖片。對于已經(jīng)導(dǎo)入Axure RP 中但未經(jīng)優(yōu)化的圖像，也可以右擊圖片，在彈出的快捷菜單中執(zhí)行【優(yōu)化圖片】命令進行優(yōu)化。Axure RP 8 交互原型設(shè)計案例教程第3章圖像元件3.2 編輯圖像3.2.7 優(yōu)化圖片本章總結(jié)本章總結(jié)通過本章的學(xué)習(xí)，讀者應(yīng)熟悉掌握導(dǎo)入圖片方法以及如何對圖像進行一些簡單的編輯，如固定邊角、裁剪和切割圖片以及對圖片添加圓角等操作。讀者不但要掌握這些命令的使用方法，更重要的是掌握在什么情況下使用這些命令。另外，對于Axure RP 支持導(dǎo)入的圖片格式也應(yīng)有所了解，知道每種格式