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)站首頁

Axure原型設(shè)計(jì)工具不僅可以設(shè)計(jì)出低保真的軟件原型，同時(shí)11.1

需求描述11.2

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

準(zhǔn)備工作11.4

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

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

需求描述1

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

繪制蜜淘全球購網(wǎng)站的注冊頁面，不進(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?需求描述1繪制蜜淘全球購網(wǎng)站的登錄頁面并進(jìn)行11.1?需求描述11.2

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

準(zhǔn)備工作11.4

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

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

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

進(jìn)行注冊表單的驗(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)信息制作成母版，其他頁面直接使用。11.2?設(shè)計(jì)思路02PRAT03PRAT04PRAT0105PRAT06PRAT海報(bào)輪播效果制作，需要借助于動(dòng)態(tài)面板元件，在多個(gè)狀態(tài)中自動(dòng)切換顯示。圖片放大縮小效果制作，需要?jiǎng)討B(tài)地改變圖片的尺寸，以實(shí)現(xiàn)圖片放大縮小的效果。05PRAT06PRAT海報(bào)輪播效果制作，需要借助于動(dòng)態(tài)面板11.1?需求描述11.2?設(shè)計(jì)思路11.3

準(zhǔn)備工作11.4

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

小結(jié)11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作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)站登錄界面和注冊界面相關(guān)圖片（見圖11.2和圖11.3）。

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

11.3?準(zhǔn)備工作進(jìn)行高保真原型設(shè)計(jì)，需要使用大量的圖片。圖11.3攜程旅游網(wǎng)站登錄界面

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

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

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

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

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

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

小結(jié)11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作11.4設(shè)計(jì)流程 11.4.1網(wǎng)站注冊表單布局設(shè)計(jì)

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

圖11.5填寫表單

圖11.6郵箱驗(yàn)證

11.4設(shè)計(jì)流程 11.4.1網(wǎng)站注冊表單布局設(shè)1. 進(jìn)入注冊頁面，拖曳一個(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>

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

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

2. 拖曳一個(gè)文本標(biāo)簽元件，文本內(nèi)容命名為“會(huì)員注冊注冊成拖曳3個(gè)文本標(biāo)簽元件，文本內(nèi)容分別輸入為“手機(jī)號”“Email”和“密碼”，字號設(shè)

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

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

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

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

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

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

圖11.11確認(rèn)密碼

5. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱“確認(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注冊協(xié)議

6. 拖曳一個(gè)復(fù)選框元件，文本內(nèi)容重新命名為“同意<<攜程旅7. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板名稱為“密碼強(qiáng)度顯示區(qū)”，建立4個(gè)狀態(tài)“密碼默認(rèn)等級”“密碼弱”“密碼中”和“密碼強(qiáng)”，分別用“14-注冊密碼默認(rèn)”“15-注冊密碼等級弱”“16-注冊密碼等級中”和“14-注冊密碼等級強(qiáng)”圖片作為狀態(tài)內(nèi)容，如圖11.13所示。

圖11.13密碼強(qiáng)度

7. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板名稱為“密碼強(qiáng)度顯示區(qū)”11.4.2網(wǎng)站注冊表單校驗(yàn) 1．密碼校驗(yàn)內(nèi)容

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

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

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

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

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

（1）拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“密碼驗(yàn)證顯示

（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）將“密碼驗(yàn)證顯示區(qū)”動(dòng)態(tài)面板隱藏起來，置于底層，選中2．確認(rèn)密碼校驗(yàn)內(nèi)容

當(dāng)確認(rèn)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信息“請?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)“請確認(rèn)密碼”和“兩次密碼不一致”，分別用“20-確認(rèn)密碼-請?jiān)俅屋斎朊艽a”和“21-確認(rèn)密碼-兩次密碼不一致”圖片作為狀態(tài)內(nèi)容，如圖11.17所示。

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

2．確認(rèn)密碼校驗(yàn)內(nèi)容 當(dāng)確認(rèn)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信

（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)為“請確認(rèn)密碼”，如圖11.18所示。

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

（2）將“確認(rèn)密碼顯示區(qū)”動(dòng)態(tài)面板隱藏起來，置于底層。選中

（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)

（3）給密碼輸入框和確認(rèn)密碼輸入框進(jìn)行標(biāo)簽命名，分別命名為11.4.3倒計(jì)時(shí)交互設(shè)計(jì)

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

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

圖11.20郵箱驗(yàn)證

11.4.3倒計(jì)時(shí)交互設(shè)計(jì) 在填寫完注冊表單后，會(huì)進(jìn)行驗(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ì)

在頁面區(qū)域新建一個(gè)頁面“驗(yàn)證”，進(jìn)入頁面，拖曳3個(gè)圖片元件，新增一個(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)證碼

新增一個(gè)全局變量“totaltime”，默認(rèn)值為“30”，添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)密碼登錄

11.4.4網(wǎng)站登錄布局與交互設(shè)計(jì) 攜程旅游網(wǎng)站登錄提供1. 在頁面區(qū)域新建一個(gè)頁面“登錄”，拖曳兩個(gè)圖片元件，用“6-攜程LOGO”和“7-登錄圖片”替換圖片元件，如圖11.27所示。

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

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

圖11.29登錄按鈕組

3. 拖曳兩個(gè)單選按鈕元件，文本內(nèi)容分別命名為“普通登錄”和拖曳一個(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)容分別為“登錄名”“密碼”和“忘記密碼？”，“登錄名”和“密碼”字號設(shè)置為15號字，“忘記密碼？”設(shè)置為12號字，藍(lán)色字體（0000FF）；拖曳兩個(gè)文本框元件，寬度設(shè)置為195，高度設(shè)置為30，登錄名輸入添加提示文字“用戶名/卡號/手機(jī)/郵箱”，如圖11.31所示。

拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板命名為“登錄顯示區(qū)”，建立兩種圖11.30登錄顯示區(qū)

圖11.31登錄名及密碼圖11.30登錄顯示區(qū)

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

圖11.32登錄按鈕

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

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

7. 進(jìn)入“手機(jī)動(dòng)態(tài)密碼登錄”狀態(tài)，拖曳3個(gè)文本標(biā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所示。

拖曳兩個(gè)圖片元件，用“11-登錄驗(yàn)證碼”和“25-發(fā)送動(dòng)態(tài)密圖11.34登錄按鈕及驗(yàn)證碼

圖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普通登錄交互

10. 選中普通登錄單選按鈕，給它添加選中時(shí)觸發(fā)事件。設(shè)置“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. 選中手機(jī)動(dòng)態(tài)密碼登錄單選按鈕，給它添加選中時(shí)觸發(fā)事件11.4.5導(dǎo)航菜單母版設(shè)計(jì)

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

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

圖11.38導(dǎo)航菜單

11.4.5導(dǎo)航菜單母版設(shè)計(jì) 攜程旅游網(wǎng)站導(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），字號為15號字，“首頁”的x、y坐標(biāo)位置設(shè)置為（158,72），“更多”的x、y坐標(biāo)位置設(shè)置為（1049,72），設(shè)定好第一個(gè)和最后一個(gè)菜單位置，這時(shí)可以讓它們水平均勻分布，如圖11.40所示。

1.導(dǎo)航菜單布局設(shè)計(jì) （1）在母版區(qū)域新建一個(gè)母版，名稱為圖11.39狀態(tài)欄及導(dǎo)航菜單背景

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

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

圖11.40一級導(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菜單選中及懸浮背景

（3）拖曳一個(gè)矩形1元件，寬度設(shè)置為56，高度設(shè)置為40，

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

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

圖11.42我的攜程

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

（4）拖曳一個(gè)圖片元件，用“17-我的登錄”圖片替換圖片元

（6）進(jìn)入“酒店二級導(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ì)場+團(tuán)隊(duì)發(fā)”，它們之間加一個(gè)間隔線，“國內(nèi)酒店”坐標(biāo)位置（26,12），“會(huì)場+團(tuán)隊(duì)發(fā)”坐標(biāo)位置（623,12），設(shè)定好第一個(gè)和最后一個(gè)菜單位置，這時(shí)可以讓它們水平均勻分布，如圖11.44所示。

圖11.44酒店二級導(dǎo)航菜單 （6）進(jìn)入“酒店二級導(dǎo)航菜單”狀態(tài)，拖曳一個(gè)矩形1元件，寬

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

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

圖11.45酒店訂單入口

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

（7）拖曳一個(gè)文本標(biāo)簽元件，文本內(nèi)容輸入為“酒店訂單>”，

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

圖11.47向上三角形

（9）回到導(dǎo)航菜單母版里，拖曳一個(gè)矩形1元件，調(diào)整形狀為向2.導(dǎo)航菜單交互設(shè)計(jì)

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

圖11.48打開首頁

2.導(dǎo)航菜單交互設(shè)計(jì) （1）將“向上三角形”和“二級導(dǎo)航菜

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

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

（2）選中“酒店”一級導(dǎo)航菜單，給它添加鼠標(biāo)單擊時(shí)觸發(fā)事件

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

圖11.50旅游導(dǎo)航菜單交互 （3）選中“旅游”一級導(dǎo)航菜單，給它添加鼠標(biāo)單擊時(shí)觸發(fā)事件

（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)二級菜單；移出的時(shí)候，二級菜單隱藏，如圖11.52所示。

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

圖11.52發(fā)布原型

（4）在母版區(qū)域，選中“導(dǎo)航菜單”母版，單擊鼠標(biāo)右鍵選擇“

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

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

圖11.53首頁菜單選中背景

圖11.54酒店菜單選中背景

（6）在“首頁”里添加頁面載入時(shí)觸發(fā)事件，選擇“移動(dòng)菜單選

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

圖11.55酒店菜單選中背景

（8）在“旅游”頁面，添加頁面載11.4.6首頁海報(bào)輪播效果制作

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

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

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

11.4.6首頁海報(bào)輪播效果制作 攜程網(wǎng)站首頁也采用了海進(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所示。

進(jìn)入“首頁”，拖曳一個(gè)圖片元件，用“3-國際直通車”圖片替換圖11.57海報(bào)輪播顯示區(qū)

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

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

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

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

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

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

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

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

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

拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“序號輪播顯示區(qū)”，寬圖11.59序號輪播顯示區(qū)

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

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

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

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

同樣的方法設(shè)計(jì)其他序號狀態(tài)的內(nèi)容，如圖11.61所示?；氐健笆醉摗表撁妫x中“海報(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è)置“序號輪播顯示區(qū)”動(dòng)態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，如圖11.62所示。

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

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

將“序號1”狀態(tài)內(nèi)容復(fù)制到“序號2”狀態(tài)里，調(diào)整第一個(gè)序號和11.4.7首頁搜索區(qū)域?qū)Ш綉腋⌒ЧO(shè)計(jì)

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

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

圖11.63搜索區(qū)域

11.4.7首頁搜索區(qū)域?qū)Ш綉腋⌒ЧO(shè)計(jì) 攜程網(wǎng)站首頁里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ū)

1. 進(jìn)入“首頁”頁面，拖曳一個(gè)圖片元件，用“4-搜索區(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），字號為17號字，標(biāo)簽命名為“導(dǎo)航內(nèi)容”，如圖11.65所示。

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

2. 進(jìn)入“導(dǎo)航懸浮內(nèi)容”狀態(tài)，拖曳一個(gè)矩形1元件，寬度設(shè)置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ū)”絕對位置（145，214），設(shè)置“導(dǎo)航內(nèi)容”為“機(jī)票”，如圖11.66所示。

圖11.66機(jī)票懸浮交互3. 回到“首頁”，將“搜索導(dǎo)航顯示區(qū)”動(dòng)態(tài)面板隱藏起來，置4. 拖曳一個(gè)圖像熱區(qū)元件，放置在自由行導(dǎo)航的上面，給它添加鼠標(biāo)移入時(shí)觸發(fā)事件，顯示

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

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

圖11.67自由行懸浮交互

4. 拖曳一個(gè)圖像熱區(qū)元件，放置在自由行導(dǎo)航的上面，給它添加拖曳一個(gè)圖像熱區(qū)元件，放置在旅游導(dǎo)航的上面，給它添加鼠標(biāo)移入時(shí)觸發(fā)事件，顯示“搜索導(dǎo)航顯示區(qū)”動(dòng)態(tài)面板并且置于頂層，移動(dòng)“搜索導(dǎo)航顯示區(qū)”絕對位置（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ū)”絕對位置（145，340），

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

圖11.68旅游懸浮交互

圖11.69火車懸浮交互

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

圖11.70租車懸浮交互

圖11.71門票懸浮交互

7. 拖曳一個(gè)圖像熱區(qū)元件，放置在租車導(dǎo)航的上面，給它添加鼠9. 選中“搜索導(dǎo)航顯示區(qū)”動(dòng)態(tài)面板，給它添加鼠標(biāo)移出時(shí)觸發(fā)事件，隱藏“搜索導(dǎo)航顯示區(qū)”動(dòng)態(tài)面板并且置于底層，如圖11.72所示。

圖11.72隱藏搜索導(dǎo)航顯示區(qū)

9. 選中“搜索導(dǎo)航顯示區(qū)”動(dòng)態(tài)面板，給它添加鼠標(biāo)移出時(shí)觸發(fā)11.4.8首頁圖片放大縮小效果制作

攜程網(wǎng)站首頁里有很多的旅游廣告圖片或者酒店廣告圖片。

當(dāng)鼠標(biāo)移入這些圖片的時(shí)候，這些圖片會(huì)放大，移出的時(shí)候圖片又會(huì)縮小。

現(xiàn)在很多的電商網(wǎng)站也是采用這樣的方式來給商品圖片添加交互效果通過這種動(dòng)作使圖片動(dòng)起來，如圖11.73所示。

圖11.73特賣匯圖片

11.4.8首頁圖片放大縮小效果制作 攜程網(wǎng)站首頁里有很1. 拖曳一個(gè)圖片元件，用“20-特賣匯導(dǎo)航”圖片替換圖片元件，坐標(biāo)位置（145,529）；拖

曳一個(gè)矩形1元件，寬度設(shè)置為1180，高度設(shè)置為390，坐標(biāo)位置（147,559）；拖曳兩個(gè)圖片元件，用“21-精選導(dǎo)航”和“16-特賣匯-圖片3”圖片替換圖片元件，坐標(biāo)位置分別為

（164,564）和（401,604），如圖11.74所示。

圖11.74特賣匯內(nèi)容

1. 拖曳一個(gè)圖片元件，用“20-特賣匯導(dǎo)航”圖片替換圖片元拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板命名為“特賣1顯示區(qū)”，狀態(tài)命名為“圖片”，寬度設(shè)置為220，高度設(shè)置為110，坐標(biāo)位置（174,619）；進(jìn)入“圖片”狀態(tài)，拖曳一個(gè)圖片元件，用“14-特賣匯-圖片1”圖片替換圖片元件，寬度設(shè)置為218，高度為112，如圖11.75所示。選中“特賣1顯示區(qū)”動(dòng)態(tài)面板，給它添加鼠標(biāo)移入時(shí)觸發(fā)事件，設(shè)置特賣1顯示區(qū)的圖片

尺寸為256*149，固定左上角；添加鼠標(biāo)移出時(shí)觸發(fā)事件，設(shè)置特賣1顯示區(qū)的圖片尺寸為

218*122，如圖11.76所示。

圖11.75特賣1顯示區(qū)

圖11.76特賣1顯示區(qū)交互

拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板命名為“特賣1顯示區(qū)”，狀態(tài)命4. 復(fù)制“特賣1顯示區(qū)”動(dòng)態(tài)面板，動(dòng)態(tài)面板的名稱改為“特賣2顯示區(qū)”，坐標(biāo)位置

（174,799），用“15-特賣匯-圖片2”作為狀態(tài)內(nèi)容，寬度設(shè)置為218，高度為112；拖曳

兩個(gè)圖片元件，用“23-特賣1價(jià)格”和“24-特賣2價(jià)格”圖片替換圖片元件，作為價(jià)格內(nèi)

容，如圖11.77所示。

圖11.77特賣1顯示區(qū)及價(jià)格

4. 復(fù)制“特賣1顯示區(qū)”動(dòng)態(tài)面板，動(dòng)態(tài)面板的名稱改為“特賣5. 選中“特賣2顯示區(qū)”動(dòng)態(tài)面板，給它添加鼠標(biāo)移入時(shí)觸發(fā)事件，設(shè)置特賣2顯示區(qū)的圖片尺寸為276*154，固定中心；添加鼠標(biāo)移出時(shí)觸發(fā)事件，設(shè)置特賣2顯示區(qū)的圖片尺寸為218*122，如圖11.78所示。

圖11.78特賣2顯示區(qū)交互

5. 選中“特賣2顯示區(qū)”動(dòng)態(tài)面板，給它添加鼠標(biāo)移入時(shí)觸發(fā)事11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作11.4?

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

小結(jié)11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作Axure原型設(shè)計(jì)工具不僅可以設(shè)計(jì)出低保真的軟件原型，同時(shí)也可以設(shè)計(jì)出高保真原型。高保真原型的效果，不管在軟件界面還是在軟件交互上，幾乎和真實(shí)軟件的體驗(yàn)效果一樣。圖11.1所示為攜程旅游網(wǎng)站首頁的原型設(shè)計(jì)。

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

Axure原型設(shè)計(jì)工具不僅可以設(shè)計(jì)出低保真的軟件原型，同時(shí)11.1

需求描述11.2

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

準(zhǔn)備工作11.4

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

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

需求描述1

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

繪制蜜淘全球購網(wǎng)站的注冊頁面，不進(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?需求描述1繪制蜜淘全球購網(wǎng)站的登錄頁面并進(jìn)行11.1?需求描述11.2

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

準(zhǔn)備工作11.4

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

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

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

進(jìn)行注冊表單的驗(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)信息制作成母版，其他頁面直接使用。11.2?設(shè)計(jì)思路02PRAT03PRAT04PRAT0105PRAT06PRAT海報(bào)輪播效果制作，需要借助于動(dòng)態(tài)面板元件，在多個(gè)狀態(tài)中自動(dòng)切換顯示。圖片放大縮小效果制作，需要?jiǎng)討B(tài)地改變圖片的尺寸，以實(shí)現(xiàn)圖片放大縮小的效果。05PRAT06PRAT海報(bào)輪播效果制作，需要借助于動(dòng)態(tài)面板11.1?需求描述11.2?設(shè)計(jì)思路11.3

準(zhǔn)備工作11.4

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

小結(jié)11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作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)站登錄界面和注冊界面相關(guān)圖片（見圖11.2和圖11.3）。

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

11.3?準(zhǔn)備工作進(jìn)行高保真原型設(shè)計(jì)，需要使用大量的圖片。圖11.3攜程旅游網(wǎng)站登錄界面

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

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

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

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

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

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

小結(jié)11.1?需求描述11.2?設(shè)計(jì)思路11.3?準(zhǔn)備工作11.4設(shè)計(jì)流程 11.4.1網(wǎng)站注冊表單布局設(shè)計(jì)

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

圖11.5填寫表單

圖11.6郵箱驗(yàn)證

11.4設(shè)計(jì)流程 11.4.1網(wǎng)站注冊表單布局設(shè)1. 進(jìn)入注冊頁面，拖曳一個(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>

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

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

2. 拖曳一個(gè)文本標(biāo)簽元件，文本內(nèi)容命名為“會(huì)員注冊注冊成拖曳3個(gè)文本標(biāo)簽元件，文本內(nèi)容分別輸入為“手機(jī)號”“Email”和“密碼”，字號設(shè)

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

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

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

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

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

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

圖11.11確認(rèn)密碼

5. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱“確認(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注冊協(xié)議

6. 拖曳一個(gè)復(fù)選框元件，文本內(nèi)容重新命名為“同意<<攜程旅7. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板名稱為“密碼強(qiáng)度顯示區(qū)”，建立4個(gè)狀態(tài)“密碼默認(rèn)等級”“密碼弱”“密碼中”和“密碼強(qiáng)”，分別用“14-注冊密碼默認(rèn)”“15-注冊密碼等級弱”“16-注冊密碼等級中”和“14-注冊密碼等級強(qiáng)”圖片作為狀態(tài)內(nèi)容，如圖11.13所示。

圖11.13密碼強(qiáng)度

7. 拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板名稱為“密碼強(qiáng)度顯示區(qū)”11.4.2網(wǎng)站注冊表單校驗(yàn) 1．密碼校驗(yàn)內(nèi)容

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

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

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

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

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

（1）拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“密碼驗(yàn)證顯示

（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）將“密碼驗(yàn)證顯示區(qū)”動(dòng)態(tài)面板隱藏起來，置于底層，選中2．確認(rèn)密碼校驗(yàn)內(nèi)容

當(dāng)確認(rèn)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信息“請?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)“請確認(rèn)密碼”和“兩次密碼不一致”，分別用“20-確認(rèn)密碼-請?jiān)俅屋斎朊艽a”和“21-確認(rèn)密碼-兩次密碼不一致”圖片作為狀態(tài)內(nèi)容，如圖11.17所示。

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

2．確認(rèn)密碼校驗(yàn)內(nèi)容 當(dāng)確認(rèn)密碼輸入框獲得焦點(diǎn)時(shí)，顯示提示信

（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)為“請確認(rèn)密碼”，如圖11.18所示。

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

（2）將“確認(rèn)密碼顯示區(qū)”動(dòng)態(tài)面板隱藏起來，置于底層。選中

（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)

（3）給密碼輸入框和確認(rèn)密碼輸入框進(jìn)行標(biāo)簽命名，分別命名為11.4.3倒計(jì)時(shí)交互設(shè)計(jì)

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

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

圖11.20郵箱驗(yàn)證

11.4.3倒計(jì)時(shí)交互設(shè)計(jì) 在填寫完注冊表單后，會(huì)進(jìn)行驗(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ì)

在頁面區(qū)域新建一個(gè)頁面“驗(yàn)證”，進(jìn)入頁面，拖曳3個(gè)圖片元件，新增一個(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)證碼

新增一個(gè)全局變量“totaltime”，默認(rèn)值為“30”，添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)密碼登錄

11.4.4網(wǎng)站登錄布局與交互設(shè)計(jì) 攜程旅游網(wǎng)站登錄提供1. 在頁面區(qū)域新建一個(gè)頁面“登錄”，拖曳兩個(gè)圖片元件，用“6-攜程LOGO”和“7-登錄圖片”替換圖片元件，如圖11.27所示。

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

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

圖11.29登錄按鈕組

3. 拖曳兩個(gè)單選按鈕元件，文本內(nèi)容分別命名為“普通登錄”和拖曳一個(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)容分別為“登錄名”“密碼”和“忘記密碼？”，“登錄名”和“密碼”字號設(shè)置為15號字，“忘記密碼？”設(shè)置為12號字，藍(lán)色字體（0000FF）；拖曳兩個(gè)文本框元件，寬度設(shè)置為195，高度設(shè)置為30，登錄名輸入添加提示文字“用戶名/卡號/手機(jī)/郵箱”，如圖11.31所示。

拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板命名為“登錄顯示區(qū)”，建立兩種圖11.30登錄顯示區(qū)

圖11.31登錄名及密碼圖11.30登錄顯示區(qū)

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

圖11.32登錄按鈕

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

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

7. 進(jìn)入“手機(jī)動(dòng)態(tài)密碼登錄”狀態(tài)，拖曳3個(gè)文本標(biā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所示。

拖曳兩個(gè)圖片元件，用“11-登錄驗(yàn)證碼”和“25-發(fā)送動(dòng)態(tài)密圖11.34登錄按鈕及驗(yàn)證碼

圖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普通登錄交互

10. 選中普通登錄單選按鈕，給它添加選中時(shí)觸發(fā)事件。設(shè)置“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. 選中手機(jī)動(dòng)態(tài)密碼登錄單選按鈕，給它添加選中時(shí)觸發(fā)事件11.4.5導(dǎo)航菜單母版設(shè)計(jì)

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

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

圖11.38導(dǎo)航菜單

11.4.5導(dǎo)航菜單母版設(shè)計(jì) 攜程旅游網(wǎng)站導(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），字號為15號字，“首頁”的x、y坐標(biāo)位置設(shè)置為（158,72），“更多”的x、y坐標(biāo)位置設(shè)置為（1049,72），設(shè)定好第一個(gè)和最后一個(gè)菜單位置，這時(shí)可以讓它們水平均勻分布，如圖11.40所示。

1.導(dǎo)航菜單布局設(shè)計(jì) （1）在母版區(qū)域新建一個(gè)母版，名稱為圖11.39狀態(tài)欄及導(dǎo)航菜單背景

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

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

圖11.40一級導(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菜單選中及懸浮背景

（3）拖曳一個(gè)矩形1元件，寬度設(shè)置為56，高度設(shè)置為40，

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

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

圖11.42我的攜程

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

（4）拖曳一個(gè)圖片元件，用“17-我的登錄”圖片替換圖片元

（6）進(jìn)入“酒店二級導(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ì)場+團(tuán)隊(duì)發(fā)”，它們之間加一個(gè)間隔線，“國內(nèi)酒店”坐標(biāo)位置（26,12），“會(huì)場+團(tuán)隊(duì)發(fā)”坐標(biāo)位置（623,12），設(shè)定好第一個(gè)和最后一個(gè)菜單位置，這時(shí)可以讓它們水平均勻分布，如圖11.44所示。

圖11.44酒店二級導(dǎo)航菜單 （6）進(jìn)入“酒店二級導(dǎo)航菜單”狀態(tài)，拖曳一個(gè)矩形1元件，寬

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

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

圖11.45酒店訂單入口

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

（7）拖曳一個(gè)文本標(biāo)簽元件，文本內(nèi)容輸入為“酒店訂單>”，

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

圖11.47向上三角形

（9）回到導(dǎo)航菜單母版里，拖曳一個(gè)矩形1元件，調(diào)整形狀為向2.導(dǎo)航菜單交互設(shè)計(jì)

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

圖11.48打開首頁

2.導(dǎo)航菜單交互設(shè)計(jì) （1）將“向上三角形”和“二級導(dǎo)航菜

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

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

（2）選中“酒店”一級導(dǎo)航菜單，給它添加鼠標(biāo)單擊時(shí)觸發(fā)事件

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

圖11.50旅游導(dǎo)航菜單交互 （3）選中“旅游”一級導(dǎo)航菜單，給它添加鼠標(biāo)單擊時(shí)觸發(fā)事件

（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)二級菜單；移出的時(shí)候，二級菜單隱藏，如圖11.52所示。

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

圖11.52發(fā)布原型

（4）在母版區(qū)域，選中“導(dǎo)航菜單”母版，單擊鼠標(biāo)右鍵選擇“

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

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

圖11.53首頁菜單選中背景

圖11.54酒店菜單選中背景

（6）在“首頁”里添加頁面載入時(shí)觸發(fā)事件，選擇“移動(dòng)菜單選

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

圖11.55酒店菜單選中背景

（8）在“旅游”頁面，添加頁面載11.4.6首頁海報(bào)輪播效果制作

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

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

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

11.4.6首頁海報(bào)輪播效果制作 攜程網(wǎng)站首頁也采用了海進(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所示。

進(jìn)入“首頁”，拖曳一個(gè)圖片元件，用“3-國際直通車”圖片替換圖11.57海報(bào)輪播顯示區(qū)

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

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

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

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

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

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

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

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

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

拖曳一個(gè)動(dòng)態(tài)面板元件，動(dòng)態(tài)面板的名稱為“序號輪播顯示區(qū)”，寬圖11.59序號輪播顯示區(qū)

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

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

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

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

同樣的方法設(shè)計(jì)其他序號狀態(tài)的內(nèi)容，如圖11.61所示?；氐健笆醉摗表撁妫x中“海報(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è)置“序號輪播顯示區(qū)”動(dòng)態(tài)面板的狀態(tài)為“Next”，向后循環(huán)，循環(huán)間隔3000毫秒，如圖11.62所示。

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

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

將“序號1”狀態(tài)內(nèi)容復(fù)制到“序號2”狀態(tài)里，調(diào)整第一個(gè)序號和11.4.7首頁搜索區(qū)