Axure-RP8原型設計圖解第11章課件

Axure原型設計工具不僅可以設計出低保真的軟件原型，同時也可以設計出高保真原型。高保真原型的效果，不管在軟件界面還是在軟件交互上，幾乎和真實軟件的體驗效果一樣。圖11.1所示為攜程旅游網(wǎng)站首頁的原型設計。

圖11.1攜程旅游網(wǎng)站首頁

11.1

需求描述11.2

設計思路11.3

準備工作11.4

設計流程11.5

小結(jié)11.1?

需求描述1

繪制蜜淘全球購網(wǎng)站的登錄頁面并進行表單驗證。2

繪制蜜淘全球購網(wǎng)站的注冊頁面，不進行表單驗證。3

繪制蜜淘全球購網(wǎng)站的首頁，進行頁面布局設計。4

將蜜淘全球購網(wǎng)站首頁的頂部信息制作成母版使用。5

將蜜淘全球購網(wǎng)站首頁的導航菜單制作成母版使用。6

將蜜淘全球購網(wǎng)站首頁的版權(quán)信息制作成母版使用。7

將蜜淘全球購網(wǎng)站首頁的導航菜單固定到瀏覽器頂部，不會隨著滾動條的滾動而滾動。8

進行蜜淘全球購網(wǎng)站商品詳情頁的布局設計，并將頂部信息母版、導航菜單母版、版權(quán)信

息母版引入到商品詳情頁進行使用。11.1?需求描述11.2

設計思路11.3

準備工作11.4

設計流程11.5

小結(jié)11.2?

設計思路02PRAT03PRAT04PRAT01PRAT在進行頁面布局，需要用到標簽元件、矩形元件、文本框（單行）元件、橫線元件、圖片元件、動態(tài)面板元件等。

進行注冊表單的驗證，需要用到動態(tài)面板和條件設置。當用戶輸入用戶名和密碼的時候，錯誤的提示信息放在動態(tài)面板里，根據(jù)不同的條件顯示不同的提示信息。

倒計時交互設計，需要使用頁面加載時觸發(fā)事件，并且使用兩個同樣的頁面加載時觸發(fā)事件。將網(wǎng)站的頂部信息、導航菜單和版權(quán)信息制作成母版，其他頁面直接使用。05PRAT06PRAT海報輪播效果制作，需要借助于動態(tài)面板元件，在多個狀態(tài)中自動切換顯示。圖片放大縮小效果制作，需要動態(tài)地改變圖片的尺寸，以實現(xiàn)圖片放大縮小的效果。11.1?需求描述11.2?設計思路11.3

準備工作11.4

設計流程11.5

小結(jié)11.3?

準備工作進行高保真原型設計，需要使用大量的圖片。在真實項目中，交互設計師會繪制一版低保真原型，交給視覺設計師（UI設計師或者美工）來進行界面的設計。他們會制作界面圖片，并且切圖。交互設計師拿到這些圖片，在低保真原型里進行替換，最終才能制作出一版高保真設計原型。（1）需要準備攜程旅游網(wǎng)站登錄界面和注冊界面相關(guān)圖片（見圖11.2和圖11.3）。

圖11.2攜程旅游網(wǎng)站注冊界面

圖11.3攜程旅游網(wǎng)站登錄界面

（2）需要準備攜程旅游網(wǎng)站首頁界面的圖片（見圖11.4）。

圖11.4攜程旅游網(wǎng)站首頁界面

11.1?需求描述11.2?設計思路11.3?準備工作11.4

設計流程11.5

小結(jié)11.4設計流程 11.4.1網(wǎng)站注冊表單布局設計

攜程旅游網(wǎng)站的注冊表單是一個向?qū)捅韱?。注冊分為三個步驟：填寫、驗證、注冊成功。注冊表單內(nèi)容包含手機號、Email、密碼、確認密碼等表單項，如圖11.5、圖11.6所示。

圖11.5填寫表單

圖11.6郵箱驗證

1. 進入注冊頁面，拖曳一個圖片元件，用“1-狀態(tài)欄”圖片替換圖片元件，x、y坐標值

為（0,0）；拖曳一個圖片元件，用“27-填寫向?qū)А眻D片替換圖片元件，x、y坐標值為（0,0），如圖11.7所示。

圖11.7狀態(tài)欄和表單向?qū)?/p>

2. 拖曳一個文本標簽元件，文本內(nèi)容命名為“會員注冊注冊成功可獲1000積分+返現(xiàn)特權(quán)”，將“會員注冊”4個字設置為24號字，將“1000”字體顏色設置成綠色（006600），字體加粗，將“返現(xiàn)”字體顏色設置成橙色（FF9900），字體加粗，如圖11.8所示。

圖11.8會員注冊說明

拖曳3個文本標簽元件，文本內(nèi)容分別輸入為“手機號”“Email”和“密碼”，字號設

置為16號字；拖曳一個矩形1元件，寬度設置為320，高度設置為32，邊框顏色為灰色

（CCCCCC）；拖曳個文本框元件，寬度設置為210，高度設置為25，如圖11.9所示。設置文本框的提示文字為“可用作登錄名”，去掉隱藏邊框，然后再復制出兩個，作為

Email和密碼的輸入框，它們的提示文字分別為“可用作登錄名”和“8-20位字母、數(shù)字和符號”，如圖11.10所示。

圖11.10設置提示文字

圖11.9表單標簽和邊框

5. 拖曳一個動態(tài)面板元件，動態(tài)面板的名稱“確認密碼組合”，狀態(tài)命名為“密碼組合”，復制手機號標簽和文本框到“密碼組合”狀態(tài)里，修改表單標簽為“確認密碼”，提示文字為“再次輸入密碼”，如圖11.11所示。

圖11.11確認密碼

6. 拖曳一個復選框元件，文本內(nèi)容重新命名為“同意<<攜程旅行網(wǎng)服務協(xié)議>>”，拖曳一個圖片元件，用“20-驗證按鈕”圖片替換圖片元件；拖曳一個文本標簽元件，放置在Email文本輸入框的后面，文本內(nèi)容為“填寫Email并通過驗證，可額外獲得200積分！”，將“200”字體設置為綠色（006600），字體加粗，如圖11.12所示。

圖11.12注冊協(xié)議

7. 拖曳一個動態(tài)面板元件，動態(tài)面板名稱為“密碼強度顯示區(qū)”，建立4個狀態(tài)“密碼默認等級”“密碼弱”“密碼中”和“密碼強”，分別用“14-注冊密碼默認”“15-注冊密碼等級弱”“16-注冊密碼等級中”和“14-注冊密碼等級強”圖片作為狀態(tài)內(nèi)容，如圖11.13所示。

圖11.13密碼強度

11.4.2網(wǎng)站注冊表單校驗 1．密碼校驗內(nèi)容

當密碼輸入框獲得焦點時，顯示提示信息“請設置登錄密碼”，密碼強度為默認等級。

當密碼長度小于8位、大于20位時，提示“密碼需為8-20個字符,由字母、數(shù)字和符號組成。”，密碼強度為默認等級。當密碼長度等于8位時，提示“密碼過于簡單，有被盜風險”，密碼強度為弱等級。當密碼長度大于8位、小于等于10位時，隱藏密碼提示信息，密碼強度為中等級。當密碼長度大于10位、小于等于20位時，隱藏密碼提示信息，密碼強度為強等級。

（1）拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“密碼驗證顯示區(qū)”，建立3個狀態(tài)“密碼默認提示”“密碼過于簡單”和“8-20位字母或數(shù)字”，分別用“17-密碼-請設置密碼”“19-密碼-過于簡單”和“18-密碼-8到20個字符”圖片作為狀態(tài)內(nèi)容，如圖11.14所示。

圖11.14密碼驗證顯示區(qū)

（2）將“密碼驗證顯示區(qū)”動態(tài)面板隱藏起來，置于底層，選中密碼輸入框，添加獲得焦點時觸發(fā)事件，顯示“密碼驗證顯示區(qū)”動態(tài)面板，在更多選項里選擇推拉元件，設置“密碼驗證顯示區(qū)”動態(tài)面板的狀態(tài)為“密碼默認提示”，如圖11.15所示。

（3）密碼輸入框失去焦點時，添加失去焦點時觸發(fā)事件，如圖11.16所示。

圖11.15密碼輸入框獲得焦點

圖11.16密碼輸入框失去焦點

2．確認密碼校驗內(nèi)容

當確認密碼輸入框獲得焦點時，顯示提示信息“請再次輸入密碼”。

當確認密碼輸入框失去焦點時，如果兩次密碼輸入不一致，提示“您兩次輸入的密碼不一致”。

（1）拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“確認密碼顯示區(qū)”，建立兩個狀態(tài)“請確認密碼”和“兩次密碼不一致”，分別用“20-確認密碼-請再次輸入密碼”和“21-確認密碼-兩次密碼不一致”圖片作為狀態(tài)內(nèi)容，如圖11.17所示。

圖11.17確認密碼顯示區(qū)

（2）將“確認密碼顯示區(qū)”動態(tài)面板隱藏起來，置于底層。選中確認密碼輸入框，添加獲得焦點時觸發(fā)事件，顯示“確認密碼顯示區(qū)”動態(tài)面板，在更多選項里選擇推拉元件，設置“確認密碼顯示區(qū)”動態(tài)面板的狀態(tài)為“請確認密碼”，如圖11.18所示。

圖11.18確認密碼輸入框獲得焦點

（3）給密碼輸入框和確認密碼輸入框進行標簽命名，分別命名為“密碼輸入框”和“確認密碼輸入框”，確認密碼輸入框失去焦點時，添加失去焦點時觸發(fā)事件，判斷密碼和確認密碼兩次輸入是否一致，如圖11.19所示。

圖11.19確認密碼輸入框失去焦點

11.4.3倒計時交互設計

在填寫完注冊表單后，會進行驗證。有兩種方式進行驗證，一種是手機號

驗證，另一種是郵箱驗證。如果沒有填寫手機號會進入郵箱驗證頁面，郵箱驗證頁面有倒計時交互效果，如果在規(guī)定時間內(nèi)沒有輸入驗證碼，可以重新獲取驗證碼，如圖11.20所示。

圖11.20郵箱驗證

在頁面區(qū)域新建一個頁面“驗證”，進入頁面，拖曳3個圖片元件，用“1-狀態(tài)欄”“28-驗證向?qū)А焙汀?-郵箱驗證內(nèi)容”圖片替換圖片元件，如圖11.21所示。拖曳一個矩形1元件，寬度設置為124，高度設置為24，圓角半徑為5，文本內(nèi)容為“30s后可重新獲取”，標簽命名為“獲取驗證碼”，如圖11.22所示。

圖11.21郵箱驗證布局

圖11.22倒計時布局設計

新增一個全局變量“totaltime”，默認值為“30”，添加頁面載入時觸發(fā)事件。添加條件，

如果totaltime大于0，讓變量值減1，然后給獲取驗證碼重新設置文本內(nèi)容，等待1秒鐘后，

重新加載頁面載入時觸發(fā)事件，如圖11.23所示。如果變量值“totaltime”等于0，設置獲取驗證碼文本內(nèi)容為“30s后可重新獲取”，設置變量值totaltime等于30，等待1秒鐘后，重新加載頁面載入時觸發(fā)事件，如圖11.24所示。

圖11.23頁面載入時觸發(fā)事件

圖11.24重新獲取驗證碼

11.4.4網(wǎng)站登錄布局與交互設計

攜程旅游網(wǎng)站登錄提供兩種登錄方式，一種是普通登錄方式，另一種是手機動態(tài)密碼登錄方式。兩種登錄方式的切換采用單選按鈕操作來完成，如圖11.25、圖11.26所示。

圖11.25普通登錄

圖11.26手機動態(tài)密碼登錄

1. 在頁面區(qū)域新建一個頁面“登錄”，拖曳兩個圖片元件，用“6-攜程LOGO”和“7-登錄圖片”替換圖片元件，如圖11.27所示。

圖11.27網(wǎng)站LOGO及廣告

2. 拖曳一個矩形1元件，寬度設置為390，高度設置為433，邊框顏色設置為藍色（00CCCC），標簽命名為“登錄邊框”；拖曳一個文本標簽元件，文本內(nèi)容命名為“會員登錄”，字號為16號字；拖曳一個文本標簽元件，文本內(nèi)容命名為“立即注冊，享積分換禮返現(xiàn)等專屬優(yōu)惠”，字號設置為12號字，“立即注冊”字體顏色為藍色（00CCCC）；拖曳一個橫線元件，作為間隔線，如圖11.28所示。圖11.28登錄邊框3. 拖曳兩個單選按鈕元件，文本內(nèi)容分別命名為“普通登錄”和“手機動態(tài)密碼登錄”，同時選中這兩個單選按鈕元件，右鍵指定單選按鈕組為“登錄按鈕組”，這樣每次只能選中一個單選按鈕元件，如圖11.29所示。

圖11.29登錄按鈕組

拖曳一個動態(tài)面板元件，動態(tài)面板命名為“登錄顯示區(qū)”，建立兩種狀態(tài)“普通登錄”和“手機動態(tài)密碼登錄”，如圖11.30所示。進入“普通登錄”狀態(tài)，拖曳3個文本標簽元件，文本內(nèi)容分別為“登錄名”“密碼”和“忘記密碼？”，“登錄名”和“密碼”字號設置為15號字，“忘記密碼？”設置為12號字，藍色字體（0000FF）；拖曳兩個文本框元件，寬度設置為195，高度設置為30，登錄名輸入添加提示文字“用戶名/卡號/手機/郵箱”，如圖11.31所示。

圖11.30登錄顯示區(qū)

圖11.31登錄名及密碼6. 拖曳一個復選框元件，文本內(nèi)容為“30天內(nèi)自動登錄”；拖曳一個圖片元件，用“12-登錄按鈕”圖片替換圖片元件，作為登錄按鈕，如圖11.32所示。

圖11.32登錄按鈕

7. 進入“手機動態(tài)密碼登錄”狀態(tài)，拖曳3個文本標簽元件，文本內(nèi)容分別為“登錄名”“驗證碼”和“密碼”，字號設置為15號字；拖曳3個文本框元件，輸入框添加提示文字分別為“請輸入注冊手機號”“不區(qū)分大小寫”和“動態(tài)密碼”，如圖11.33所示。

圖11.33手機號及密碼

拖曳兩個圖片元件，用“11-登錄驗證碼”和“25-發(fā)送動態(tài)密碼默認”圖片替換圖片元件，作為驗證碼和獲取動態(tài)密碼；拖曳一個復選框元件，文本內(nèi)容為“30天內(nèi)自動登錄”；拖曳一個圖片元件，用“12-登錄按鈕”圖片替換圖片元件，作為登錄按鈕，如圖11.34所示?；氐降卿涰撁妫x中“登錄顯示區(qū)”動態(tài)面板，單擊鼠標左鍵選擇“自動調(diào)整為內(nèi)容尺寸”選項，讓動態(tài)面板跟隨內(nèi)容的變化而變化；拖曳一個圖片元件，用“10-合作登錄”圖片替換圖片元件，如圖11.35所示。

圖11.34登錄按鈕及驗證碼

圖11.35合作登錄方式

10. 選中普通登錄單選按鈕，給它添加選中時觸發(fā)事件。設置“登錄顯示區(qū)”動態(tài)面板的狀態(tài)為“普通登錄”，并且勾選“推動/拉動”元件；設置“登錄邊框”的尺寸，寬度設置為390，高度設置為433，動態(tài)地改變登錄邊框的高度和寬度，如圖11.36所示。

圖11.36普通登錄交互

11. 選中手機動態(tài)密碼登錄單選按鈕，給它添加選中時觸發(fā)事件。設置“登錄顯示區(qū)”動態(tài)面板的狀態(tài)為“手機動態(tài)密碼登錄”，并且勾選“推動/拉動”元件；設置“登錄邊框”的尺寸，寬度設置為390，高度設置為484，動態(tài)地改變登錄邊框的高度和寬度，如圖11.37所示。

圖11.37手機動態(tài)密碼登錄交互

11.4.5導航菜單母版設計

攜程旅游網(wǎng)站導航菜單有很多內(nèi)容，一級導航菜單有十幾個，每個一級導航菜單下面有對應的二級導航菜單，如圖11.38所示。

這樣在原型設計的時候，將導航菜單設計成母版，就可以直接引用到頁面中使用。

圖11.38導航菜單

1.導航菜單布局設計

（1）在母版區(qū)域新建一個母版，名稱為“導航菜單”。雙擊進入“導航菜單”母版里，拖曳一個圖片元件，用“1-狀態(tài)欄”圖片替換圖片元件，坐標位置為（134,0）；拖曳一個圖片元件，用“0-背景”圖片替換圖片元件，寬度設置為1366，坐標位置為（40,60），作為導航菜單背景，如圖11.39所示。

（2）拖曳16個文本標簽元件，文本內(nèi)容分別輸入為“首頁”“酒店”“旅游”“機票”“火車”“汽車票”“用車”“門票”“團購”“攻略”“全球購”“禮品卡”“商旅”“游輪”“天海游輪”和“更多”，字體顏色設置白色（FFFFFF），字號為15號字，“首頁”的x、y坐標位置設置為（158,72），“更多”的x、y坐標位置設置為（1049,72），設定好第一個和最后一個菜單位置，這時可以讓它們水平均勻分布，如圖11.40所示。

圖11.39狀態(tài)欄及導航菜單背景

圖11.40一級導航菜單放置

（3）拖曳一個矩形1元件，寬度設置為56，高度設置為40，坐標位置（146,61），填充為黑色（000000），不透明度設置為38，標簽命名為“菜單選中背景”，將“首頁”置于頂層，讓它在“菜單選中背景”上面；選中“菜單選中背景”，復制出一個，標簽命名為“菜單懸浮背景”，坐標位置（83,61），如圖11.41所示。

圖11.41菜單選中及懸浮背景

（4）拖曳一個圖片元件，用“17-我的登錄”圖片替換圖片元件，坐標位置（146,61），作為登錄和注冊的區(qū)域，如圖11.42所示。

（5）拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“二級導航菜單顯示區(qū)”，建立兩種狀態(tài)“酒店二級導航菜單”和“旅游二級導航菜單”，寬度設置為1168，高度設置為40，坐標位置（145,101），如圖11.43所示。

圖11.42我的攜程

圖11.43二級導航菜單顯示區(qū)

（6）進入“酒店二級導航菜單”狀態(tài)，拖曳一個矩形1元件，寬度設置為1168，高度設置為40，邊框顏色設置藍色（0000FF），拖曳坐標位置（145,101）；拖曳9個文本標簽元件，文本內(nèi)容分別為“國內(nèi)酒店”“海外酒店”和“海外民宿+短租”“團購”“特價酒店”“途家公寓”“酒店+景點”“客棧民宿”和“會場+團隊發(fā)”，它們之間加一個間隔線，“國內(nèi)酒店”坐標位置（26,12），“會場+團隊發(fā)”坐標位置（623,12），設定好第一個和最后一個菜單位置，這時可以讓它們水平均勻分布，如圖11.44所示。

圖11.44酒店二級導航菜單

（7）拖曳一個文本標簽元件，文本內(nèi)容輸入為“酒店訂單>”，坐標位置為（1092,12），如圖11.45所示。

（8）復制“酒店二級導航菜單”的內(nèi)容到“旅游二級導航菜單”狀態(tài)里，修改導航菜單名稱，如圖11.46所示。

圖11.45酒店訂單入口

圖11.46旅游二級導航菜單

（9）回到導航菜單母版里，拖曳一個矩形1元件，調(diào)整形狀為向上三角形，寬度設置為21，高度為12，標簽命名為“向上三角形”，去掉邊框線，坐標位置（217,93），如圖11.47所示。

圖11.47向上三角形

2.導航菜單交互設計

（1）將“向上三角形”和“二級導航菜單顯示區(qū)”隱藏起來，在頁面區(qū)域建立3個頁面“首頁”“酒店”和“旅游”；選中“首頁”一級導航菜單，給它添加鼠標單擊時觸發(fā)事件，讓它在新窗口打開“首頁”頁面，如圖11.48所示。

圖11.48打開首頁

（2）選中“酒店”一級導航菜單，給它添加鼠標單擊時觸發(fā)事件，讓它在新窗口打開“酒店”頁面；添加鼠標移入時觸發(fā)事件，顯示“向上三角形”，移動絕對位置（217,93），顯示“二級導航菜單顯示區(qū)”，設置面板狀態(tài)為“酒店二級導航菜單”，顯示“菜單懸浮背景”，移動絕對位置（199,61）；添加鼠標移出時觸發(fā)事件，隱藏“向上三角形”“二級導航菜單顯示區(qū)”和“菜單懸浮背景”，如圖11.49所示。

圖11.49酒店導航菜單交互

（3）選中“旅游”一級導航菜單，給它添加鼠標單擊時觸發(fā)事件，讓它在新窗口打開“旅游”頁面；添加鼠標移入時觸發(fā)事件，顯示“向上三角形”，移動絕對位置（272,93），顯示“二級導航菜單顯示區(qū)”，設置面板狀態(tài)為“旅游二級導航菜單”，顯示“菜單懸浮背景”，移動絕對位置（256,61）；添加鼠標移出時觸發(fā)事件，隱藏“向上三角形”“二級導航菜單顯示區(qū)”和“菜單懸浮背景”，如圖11.50所示。

圖11.50旅游導航菜單交互

（4）在母版區(qū)域，選中“導航菜單”母版，單擊鼠標右鍵選擇“新增頁面到首頁里”，這樣就將“導航菜單”母版引入到“首頁”“酒店”和“旅游”頁面里使用，如圖11.51所示。

（5）進入“首頁”，可以看到引入的“導航菜單”，按F5鍵發(fā)布原型看一下效果。當鼠標移入酒店或者旅游導航菜單上的時候，會出現(xiàn)二級菜單；移出的時候，二級菜單隱藏，如圖11.52所示。

圖11.51導航菜單引入到頁面里

圖11.52發(fā)布原型

（6）在“首頁”里添加頁面載入時觸發(fā)事件，選擇“移動菜單選中背景絕對位置（145,61）”，如圖11.53所示。

（7）在“酒店”頁面，添加頁面載入時觸發(fā)事件，選擇“移動菜單選中背景絕對位置（199,61）”，如圖11.54所示。

圖11.53首頁菜單選中背景

圖11.54酒店菜單選中背景

（8）在“旅游”頁面，添加頁面載入時觸發(fā)事件，選擇“移動菜單選中背景絕對位置（253,61）”，如圖11.55所示。

圖11.55酒店菜單選中背景

11.4.6首頁海報輪播效果制作

攜程網(wǎng)站首頁也采用了海報輪播效果發(fā)布廣告信息，如圖11.56所示。

海報輪播區(qū)域主要由兩部分組成：海報圖片和海報輪播序號。要實現(xiàn)海報輪播的效果，需要借助于動態(tài)面板元件。

圖11.56海報輪播區(qū)域

進入“首頁”，拖曳一個圖片元件，用“3-國際直通車”圖片替換圖片元件，坐標位置

（146,112）；拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“海報輪播顯示區(qū)”，寬度設置為1366，高度設置為341，坐標位置（40,150），建立8個狀態(tài)，分別命名為“海報1”“海報2”“海報3”“海報4”“海報5”“海報6”“海報7”和“海報8”，如圖11.57所示?！?-海報1”“6-海報2”“7-海報3”“8-海報4”“9-海報5”“10-海報6”“11-海報7”和“12-海報8”圖片分別作為8個狀態(tài)的內(nèi)容，坐標位置（0,0），如圖11.58所示。

圖11.57海報輪播顯示區(qū)

圖11.58海報輪播內(nèi)容

拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“序號輪播顯示區(qū)”，寬度設置為190，高度

設置為15，坐標位置（906,422），建立8個狀態(tài)，分別命名為“序號1”“序號2”“序號3”“序

號4”“序號5”“序號6”“序號7”和“序號8”，如圖11.59所示。4. 進入“序號1”狀態(tài)，拖曳一個橢圓形元件，寬度和高度都設置為15，去掉邊框線，作為選

中序號；拖曳一個橢圓形元件，寬度和高度都設置為15，顏色填充為灰色（999999），再

復制6個，作為未選中序號；第一個序號坐標位置（0,0），最后一個序號位置（175，0），

讓它們在水平方向上均勻分布，如圖11.60所示。

圖11.59序號輪播顯示區(qū)

圖11.60序號1內(nèi)容

將“序號1”狀態(tài)內(nèi)容復制到“序號2”狀態(tài)里，調(diào)整第一個序號和第二個序號的位置，運用

同樣的方法設計其他序號狀態(tài)的內(nèi)容，如圖11.61所示。回到“首頁”頁面，選中“海報輪播顯示區(qū)”動態(tài)面板，添加載入時觸發(fā)事件。設置“海報輪播顯示區(qū)”動態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，設置“序號輪播顯示區(qū)”動態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，如圖11.62所示。

圖11.61序號2內(nèi)容

圖11.62海報輪播效果設置

11.4.7首頁搜索區(qū)域?qū)Ш綉腋⌒ЧO計

攜程網(wǎng)站首頁里，有一個搜索區(qū)域，專門針對酒店、機票、自由行、旅游、火車、租車、門票等進行檢索。

當鼠標懸浮在這些菜單上面的時候，會出現(xiàn)選中效果，如圖11.63所示。

圖11.63搜索區(qū)域

1. 進入“首頁”頁面，拖曳一個圖片元件，用“4-搜索區(qū)域”圖片替換圖片元件，坐標位置

（144,171）；拖曳一個動態(tài)面板元件，動態(tài)面板的名稱為“搜索導航顯示區(qū)”，寬度設置為92，高度設置為42，坐標位置（145,213），狀態(tài)命名為“導航懸浮內(nèi)容”，如圖11.64所示。

圖11.64搜索導航顯示區(qū)

2. 進入“導航懸浮內(nèi)容”狀態(tài)，拖曳一個矩形1元件，寬度設置為92，高度設置為42，去掉邊框線；拖曳一個矩形1元件，寬度設置為4，高度設置為40，顏色填充為黃色（FF9900），去掉邊框線；拖曳一個文本標簽元件，文本內(nèi)容為“機票”，字體顏色為藍色（FF9900），字號為17號字，標簽命名為“導航內(nèi)容”，如圖11.65所示。

圖11.65導航懸浮內(nèi)容

3. 回到“首頁”，將“搜索導航顯示區(qū)”動態(tài)面板隱藏起來，置于底層；拖曳一個圖像熱區(qū)元件，放置在機票導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，214），設置“導航內(nèi)容”為“機票”，如圖11.66所示。

圖11.66機票懸浮交互4. 拖曳一個圖像熱區(qū)元件，放置在自由行導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示

“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，

256），設置“導航內(nèi)容”為“自由行”，如圖11.67所示。

圖11.67自由行懸浮交互

拖曳一個圖像熱區(qū)元件，放置在旅游導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，298），設置“導航內(nèi)容”為“旅游”，如圖11.68所示。拖曳一個圖像熱區(qū)元件，放置在火車導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，340），

設置“導航內(nèi)容”為“火車”，如圖11.69所示。

圖11.68旅游懸浮交互

圖11.69火車懸浮交互

7. 拖曳一個圖像熱區(qū)元件，放置在租車導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，382），設置“導航內(nèi)容”為“租車”，如圖11.70所示。8. 拖曳一個圖像熱區(qū)元件，放置在門票導航的上面，給它添加鼠標移入時觸發(fā)事件，顯示“搜索導航顯示區(qū)”動態(tài)面板并且置于頂層，移動“搜索導航顯示區(qū)”絕對位置（145，425