如何在axure里把圖片鏡像

⑴ Axure 9.0基礎教程：史上最詳細的元件說明，建議你認真看完（一）

元件是線框圖繪制過程中必不可少的基礎元素，線框圖是由一些列元件組合而成。因此認識和熟練了解每一個元件的特徵，對繪制線框圖或者原型來說是非常重要的，本章節就詳細講解每個元件的用途和應用特徵。

方框、橢圓、佔位符、按鈕、標題、標簽和文本，這幾個元件本質上都屬於形狀元件。選中元件，可以通過右側對應的樣式面板對元件進行編輯。

添加文本：選中元件，雙擊元件或右擊在彈出菜單中選擇「編輯文字」，即可對元件執行添加文本、編輯文本的操作。

選擇形狀：形狀元件可以改變各種形狀，包括矩形、三角形、圓形、弧形、五角星、愛心、水滴等。選中元件，右鍵單擊在彈出菜單中選擇「選擇形狀」。

轉換為圖片：形狀元件轉換為圖片後，可以保留形狀元件上添加的交互和注釋。選中元件，右鍵單擊在彈出菜單中選擇「轉換為圖片」。

填充：形狀元件支持顏色填充和圖片填充。顏色填充可通過頂部的工具欄或右側的樣式面板，進行配色。通過形狀元件導入的圖片，大小和位置固定在形狀內部，不同於常規的圖片導入。選中形狀元件，右鍵單擊下拉菜單中選擇「導入圖像」或在右側樣式面板選擇本地圖片，完成導入。

邊框：形狀元件可以設置邊框的顏色、邊框線的粗細（厚度）、線條的樣式（直線、虛線）以及每條邊框線（隱藏部分線框）的可見性。通過頂部工具欄或右側樣式面板均可以設置。

編輯控點：通過拖動控點的位置，可以將元件改變成任何你想要的形狀，一般元件有4個控點。選中形狀元件，右鍵單擊下拉菜單中選擇「編輯控點」或點擊頂部工具欄中的點，拖拽元件邊框上的小菱形位置，可以改變元件現狀。

變換形狀：可以對形狀元件進行水平和垂直翻轉，對多個形狀元件進行布爾運算，改變點的連接方式（直線連接或曲線連接）。選中形狀元件、右鍵單擊下拉菜單中選擇「變換形狀」，彈出的右側菜單中選擇變換方式。

指定選擇組：與單選按鈕組效果類似，當組中有一個元件被選中後，其他組元件自動切換為未選中狀態，常用語於Table切換或標簽導航。若將元件添加到指定的組，首先選中形狀元件，右鍵單擊下拉菜單中選擇「指定選擇組」，編輯選擇組名稱。

工具提示：常用於一些操作提示，如Axure工具欄、頁面與大綱、庫與母版等相關的操作按鈕，滑鼠懸停在按鈕上方，顯示提示信息。選中形狀元件，右鍵單擊下拉菜單中選擇「工具提示」，編輯提示信息。

圓角效果：形狀元件可以將直角轉換為圓角。選中元件，拖動左上角的倒三角手柄來控制圓角的半徑，也可以通過右側樣式面板輸入角度來調整圓角效果。在樣式面板中，還可以設置各圓角的可見性，可以做到部分頂點顯示為圓角，部分頂點顯示為直角。

陰影：可以為形狀添加外部陰影、內部陰影和文字陰影，增加原型的保真程度。選中元件，通過頂部的工具欄或右側的樣式面板為形狀元件添加各種陰影，可以自由設置陰影的投影位置、大小、顏色以及模糊程度。

不透明度：通過拖動右側樣式面板中的滑塊，可以靈活設置形狀元件的不透明度。

邊距：控制形狀元件內的文字與上下左右四個邊框線的距離。選中形狀元件後，通過右側的樣式面板調整文字與四個方向邊框線的距離。

自適應寬高：根據形狀元件內的文字內容，可以自適應寬度和高度，減少了手動調整元件尺寸和文字換行的操作。選中元件，點擊右側樣式面板的適合文本寬度或適合文本高度。選擇適合文本寬度，則所有文本在一行顯示，形狀元件的寬度跟著文字的寬度而自動調整（略大於文本寬度）；選擇適合文本高度，則形狀元件的高度隨著文字的高度而自動調整（略高於文本高度）。

交互樣式：形狀元件支持添加滑鼠懸停時、滑鼠按下時、選定時、禁用時、獲得焦點時的交互樣式。選中形狀元件，點擊右側交互面板，點擊新建交互，為元件設置樣式效果。

圖片元件可以用來添加圖片和插圖，以表達你的設計理念、產品創新、照片等更多內容。

導入圖像：拖拽一個圖片元件到設計區域，雙擊或右鍵單擊菜單中選擇「導入圖像」，導入圖片。Axure支持的圖片格式包含：JPG、GIF、PNG和BMP。

粘貼圖片：從任意處復制一張圖片均可以粘貼到Axure中，當我們復制的圖片較大時，系統會提示「該圖像過大，可能導致應用程序運行緩慢，您要優化它嗎？」，建議點擊是，系統將會無損壓縮圖片大小。一般從excel或CSV復制內容時，建議點擊右鍵，選擇「選擇性粘貼，粘貼為圖片」，直接Ctrl+V通常會粘貼為文本格式。

添加/編輯圖片文字：導入圖片後，右擊圖片選擇「編輯文字」，圖片上的文字還可以進行樣式編輯，如顏色、大小、字體等。

水平和垂直翻轉：導入圖片後，選中圖片，右鍵彈出菜單中選擇「水平翻轉」或「垂直翻轉」，可以對圖片進行水平和垂直翻轉。

分割圖像：分割與裁剪在設計領域俗稱切圖。兩者的區別在於是否保持了圖片的完整性，前者完整保留圖片內容，後者默認保留選定部分內容。選中圖片，右鍵單擊菜單或在右側樣式面板中選擇分割圖像，出現十字架虛線，十字架交叉處即為切點，點擊設計區域右上角的+、—和|選擇切割線，—代表了橫線切割，+代表了豎線切割。

裁剪圖像：分為裁剪、復制和剪切三種方式。裁剪圖片只保留選定區域，復制不對原圖像有任何影響，剪切從原圖片中切除選定區域。選中圖片，右鍵單擊菜單或在右側樣式面板中選擇剪裁圖像，通過拖拽虛線矩形框四個頂點的位置來調整裁剪范圍大小，移動矩形框確定裁剪的區域。點擊設計區域右上角的裁剪、復制和剪切可以選擇剪裁的方式，默認為剪裁。

圖片邊框和圓角：通過工具欄和樣式面板可以給圖片添加邊框。設置邊框的顏色、邊框線的厚度（粗細）、邊框線的樣式（直線、虛線）。拖動圖片左上角的倒三角或直接在樣式面板設置圓角半徑，來達到設置圓角的目的。（設置界面與形狀元件類似，不在重復截圖）

不透明度和陰影：通過拖動樣式面板中的滑塊可以設置圖片的不透明度。圖片元件僅能設置外部陰影，設計方法與形狀元件類似。（設置界面與形狀元件類似，不在重復截圖）

優化圖片：使用通過圖片功能，在保證基本不影響圖片瀏覽質量的前提下（降低圖片的像素密度，但一般肉眼無法察覺，基本可以忽略），使得圖片佔用的存儲空間更小，同時也可以提升原型的載入速度，提升瀏覽體驗。通常在導入大圖時，Axure會自動提示是否需要優化，也可以手動優化。選中圖片，右鍵點擊菜單選擇「優化圖像」。

等比例縮放：按住shift鍵盤，同時拖動圖片邊角的頂點，可以按比例縮放圖片。選中圖片，通過工具欄或樣式面板中鎖定寬高比例，更改寬或高的值也可以做到等比例縮放。

圖片交互樣式：圖片也可以像形狀元件一樣添加交互樣式，可以添加滑鼠懸停時、滑鼠按下時、選定時、禁用時、獲得焦點時樣式效果。（設置界面與形狀元件類似，不在重復截圖）

在原型設計時，通常需要將原型的幾個版塊或內容進行區隔，這個時候利用水平線和垂直線就會比較方便。

箭頭：通過工具欄或樣式面板可以為橫線或垂直線設置箭頭樣式。選中線條，在工具欄或樣式面板中點擊箭頭樣式，在下拉列表中任意選中想要的箭頭樣式。

顏色、厚度和樣式：可以為線條添加顏色、設置厚度和樣式（直線、虛線），在工具欄和樣式面板中均可以設置。按住shift鍵，拖動線條，可以改變線條的長短。

旋轉線條：Windows按住Ctrl，Mac按住cmd，同時將滑鼠懸停在線的末尾進行拖拽，或者在樣式面板中直接輸入旋轉角度。注意這里的旋轉角度均按照順時針方向旋轉。

熱區是一個浮在最頂層的透明圖層，熱區可以放置在任意元件的上方，為熱區設置交互其實也等同於為熱區下方的元件設置交互。

多個元件設置同一交互：如資訊列表頁，需要同時為圖片和文章標題設置一個滑鼠單擊跳轉事件，這個時候可以直接在圖片和標題上覆蓋一層熱區，為熱區設置滑鼠單擊事件。

單個元件中的某一區域設置交互：利用熱區覆蓋在元件上的局部區域，為熱區設置滑鼠單擊事件，即可起到元件的局部區域可點擊效果。

熱區的可見性：預覽原型效果時，熱區是透明不可見的，但在Axure源文件中默認會顯示為一個透明的遮罩層，通過菜單欄中的視圖>遮罩>熱點，可以隱藏掉遮罩，與預覽時的效果是一樣的。

動態面板可以創建多個狀態，每個狀態下面都可以裝有若干個元件，每個狀態可以當做是一個全新的頁面，在這里可以任意擺放元件，設置元件的樣式甚至是交互，因此它更像是一個巨大的容器。動態面板是在原型製作中使用最多的高級元件，很多交互效果都依賴於動態面板來實現。

動態面板狀態：動態面板是由一個或多個狀態組成的，每一個狀態裡面都可以包含多個元件。同一時間，動態面板只能顯示一個狀態，使用交互設置可以顯示或隱藏動態面板以及各狀態的可見性。添加動態面板有兩種方法，第一種，直接從元件庫拖拽動態面板至設計區域；第二種，將要設置為動態面板的元件右鍵單擊選擇「轉換為動態面板」。其中第二種方法，可以直接調整動態面板的大小至合適尺寸。第一種方法，如果狀態中元件的尺寸大於動態面板時，則超出部分在動態面板中將不可見。在樣式面板中可設置「調整大小以適合內容」，以保證狀態中元件的可見性。

編輯動態面板狀態：雙擊動態面板選擇一個狀態進行編輯，進入狀態中，我們會看到中間有一個白色矩形區域，矩形區域為動態面板的畫布，超出部分，則在動態面板中不可見，如果看不到白色矩形，則一定是在樣式面板中為動態面板勾選了「調整大小以適應內容」，取消勾選，則可以在狀態中看到白色矩形。在狀態中編輯元件，就和我們平常在頁面中編輯元件一樣操作。設計區域的右上角可以切換隔離狀態，默認為隔離。隔離狀態是指是否將動態面板以外的元件納入進來。點擊設計區域右上角的關閉按鈕，則為退出動態面板狀態，回到頁面。

管理動態面板狀態：雙擊動態面板進入編輯狀態，點擊設計區域左上角可以管理動態面板的狀態，在這里可以增加狀態、復制狀態、刪除狀態。

動態面板專有樣式

滾動條：當動態面板尺寸小於狀態內容尺寸時，需要為動態面板設置滾動條以查看狀態中的更多內容。滾動條有四種樣式：不需要、根據需要滾動、縱向滾動、橫向滾動。選中動態面板，在右側樣式面板中設置滾動條樣式。

100%寬度：勾選後動態面板各狀態在瀏覽器中打開後，可用顯示完整的寬度，而不受動態面板自身寬度影響。

固定到瀏覽器：始終固定在頁面的某個特定位置，如App的底部導航，資訊類產品的頂部標簽導航都可以利用「固定到瀏覽器」的樣式效果。選中動態面板，點擊右側樣式面板的「固定到瀏覽器」，勾選固定到瀏覽器窗口，選擇固定位置的方向，設置邊距，勾選保持在前面（將動態面板圖層置頂）。

其他通用樣式

動態面板的位置和尺寸、填充、邊框、陰影和圓角等這些公共樣式的屬性設置同形狀元件一致，請參考上文說明 。

設置動態面板狀態（交互動作）

面板切換：對於有多個狀態的動態面板，可以使用設置動態面板狀態這一動作切換到指定的狀態，這也是動態面板最常用的交互動作。在用例的交互動作中選擇「設置動態面板狀態」，在狀態項中下拉選擇切換的狀態。下拉選擇的切換狀態包含以下四種切換方式：指定狀態（state1/state2...)、上一個狀態（previous）、下一個狀態（next）、停止切換（stop）、值（value）。

上一個/下一個：選擇上一個狀態、下一個狀態時可以進行狀態的重復循環（狀態是有限的），設置中自動勾選「從最後一個到第一個自動循環」，在更多選項中還可以設置首次循環的時間間隔。這樣動態面板就可以按照規律無限循環下去，循環切換常用於輪播圖的自動播放。

停止切換：當我們需要停止動態面板無限循環時，如停止圖片輪播或內容廣播，可以在狀態列表中選擇停止切換。

值（value）：使用值來設置動態面板狀態時，需要注意值必須與動態面板的狀態名稱一致時，才能生效。當需要基於某一個頁面存儲的全局變數值在本頁面中使用「頁面載入時」事件來設置動態面板到指定狀態。此時，只需要設置一個簡單的交互用例即可實現。

動態面板切換動畫：進入與退出都可以設置過渡動畫，在設置用例時的動作配置中選擇動畫效果。進入與退出支持設定的動畫效果包含：逐漸、向上滑動、向下滑動、向左滑動、向右滑動、向上翻轉、向下翻轉、向左翻轉、向右翻轉。設定動畫效果後，我們需要為每個過渡動畫設置時間，注意這里的時間單位是毫秒。

更多選項：如果原來動態面板為隱藏，在這里可以勾選為顯示，還可以設置展開和收起的狀態。

當我們需要引用頁面或頁面中某個部分的內容時，可以使用內部框架達到引用的效果。內部框架既可以引用Axure文件中的頁面，也可以引用外部的頁面。

從元件庫中拖動內部框架至設計區域，雙擊內部框架，在彈出的窗口中選擇鏈接的內部頁面，或填寫外部頁面的URL地址，點擊確定，完成引用頁面的設置。右側的樣式面板可以設置隱藏邊框，下拉選擇滾動條的顯示方式和預覽類型。滾動條的顯示方式包含：根據需要滾動、總是滾動和從不滾動，這里的滾動條設置包含了垂直滾動和水平滾動。預覽類型包含：無、視頻、地圖和自定義預覽，自定義預覽支持從本地導入圖片。這里的預覽設置僅為Axure內部預覽，在瀏覽器預覽看不到設置效果。

中繼器元件由中繼器數據集和中繼器項兩部分構成。中繼器可以用於需要重復設置的元件，如商品列表頁、資訊列表頁、聯系人列表、表格等。

編輯中繼器：從元件庫拖動中繼器至設計區域，雙擊中繼器進入中繼器編輯頁面，中間的白色區域為中繼器的畫布，中繼器的畫布大小既可以手動調整，也可以根據頁面內容自動調，在設計時無需手動拖動頂點來控制畫布大小。畫布外的元件，將會同步至中繼器的左側或上方。中繼器畫布右上角有一個隔離開關和關閉按鈕，隔離開關的作用同動態面板一致，默認為關閉（隔離），點擊開啟後，會將中繼器周圍的其他元件均納入進來，像是一個容量超大的乾坤袋。中繼器編輯頁面可以任意放置元件，如同在一個全新頁面進行線框圖設計。

中繼器數據集：中繼器元件是由中繼器數據集的數據項填充，填充的數據項可以是文本、圖片甚至是鏈接。Axure 9.0中，在中繼器內部和外部均可以編輯數據集。右側的樣式面板中，我們可以看到類似於表格形狀的即為數據集，在單元格里可以任意填充數據。數據集中的行與列的數據可以任意編輯，值得注意的是數據集列的命名需要為英文，否則在中繼器項載入數據時將無法關聯數據集內容。

中繼器的項：中繼器中重復布局的元件這里稱之為項，雙擊中繼器元件，進入中繼器進行編輯，中繼器頁面中的元件會被重復載入多次（中繼器有幾行信息，就被重復載入幾次）。

載入項：利用交互事件每項載入時將數據集中的數據填充到設計區域。

插入文本：雙擊交互事件每項載入時，添加設置文本動作，設置value值時，點擊右側的fx,點擊插入變數、屬性、函數或運算符，在下拉列表中找到中繼器/數據集下面的變數Item.Phone，點擊確定完成文本（手機號碼）的載入。完成此設置後，當中繼器每項載入時，就會將數據集中列（Phone）的內容自動插入到剛剛設置的文本元件中。

導入圖片：導入圖像到數據集中並使用「設置圖像」動作將圖片插入到中繼器的項中。在做這項交互設置前，需要提前在中繼器中准備一個圖像元件，用來關聯顯示中繼器數據集的圖像。在數據集中右擊想要插入圖片的項，選擇「導入圖像」，選擇插入本地圖像。右側交互面板中點擊「每項載入時」事件。添加「設置圖像」動作，選擇目標元件（中繼器數據集事先設置圖片元件的那一列內容）。設置圖像時（SET DEFAULT IMAGE），選擇值，點擊右側的fx，點擊插入變數、屬性、函數或運算符，在下拉列表中找到中繼器/數據集下面的變數Item.Head portrait，點擊確定完成圖像（手機號碼）的載入。完成此設置後，當中繼器每項載入時，就會將數據集中列（Head portrait）的內容自動插入到剛剛設置的圖像元件中。

插入頁面鏈接：中繼器數據集中的項可以添加引用頁（跳轉鏈接），當用戶點擊某個指定的元件時，觸發鏈接跳轉。數據集中右鍵點擊空白項並選擇「引用頁」，選擇本地頁面。在中繼器中選擇一個觸發跳轉動作的元件，為其添加單擊事件，添加「在當前頁打開」動作，然後選擇鏈接到外部網址或本地頁面，點擊fx，在彈出的編輯窗口中，點擊插入變數、屬性、函數或運算符，在下拉列表中找到中繼器/數據集下面的變數Item.link（添加鏈接的數據項），點擊確定完成鏈接跳轉的設置。

中繼器內部元件的交互：中繼器的數據項可以添加任意交互，如同正常元件一樣。

中繼器專有樣式

布局：中繼器的內容支持按垂直、橫向樣式展示內容。垂直布局時，可以設定每一列數據有幾項；橫向布局時，可以設定每一行有幾項。選中中繼器，布局樣式中選擇垂直或橫向，勾選換行，填寫每一列或每一行項的數量。如果不勾選換行，則所有的項將全部垂直展示成一列或橫向展示成一排。

項的背景：項的背景既可以設置單一顏色，也可以設置兩種不同的顏色交替顯示。勾選樣式面板中的交替顏色，設置背景色和交替色。默認情況下，中繼器內容沒有背景色，頁面看上去是白色，是因為整個頁面背景默認顯示白色，並非中繼器項背景為白色。

分頁：中繼器為我們提供了分頁功能，當中繼器項較多時，可以設置分頁。選中中繼器，在樣式面板中，勾選多頁，設置每頁項的數量和開始頁。

本篇結語 ：下一節將重點講解文本輸入框、下拉列表框、列表選擇框、復選框和單選按鈕的使用說明及使用技巧。後續每一篇章節盡量控制篇幅，這一篇基礎元件的說明有點長，基礎性的東西才是最重要的，所以值得詳細講解，也希望大家能夠有更深刻的理解。

⑵ Axure RP 9中關於圖片的那些神操作，你真的都知道嗎

我們經常會有這樣的一個需求，看到了一張喜歡的圖片，希望在圖片上方能夠加上一段營銷文案。Axure RP 9為我們提供了這樣的功能，能夠滿足我們的需求。選中圖片，滑鼠右鍵菜單選擇「編輯文本」，這個時候我們就可以在圖片上編輯文字了，還可以調整文字的大小、字體及顏色等。

切割圖片俗稱切圖。Axure 提供了3種切圖模式，十字架切割、水平切割和垂直切割。選中圖片，滑鼠右鍵單擊，在彈出菜單中選擇「切割圖片」或在右側樣式面板中點擊「刀子」形狀的圖標，這個時候圖片上方會出現十字架虛線，十字架交叉處即為切點。移動滑鼠，切點隨滑鼠一起移動，切割模式下，滑鼠的游標變成了一把「刀子」。點擊滑鼠，完成切圖，原來的一張圖片被分割成了4張圖片。切割模式下，可以根據實際的需求，點擊右上角狀態欄中的水平線或垂直線，選擇水平切割或垂直切割，找准切點，點擊滑鼠，完成切割，將一張圖片分割成兩張圖片。點擊右上角的「關閉」按鈕，取消切割，退出切割模式。

Axure RP 9為我們提供了三種裁剪方式：裁剪、復制、剪切。我們來分析下三種裁剪方式的不同。裁剪圖片，保留選定區域，刪除選區以外的部分；復制圖片，在不破壞原圖的情況下，復制選定區域的圖片部分；剪切圖片與裁剪圖片相反，從原圖中刪除選定的區域，保留未選定的部分。選中圖片，滑鼠右鍵單擊，在彈出菜單中選擇「裁剪圖片」或在右側樣式面板中點擊裁剪圖標，圖片周圍出現了一個虛線矩形框，拖拽矩形框中的方形節點，控制裁剪區域，雙擊滑鼠，完成裁剪。點擊設計區域右上角的裁剪、復制和剪切可以選擇剪裁的方式，默認為剪裁。

固定邊角范圍：顧名思義就是固定圖片邊角的范圍，當我們拉伸圖片時，保留邊角原有的樣式，邊角部分不會出現變形。當我們在網路中看到一張喜歡的圖片，希望在原圖上作出一些小的調整即可運用到我們的原型設計中，這樣也能節省我們的原型製作時間。如下圖所示，我們需要在密碼輸入框下方增加一行驗證碼輸入框而又使得圖片不變形。選中圖片，點擊右側樣式面板中的「固定邊角范圍」，拖動圖片邊框上的紅色三角形，調整邊角范圍，三角形之間的空白區域即為我們添加驗證碼輸入框的位置。

利用Axure可以對圖片進行水平翻轉和垂直翻轉。滑鼠右鍵單擊，在彈出菜單中選擇「水平翻轉」或「垂直翻轉」。

調整顏色：Axure RP 9可以為導入的圖片調整顏色了，這是9.0版本新增的一項實用功能。選中圖片，點擊右側樣式面板中的「三個水平滑竿」圖標，彈出調整顏色面板，選中「調整顏色」復選框，拖動滑竿或輸入數值設置圖片的顏色、飽和度、亮度和對比度。用過Photoshop的同學，相信對這個功能一定不會陌生。顏色、飽和度和亮度被稱之為顏色的三要素，通過顏色三要素我們跳調教出任何一種RGB顏色。點擊調整顏色面板中的「重置」按鈕，將圖片恢復為原來的顏色。

⑶ 在Photoshop里做好的圖形怎麼拷貝到Axure RP 裡面

1、打開ps應用程序，打開需要編輯的圖形。

⑷ 如何使用AXURE里的圖片映射區域

拖動「image
map
region」組件到工作區域，可以設計其大小外形，在「annotation
&
interaction」中設計設計單擊、懸停等事件。

⑸ axure裡面怎麼旋轉圖片

具體操作步驟：

一、首先網路一張轉盤圖片，將改圖片引入至axure中。

⑹ axure, 圖片或圖形從正面翻轉到背面的動畫怎麼做

當前 axure7.0的版本默認沒有翻轉的動畫效果，可以考慮使用動態面板的切換實現

⑺ AXURE中菜單和圖片的翻轉

axure6.5已經有該屬性了。就是懸停效果，在你要設置部件上點擊右鍵就可以看到相關樣式的設置

⑻ axure裡面怎麼旋轉圖片

對於Axure的圖片旋轉，有兩種方式：
1、選中該圖片，按住ctrl鍵，然後如表移動到圖片控制項的選中方框上，滑鼠變成小圈，這時候轉動滑鼠，就可以旋轉圖片了，如下所示：

2、滑鼠選中圖片，在樣式-》元件角度裡面錄入角度即可，如下所示

⑼ axure如何翻轉部件呢

axure原型可以做成線框的低保真原型和呈現出圖文效果的高保真原型，如果產品經理需要通過顏色對比等來展現出原型設計的效果時，就需要使用高保真的交互原型了。
同時，可以將axure的原型文件上傳至藍湖，可以實現手機上預覽，也可直接在藍湖上生成代碼給工程師使用