Axure-RP8原型設(shè)計(jì)圖解第11章課件

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

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

11.1

需求描述11.2

設(shè)計(jì)思路11.3

準(zhǔn)備工作11.4

設(shè)計(jì)流程11.5

小結(jié)11.1?

需求描述1

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

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

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

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

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

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

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

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

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

設(shè)計(jì)思路11.3

準(zhǔn)備工作11.4

設(shè)計(jì)流程11.5

小結(jié)11.2?

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

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

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

準(zhǔn)備工作11.4

設(shè)計(jì)流程11.5

小結(jié)11.3?

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

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

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

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

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

11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作11.4

設(shè)計(jì)流程11.5

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

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

圖11.5填寫表單

圖11.6郵箱驗(yàn)證

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

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

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

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

圖11.8會(huì)員注冊(cè)說明

拖曳3個(gè)文本標(biāo)簽元件，文本內(nèi)容分別輸入為“手機(jī)號(hào)”“Email”和“密碼”，字號(hào)設(shè)

置為16號(hào)字；拖曳一個(gè)矩形1元件，寬度設(shè)置為320，高度設(shè)置為32，邊框顏色為灰色

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

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

圖11.10設(shè)置提示文字

圖11.9表單標(biāo)簽和邊框

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

圖11.11確認(rèn)密碼

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

圖11.12注冊(cè)協(xié)議

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

圖11.13密碼強(qiáng)度

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

當(dāng)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信息“請(qǐng)?jiān)O(shè)置登錄密碼”，密碼強(qiáng)度為默認(rèn)等級(jí)。

當(dāng)密碼長度小于8位、大于20位時(shí)，提示“密碼需為8-20個(gè)字符,由字母、數(shù)字和符號(hào)組成?！?，密碼強(qiáng)度為默認(rèn)等級(jí)。當(dāng)密碼長度等于8位時(shí)，提示“密碼過于簡單，有被盜風(fēng)險(xiǎn)”，密碼強(qiáng)度為弱等級(jí)。當(dāng)密碼長度大于8位、小于等于10位時(shí)，隱藏密碼提示信息，密碼強(qiáng)度為中等級(jí)。當(dāng)密碼長度大于10位、小于等于20位時(shí)，隱藏密碼提示信息，密碼強(qiáng)度為強(qiáng)等級(jí)。

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

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

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

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

圖11.15密碼輸入框獲得焦點(diǎn)

圖11.16密碼輸入框失去焦點(diǎn)

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

當(dāng)確認(rèn)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信息“請(qǐng)?jiān)俅屋斎朊艽a”。

當(dāng)確認(rèn)密碼輸入框失去焦點(diǎn)時(shí)，如果兩次密碼輸入不一致，提示“您兩次輸入的密碼不一致”。

（1）拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“確認(rèn)密碼顯示區(qū)”，建立兩個(gè)狀態(tài)“請(qǐng)確認(rèn)密碼”和“兩次密碼不一致”，分別用“20-確認(rèn)密碼-請(qǐng)?jiān)俅屋斎朊艽a”和“21-確認(rèn)密碼-兩次密碼不一致”圖片作為狀態(tài)內(nèi)容，如圖11.17所示。

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

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

圖11.18確認(rèn)密碼輸入框獲得焦點(diǎn)

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

圖11.19確認(rèn)密碼輸入框失去焦點(diǎn)

11.4.3倒計(jì)時(shí)交互設(shè)計(jì)

在填寫完注冊(cè)表單后，會(huì)進(jìn)行驗(yàn)證。有兩種方式進(jìn)行驗(yàn)證，一種是手機(jī)號(hào)

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

圖11.20郵箱驗(yàn)證

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

圖11.21郵箱驗(yàn)證布局

圖11.22倒計(jì)時(shí)布局設(shè)計(jì)

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

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

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

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

圖11.24重新獲取驗(yàn)證碼

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

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

圖11.25普通登錄

圖11.26手機(jī)動(dòng)態(tài)密碼登錄

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

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

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

圖11.29登錄按鈕組

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

圖11.30登錄顯示區(qū)

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

圖11.32登錄按鈕

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

圖11.33手機(jī)號(hào)及密碼

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

圖11.34登錄按鈕及驗(yàn)證碼

圖11.35合作登錄方式

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

圖11.36普通登錄交互

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

圖11.37手機(jī)動(dòng)態(tài)密碼登錄交互

11.4.5導(dǎo)航菜單母版設(shè)計(jì)

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

這樣在原型設(shè)計(jì)的時(shí)候，將導(dǎo)航菜單設(shè)計(jì)成母版，就可以直接引用到頁面中使用。

圖11.38導(dǎo)航菜單

1.導(dǎo)航菜單布局設(shè)計(jì)

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

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

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

圖11.40一級(jí)導(dǎo)航菜單放置

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

圖11.41菜單選中及懸浮背景

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

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

圖11.42我的攜程

圖11.43二級(jí)導(dǎo)航菜單顯示區(qū)

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

圖11.44酒店二級(jí)導(dǎo)航菜單

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

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

圖11.45酒店訂單入口

圖11.46旅游二級(jí)導(dǎo)航菜單

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

圖11.47向上三角形

2.導(dǎo)航菜單交互設(shè)計(jì)

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

圖11.48打開首頁

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

圖11.49酒店導(dǎo)航菜單交互

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

圖11.50旅游導(dǎo)航菜單交互

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

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

圖11.51導(dǎo)航菜單引入到頁面里

圖11.52發(fā)布原型

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

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

圖11.53首頁菜單選中背景

圖11.54酒店菜單選中背景

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

圖11.55酒店菜單選中背景

11.4.6首頁海報(bào)輪播效果制作

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

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

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

進(jìn)入“首頁”，拖曳一個(gè)圖片元件，用“3-國際直通車”圖片替換圖片元件，坐標(biāo)位置

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

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

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

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

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

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

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

復(fù)制6個(gè)，作為未選中序號(hào)；第一個(gè)序號(hào)坐標(biāo)位置（0,0），最后一個(gè)序號(hào)位置（175，0），

讓它們?cè)谒椒较蛏暇鶆蚍植?，如圖11.60所示。

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

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

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

同樣的方法設(shè)計(jì)其他序號(hào)狀態(tài)的內(nèi)容，如圖11.61所示?；氐健笆醉摗表撁?，選中“海報(bào)輪播顯示區(qū)”動(dòng)態(tài)面板，添加載入時(shí)觸發(fā)事件。設(shè)置“海報(bào)輪播顯示區(qū)”動(dòng)態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，設(shè)置“序號(hào)輪播顯示區(qū)”動(dòng)態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，如圖11.62所示。

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

圖11.62海報(bào)輪播效果設(shè)置

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

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

當(dāng)鼠標(biāo)懸浮在這些菜單上面的時(shí)候，會(huì)出現(xiàn)選中效果，如圖11.63所示。

圖11.63搜索區(qū)域

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

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

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

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

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

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

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

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

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

圖11.67自由行懸浮交互

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

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

圖11.68旅游懸浮交互

圖11.69火車懸浮交互

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