02 社交媒體的發展與挑戰圖片素材(廠區宣傳海報設計-如何使用圖片工廠設計海報)

選擇切割線,—代表了橫線切割,+代表了豎線切割。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動態面板專有樣式

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

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

其他通用樣式

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

設置動態面板狀態(交互動作)

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

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

值(value):使用值來設置動態面板狀態時,需要注意值必須與動態面板的狀態名稱一致時,才能生效。當需要基于某一個頁面存儲的全局變量值在本頁面中使用“頁面加載時”事件來設置動態面板到指定狀態。此時,只需要設置一個簡單的交互用例即可實現。

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

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

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

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

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

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

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

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

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

導入圖片:導入圖像到數據集中并使用“設置圖像”動作將圖片插入到中繼器的項中。在做這項交互設置前,需要提前在中繼器中準備一個圖像元件,用來關聯顯示中繼器數據集的圖像。在數據集中右擊想要插入圖片的項,選擇“導入圖像”,選擇插入本地圖像。右側交互面板中點擊“每項加載時”事件。添加“設置圖像”動作,選擇目標元件(中繼器數據集事先設置圖片元件的那一列內容)。設置圖像時(SETDEFAULTIMAGE),選擇值,點擊右側的fx,點擊插入變量、屬性、函數或運算符,在下拉列表中找到中繼器/數據集下面的變量portrait,點擊確定完成圖像(手機號碼)的加載。完成此設置后,當中繼器每項加載時,就會將數據集中列(Headportrait)的內容自動插入到剛剛設置的圖像元件中。

插入頁面鏈接:中繼器數據集中的項可以添加引用頁(跳轉鏈接),當用戶點擊某個指定的元件時,觸發鏈接跳轉。數據集中右鍵點擊空白項并選擇“引用頁”,選擇本地頁面。在中繼器中選擇一個觸發跳轉動作的元件,為其添加單擊事件,添加“在當前頁打開”動作,然后選擇鏈接到外部買粉絲或本地頁面,點擊fx,在彈出的編輯窗口中,點擊插入變量、屬性、函數或運算符,在下拉列表中找到中繼器/數據集下面的變量(添加鏈接的數據項),點擊確定完成鏈接跳轉的設置。

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

中繼器專有樣式

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

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

分頁:中

很赞哦!（598）