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

第3章圖像元件AxureRP8交互原型設(shè)計案例教程（微課版）微課版可以在【元件庫】面板中的默認(rèn)元件庫和流程圖元件庫中分別找到圖像元件，然后將圖像元件從【元件庫】拖到頁面中。與矩形元件相比，圖像元件也有一個黃色的小三角，但沒有灰色的小圓點，這表示圖像元件無法轉(zhuǎn)換成其他形狀，如圖3-1所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.1置入圖像3.1.1認(rèn)識圖像元件圖3-1圖像元件的外觀在AxureRP中置入圖像的方法有3種。1.使用圖像元件置入圖像從【元件庫】中將圖像元件拖曳到頁面中，然后執(zhí)行下列任意一種操作。雙擊該圖像元件。右擊該元件，從彈出的快捷鍵菜單中執(zhí)行【導(dǎo)入圖片】命令。選擇圖像元件后，在【檢視】→【樣式】子面板中單擊【導(dǎo)入】按鈕。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.1置入圖像3.1.2置入圖像的方法2.將圖像直接拖曳至頁面中還可以在資源管理器窗口中選擇圖片，使用鼠標(biāo)將其拖曳到AxureRP頁面中，使用此方法可以在AxureRP中同時導(dǎo)入多幅圖片。3.使用【粘貼】命令從其他程序中復(fù)制圖像或者使用抓圖軟件抓圖后，在AxureRP中執(zhí)行【編輯】→【粘貼】（【Ctrl+V】）命令也可以獲取圖像。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.1置入圖像3.1.2置入圖像的方法從外部程序復(fù)制圖形，或者從AxureRP頁面復(fù)制圖形后，都可以在AxureRP頁面上右擊鼠標(biāo)，從彈出的快捷菜單中執(zhí)行【特殊粘貼】→【粘貼為圖片】命令，將矢量圖變成位圖。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.1置入圖像3.1.3將圖形粘貼為圖像如果要將AxureRP頁面中的圖形轉(zhuǎn)換為圖像，可以右擊該圖形，從彈出的快捷菜單中執(zhí)行【轉(zhuǎn)成圖片】命令。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.1置入圖像3.1.4將圖形轉(zhuǎn)為圖像該功能可以控制導(dǎo)入的圖像是按其原始大小顯示還是按照用戶設(shè)置的大小來顯示。在【檢視】→【樣式】子面板中可以找到【適合圖像】按鈕。下面練習(xí)【適合圖像】工具的用法。首先從【元件庫】面板中拖動一個圖像元件到頁面中，然后調(diào)整到合適的大小。雙擊該圖像元件導(dǎo)入一幅尺寸大于圖像元件的圖像，此時圖像元件會自動變大。改變圖像尺寸后，在【樣式】子面板中單擊【適合圖像】按鈕，則圖像又會變成剛導(dǎo)入時的大小。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.1適合圖像該功能可以在拉伸圖像大小時，限定拉伸的范圍。執(zhí)行該命令的方法有兩種。在【檢視】→【樣式】子面板中單擊【固定邊角】按鈕。右擊圖像，從彈出的快捷菜單中執(zhí)行【固定邊角】命令。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.2固定邊角執(zhí)行【固定邊角】命令后，圖像左側(cè)和頂部位置分別出現(xiàn)兩個紅色的小三角控制點，拖動這些控制點可以設(shè)置固定邊角的范圍，如圖3-2所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.2固定邊角圖3-2調(diào)整固定邊角范圍調(diào)整好圖像邊角固定的范圍后，再對圖像進(jìn)行縮放，可以使固定邊角范圍的圖像基本不變，固定邊角范圍之外的區(qū)域會被拉伸，如圖3-3所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.2固定邊角圖3-3改變圖像大小該功能可以對圖像進(jìn)行裁剪。執(zhí)行該命令的方法有3種。在【檢視】→【樣式】子面板中單擊【裁剪圖片】按鈕。右擊圖像，從彈出的快捷菜單中執(zhí)行【裁剪圖片】（【Ctrl+7】）命令。在主工具欄中也可以找到【裁剪】（【Ctrl+7】）按鈕。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.3裁剪圖像默認(rèn)狀態(tài)下，執(zhí)行【裁剪圖片】后，圖像上會出現(xiàn)一個矩形框，同時右上方出現(xiàn)一行灰底的文本菜單命令。矩形框就是裁剪圖像的范圍，也叫裁剪框，可使用鼠標(biāo)調(diào)整裁剪范圍；右上方的文本菜單命令可以控制裁剪的方式，裁剪完畢雙擊裁剪范圍，如圖3-4所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.3裁剪圖像圖3-4執(zhí)行裁剪圖片命令后的初始狀態(tài)該功能可以將圖片橫向或者縱向切割，也可以同時對圖片進(jìn)行橫向和縱向切割。執(zhí)行該命令的方法有3種。在【檢視】→【樣式】子面板中單擊切割圖片按鈕。右擊圖像，從彈出的快捷菜單中執(zhí)行【切割圖片】（【Ctrl+6】）命令。在主工具欄中也可以找到【切割】（【Ctrl+6】）按鈕。執(zhí)行切割圖片命令后，鼠標(biāo)指針會變成標(biāo)志，同時根據(jù)選擇的切割方式顯示切割的輔助線，如圖3-5所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.4切割圖像AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.4切割圖像圖3-5切割時的狀態(tài)對圖片進(jìn)行圓角化的方法有兩種。使用鼠標(biāo)拖動圖片左上角的黃色小三角標(biāo)志，如圖3-6所示。在【檢視】→【樣式】子面板中輸入圓角半徑的大小，如圖3-7所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.5圓角化圖像AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.5圓角化圖像圖3-6鼠標(biāo)控制圖片圓角化圖3-7使用數(shù)值控制圓角化大小使用【樣式】子面板中的“圓角半徑”參數(shù)右側(cè)的按鈕，還可控制圓角化作用在哪個角上，如圖3-8所示。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.5圓角化圖像圖3-8控制圓角化的半徑在AxureRP中，可以為圖像添加普通圖形元件那樣的邊框效果。對圖像添加邊框有兩種方法。在【檢視】→【樣式】子面板中設(shè)置“描邊”參數(shù)，包括線寬、邊框顏色和邊框類型3個按鈕。在主工具欄中也可以找到與【樣式】子面板中相同的邊框設(shè)置按鈕。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.6給圖像添加邊框該功能可以在保證圖片基本質(zhì)量不變的情況下減小圖片大小，目的主要是提高圖片預(yù)覽時下載的速度。不過，將圖片優(yōu)化后，或多或少都會導(dǎo)致圖片有些模糊，尤其是文本部分，模糊得更加嚴(yán)重一些。當(dāng)AxureRP導(dǎo)入的圖片大于500KB時，會自動彈出一個優(yōu)化圖像的警告對話框，單擊【是】按鈕可優(yōu)化圖片，單擊【否】按鈕不優(yōu)化圖片。對于已經(jīng)導(dǎo)入AxureRP中但未經(jīng)優(yōu)化的圖像，也可以右擊圖片，在彈出的快捷菜單中執(zhí)行【優(yōu)化圖片】命令進(jìn)行優(yōu)化。AxureRP8交互原型設(shè)計案例教程（微課版）第3章圖像元件3.2編輯圖像3.2.7優(yōu)化圖片本章總結(jié)本章總結(jié)通過本章的學(xué)習(xí)，讀者應(yīng)熟悉掌握導(dǎo)入圖片方法以及如何對圖像進(jìn)行一些簡單的編輯，如固定邊角、裁剪和切割圖片以及對圖片添加圓角等操作。讀者不但要掌握這些命令的使用方法，更重要的是掌握在什么情況下使用這些命令。另外，對于AxureRP支持導(dǎo)入的圖片格式也應(yīng)有所了解，