Axure 9.0基礎(chǔ)教程:史上最詳細(xì)的元件說明,建議你認(rèn)真看完(一)

元件說明

摘要:元件作為Axure 9.0的基礎(chǔ)功能,線框圖的繪制與交互事件的設(shè)置都離不開它,熟練掌握并了解每個(gè)元件的功能及用途,對(duì)原型設(shè)計(jì)來說尤為重要。這是一篇細(xì)到令人發(fā)指的關(guān)于元件的使用說明,不僅有基礎(chǔ)的使用知識(shí)講解,也有一些使用技巧的說明。Axure 9.0與8.0相比并沒有增加新的元件,但9.0的元件卻更好用,用起來更順手,更有設(shè)計(jì)感,它的好用與順手體現(xiàn)在每一個(gè)細(xì)節(jié)之中。

1.2 元件詳解

元件是線框圖繪制過程中必不可少的基礎(chǔ)元素,線框圖是由一些列元件組合而成。因此認(rèn)識(shí)和熟練了解每一個(gè)元件的特征,對(duì)繪制線框圖或者原型來說是非常重要的,本章節(jié)就詳細(xì)講解每個(gè)元件的用途和應(yīng)用特征。

1.2.1 公用元件

1.2.1.1 形狀元件

方框、橢圓、占位符、按鈕、標(biāo)題、標(biāo)簽和文本,這幾個(gè)元件本質(zhì)上都屬于形狀元件。選中元件,可以通過右側(cè)對(duì)應(yīng)的樣式面板對(duì)元件進(jìn)行編輯。

添加文本:選中元件,雙擊元件或右擊在彈出菜單中選擇“編輯文字”,即可對(duì)元件執(zhí)行添加文本、編輯文本的操作。

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

選擇形狀

轉(zhuǎn)換為圖片:形狀元件轉(zhuǎn)換為圖片后,可以保留形狀元件上添加的交互和注釋。選中元件,右鍵單擊在彈出菜單中選擇“轉(zhuǎn)換為圖片”。

轉(zhuǎn)換為圖片

填充:形狀元件支持顏色填充和圖片填充。顏色填充可通過頂部的工具欄或右側(cè)的樣式面板,進(jìn)行配色。通過形狀元件導(dǎo)入的圖片,大小和位置固定在形狀內(nèi)部,不同于常規(guī)的圖片導(dǎo)入。選中形狀元件,右鍵單擊下拉菜單中選擇“導(dǎo)入圖像”或在右側(cè)樣式面板選擇本地圖片,完成導(dǎo)入。

顏色填充


圖片填充

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

設(shè)置邊框線

編輯控點(diǎn):通過拖動(dòng)控點(diǎn)的位置,可以將元件改變成任何你想要的形狀,一般元件有4個(gè)控點(diǎn)。選中形狀元件,右鍵單擊下拉菜單中選擇“編輯控點(diǎn)”或點(diǎn)擊頂部工具欄中的點(diǎn),拖拽元件邊框上的小菱形位置,可以改變元件現(xiàn)狀。

編輯控點(diǎn)

變換形狀:可以對(duì)形狀元件進(jìn)行水平和垂直翻轉(zhuǎn),對(duì)多個(gè)形狀元件進(jìn)行布爾運(yùn)算,改變點(diǎn)的連接方式(直線連接或曲線連接)。選中形狀元件、右鍵單擊下拉菜單中選擇“變換形狀”,彈出的右側(cè)菜單中選擇變換方式。

變換形狀

指定選擇組:與單選按鈕組效果類似,當(dāng)組中有一個(gè)元件被選中后,其他組元件自動(dòng)切換為未選中狀態(tài),常用語于Table切換或標(biāo)簽導(dǎo)航。若將元件添加到指定的組,首先選中形狀元件,右鍵單擊下拉菜單中選擇“指定選擇組”,編輯選擇組名稱。

指定選擇組

工具提示:常用于一些操作提示,如Axure工具欄、頁面與大綱、庫與母版等相關(guān)的操作按鈕,鼠標(biāo)懸停在按鈕上方,顯示提示信息。選中形狀元件,右鍵單擊下拉菜單中選擇“工具提示”,編輯提示信息。

工具提示

圓角效果:形狀元件可以將直角轉(zhuǎn)換為圓角。選中元件,拖動(dòng)左上角的倒三角手柄來控制圓角的半徑,也可以通過右側(cè)樣式面板輸入角度來調(diào)整圓角效果。在樣式面板中,還可以設(shè)置各圓角的可見性,可以做到部分頂點(diǎn)顯示為圓角,部分頂點(diǎn)顯示為直角。

圓角設(shè)置

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

陰影的設(shè)置

不透明度:通過拖動(dòng)右側(cè)樣式面板中的滑塊,可以靈活設(shè)置形狀元件的不透明度。

設(shè)置不透明度

邊距:控制形狀元件內(nèi)的文字與上下左右四個(gè)邊框線的距離。選中形狀元件后,通過右側(cè)的樣式面板調(diào)整文字與四個(gè)方向邊框線的距離。

調(diào)整邊距

自適應(yīng)寬高:根據(jù)形狀元件內(nèi)的文字內(nèi)容,可以自適應(yīng)寬度和高度,減少了手動(dòng)調(diào)整元件尺寸和文字換行的操作。選中元件,點(diǎn)擊右側(cè)樣式面板的適合文本寬度或適合文本高度。選擇適合文本寬度,則所有文本在一行顯示,形狀元件的寬度跟著文字的寬度而自動(dòng)調(diào)整(略大于文本寬度);選擇適合文本高度,則形狀元件的高度隨著文字的高度而自動(dòng)調(diào)整(略高于文本高度)。

自適應(yīng)文本的寬

交互樣式:形狀元件支持添加鼠標(biāo)懸停時(shí)、鼠標(biāo)按下時(shí)、選定時(shí)、禁用時(shí)、獲得焦點(diǎn)時(shí)的交互樣式。選中形狀元件,點(diǎn)擊右側(cè)交互面板,點(diǎn)擊新建交互,為元件設(shè)置樣式效果。

設(shè)置樣式效果

1.2.1.2圖片

圖片元件可以用來添加圖片和插圖,以表達(dá)你的設(shè)計(jì)理念、產(chǎn)品創(chuàng)新、照片等更多內(nèi)容。

導(dǎo)入圖像:拖拽一個(gè)圖片元件到設(shè)計(jì)區(qū)域,雙擊或右鍵單擊菜單中選擇“導(dǎo)入圖像”,導(dǎo)入圖片。Axure支持的圖片格式包含:JPG、GIF、PNG和BMP。

粘貼圖片:從任意處復(fù)制一張圖片均可以粘貼到Axure中,當(dāng)我們復(fù)制的圖片較大時(shí),系統(tǒng)會(huì)提示“該圖像過大,可能導(dǎo)致應(yīng)用程序運(yùn)行緩慢,您要優(yōu)化它嗎?”,建議點(diǎn)擊是,系統(tǒng)將會(huì)無損壓縮圖片大小。一般從excel或CSV復(fù)制內(nèi)容時(shí),建議點(diǎn)擊右鍵,選擇“選擇性粘貼,粘貼為圖片”,直接Ctrl+V通常會(huì)粘貼為文本格式。

優(yōu)化提示
excel粘貼

添加/編輯圖片文字:導(dǎo)入圖片后,右擊圖片選擇“編輯文字”,圖片上的文字還可以進(jìn)行樣式編輯,如顏色、大小、字體等。

編輯圖片文字

水平和垂直翻轉(zhuǎn):導(dǎo)入圖片后,選中圖片,右鍵彈出菜單中選擇“水平翻轉(zhuǎn)”或“垂直翻轉(zhuǎn)”,可以對(duì)圖片進(jìn)行水平和垂直翻轉(zhuǎn)。

分割圖像:分割與裁剪在設(shè)計(jì)領(lǐng)域俗稱切圖。兩者的區(qū)別在于是否保持了圖片的完整性,前者完整保留圖片內(nèi)容,后者默認(rèn)保留選定部分內(nèi)容。選中圖片,右鍵單擊菜單或在右側(cè)樣式面板中選擇分割圖像,出現(xiàn)十字架虛線,十字架交叉處即為切點(diǎn),點(diǎn)擊設(shè)計(jì)區(qū)域右上角的+、—和|選擇切割線,—代表了橫線切割,+代表了豎線切割。

分割圖像

裁剪圖像:分為裁剪、復(fù)制和剪切三種方式。裁剪圖片只保留選定區(qū)域,復(fù)制不對(duì)原圖像有任何影響,剪切從原圖片中切除選定區(qū)域。選中圖片,右鍵單擊菜單或在右側(cè)樣式面板中選擇剪裁圖像,通過拖拽虛線矩形框四個(gè)頂點(diǎn)的位置來調(diào)整裁剪范圍大小,移動(dòng)矩形框確定裁剪的區(qū)域。點(diǎn)擊設(shè)計(jì)區(qū)域右上角的裁剪、復(fù)制和剪切可以選擇剪裁的方式,默認(rèn)為剪裁。

裁剪圖像

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

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

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

優(yōu)化圖像

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

等比例縮放圖片

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

1.2.1.3水平線和垂直線

在原型設(shè)計(jì)時(shí),通常需要將原型的幾個(gè)版塊或內(nèi)容進(jìn)行區(qū)隔,這個(gè)時(shí)候利用水平線和垂直線就會(huì)比較方便。

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

選擇箭頭樣式

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

設(shè)置顏色、厚度和樣式

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

旋轉(zhuǎn)角度

1.2.1.4 圖像熱區(qū)

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

多個(gè)元件設(shè)置同一交互:如資訊列表頁,需要同時(shí)為圖片和文章標(biāo)題設(shè)置一個(gè)鼠標(biāo)單擊跳轉(zhuǎn)事件,這個(gè)時(shí)候可以直接在圖片和標(biāo)題上覆蓋一層熱區(qū),為熱區(qū)設(shè)置鼠標(biāo)單擊事件。

單個(gè)元件中的某一區(qū)域設(shè)置交互:利用熱區(qū)覆蓋在元件上的局部區(qū)域,為熱區(qū)設(shè)置鼠標(biāo)單擊事件,即可起到元件的局部區(qū)域可點(diǎn)擊效果。

熱區(qū)的可見性:預(yù)覽原型效果時(shí),熱區(qū)是透明不可見的,但在Axure源文件中默認(rèn)會(huì)顯示為一個(gè)透明的遮罩層,通過菜單欄中的視圖>遮罩>熱點(diǎn),可以隱藏掉遮罩,與預(yù)覽時(shí)的效果是一樣的。

熱區(qū)設(shè)置交互&隱藏遮罩

1.2.1.5 動(dòng)態(tài)面板

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

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

編輯動(dòng)態(tài)面板狀態(tài):雙擊動(dòng)態(tài)面板選擇一個(gè)狀態(tài)進(jìn)行編輯,進(jìn)入狀態(tài)中,我們會(huì)看到中間有一個(gè)白色矩形區(qū)域,矩形區(qū)域?yàn)閯?dòng)態(tài)面板的畫布,超出部分,則在動(dòng)態(tài)面板中不可見,如果看不到白色矩形,則一定是在樣式面板中為動(dòng)態(tài)面板勾選了“調(diào)整大小以適應(yīng)內(nèi)容”,取消勾選,則可以在狀態(tài)中看到白色矩形。在狀態(tài)中編輯元件,就和我們平常在頁面中編輯元件一樣操作。設(shè)計(jì)區(qū)域的右上角可以切換隔離狀態(tài),默認(rèn)為隔離。隔離狀態(tài)是指是否將動(dòng)態(tài)面板以外的元件納入進(jìn)來。點(diǎn)擊設(shè)計(jì)區(qū)域右上角的關(guān)閉按鈕,則為退出動(dòng)態(tài)面板狀態(tài),回到頁面。

自適應(yīng)內(nèi)容
編輯狀態(tài)

管理動(dòng)態(tài)面板狀態(tài):雙擊動(dòng)態(tài)面板進(jìn)入編輯狀態(tài),點(diǎn)擊設(shè)計(jì)區(qū)域左上角可以管理動(dòng)態(tài)面板的狀態(tài),在這里可以增加狀態(tài)、復(fù)制狀態(tài)、刪除狀態(tài)。

管理動(dòng)態(tài)面板狀態(tài)

動(dòng)態(tài)面板專有樣式

滾動(dòng)條:當(dāng)動(dòng)態(tài)面板尺寸小于狀態(tài)內(nèi)容尺寸時(shí),需要為動(dòng)態(tài)面板設(shè)置滾動(dòng)條以查看狀態(tài)中的更多內(nèi)容。滾動(dòng)條有四種樣式:不需要、根據(jù)需要滾動(dòng)、縱向滾動(dòng)、橫向滾動(dòng)。選中動(dòng)態(tài)面板,在右側(cè)樣式面板中設(shè)置滾動(dòng)條樣式。

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

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

動(dòng)態(tài)面板滾動(dòng)條樣式
100%寬度
瀏覽器中固定位置

其他通用樣式

動(dòng)態(tài)面板的位置和尺寸、填充、邊框、陰影和圓角等這些公共樣式的屬性設(shè)置同形狀元件一致,請(qǐng)參考上文說明

設(shè)置動(dòng)態(tài)面板狀態(tài)(交互動(dòng)作)

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

上一個(gè)/下一個(gè):選擇上一個(gè)狀態(tài)、下一個(gè)狀態(tài)時(shí)可以進(jìn)行狀態(tài)的重復(fù)循環(huán)(狀態(tài)是有限的),設(shè)置中自動(dòng)勾選“從最后一個(gè)到第一個(gè)自動(dòng)循環(huán)”,在更多選項(xiàng)中還可以設(shè)置首次循環(huán)的時(shí)間間隔。這樣動(dòng)態(tài)面板就可以按照規(guī)律無限循環(huán)下去,循環(huán)切換常用于輪播圖的自動(dòng)播放。

停止切換:當(dāng)我們需要停止動(dòng)態(tài)面板無限循環(huán)時(shí),如停止圖片輪播或內(nèi)容廣播,可以在狀態(tài)列表中選擇停止切換。

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

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

更多選項(xiàng):如果原來動(dòng)態(tài)面板為隱藏,在這里可以勾選為顯示,還可以設(shè)置展開和收起的狀態(tài)。

動(dòng)態(tài)面板改變狀態(tài)

1.2.1.6 內(nèi)部框架

當(dāng)我們需要引用頁面或頁面中某個(gè)部分的內(nèi)容時(shí),可以使用內(nèi)部框架達(dá)到引用的效果。內(nèi)部框架既可以引用Axure文件中的頁面,也可以引用外部的頁面。

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

設(shè)置引用頁面
滾動(dòng)條&預(yù)覽

1.2.1.7 中繼器

中繼器元件由中繼器數(shù)據(jù)集和中繼器項(xiàng)兩部分構(gòu)成。中繼器可以用于需要重復(fù)設(shè)置的元件,如商品列表頁、資訊列表頁、聯(lián)系人列表、表格等。

編輯中繼器:從元件庫拖動(dòng)中繼器至設(shè)計(jì)區(qū)域,雙擊中繼器進(jìn)入中繼器編輯頁面,中間的白色區(qū)域?yàn)橹欣^器的畫布,中繼器的畫布大小既可以手動(dòng)調(diào)整,也可以根據(jù)頁面內(nèi)容自動(dòng)調(diào),在設(shè)計(jì)時(shí)無需手動(dòng)拖動(dòng)頂點(diǎn)來控制畫布大小。畫布外的元件,將會(huì)同步至中繼器的左側(cè)或上方。中繼器畫布右上角有一個(gè)隔離開關(guān)和關(guān)閉按鈕,隔離開關(guān)的作用同動(dòng)態(tài)面板一致,默認(rèn)為關(guān)閉(隔離),點(diǎn)擊開啟后,會(huì)將中繼器周圍的其他元件均納入進(jìn)來,像是一個(gè)容量超大的乾坤袋。中繼器編輯頁面可以任意放置元件,如同在一個(gè)全新頁面進(jìn)行線框圖設(shè)計(jì)。

編輯中繼器

中繼器數(shù)據(jù)集:中繼器元件是由中繼器數(shù)據(jù)集的數(shù)據(jù)項(xiàng)填充,填充的數(shù)據(jù)項(xiàng)可以是文本、圖片甚至是鏈接。Axure 9.0中,在中繼器內(nèi)部和外部均可以編輯數(shù)據(jù)集。右側(cè)的樣式面板中,我們可以看到類似于表格形狀的即為數(shù)據(jù)集,在單元格里可以任意填充數(shù)據(jù)。數(shù)據(jù)集中的行與列的數(shù)據(jù)可以任意編輯,值得注意的是數(shù)據(jù)集列的命名需要為英文,否則在中繼器項(xiàng)載入數(shù)據(jù)時(shí)將無法關(guān)聯(lián)數(shù)據(jù)集內(nèi)容。

編輯數(shù)據(jù)集

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

中繼器的項(xiàng)

加載項(xiàng):利用交互事件每項(xiàng)加載時(shí)將數(shù)據(jù)集中的數(shù)據(jù)填充到設(shè)計(jì)區(qū)域。

插入文本:雙擊交互事件每項(xiàng)加載時(shí),添加設(shè)置文本動(dòng)作,設(shè)置value值時(shí),點(diǎn)擊右側(cè)的fx,點(diǎn)擊插入變量、屬性、函數(shù)或運(yùn)算符,在下拉列表中找到中繼器/數(shù)據(jù)集下面的變量Item.Phone,點(diǎn)擊確定完成文本(手機(jī)號(hào)碼)的加載。完成此設(shè)置后,當(dāng)中繼器每項(xiàng)加載時(shí),就會(huì)將數(shù)據(jù)集中列(Phone)的內(nèi)容自動(dòng)插入到剛剛設(shè)置的文本元件中。

中繼器文本加載

導(dǎo)入圖片:導(dǎo)入圖像到數(shù)據(jù)集中并使用“設(shè)置圖像”動(dòng)作將圖片插入到中繼器的項(xiàng)中。在做這項(xiàng)交互設(shè)置前,需要提前在中繼器中準(zhǔn)備一個(gè)圖像元件,用來關(guān)聯(lián)顯示中繼器數(shù)據(jù)集的圖像。在數(shù)據(jù)集中右擊想要插入圖片的項(xiàng),選擇“導(dǎo)入圖像”,選擇插入本地圖像。右側(cè)交互面板中點(diǎn)擊“每項(xiàng)加載時(shí)”事件。添加“設(shè)置圖像”動(dòng)作,選擇目標(biāo)元件(中繼器數(shù)據(jù)集事先設(shè)置圖片元件的那一列內(nèi)容)。設(shè)置圖像時(shí)(SET DEFAULT IMAGE),選擇值,點(diǎn)擊右側(cè)的fx,點(diǎn)擊插入變量、屬性、函數(shù)或運(yùn)算符,在下拉列表中找到中繼器/數(shù)據(jù)集下面的變量Item.Head portrait,點(diǎn)擊確定完成圖像(手機(jī)號(hào)碼)的加載。完成此設(shè)置后,當(dāng)中繼器每項(xiàng)加載時(shí),就會(huì)將數(shù)據(jù)集中列(Head portrait)的內(nèi)容自動(dòng)插入到剛剛設(shè)置的圖像元件中。

中繼器圖像加載

插入頁面鏈接:中繼器數(shù)據(jù)集中的項(xiàng)可以添加引用頁(跳轉(zhuǎn)鏈接),當(dāng)用戶點(diǎn)擊某個(gè)指定的元件時(shí),觸發(fā)鏈接跳轉(zhuǎn)。數(shù)據(jù)集中右鍵點(diǎn)擊空白項(xiàng)并選擇“引用頁”,選擇本地頁面。在中繼器中選擇一個(gè)觸發(fā)跳轉(zhuǎn)動(dòng)作的元件,為其添加單擊事件,添加“在當(dāng)前頁打開”動(dòng)作,然后選擇鏈接到外部網(wǎng)址或本地頁面,點(diǎn)擊fx,在彈出的編輯窗口中,點(diǎn)擊插入變量、屬性、函數(shù)或運(yùn)算符,在下拉列表中找到中繼器/數(shù)據(jù)集下面的變量Item.link(添加鏈接的數(shù)據(jù)項(xiàng)),點(diǎn)擊確定完成鏈接跳轉(zhuǎn)的設(shè)置。

添加鏈接

中繼器內(nèi)部元件的交互:中繼器的數(shù)據(jù)項(xiàng)可以添加任意交互,如同正常元件一樣。

中繼器專有樣式

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

中繼器布局

項(xiàng)的背景:項(xiàng)的背景既可以設(shè)置單一顏色,也可以設(shè)置兩種不同的顏色交替顯示。勾選樣式面板中的交替顏色,設(shè)置背景色和交替色。默認(rèn)情況下,中繼器內(nèi)容沒有背景色,頁面看上去是白色,是因?yàn)檎麄€(gè)頁面背景默認(rèn)顯示白色,并非中繼器項(xiàng)背景為白色。

分頁:中繼器為我們提供了分頁功能,當(dāng)中繼器項(xiàng)較多時(shí),可以設(shè)置分頁。選中中繼器,在樣式面板中,勾選多頁,設(shè)置每頁項(xiàng)的數(shù)量和開始頁。

背景與分頁

本篇結(jié)語:下一節(jié)將重點(diǎn)講解文本輸入框、下拉列表框、列表選擇框、復(fù)選框和單選按鈕的使用說明及使用技巧。后續(xù)每一篇章節(jié)盡量控制篇幅,這一篇基礎(chǔ)元件的說明有點(diǎn)長,基礎(chǔ)性的東西才是最重要的,所以值得詳細(xì)講解,也希望大家能夠有更深刻的理解。

如果你對(duì)Axure或原型設(shè)計(jì)有興趣,希望系統(tǒng)性地學(xué)習(xí)Axure知識(shí),掌握更多Axure使用技巧;或者希望通過臨摹交互案例,進(jìn)一步提升高保交互設(shè)計(jì)能力。請(qǐng)點(diǎn)擊下方關(guān)注按鈕,查看更多連載作品。

點(diǎn)擊獲取案例作品源文件

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容