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

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