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

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

使用axure直接預(yù)覽

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

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

或者Y（W

與

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

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

不透明度排版元件的樣式

填充邊框元件的樣式

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

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

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

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

執(zhí)行case1中actions；｝

if(條件2)｛

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

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

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

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

視頻

地圖

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