第四章Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)-

網(wǎng)頁(yè)交互原型工具Axure的應(yīng)用規(guī)范知識(shí)要點(diǎn)01Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目背景分析02Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目需求分析03AxurePR9工具介紹04Axure常用元件05查看原型06項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目背景分析第一部分Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目背景分析Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目背景分析重點(diǎn)從市場(chǎng)發(fā)展以及國(guó)家產(chǎn)業(yè)規(guī)劃來(lái)進(jìn)行分析。1.電商平臺(tái)項(xiàng)目市場(chǎng)迅速發(fā)展隨著互聯(lián)網(wǎng)的發(fā)展電商平臺(tái)項(xiàng)目所屬行業(yè)是在最近幾年間迅速發(fā)展。行業(yè)在繁榮國(guó)內(nèi)市場(chǎng)、擴(kuò)大出口創(chuàng)匯、吸納社會(huì)就業(yè)、促進(jìn)經(jīng)濟(jì)增長(zhǎng)等方面發(fā)揮的作用越來(lái)越明顯。2.國(guó)家產(chǎn)業(yè)規(guī)劃或地方產(chǎn)業(yè)規(guī)劃我國(guó)非常重視電子商務(wù)系統(tǒng)領(lǐng)域的發(fā)展，國(guó)家和地方在最近幾年有關(guān)該領(lǐng)域的政策力度明顯加強(qiáng)，突出表現(xiàn)在如下幾個(gè)方面：穩(wěn)定國(guó)內(nèi)外市場(chǎng)；提高自主創(chuàng)新能力；加快實(shí)施技術(shù)改造；淘汰落后產(chǎn)能；優(yōu)化區(qū)域布局；完善服務(wù)體系；加快自主品牌建設(shè)；提升企業(yè)競(jìng)爭(zhēng)實(shí)力Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目需求分析第二部分Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目需求分析Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)項(xiàng)目主要從目標(biāo)顧客、功能規(guī)劃、業(yè)務(wù)流程等方面進(jìn)行需求分析。1.目標(biāo)顧客適用于各種對(duì)數(shù)碼電子產(chǎn)品感興趣且有需求的人士，還有學(xué)生、上班族、商務(wù)人士。2.提供的功能與服務(wù)用戶可以直接在網(wǎng)站上對(duì)比各種產(chǎn)品之間的功能、結(jié)構(gòu)、性能，十分方便快捷的進(jìn)行商品之間的比較，很快的選出自己感興趣的商品，對(duì)用戶來(lái)說(shuō)，節(jié)省了大量的時(shí)間。3.運(yùn)行環(huán)境:Windows操作系統(tǒng)4.功能規(guī)劃(1)網(wǎng)站前臺(tái)部分模塊功能介紹(2)后臺(tái)功能模塊介紹5、業(yè)務(wù)流程圖AxurePR9工具介紹第三部分1界面介紹1、菜單欄2、工作區(qū)域3、頁(yè)面欄4、概要視圖5、元件庫(kù)6、母版7、樣式窗格8、交互9、注釋菜單欄介紹復(fù)制、剪切及粘貼區(qū)域CtrlX為剪切CtrlC為復(fù)制CtrlV為粘貼選擇模式第一個(gè)相交選中第二個(gè)包含選中第三個(gè)連接在Axure中，可以選中一段交互進(jìn)行復(fù)制粘貼，值得注意的是，選擇某個(gè)元件，按下復(fù)制按鈕或快捷鍵，然后選中另一個(gè)元件按下CtrlAltV即可將前一個(gè)元件的格式及公共交互部分復(fù)制并粘貼到后一個(gè)元件上插入按鈕：繪畫(huà)矩形圓形線段文本圖片其他形狀拖動(dòng)方塊可以任意改變?cè)男螤畈藛螜诮榻B將選中的元件置于最下層或最上層選中多個(gè)元件點(diǎn)擊組合將元件打組實(shí)現(xiàn)放大和縮小屏快捷鍵按住Ctrl鍵，滑動(dòng)鼠標(biāo)滾輪8種對(duì)齊方式，左對(duì)齊居中對(duì)齊右對(duì)齊頂部對(duì)齊居中底部對(duì)齊橫向均與分布垂直均勻分布預(yù)覽和共享預(yù)覽就是預(yù)覽原型預(yù)覽和共享12缺點(diǎn)是不可展示動(dòng)態(tài)交互

使用axure直接預(yù)覽

文件->導(dǎo)出所有頁(yè)面為圖片使用Chrome瀏覽器預(yù)覽時(shí)添加插件預(yù)覽和共享34發(fā)布到Axure_shared上，生成鏈接

生成原型頁(yè)面到本地文件夾自定義界面自定義界面黑夜模式01Axure元件庫(kù)DefaultFlowIconsAxure自帶基礎(chǔ)元件庫(kù)庫(kù)的切換在元件庫(kù)的下拉菜單中可以看到所有的元件庫(kù)，也可以查看加載好的本地圖片文件夾（需要導(dǎo)入圖片文件夾）。也可以通過(guò)AxureCloud來(lái)加載/切換庫(kù)。Axure元件庫(kù)庫(kù)的添加查看元件庫(kù)存儲(chǔ)位置以及刪除庫(kù)的刪除：在下拉菜單中選擇好該元件庫(kù)后，直接單擊選項(xiàng)Option按鈕（在右上角）然后選擇RemoveLibrary移除元件庫(kù)按鈕(圖片見(jiàn)上圖)Axure元件庫(kù)創(chuàng)建自己的元件庫(kù)Axure元件庫(kù)元件庫(kù)中元件的圖標(biāo)與提示元件的使用元件的使用031元件添加直接單擊選擇某一個(gè)元件將其拖至畫(huà)布(中間區(qū)域)中,也可以通過(guò)左上角的插入菜單選擇其他形狀的部件。元件的使用元件的移動(dòng)操作元件的移動(dòng)：拖住元件并在畫(huà)布上松開(kāi)鼠標(biāo)即可；也可以直接在X和Y中直接輸入坐標(biāo)。元件的使用同時(shí)定位多個(gè)元件進(jìn)行操作按住CTRL使用鼠標(biāo)單擊每個(gè)元件可同時(shí)選中多個(gè)元件，可以看到坐標(biāo)X

或者Y（W

與

H、即寬和高）不盡相同。提示：X,Y,W,H

這些參數(shù)中只有當(dāng)多個(gè)元件的這些值相同時(shí)才會(huì)展示，否則在選中時(shí)不會(huì)展示。元件的使用元件的其他操作旋轉(zhuǎn)。元件的命名元件的組合元件的鎖定與隱藏元件的樣式

不透明度排版元件的樣式

填充邊框元件的樣式

陰影、圓角、邊距元件的樣式

元件樣式及樣式管理器元件的樣式

更新和創(chuàng)建樣式快速更新快速創(chuàng)建元件的組合元件的組合與取消元件的組合組合的交互元件選中狀態(tài)頁(yè)面及其樣式1.添加頁(yè)面：直接在左側(cè)頁(yè)面樣式欄中的右上角點(diǎn)擊添加按鈕，此時(shí)即可以添加一個(gè)空白的頁(yè)面，你也可以在某一個(gè)頁(yè)面上右擊，然后添加頁(yè)面或子頁(yè)面。2.頁(yè)面的刪除：直接右鍵單擊該頁(yè)面，選擇刪除，或者選中某一個(gè)頁(yè)面，然后直接按DELETE鍵。3.頁(yè)面的重命名：與WINDOWS電腦文件的重命名一樣，可以右鍵單擊，選擇重命名

或者緩慢單擊該文件名。頁(yè)面及其樣式頁(yè)面的樣式頁(yè)面的尺寸自適應(yīng)視圖自適應(yīng)視圖視圖的顏色通常有這幾種：1.藍(lán)綠色：當(dāng)前在畫(huà)布上顯示的視圖。修改將適用于本視圖2.黃色：當(dāng)前顯示視圖的子視圖。在當(dāng)前修改將會(huì)影響此視圖3.灰色：當(dāng)前顯示視圖的父視圖。在當(dāng)前修改不會(huì)影響此視圖4.綠色：當(dāng)前修改會(huì)影響所有視圖母版的創(chuàng)建母版的使用情形導(dǎo)航欄網(wǎng)站頂部header（包括LOGO)一些常用的按鈕或組合，比如分享至第三方平臺(tái)的按鈕Tab的切換（APP中居多）在原型設(shè)計(jì)中，部件元件或元件的組合會(huì)重復(fù)使用，這些元件的組合就可被用來(lái)創(chuàng)建母版。）母版的創(chuàng)建方法一：選中多個(gè)元件后，右鍵單擊，選擇轉(zhuǎn)換為母版方法二：從母版欄目中創(chuàng)建母版的使用母版的頁(yè)面屬性母版的頁(yè)面交互將會(huì)在母版所處的任何一個(gè)實(shí)例頁(yè)面被觸發(fā)（前提是達(dá)到觸發(fā)事件），比如你創(chuàng)建一個(gè)頁(yè)面載入時(shí)的事件，那么當(dāng)一個(gè)頁(yè)面包含該母版時(shí)，就會(huì)觸發(fā)此事件。母版的添加任意位置：此為默認(rèn)情況，可將母版放至任意坐標(biāo)上。母版實(shí)例的位置鎖定到母版中的位置：此實(shí)例的位置與原母版中的位置相同。方法1：直接從母版窗格中拖至畫(huà)布中。同時(shí)該母版將會(huì)出現(xiàn)紅色遮罩（可在視圖–>遮罩中切換）方法2：在需要的母版上右鍵選擇添加母版到頁(yè)面中母版的添加母版的添加脫離母版母版使用情況母版的引發(fā)事件母版視圖視圖的繼承母版視圖的編輯窗口藍(lán)綠色：當(dāng)前編輯對(duì)其適用；黃色：當(dāng)下顯示的是子視圖，編輯對(duì)其適用；灰色：當(dāng)下顯示的是父視圖，編輯對(duì)其不適用；綠色：影響所有視圖被選中，編輯對(duì)所有視圖適用。連接器菜單的邊距填充連接器連接器（線）的形態(tài)改變形態(tài)添加文本形狀形狀的創(chuàng)建方法一：從左側(cè)庫(kù)中拖入畫(huà)布中；方法二：插入菜單，通過(guò)一些快捷鍵我們可以快速插入常用的圖形元件，各矢量圖形的快捷鍵如下：P鍵鋼筆工具R鍵矩形0鍵圓形L鍵線段T鍵文本鋼筆（繪畫(huà)）工具AXURE中的鋼筆工具可以縱向矢量圖形形狀形狀的變換水平翻轉(zhuǎn)垂直翻轉(zhuǎn)合并去除相交排除結(jié)合分開(kāi)形狀形狀的轉(zhuǎn)換圖片引用頁(yè)面Axure元件的交互樣式Axure的交互一個(gè)交互由3部分構(gòu)成：1.元件或頁(yè)面的事件；2.在此事件上的情形；3.針對(duì)該情形的動(dòng)作。4.事件是通過(guò)不同的情形和動(dòng)作來(lái)對(duì)外界輸入作出的一種反映。所以，事件包含一個(gè)或多個(gè)情形，而情形中又可包含多個(gè)動(dòng)作不同的情形通過(guò)判斷各自的條件來(lái)進(jìn)行將要做什么，也就是說(shuō)，不同的情形是不會(huì)同時(shí)發(fā)生的。交互的構(gòu)成就相當(dāng)于寫(xiě)if()語(yǔ)句時(shí)，if(條件1)｛

執(zhí)行case1中actions；｝

if(條件2)｛

執(zhí)行case2中actions；｝用集合的概念來(lái)描述上面三者的關(guān)系：事件>情形>動(dòng)作。因此事件可以理解為Function，情形理解為條件1，2，3，而動(dòng)作則理解為Actions。事件-情形-動(dòng)作查看一個(gè)元件或頁(yè)面的事件：?jiǎn)螕粼蝽?yè)面，在右側(cè)交互欄目中可查看；事件的刪除：選中某一個(gè)事件后，按Delete即可。事件情形情形主要是指附著在事件上的用例，一個(gè)事件可以有多個(gè)情形，當(dāng)鼠標(biāo)懸浮在事件上時(shí)，可以看到右側(cè)的添加情形按鈕，可以設(shè)置觸發(fā)條件來(lái)設(shè)置情形的啟動(dòng)。情形的刪除：選中某一個(gè)情形后，直接按Delete即可。動(dòng)作動(dòng)作是在某一情形下的操作。動(dòng)作的添加：直接在情形的右側(cè)添加目標(biāo)按鈕，亦可單擊情形下方的+按鈕。同理，可用鼠標(biāo)來(lái)拖動(dòng)動(dòng)作的順序。頁(yè)面和母版的事件頁(yè)面載入時(shí)：Web瀏覽器中加載頁(yè)面時(shí)頁(yè)面單擊時(shí)：?jiǎn)螕繇?yè)面背景時(shí)頁(yè)面雙擊時(shí)：雙擊頁(yè)面背景時(shí)頁(yè)面鼠標(biāo)右擊時(shí)：右鍵單擊頁(yè)面的背景頁(yè)面鼠標(biāo)移動(dòng)時(shí)：當(dāng)光標(biāo)在頁(yè)面上移動(dòng)時(shí)連續(xù)觸發(fā)頁(yè)面按鍵按下時(shí)：按下鍵盤(pán)鍵時(shí)頁(yè)面按鈕松開(kāi)時(shí)：釋放鍵盤(pán)鍵時(shí)窗口尺寸改變時(shí)：調(diào)整瀏覽器窗口大小時(shí)頁(yè)面載入時(shí)：Web瀏覽器中加載頁(yè)面時(shí)自適應(yīng)視圖改變時(shí)：當(dāng)前自適應(yīng)視圖由于瀏覽器窗口大小調(diào)整而改變，或者通過(guò)設(shè)置自適應(yīng)視圖操作或原型播放器中的自適應(yīng)視圖下拉列表來(lái)設(shè)置視圖窗口滾動(dòng)時(shí)：當(dāng)瀏覽器窗口向任何方向滾動(dòng)時(shí)窗口向上滾動(dòng)時(shí)：當(dāng)瀏覽器窗口向上滾動(dòng)時(shí)窗口向下滾動(dòng)時(shí)：當(dāng)瀏覽器窗口向下滾動(dòng)時(shí)所有元件適用的事件單擊時(shí)：當(dāng)元件被點(diǎn)擊時(shí)。雙擊時(shí)：元件被鼠標(biāo)雙擊時(shí)。右擊時(shí)：當(dāng)元件被鼠標(biāo)右鍵單擊時(shí)。按下時(shí)：當(dāng)鼠標(biāo)按下左鍵沒(méi)有被釋放時(shí)。松開(kāi)時(shí)：當(dāng)元件被鼠標(biāo)點(diǎn)擊，這個(gè)事件由鼠標(biāo)按鍵釋放觸發(fā)。鼠標(biāo)移動(dòng)時(shí)：當(dāng)光標(biāo)在一個(gè)元件上移動(dòng)時(shí)。鼠標(biāo)移入時(shí)：當(dāng)光標(biāo)移入元件范圍時(shí)。鼠標(biāo)移出時(shí)：當(dāng)光標(biāo)移出元件范圍時(shí)。鼠標(biāo)停放時(shí)：當(dāng)光標(biāo)在元件上方懸停時(shí)。鼠標(biāo)長(zhǎng)按時(shí)：當(dāng)鼠標(biāo)按下超過(guò)2秒沒(méi)有被釋放時(shí)。移動(dòng)時(shí)：當(dāng)元件移動(dòng)時(shí)，在頁(yè)面中的坐標(biāo)位發(fā)生了變化。按鍵按下時(shí)：鍵盤(pán)上的按鍵被按下時(shí)。按鍵松開(kāi)時(shí)：當(dāng)鍵盤(pán)上的按鍵彈起時(shí)。旋轉(zhuǎn)時(shí)：當(dāng)元件旋轉(zhuǎn)時(shí)。尺寸改變時(shí)：當(dāng)元件寬度或高度發(fā)生改變時(shí)。顯示時(shí)：當(dāng)元件通過(guò)交互動(dòng)作顯示時(shí)。隱藏時(shí)：當(dāng)元件通過(guò)交互動(dòng)作隱藏時(shí)。獲取焦點(diǎn)時(shí)：當(dāng)一個(gè)輸入項(xiàng)獲取焦點(diǎn)時(shí)。失去焦點(diǎn)時(shí)：當(dāng)一個(gè)輸入項(xiàng)失去焦點(diǎn)時(shí)。選中時(shí)：當(dāng)復(fù)選框或單選按鈕被選中時(shí)。取消選中時(shí)：當(dāng)復(fù)選框或單選按鈕取消選中時(shí)。選中改變時(shí)：適用于下拉框，當(dāng)下拉框被選中的項(xiàng)發(fā)生了改變時(shí)，通常作為事件的一個(gè)邏輯條件。載入時(shí)：當(dāng)元件從一個(gè)頁(yè)面的加載中載入時(shí)。其他元件特有的事件選項(xiàng)改變時(shí)：當(dāng)下拉列表或列表框中的選定選項(xiàng)發(fā)生更改時(shí)狀態(tài)改變時(shí)：當(dāng)動(dòng)態(tài)面板被設(shè)置了“設(shè)置面板狀態(tài)”動(dòng)作時(shí)。拖動(dòng)開(kāi)始時(shí)：當(dāng)一個(gè)拖動(dòng)動(dòng)作開(kāi)始時(shí)。拖動(dòng)時(shí)：當(dāng)一個(gè)動(dòng)態(tài)面板正在被拖動(dòng)時(shí)。拖動(dòng)結(jié)束時(shí)：當(dāng)一個(gè)拖動(dòng)動(dòng)作結(jié)束時(shí)。向左拖動(dòng)結(jié)束時(shí)：當(dāng)一個(gè)面板向左拖動(dòng)結(jié)束時(shí)。向右拖動(dòng)結(jié)束時(shí)：當(dāng)一個(gè)面板向右拖動(dòng)結(jié)束時(shí)。向上拖動(dòng)結(jié)束時(shí)：當(dāng)一個(gè)面板向上拖動(dòng)結(jié)束時(shí)。向下拖動(dòng)結(jié)束時(shí)：當(dāng)一個(gè)面板向下拖動(dòng)結(jié)束時(shí)。滾動(dòng)時(shí)：當(dāng)一個(gè)有滾動(dòng)的面板上下滾動(dòng)時(shí)。向上滾動(dòng)時(shí)：當(dāng)一個(gè)有滾動(dòng)的面板，向上滾動(dòng)時(shí)。向下滾動(dòng)時(shí)：當(dāng)一個(gè)有滾動(dòng)的面板，向下滾動(dòng)時(shí)。僅用于下拉列表和列表框的事件僅限動(dòng)態(tài)面板僅限中繼器每項(xiàng)加載時(shí)：當(dāng)中繼器的項(xiàng)目首次加載到Web瀏覽器中并且中繼器的數(shù)據(jù)集以任何方式更改時(shí)列表項(xiàng)尺寸改變時(shí)：當(dāng)中繼器項(xiàng)目的大小因任何交互而變化時(shí)（例如項(xiàng)目中的小部件被顯示，隱藏或調(diào)整大?。┰膭?dòng)作集鏈接元件1.打開(kāi)鏈接：可在以下三個(gè)位置中打開(kāi)URL或原型內(nèi)部頁(yè)面：當(dāng)前窗口：當(dāng)前的瀏覽器窗口新窗口/選項(xiàng)卡：新的瀏覽器窗口或選項(xiàng)卡彈出窗口：彈出窗口父窗口：彈出窗口的父窗口（必須在彈出窗口中加載的頁(yè)面中使用）2.關(guān)閉窗口：關(guān)閉當(dāng)前瀏覽器窗口或選項(xiàng)卡3.在框架中打開(kāi)鏈接：更改內(nèi)嵌框架窗口小部件或包含嵌入框架的頁(yè)面中加載的頁(yè)面內(nèi)聯(lián)框架：和頁(yè)面上的內(nèi)聯(lián)框架父框架：包含內(nèi)聯(lián)框架的頁(yè)面（必須在內(nèi)聯(lián)框架中加載的頁(yè)面中使用）4.滾動(dòng)到窗口小部件（錨點(diǎn)鏈接）：將瀏覽器窗口滾動(dòng)到頁(yè)面上窗口小部件的位置1.顯示/隱藏：更改窗口小部件的可見(jiàn)性2.設(shè)置面板狀態(tài)：更改動(dòng)態(tài)面板的可見(jiàn)狀態(tài)3.設(shè)置文本：更改窗口小部件上的文本4.設(shè)置圖像：更改圖像窗口小部件上的圖像5.設(shè)置選中：將指定元件的選中狀態(tài)設(shè)置為真6.設(shè)置選定列表選項(xiàng)：更改下拉列表或列表框的選定列表選項(xiàng)7.啟用/禁用：?jiǎn)⒂没蚪么翱谛〔考＝玫拇靶〔考o(wú)法在Web瀏覽器中進(jìn)行交互，并且如果它具有“已禁用”樣式效果，則其可視外觀會(huì)更改8.移動(dòng)：將小部件移動(dòng)到頁(yè)面上的新位置9.旋轉(zhuǎn)：圍繞選定的錨點(diǎn)旋轉(zhuǎn)窗口小部件10.設(shè)置大小：更改小部件的大小11.帶到前/后：將小部件帶到頁(yè)面深度順序的最前層或最后層12.設(shè)置不透明度：更改窗口小部件的不透明度13.焦點(diǎn)：提供窗口小部件瀏覽器焦點(diǎn)，將文本光標(biāo)移動(dòng)到文本輸入窗口小部件并突出顯示可單擊的窗口小部件14.展開(kāi)/折疊樹(shù)節(jié)點(diǎn)：展開(kāi)或折疊樹(shù)窗口小部件的選定節(jié)點(diǎn)元件的動(dòng)作集中繼器其他動(dòng)作1.添加排序：使用指定的排序條件對(duì)中繼器數(shù)據(jù)集進(jìn)行排序2.刪除排序：從中繼器中刪除排序3.添加過(guò)濾器：使用指定的過(guò)濾條件過(guò)濾中繼器數(shù)據(jù)集4.刪除過(guò)濾器：從中繼器中刪除過(guò)濾5.設(shè)置當(dāng)前頁(yè)面：顯示分頁(yè)中繼器的特定頁(yè)面6.每頁(yè)設(shè)置項(xiàng)目數(shù)：設(shè)置分頁(yè)中繼器每頁(yè)顯示的項(xiàng)目數(shù)7.數(shù)據(jù)集>添加行：向中繼器的數(shù)據(jù)集添加新行8.數(shù)據(jù)集>標(biāo)記行：標(biāo)記中繼器數(shù)據(jù)集中符合指定條件的行9.數(shù)據(jù)集>取消標(biāo)記行：取消標(biāo)記中繼器數(shù)據(jù)集中符合指定條件的行10.數(shù)據(jù)集>更新行：更新中繼器數(shù)據(jù)集中的現(xiàn)有數(shù)據(jù)11.數(shù)據(jù)集>刪除行：從中繼器的數(shù)據(jù)集中刪除行1.設(shè)置自適應(yīng)視圖：更改Web瀏覽器中顯示的自適應(yīng)視圖2.等待：在執(zhí)行任何后續(xù)操作之前，以毫秒為單位添加指定時(shí)間的暫停3.其他：顯示指定的文本描述（作為尚未原型化的操作的占位符）4.設(shè)置變量值：設(shè)置全局變量的值5.觸發(fā)事件：在頁(yè)面，主控或窗口小部件上觸發(fā)指定的事件變量變量是儲(chǔ)存文本和數(shù)值的容器。變量的值可在其它元件中顯示為文本，也可以在條件邏輯中使用。系統(tǒng)變量：是系統(tǒng)已經(jīng)創(chuàng)建好的變量，用于直接獲取對(duì)象的特定屬性值。變量可以分類全局變量：主要是用于不同頁(yè)面之間值的傳遞。局部變量：主要是用于指定頁(yè)面內(nèi)某個(gè)特定對(duì)象，往往和系統(tǒng)變量配合使用。變量的本質(zhì)就是：數(shù)值的獲取和使用系統(tǒng)變量變量全局變量全局變量的設(shè)置通過(guò)交互設(shè)置變量值變量全局變量的訪問(wèn)變量在WEB瀏覽器中查看全局變量的值在預(yù)覽原型時(shí)，可以在WEBBROWER的控制臺(tái)中查看該原型所有全局變量的值。變量局部變量的創(chuàng)建可以在編輯文本的對(duì)話框中直接輸入局部變量的名稱并對(duì)其表達(dá)式進(jìn)行加工，同時(shí)也可以在插入變量或函數(shù)菜單中插入一個(gè)局部變量。此外，當(dāng)你更改下方局部變量名稱時(shí)，上方的局部變量名稱亦會(huì)同步變動(dòng)。局部變量的訪問(wèn)條件邏輯條件邏輯的設(shè)定條件邏輯是一個(gè)規(guī)則系統(tǒng)，比如，你可以規(guī)定在滿足何種條件時(shí)才執(zhí)行某一個(gè)動(dòng)作條件邏輯多個(gè)情形的設(shè)定注意，在IF-ELSE情況下，如果IF中的條件為TRUE時(shí)，后面所有的將不再執(zhí)行。多個(gè)IF-ELSE默認(rèn)情況下，事件的第一個(gè)情形為IF，后面的為ELSE?？梢詫⒑竺娴腅LSE改為IF來(lái)繼續(xù)創(chuàng)建IF-ELSE鏈。右鍵單擊情形名稱選擇切換為[如果]或[否則]動(dòng)畫(huà)和邊界可見(jiàn)性效果通常有4+4+1，一共9種效果可供選擇。這些效果適用于動(dòng)作顯示/隱藏”操作及“

設(shè)置面板狀態(tài)”動(dòng)畫(huà)和邊界1.擺動(dòng)：動(dòng)畫(huà)在開(kāi)始和結(jié)束時(shí)略慢2.線性：動(dòng)畫(huà)在整個(gè)時(shí)間內(nèi)以相同的速度進(jìn)入3.緩慢進(jìn)入：開(kāi)始緩慢，逐漸變快，直到結(jié)束4.緩慢退出：開(kāi)始較愉，逐漸緩慢，直到結(jié)束5.緩進(jìn)緩出：開(kāi)始慢，到中點(diǎn)前快，然后變慢。6.彈跳：具有回彈效果7.彈性：具有彈簧效果運(yùn)動(dòng)效果動(dòng)畫(huà)和邊界移動(dòng)操作可以指定目標(biāo)元件（部件）的移動(dòng)范圍。在更多選項(xiàng)中，單擊添加邊界，即可。上下左右分別可設(shè)置。移動(dòng)的邊界交互樣式鼠標(biāo)懸停：當(dāng)鼠標(biāo)懸停在元件上時(shí)，元件的顯示樣式。鼠標(biāo)按下：當(dāng)鼠標(biāo)按下元件時(shí)，元件的顯示樣式。選中：元件被選中時(shí)的顯示樣式。禁用：元件被停止使用時(shí)的顯示樣式。獲取焦點(diǎn)：當(dāng)光標(biāo)聚焦在元件（如文本框）上的顯示樣式基本樣式：部件的基本樣式，選中“基本樣式”，點(diǎn)擊下拉基本樣式選擇列表，可選擇基本樣式，一般只有“默認(rèn)樣式”，如果用戶有設(shè)置新樣式，則可選擇其他樣式；字體：字體設(shè)置。選中“字體”，點(diǎn)擊字體下拉列表，選擇字體。字體類型：字體類型設(shè)置。選中“字體類型”，點(diǎn)擊字體類型下拉列表，選擇字體類型。字號(hào)：字號(hào)設(shè)置。選中“字號(hào)類型”，點(diǎn)擊字號(hào)下拉列表，選擇字號(hào)。粗體：字體粗體設(shè)置。選中“粗體”，點(diǎn)擊粗體按鈕切換粗體。斜體：字體斜體設(shè)置。選中“斜體”，點(diǎn)擊粗體按鈕切換斜體。下劃線：字體下劃線設(shè)置。選中“下劃線”，點(diǎn)擊下劃線按鈕切換斜。字體顏色：字體顏色設(shè)置。選中“字體顏色”，點(diǎn)擊字體按鈕旁的下拉按鈕，打開(kāi)顏色選擇器，選擇字體顏色。線條顏色：線條顏色設(shè)置。選中“線條顏色”，點(diǎn)擊線條按鈕旁的下拉按鈕，打開(kāi)顏色選擇器，選擇線條顏色。線寬：線條寬度設(shè)置。選中“線寬”，點(diǎn)擊線寬按鈕旁的下拉按鈕，打開(kāi)線寬列表，選擇線寬類型。線型：線條類型設(shè)置。選中“線型”，點(diǎn)擊線型按鈕旁的下拉按鈕，打開(kāi)線型列表，選擇線條類型。圓角半徑：圓角半徑設(shè)置。選中“圓角半徑”，在輸入框內(nèi)輸入圓角半徑的數(shù)值。填充顏色：填充顏色設(shè)置。選中“填充顏色”，點(diǎn)擊油漆桶旁的下拉按鈕，打開(kāi)顏色選擇器，選擇填充顏色。不透明度（%）：填充顏色透明度設(shè)置。選中“不透明度（%）”，在輸入框內(nèi)輸入不透明度（%）的數(shù)值。外部陰影：外部陰影設(shè)置。選中“外部陰影”，點(diǎn)擊外部陰影旁的下拉按鈕，打開(kāi)設(shè)置窗口，設(shè)置偏移范圍、模糊參數(shù)、陰影顏色。內(nèi)部陰影：內(nèi)部陰影設(shè)置。選中“內(nèi)部陰影”，點(diǎn)擊內(nèi)部陰影旁的下拉按鈕，打開(kāi)設(shè)置窗口，可以設(shè)置偏移范圍、模糊參數(shù)、延伸、陰影顏色。文字陰影：文字陰影設(shè)置。選中“文字陰影”，點(diǎn)擊文字陰影旁的下拉按鈕，打開(kāi)設(shè)置窗口，設(shè)置偏移范圍、模糊參數(shù)、陰影顏色。對(duì)齊：字體對(duì)齊設(shè)置。選中“對(duì)齊”，選擇右邊字體對(duì)齊類型：左對(duì)齊、中間對(duì)齊、右對(duì)齊。預(yù)覽：選中“預(yù)覽”可以在設(shè)置時(shí)對(duì)設(shè)置的交互樣式進(jìn)行預(yù)覽。

交互樣式設(shè)置窗口說(shuō)明選擇組1.在畫(huà)布或頁(yè)面概要中選多個(gè)元件；2.在交互窗格的更多屬性中，在“指定選擇組”字段中輸入新選擇組的名稱。此時(shí)即可新增一個(gè)選擇組。3.通過(guò)選擇并清除“指定選擇組”字段的選擇，從選擇組中刪除某元件的選項(xiàng)組指定。選擇組的創(chuàng)建與清除Axure常用元件第四部分Axure常用元件-動(dòng)態(tài)面板動(dòng)態(tài)面板是一個(gè)容器。多個(gè)小部件組成的集合稱為狀態(tài)，多個(gè)狀態(tài)的集合構(gòu)成動(dòng)態(tài)面板。動(dòng)態(tài)面板每次只能呈現(xiàn)一個(gè)狀態(tài)，狀態(tài)的可見(jiàn)性由動(dòng)態(tài)面板的交互功能設(shè)置面板狀態(tài)來(lái)控制。因此，動(dòng)態(tài)面板非常適合創(chuàng)建輪播圖或者側(cè)邊欄。動(dòng)態(tài)面板是Axure中唯一具有拖動(dòng)屬性和滑動(dòng)屬性的部件。也是唯一可以固定到瀏覽器中固定位置的部件（元件），在滾動(dòng)頁(yè)面時(shí)該動(dòng)態(tài)面板不會(huì)隨之移動(dòng)。因此它是導(dǎo)航欄和側(cè)邊欄的最佳選擇。1.創(chuàng)建動(dòng)態(tài)面板動(dòng)態(tài)面板創(chuàng)建的第一種方法，在元件庫(kù)中找到“動(dòng)態(tài)面板”元件，拖入到畫(huà)布中，松開(kāi)鼠標(biāo)即可創(chuàng)建“動(dòng)態(tài)面板”，如圖Axure常用元件-動(dòng)態(tài)面板注意：默認(rèn)情況下，此動(dòng)態(tài)面板的尺寸是固定的，因此如果希望自動(dòng)調(diào)整大小以適合其包含的內(nèi)容（其他元件），請(qǐng)勾選上啟用“自適合內(nèi)容”，如圖所示。將動(dòng)態(tài)面板設(shè)置為“自適合內(nèi)容”允許其寬度和高度自動(dòng)調(diào)整大小以適合其包含的元件。當(dāng)在不同大小的面板狀態(tài)之間切換時(shí)，將會(huì)進(jìn)行自適應(yīng)來(lái)進(jìn)行面板狀態(tài)的大小調(diào)整。要切換此設(shè)置，選中或取消勾選自適合內(nèi)容或選中動(dòng)態(tài)面板并用鼠標(biāo)手動(dòng)調(diào)整其大小。Axure常用元件-動(dòng)態(tài)面板動(dòng)態(tài)面板創(chuàng)建的第二種方法，使用現(xiàn)有元件創(chuàng)建，即在畫(huà)布中選擇已經(jīng)有的部件組合，單擊鼠標(biāo)右鍵，然后在菜單中選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，這種方式創(chuàng)建更方便，更常見(jiàn)些。如圖2.動(dòng)態(tài)面板的遮罩默認(rèn)情況下，動(dòng)態(tài)面板覆蓋有藍(lán)色遮罩，以便更容易在畫(huà)布上被識(shí)別?？梢栽贏xure菜單欄中的“視圖”>“遮罩”中切換遮罩開(kāi)關(guān)，如圖Axure常用元件-動(dòng)態(tài)面板3.設(shè)置單個(gè)面板狀態(tài)雙擊畫(huà)布上的動(dòng)態(tài)面板進(jìn)入狀態(tài)編輯模式，會(huì)看到一個(gè)青色的邊框及畫(huà)布頂部的工具欄指示。在此模式下，可以在動(dòng)態(tài)面板的每一個(gè)狀態(tài)中添加，刪除和編輯包含在單個(gè)state里面的元件，。還可以通過(guò)單擊畫(huà)布右上角的“隔離”來(lái)切換外部元件的可見(jiàn)性，如圖所示4.“概要”窗格中設(shè)置動(dòng)態(tài)面板在概要窗格中可以直接選中面板的狀態(tài)或單個(gè)狀態(tài)包含的部件，然后在畫(huà)布中編輯選中的對(duì)象，。在此區(qū)域亦可進(jìn)行狀態(tài)的復(fù)制、刪除、新增，按住并拖動(dòng)可進(jìn)行排序，如圖所示Axure常用元件-中繼器中繼器是Axure中一個(gè)高級(jí)的元件,用于顯示文本、圖像和其他元素的重復(fù)集合。中繼器存放數(shù)據(jù)集的容器，通常使用中繼器來(lái)顯示商品列表、聯(lián)系人信息和數(shù)據(jù)表，容器中的每一個(gè)項(xiàng)目稱作"item"，由于"item中的數(shù)據(jù)由數(shù)據(jù)集來(lái)驅(qū)動(dòng)，因此每一個(gè)item可以在展示的時(shí)候與其他不同。中繼器由數(shù)據(jù)集（可以理解為輕量級(jí)的數(shù)據(jù)庫(kù)）來(lái)驅(qū)動(dòng)，因此它可以用來(lái)顯示動(dòng)態(tài)排序和過(guò)濾。中繼器部件可在Axure左側(cè)的元件部分，直接拖至畫(huà)布（中間的區(qū)域）中，如圖選中后雙擊“中繼器”元件，就會(huì)進(jìn)入“中繼器”面板，，這里就可以對(duì)中繼器進(jìn)行編輯和設(shè)置。在“樣式”面板中可以對(duì)中繼器的行數(shù)、列數(shù)、行中內(nèi)容進(jìn)行設(shè)置，如圖所示。Axure常用元件-中繼器1.間距、布局和分頁(yè)默認(rèn)情況下，所有中繼器的項(xiàng)（item)都是可見(jiàn)的，并在一列中垂直布局，項(xiàng)（item)之間沒(méi)有空格。可以使用“樣式”窗格的“間距”，“布局”和“分頁(yè)”中的選項(xiàng)對(duì)其進(jìn)行更改，如圖所示。注：如果分頁(yè)每頁(yè)展示數(shù)大于item數(shù)時(shí)，展示直觀上只有一頁(yè)。2.適應(yīng)HTML內(nèi)容“適應(yīng)HTML內(nèi)容”復(fù)選框位于“樣式”窗格中數(shù)據(jù)集的正上方，默認(rèn)情況下處于啟用狀態(tài)。啟用此選項(xiàng)后，每個(gè)中繼器項(xiàng)將自動(dòng)調(diào)整大小以適合其包含的小部件，如圖所示。如果禁用此選項(xiàng)，則每個(gè)中繼器項(xiàng)目將保持固定大小，而不管其包含的小組件的大小，位置或可見(jiàn)性是否發(fā)生任何更改。如果小部件超出其自身項(xiàng)目的固定邊界，則動(dòng)態(tài)移動(dòng)或顯示的小部件可能會(huì)與其他中繼器項(xiàng)重疊。Axure常用元件-中繼器3.中繼器的遮罩（Mask)默認(rèn)情況下，中繼器覆蓋有綠色遮罩，以使其包含的小部件更容易與畫(huà)布上的其他小部件區(qū)分開(kāi)來(lái)。可以在Axure中“視圖”>“遮罩”中切換開(kāi)關(guān)，如圖所示。在中繼器中，由文本、矩形、圖片和其他元素的重復(fù)集合稱為項(xiàng)目item?？梢灾苯与p擊畫(huà)布上的“中繼器”或在“概要-頁(yè)面”欄目中直接雙擊中繼器或者中繼器item包含的部件進(jìn)入到item項(xiàng)目，。在編輯項(xiàng)目item時(shí)，將只看到其包含的窗口小部件的一個(gè)實(shí)例，如圖所示。注：如果進(jìn)入中繼器后其他組件對(duì)中繼器的item有影響，可以通過(guò)單擊畫(huà)布右上角的“隔離”來(lái)隱藏頁(yè)面上的其他部件。Axure常用元件-中繼器4.數(shù)據(jù)集（1）添加數(shù)據(jù)控制中繼器項(xiàng)目數(shù)據(jù)展示的數(shù)據(jù)表稱為“數(shù)據(jù)集”。可以在“樣式”欄目中查看和編輯中繼器的數(shù)據(jù)集。通過(guò)“單擊“添加列”，“添加行”或使用表格上方的圖標(biāo)，可以增加行或者列。同時(shí)也可以在下面的單元格中單擊鼠標(biāo)右鍵來(lái)增加/減少行或者列，。導(dǎo)入圖片需要在，每行的圖片列里右鍵選擇導(dǎo)入圖片，找到需要圖片，如圖所示Tips:有多少行說(shuō)明有多少個(gè)重復(fù)的item；有多少個(gè)列，說(shuō)明就有多少個(gè)需要傳遞的變量（數(shù)據(jù)）?？梢酝ㄟ^(guò)Ctrl+V(Windows)或者CMD+V(Mac)將數(shù)據(jù)直接粘貼到這里（當(dāng)然圖片還是需要單獨(dú)導(dǎo)入的）。Axure常用元件-中繼器（2）數(shù)據(jù)集的數(shù)據(jù)顯示文本的鍵入：選中右側(cè)數(shù)據(jù)集中單元格輸入，如圖所示文本值在item里面的展示：依次點(diǎn)擊每項(xiàng)加載時(shí)–>設(shè)置文本–>選擇元件,選擇“設(shè)置文本”點(diǎn)擊“fx”圖標(biāo)，如圖4-57所示，“插入變量或函數(shù)”選擇一個(gè)中繼器的列名，如圖所示，點(diǎn)擊完成即可Axure常用元件-內(nèi)聯(lián)框架內(nèi)聯(lián)框架可以將HTML、視頻、音頻和其他媒體文件嵌入到AxureRP中。比如youku視頻和Baidu地圖，也可以將原型中的其他頁(yè)面嵌入其中。在元件庫(kù)中找到內(nèi)聯(lián)框架，拖入工作區(qū)域中松開(kāi)鼠標(biāo)即可開(kāi)始使用中繼器，，雙擊內(nèi)聯(lián)框架元件，彈出了“鏈接屬性”的對(duì)話框如圖所示，此處可以選擇鏈接至Axure文件中的其他頁(yè)面或者外部URL地址。Axure常用元件-內(nèi)聯(lián)框架默認(rèn)情況下，內(nèi)聯(lián)框架有邊框，可以在“樣式”窗格中的“隱藏邊框”中打開(kāi)或關(guān)閉。當(dāng)內(nèi)聯(lián)框架內(nèi)的內(nèi)容超過(guò)其本身大小時(shí)，可以設(shè)置內(nèi)聯(lián)框架進(jìn)行滾動(dòng)，如圖1.內(nèi)聯(lián)框架樣式內(nèi)聯(lián)框架中的內(nèi)容會(huì)在Web瀏覽器中加載，但不會(huì)在Axure畫(huà)布中加載，為方便在畫(huà)布中展示，可對(duì)預(yù)覽的樣式進(jìn)行選擇：

無(wú)預(yù)覽（默認(rèn)）

視頻

地圖

自定義預(yù)覽（允許導(dǎo)入自己的圖像）注意：預(yù)覽圖像僅出現(xiàn)在AxureRP的畫(huà)布上；它不會(huì)在網(wǎng)絡(luò)瀏覽器中顯示。Axure常用元件-內(nèi)聯(lián)框架2.內(nèi)聯(lián)框架特殊交互可以通過(guò)其他元件在內(nèi)聯(lián)框架上使用交互事件，“在框架中打開(kāi)”，比如在一個(gè)按鈕上設(shè)置一個(gè)鼠標(biāo)單擊時(shí)的動(dòng)作，打開(kāi)內(nèi)聯(lián)框架中的一個(gè)鏈接或者頁(yè)面，。注意：在上述操作中可選擇在父級(jí)框架中打開(kāi)鏈接或者是頁(yè)面。此時(shí)會(huì)在框架的上一級(jí)中打開(kāi)鏈接，如圖所示3.內(nèi)聯(lián)框架的限制某些網(wǎng)站可能會(huì)被限制應(yīng)用于內(nèi)聯(lián)框架，比如像Yahoo。內(nèi)聯(lián)框架和框架內(nèi)的內(nèi)容頁(yè)面之間變量的傳遞在大多數(shù)瀏覽器中不適用。查看原型第五部分查看原型當(dāng)項(xiàng)目完成后，單擊工具欄中“預(yù)覽”按鈕或按【F5】鍵，。也在“菜單欄”中可以選擇“發(fā)布>預(yù)覽”選項(xiàng)，如圖所示，即可在瀏覽器中查看原型效果。Axure原型快速預(yù)覽查看原型在進(jìn)行預(yù)覽時(shí)，會(huì)看到默認(rèn)界面的預(yù)覽效果，。頁(yè)面分成兩部分，左面是站點(diǎn)地圖，右面是效果，讀者可以對(duì)齊進(jìn)行設(shè)置，選擇“Projectpages”選項(xiàng)，彈出“站點(diǎn)地圖”頁(yè)面，如圖選擇“發(fā)布>預(yù)覽選項(xiàng)”選擇，彈出“預(yù)覽選項(xiàng)”對(duì)話框，如圖所示。在此對(duì)話框中可以設(shè)置在默認(rèn)情況下，大家選擇那種瀏覽器進(jìn)行原型預(yù)覽。預(yù)覽選項(xiàng)設(shè)置查看原型單擊“發(fā)布”按鈕，在下拉菜單中選擇“生成HTML文件”選項(xiàng)，，彈出“生成HTML”對(duì)話框，選擇想要保存項(xiàng)目的位置，如圖所示。點(diǎn)擊發(fā)布即可把項(xiàng)目生成HTML文件。在默認(rèn)瀏覽器找那個(gè)預(yù)覽。Axure原型生成HTML文件查看原型在“生成HTML”對(duì)話框中可以配置默認(rèn)HTML生成器的選項(xiàng)?？梢詣?chuàng)建多個(gè)HTML生成器，在大型項(xiàng)目中可以將圖形切成多個(gè)部分輸出，以加快生成的速度。生成之后可以在Web瀏覽器中查看。可以在“菜單欄”中選擇“發(fā)布>更多生成器和配置文件”選項(xiàng)，彈出“生成器配置”對(duì)話框，。雙擊每個(gè)選項(xiàng)，可以彈出更多設(shè)置對(duì)話框，然后對(duì)生成器進(jìn)行設(shè)置。例如雙擊“打印”選項(xiàng)，可以在彈出對(duì)話框中完成更多設(shè)置，如圖所示。Axure原型生成HTML文件查看原型選擇“發(fā)布>生成Word說(shuō)明書(shū)”選項(xiàng)，彈出“生成說(shuō)明書(shū)”對(duì)話框，。在生成說(shuō)明書(shū)對(duì)話框中，選擇“頁(yè)面”選項(xiàng)，可以在對(duì)話框中設(shè)置生成說(shuō)明書(shū)的頁(yè)面選項(xiàng)，如圖所示。在“母版”選擇頁(yè)面中，可以選擇需要出現(xiàn)的Word文檔中的母版及形式，。在“屬性”選擇頁(yè)面中，可以選擇生成時(shí)需要包含的頁(yè)面，而且還提供了多種豐富的選項(xiàng)和配置頁(yè)面信息，這些配置可以應(yīng)用于Axure文件頁(yè)面管理面板中所有的頁(yè)面，如圖所示。Axure原型生成Word說(shuō)明書(shū)查看原型在“快照”頁(yè)面中，AxureRP9生成Word文檔功能的一項(xiàng)特別節(jié)省時(shí)間的方式就是自動(dòng)生成所有頁(yè)面的快照，。在“元件”頁(yè)面中，元件表選項(xiàng)提供了多種選項(xiàng)配置功能，可以對(duì)Word文檔中包含的元件說(shuō)明信息進(jìn)行管理，如圖所示。在“布局”頁(yè)面中，，可以對(duì)Word文檔頁(yè)面布局進(jìn)行選擇。而在“模板”頁(yè)面中，AxureRP9會(huì)使用一個(gè)Word模板，基于前面格式選項(xiàng)的設(shè)置，將所有內(nèi)容組織起來(lái)，在Word模板中可以導(dǎo)入模板，還可以創(chuàng)建模板，如圖所示。Axure原型生成Word說(shuō)明書(shū)項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)第六部分項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)本案例需要設(shè)計(jì)制作購(gòu)物網(wǎng)頁(yè)的商品輪播圖效果，案例效果是通過(guò)動(dòng)態(tài)面板元件，讓四張商品圖片隨著一定順序進(jìn)行循環(huán)播放，圖片中的圓點(diǎn)也會(huì)隨著圖片的改變而進(jìn)行相應(yīng)的變化。輪播效果實(shí)現(xiàn)的原理是，多張圖片放進(jìn)一個(gè)動(dòng)態(tài)面板的不同狀態(tài)里面，“載入時(shí)”添加“切換動(dòng)態(tài)面板的狀態(tài)”的交互效果，這里使用四張圖片來(lái)演示效果，將四張圖片“轉(zhuǎn)換為動(dòng)態(tài)面板”，放在四個(gè)不同的狀態(tài)下，以及四個(gè)圓點(diǎn)對(duì)應(yīng)圖片狀態(tài)的一個(gè)切換設(shè)置，之后需要在交互中進(jìn)行圖片輪流切換圖片的設(shè)置，圖片切換的效果如圖所示使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)制作步驟1.元件基礎(chǔ)樣式設(shè)置在左側(cè)元件庫(kù)中，選中“動(dòng)態(tài)面板”元件，將其拖入工作區(qū)內(nèi)，。在“交互”面板上，設(shè)置“動(dòng)態(tài)面板”的名稱為“輪播”，如圖所示使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)雙擊“動(dòng)態(tài)面板”進(jìn)入“動(dòng)態(tài)面板”的編輯頁(yè)面，連續(xù)單擊“添加狀態(tài)”按鈕，新建三個(gè)“動(dòng)態(tài)面板”狀態(tài)，。在每個(gè)狀態(tài)中都添加一張圖片，如圖所示。添加完成后，可以在“概要”面板中預(yù)覽圖片和狀態(tài)，如圖所示使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)在左側(cè)元件庫(kù)中找到“動(dòng)態(tài)面板”元件，拖入工作區(qū)內(nèi)，設(shè)置名稱為“but-one”，，然后復(fù)制三個(gè)狀態(tài)，然后每個(gè)狀態(tài)中都添加四個(gè)圓形，設(shè)置大小為12px*12px，然后分別在四個(gè)狀態(tài)中按順序給代表不同順序圖片的圓形設(shè)置一個(gè)不同的顏色，其他保持默認(rèn)顏色，如圖所示在添加兩個(gè)控制左/右進(jìn)行切換的按鈕，并在開(kāi)始時(shí)設(shè)置為“隱藏”，。之后將兩個(gè)動(dòng)態(tài)面板和這個(gè)控制按鈕全部選中“轉(zhuǎn)換為動(dòng)態(tài)面板”，命名為“動(dòng)態(tài)輪播圖”，如圖所示。使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)2.設(shè)置元件自動(dòng)輪播的交互效果。給“動(dòng)態(tài)輪播圖”添加交互，在“交互”面板中，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“鼠標(biāo)移入時(shí)”事件，添加目標(biāo)為“控制按鈕”，設(shè)置為“顯示”，動(dòng)畫(huà)效果為“彈出效果”，如圖所示繼續(xù)為“輪播”圖片，點(diǎn)擊“新建按鈕”，在下拉列表中選擇“載入時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加目標(biāo)為“輪播”，設(shè)置詳細(xì)參數(shù)，如圖所示。使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)為動(dòng)態(tài)面板“but-one”添加交互動(dòng)作，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“載入時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加目標(biāo)為“but-one”，設(shè)置詳細(xì)參數(shù)，如圖所示“控制按鈕”以及“but-one”按鈕時(shí)圖片切換的效果。在“but-one”動(dòng)態(tài)面板中，四個(gè)不同狀態(tài)里的四個(gè)圓形分別添加交互事件，首先在狀態(tài)1中，對(duì)第二個(gè)按鈕，進(jìn)行點(diǎn)擊交互的設(shè)置，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“單擊時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加兩個(gè)目標(biāo)分別是“輪播”動(dòng)態(tài)面板和“but-one”動(dòng)態(tài)面板，因?yàn)榇藭r(shí)是需要點(diǎn)擊某個(gè)按鈕切換到相應(yīng)的頁(yè)面，所以設(shè)置的切換狀態(tài)就不需要循環(huán)，只需要切換好制定的狀態(tài)即可，，當(dāng)狀態(tài)切換完后如果沒(méi)有交互操作需要再次讓兩個(gè)動(dòng)態(tài)面板開(kāi)始重新循環(huán)切換狀態(tài)，設(shè)置詳細(xì)參數(shù)如圖所示使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)接下來(lái)給狀態(tài)1中第三個(gè)圓形添加交互動(dòng)作，如圖所示同理狀態(tài)1中其他“圓形”添加的交互事件，和其他三個(gè)狀態(tài)里的圓形添加的交互事件都類似，只不過(guò)需要注意切換到相應(yīng)的狀態(tài)即可。給動(dòng)態(tài)面板“控制按鈕”中的左右兩個(gè)箭頭添加交互，首先選中“右箭頭”元件，在“交互”面板中，點(diǎn)擊“新建交互”按鈕，動(dòng)作選擇“設(shè)置面板狀態(tài)”，添加兩個(gè)目標(biāo)分別是“輪播”和“B.ut-one”，設(shè)置詳細(xì)參數(shù)如圖所示。同理“左箭頭”設(shè)置跟“右箭頭”除了切換狀態(tài)的順序和動(dòng)畫(huà)方向不一樣外其他都是正常的切換效果。使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)交互都設(shè)置完成后，點(diǎn)擊“預(yù)覽”按鈕，打開(kāi)瀏覽器預(yù)覽廣告輪播頁(yè)面，可以發(fā)現(xiàn)圖片切換和圓形變化是對(duì)應(yīng)的，如圖所示使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)本案例實(shí)現(xiàn)在瀏覽網(wǎng)頁(yè)時(shí)，某些懸浮按鈕點(diǎn)擊進(jìn)行顯示與隱藏效果的制作。懸浮按鈕實(shí)現(xiàn)顯示與隱藏效果原理就是：利用Axure“動(dòng)態(tài)面板”元件，通過(guò)“新建交互”來(lái)切換狀態(tài)，并根據(jù)相應(yīng)的尺寸進(jìn)行移動(dòng)和設(shè)置動(dòng)態(tài)面板顯示的大小來(lái)實(shí)現(xiàn)。懸浮按鈕顯示與隱藏效果，如圖所示使用“動(dòng)態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)制作步驟：1.元件基礎(chǔ)樣式設(shè)置通過(guò)“元件庫(kù)”提供的元件搭建一個(gè)設(shè)置的懸浮按鈕，根據(jù)需要設(shè)置一個(gè)尺寸，本案例尺寸為：50*50，，在制作一個(gè)用于彈出的“工具按鈕”，本案例尺寸為：130*130，如圖所示。這兩個(gè)尺寸在使用交互功能時(shí)需要進(jìn)行使用，所有在設(shè)置尺寸時(shí)盡量設(shè)置成比較好計(jì)算的尺寸。按鈕元件制作完后，選中“懸浮按鈕”，鼠標(biāo)右鍵，在彈出的下拉列表中選擇“轉(zhuǎn)換為動(dòng)態(tài)面板”，。設(shè)置名稱為“懸浮按鈕”，如圖所示。使用“動(dòng)態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果項(xiàng)目實(shí)施-Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)雙擊“懸浮按鈕”動(dòng)態(tài)面板，進(jìn)入動(dòng)態(tài)面板編輯頁(yè)面，在頂部選擇“添加狀態(tài)”，并命名為“工具按鈕”，。狀態(tài)添加完后，把之前做的工具按鈕放進(jìn)動(dòng)態(tài)面板的“工具按鈕”狀態(tài)里，并注意一下此時(shí)的位置為（0，0），如圖所示。動(dòng)態(tài)面板設(shè)置完成后，為了能在瀏覽器中有一個(gè)直觀的感受，在“元件庫(kù)”中找到一個(gè)“矩形”，拖入工作區(qū)，命名為“背景”，設(shè)置尺寸為：960*660，，把“懸浮按鈕”動(dòng)態(tài)面板，放在背景的右下角，本案例中“懸浮按鈕”動(dòng)態(tài)面板所在位置為：（900，600），如圖所示。使用“動(dòng)態(tài)面板+顯示/隱藏”制作懸浮按鈕顯示與隱藏效果項(xiàng)目