《移動(dòng)應(yīng)用界面設(shè)計(jì)》

——項(xiàng)目二：鄉(xiāng)村民宿1.知識(shí)與技能（1）通過(guò)本項(xiàng)目的學(xué)習(xí)，要求掌握鄉(xiāng)村民宿項(xiàng)目界面設(shè)計(jì)的實(shí)施流程。

（2）掌握AdobeXD

軟件跳轉(zhuǎn)鏈接功能及界面交互動(dòng)作的制作方法。2.過(guò)程與方法（1）通過(guò)制作思維導(dǎo)圖，了解項(xiàng)目實(shí)施的完整流程。（2）通過(guò)項(xiàng)目的完整實(shí)現(xiàn)，完成對(duì)本項(xiàng)目?jī)?nèi)容相應(yīng)知識(shí)技能的掌握。3.情感態(tài)度與價(jià)值觀通過(guò)對(duì)鄉(xiāng)村民宿移動(dòng)應(yīng)用界面項(xiàng)目的整體設(shè)計(jì)與模型制作，提升分析問(wèn)題、解決問(wèn)題的能力，強(qiáng)調(diào)嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，提升舉一反三的能力。

項(xiàng)目目標(biāo)任務(wù)一：鄉(xiāng)村民宿首頁(yè)界面設(shè)計(jì)

任務(wù)二：鄉(xiāng)村民宿列表界面設(shè)計(jì)

任務(wù)三：鄉(xiāng)村民宿代金券界面設(shè)計(jì)

任務(wù)四：鄉(xiāng)村民宿民情文化詳情界面設(shè)計(jì)任務(wù)一：鄉(xiāng)村民宿首頁(yè)界面設(shè)計(jì)

任務(wù)1說(shuō)明：1.顯示系統(tǒng)廣告輪播圖，點(diǎn)擊輪播圖跳轉(zhuǎn)至民宿對(duì)應(yīng)詳情頁(yè)面。2.顯示搜索民宿名稱區(qū)域，可選擇當(dāng)前城市，選擇入住時(shí)間、離店時(shí)間、民宿名稱，點(diǎn)擊開始搜索，跳轉(zhuǎn)至民宿列表界面；3.顯示底部導(dǎo)航欄。采用圖標(biāo)加文字方式顯示，圖標(biāo)在上，文字在下，共4個(gè)圖標(biāo)，分別為“首頁(yè)”、“攻略”、“民宿”、“我的”，點(diǎn)擊標(biāo)簽進(jìn)入對(duì)應(yīng)頁(yè)面，并用顏色標(biāo)記當(dāng)前頁(yè)面所在導(dǎo)航欄。顯示系統(tǒng)廣告輪播圖，點(diǎn)擊輪播圖跳轉(zhuǎn)至民宿對(duì)應(yīng)詳情頁(yè)面。（1）新建畫板。設(shè)置尺寸為：iPhone12ProMax（428x926像素）。（2）打開素材。選擇“狀態(tài)欄.png”，置于頁(yè)面頂部，設(shè)置寬度W：

428，高度H：44。（3）打開素材。選擇“首頁(yè)banner.png”，設(shè)置寬度W：428，高度

H：140，拖動(dòng)放置在狀態(tài)欄下方相應(yīng)位置。操作步驟：2.顯示搜索民宿名稱區(qū)域，可選擇當(dāng)前城市，選擇入住時(shí)間、離店時(shí)間、民宿名稱，點(diǎn)擊開始搜索，跳轉(zhuǎn)至民宿列表界面。（1）繪制搜索區(qū)域。設(shè)置寬度W：396，高度H：208，位置X：16，

Y：140，圓角：15。效果選項(xiàng)勾選投影，位置X：2，Y：6，

B：6,投影顏色選擇#F2F0F0,依據(jù)效果圖添加線條、文本。（2）繪制2個(gè)鏈接區(qū)域。設(shè)置寬度W：190，高度H：60，圓角：10

間距16，效果勾選投影，位置X：2，Y：6，B：6，投影顏色

選擇#F2F0F0。（3）繪制旅游攻略區(qū)域。設(shè)置寬度W：259，高度H：116，圓角：

10。效果選項(xiàng)勾選投影，位置X：2，Y：6，B：6，投影顏色

選擇#F2F0F0。（4）繪制2個(gè)民宿區(qū)域。設(shè)置寬度W：190，高度H：105。3.顯示底部導(dǎo)航欄。采用圖標(biāo)加文字方式顯示，圖標(biāo)在上，文字在下，共4個(gè)圖標(biāo)，分別為“首頁(yè)”、“攻略”、“民宿”、“我的”，點(diǎn)擊標(biāo)簽進(jìn)入對(duì)應(yīng)頁(yè)面，并用顏色標(biāo)記當(dāng)前頁(yè)面所在導(dǎo)航欄。（1）使用直線工具繪制導(dǎo)航區(qū)域。設(shè)置寬度W：428，高度

H：0。（2）置入圖標(biāo)。打開素材，將“首頁(yè)”、“攻略”、“民

宿”、“我的”等圖標(biāo)放置到指定位置，并輸入文字。

首頁(yè)整體效果。任務(wù)二：鄉(xiāng)村民宿列表界面設(shè)計(jì)

任務(wù)2說(shuō)明：1.顯示搜索框，搜索框內(nèi)有搜索圖標(biāo)、提示文字；2.顯示民宿列表，列表項(xiàng)包括圖片、民宿名稱、民宿房間規(guī)格、民宿價(jià)格、評(píng)分、民宿位置等信息。操作步驟：1.顯示搜索框，搜索框內(nèi)有搜索圖標(biāo)、提示文字。（1）繪制矩形。單擊工具箱中的“矩形工具”，設(shè)置寬度

W：396，高度H：40，圓角：30，如圖2.15所示。填

充顏色：#F6F6F6，設(shè)置投影X：0，Y：3，B：6。（2）置入搜索圖標(biāo)，并輸入“09.16-09.18∣請(qǐng)輸入民宿

名稱”。2.顯示民宿列表，列表項(xiàng)包括圖片、民宿名稱、民宿房間規(guī)格、民宿價(jià)格、評(píng)分、民宿位置等信息。

（1）繪制6個(gè)民宿展示區(qū)域。設(shè)置寬度W：190，高度H：105。（2）置入圖形。打開素材，拖動(dòng)放置在相應(yīng)位置，輸入文字，

列表頁(yè)面整體效果。任務(wù)三：鄉(xiāng)村民宿代金券界面設(shè)計(jì)任務(wù)3說(shuō)明：1.代金券頁(yè)面，界面頂部顯示代金券標(biāo)題欄，返回上一頁(yè)按鈕，下面有“有效的”與“無(wú)效的”Tab切換，點(diǎn)擊后跳轉(zhuǎn)到對(duì)應(yīng)的有效代金券或者無(wú)效代金券頁(yè)面。2.在內(nèi)容區(qū)制作“有效的”與“無(wú)效的”按鈕切換交互動(dòng)作。操作步驟：1.代金券頁(yè)面，界面頂部顯示代金券標(biāo)題欄，返回上一頁(yè)按鈕，下面有“有效的”與“無(wú)效的”Tab切換，點(diǎn)擊后跳轉(zhuǎn)到對(duì)應(yīng)的有效代金券或者無(wú)效代金券頁(yè)面。

（1）設(shè)置導(dǎo)航欄尺寸為428x44像素，文本內(nèi)容為“代金券”，從素材庫(kù)選擇“返回.png”，置入標(biāo)題欄左側(cè)適當(dāng)位置，作為返回上一頁(yè)按鈕。（2）切換至原型面板，為返回上一頁(yè)按鈕添加交互動(dòng)作。設(shè)置點(diǎn)擊觸發(fā)自動(dòng)制作動(dòng)畫，目標(biāo)為“鄉(xiāng)村民宿首頁(yè)”，設(shè)置漸出，持續(xù)時(shí)間0.6s，使頁(yè)面可以通過(guò)返回按鈕跳轉(zhuǎn)回“鄉(xiāng)村民宿主頁(yè)”。

（3）標(biāo)題欄下方為內(nèi)容區(qū)，尺寸為428x838像素，可根據(jù)內(nèi)容對(duì)頁(yè)面尺寸進(jìn)行適當(dāng)延長(zhǎng)。2.在內(nèi)容區(qū)制作“有效的”與“無(wú)效的”按鈕切換交互動(dòng)作。

（1）制作好“有效的”Tab欄素材，并將全部“有效的”Tab欄元素添加為組件，命名為“有效”。

（2）點(diǎn)擊組件默認(rèn)狀態(tài)后面的“+”，新增“失效”按鈕選中的組件狀態(tài)，并制作此狀態(tài)對(duì)應(yīng)的“失效的”Tab欄素材。

（3）切換至原型面板，為“有效”組件中的“失效的”按鈕添加交互動(dòng)作，設(shè)置點(diǎn)擊觸發(fā)自動(dòng)制作動(dòng)畫，目標(biāo)為“失效”狀態(tài)，設(shè)置漸出，持續(xù)時(shí)間0.6s。為“失效”組件中的“有效的”按鈕添加交互動(dòng)作，設(shè)置點(diǎn)擊觸發(fā)自動(dòng)制作動(dòng)畫，目標(biāo)為“默認(rèn)”狀態(tài)，設(shè)置漸出，持續(xù)時(shí)間0.6s。3.依據(jù)頁(yè)面長(zhǎng)度，繪制多個(gè)代金券詳情圖片，每張圖片尺寸為396x110像素，圖片上下間隔13，代金券包含具體金額、滿減要求、有效期和“立即兌換”按鈕要素。任務(wù)四：鄉(xiāng)村民宿民情文化詳情界面設(shè)計(jì)任務(wù)4說(shuō)明：1.民情文化詳情頁(yè)面上半部包括民情文化標(biāo)題、圖片、文字介紹；2.下半部包括評(píng)論總數(shù)、發(fā)布評(píng)論的用戶頭像、昵稱、分布時(shí)間、評(píng)論點(diǎn)贊數(shù)和評(píng)論內(nèi)容，界面底部顯示發(fā)表評(píng)論輸入框和“評(píng)論”、“收藏”按鈕。操作步驟：1.民情文化詳情頁(yè)面上半部分包括民情文化標(biāo)題、圖片、文字介紹。

（1）設(shè)置標(biāo)題欄尺寸為428x44像素，文本內(nèi)容為當(dāng)前地區(qū)民情文

化標(biāo)題，標(biāo)題字號(hào)設(shè)置為18px，從素材庫(kù)選擇“返回.png”，

置入標(biāo)題欄左側(cè)適當(dāng)位置，作為返回上一頁(yè)按鈕。輸入標(biāo)題

文字“人生海海，有福相見”。（2）切換至原型面板，為返回上一頁(yè)按鈕添加交互動(dòng)作，使頁(yè)面

跳轉(zhuǎn)回鄉(xiāng)村民宿主頁(yè)。（3）標(biāo)題欄下方內(nèi)容區(qū)上半部分包括圖片及文字介紹，設(shè)置圖片

寬度為428，高度范圍200-220。文字介紹區(qū)域?qū)挾葹?28，高

度范圍350，字號(hào)為16px。2.下半部分包括評(píng)論總數(shù)、發(fā)布評(píng)論的用戶頭像、昵稱、發(fā)布時(shí)間、評(píng)論點(diǎn)贊數(shù)和評(píng)論內(nèi)容，界面底部顯示發(fā)表評(píng)論輸入框和“評(píng)論”、“收藏”按鈕。

（1）評(píng)論與上半部分文字介紹之間插入矩形框，尺寸為428x11，無(wú)

邊界，填充顏色設(shè)置為“#DDDDDD”。（2）單條評(píng)論區(qū)域，尺寸為428x300。內(nèi)部結(jié)構(gòu)為：用戶頭像選擇

圓形，尺寸36x36；昵稱字體設(shè)置為“蘋方”，字號(hào)設(shè)置為

16px；從素材庫(kù)中選擇“點(diǎn)贊.png”，置入評(píng)論區(qū)域右上角，

尺寸為13x14；評(píng)論點(diǎn)贊數(shù)在“點(diǎn)贊.png”后方，字號(hào)設(shè)置為

14px；圖片及數(shù)字間的互相間距為8；評(píng)論內(nèi)