《移動應(yīng)用界面設(shè)計》——項目七：智慧城市1.知識與技能（1）通過本項目的學(xué)習(xí)，要求掌握鄉(xiāng)村民宿項目界面設(shè)計的實施流程。

（2）掌握AdobeXD

軟件重復(fù)網(wǎng)格及Tab欄切換的制作方法。2.過程與方法（1）通過制作思維導(dǎo)圖，了解項目實施的完整流程。（2）通過項目的完整實現(xiàn)，完成對本項目內(nèi)容相應(yīng)知識技能的掌握。3.情感態(tài)度與價值觀通過對智慧城市移動應(yīng)用界面項目的整體設(shè)計與模型制作，提升分析問題、解決問題的能力，強調(diào)嚴謹?shù)墓ぷ鲬B(tài)度，提升舉一反三的能力。

項目目標任務(wù)一：智慧城市啟動頁界面設(shè)計

任務(wù)二：智慧城市全部服務(wù)界面設(shè)計

任務(wù)三：智慧城市驛站詳情界面設(shè)計

任務(wù)四：智慧城市市民熱線-新建訴求界面設(shè)計

任務(wù)五：智慧城市定制班車-日期選擇界面設(shè)計任務(wù)一：智慧城市啟動頁界面設(shè)計

任務(wù)1說明：1.選擇與主題相關(guān)的圖片作為啟動頁背景,頁面底部有"立即體驗"按鈕,網(wǎng)絡(luò)設(shè)置在頁面右上角。1．選擇與主題相關(guān)的圖片作為啟動頁背景,頁面底部有"立即體驗"按鈕,網(wǎng)絡(luò)設(shè)置在頁面右上角。

（1）新建畫板,設(shè)置畫板尺寸為：750x1624像素。

（2）選擇畫板名稱并雙擊左鍵,將畫板重命名為"啟動頁01"。

（3）打開素材,選擇"啟動頁背景.png",置于頁面。操作步驟：（4）繪制"立即體驗"按鈕區(qū)域（圓角矩形）,設(shè)置寬度W：360,高度H：100,位置X：195,Y：1410,透明度：80%,圓角：50。填充顏色為：#FFFFF。（5）為添加文字"立即體驗",設(shè)置字體為：思源黑體-Regular,字號：38,文字填充顏色為：#2566FF。（6）繪制"網(wǎng)絡(luò)設(shè)置"按鈕區(qū)域（圓角矩形）,設(shè)置寬度W：180,高度H：60,位置X：530,Y：80,圓角：30,邊界顏色為：#FFFFFF,邊界大小為：2。（7）添加文字"網(wǎng)絡(luò)設(shè)置",設(shè)置字體為：思源黑體-Regular,字號：30,文字填充顏色為：#FFFFFF。任務(wù)二：智慧城市全部服務(wù)界面設(shè)計

任務(wù)2說明：1．頁面左側(cè)顯示全部服務(wù)的分類：車主服務(wù)、生活服務(wù)、家庭服務(wù)。2.頁面右側(cè)顯示智慧城市各領(lǐng)域應(yīng)用服務(wù)入口,以圖標和名稱為單元宮格方式顯示,手機端每行顯示3個。3.顯示底部導(dǎo)航欄,采用圖標加文字方式顯示,圖標在上,文字在下,共五個圖標,分別為首頁、全部服務(wù)、數(shù)據(jù)分析、新聞、個人中心,并顏色標記當前頁面所在導(dǎo)航欄。4.點擊Tab欄標簽進入對應(yīng)頁面，并顏色標記當前所在Tab導(dǎo)航欄。操作步驟：頁面左側(cè)顯示全部服務(wù)的分類：車主服務(wù)、生活服務(wù)、家庭服務(wù)。

（1）新建畫板750×1624像素,并將畫板重命名為"全部服務(wù)頁01"。

（2）打開素材,選擇"黑狀態(tài)欄.png",置于頁面頂部。設(shè)置寬度W：750,高度H：52,位置X：0,Y：20。

（3）繪制標題欄區(qū)域（矩形）,設(shè)置寬度W：750,高度H：108,位置X：0,Y：72,填充顏色：#FFFFFF,添加標題欄文字“全部服務(wù)”,設(shè)置字體為：思源黑體-Regular,字號36,字間距100,文字填充顏色為：#000000。（4）繪制左側(cè)Tab欄區(qū)域（矩形）,設(shè)置寬度W：248,高度H：1280,位置X：0,Y：180,填充顏色：#E9F6FF。

（5）添加左側(cè)Tab欄文字"車主服務(wù)"、"生活服務(wù)"、"家庭服務(wù)",設(shè)置字體為：思源黑體-Regular,字號32,文字填充顏色為：#666666。其中,"生活服務(wù)"填充顏色為：#2566FF,三組文字縱向?qū)R,垂直平均分布。

（6）繪制Tab欄標簽（單邊圓角矩形）,設(shè)置寬度W：230,高度H：100,圓角：60,0,0,60,填充顏色：#F8FCFF,在旁邊繪制一個直徑為42的正圓和一個邊長為21的正方形。

（7）使圓形在上層,正方形在下層,兩個形狀相減得到圖形。復(fù)制此圖形,并旋轉(zhuǎn)180°后,將三個形狀編組,完成Tab欄標簽圖形。

（8）將Tab標簽圖形放置于"生活服務(wù)"下方,和文字水平居中對齊。2.頁面右側(cè)顯示智慧城市各領(lǐng)域應(yīng)用服務(wù)入口,以圖標和名稱為單元宮格方式顯示,手機端每行顯示3個。

（1）繪制服務(wù)入口區(qū)域（矩形）,設(shè)置寬度W：502,高度H：1280,位置X：248,Y：180,填充顏色：#F8FCFF。

（2）打開素材,選擇“門診預(yù)約.png”,置于頁面右側(cè),設(shè)置位置X：305,Y：210。

（3）添加圖標對應(yīng)文字"門診預(yù)約",設(shè)置字體為：思源黑體-Regular,字號28,居中對齊,文字填充顏色為：#666666。將文字與圖標垂直居中對齊。

（4）同時選中圖標與文字,使用重復(fù)網(wǎng)格拖拽列表,行數(shù)為4,列數(shù)為3,如圖7.26所示。調(diào)整網(wǎng)格橫向間距為40,縱向間距為50。

（5）選擇第二個圖標,單擊右鍵,選擇"替換圖像"命令,在對應(yīng)路徑中選擇"智慧環(huán)保.png",并將圖標下的文字更改為對應(yīng)內(nèi)容,并依次更改其它圖標及對應(yīng)文字內(nèi)容。3.顯示底部導(dǎo)航欄,采用圖標加文字方式顯示,圖標在上,文字在下,共五個圖標,分別為首頁、全部服務(wù)、數(shù)據(jù)分析、新聞、個人中心,并顏色標記當前頁面所在導(dǎo)航欄。（1）繪制底部導(dǎo)航欄區(qū)域（矩形）,設(shè)置寬度W：750,高度H：170,位置X：0,Y：1454,填充顏色：#FFFFFF。（2）繪制直線,設(shè)置寬度W：260,高度H：0,位置X：245,Y：1590,邊界顏色：#000000,邊界大小：10,圓頭端點。（3）打開素材,選擇"首頁.png",置于頁面底端,設(shè)置位置X：53,Y：1470。添加圖標對應(yīng)文字"首頁",設(shè)置字體為：思源黑體-Light,字號20,居中對齊,文字填充顏色為：#999999,并將文字與圖標居中對齊。（4）同時選中圖標與文字,使用重復(fù)網(wǎng)格向右拖拽生成列表,列數(shù)為5。調(diào)整網(wǎng)格橫向間距為100。（5）取消重復(fù)網(wǎng)格,選擇第二個圖標,單擊右鍵,選擇“替換圖像”命令,在對應(yīng)路徑中選擇“全部服務(wù).png”,并將圖標下的文字更改為對應(yīng)內(nèi)容,依次更改其他圖標及對應(yīng)文字內(nèi)容。4.點擊Tab欄標簽進入對應(yīng)頁面,并顏色標記當前所在Tab導(dǎo)航欄。

（1）選擇“全部服務(wù)頁01”的圖標列表,取消重復(fù)網(wǎng)格編組。復(fù)制畫板“全部服務(wù)頁01”,并將畫板重命名為"全部服務(wù)頁02"。

（2）將Tab欄標簽圖形垂直移動至上方,和“車主服務(wù)”垂直居中對齊,并將“車主服務(wù)”的文字填充顏色更改為：#2566FF。

（3）替換右側(cè)的圖標、更改對應(yīng)文字內(nèi)容,并刪除多余圖標及文字,完成"全部服務(wù)頁02"。按以上方法制作"家庭服務(wù)"Tab欄頁面,并將頁面命名為"全部服務(wù)頁03",

（4）切換至原型面板,在“全部服務(wù)頁01”畫板為“車主服務(wù)”Tab欄添加交互動作,設(shè)置點擊觸發(fā)自動制作動畫,目標為“全部服務(wù)頁02”,緩動漸出,持續(xù)時間0.3s。按以上方法,同樣為“家庭服務(wù)”Tab欄添加交互動作。

（5）在“全部服務(wù)頁02”畫板為“生活服務(wù)”和“家庭服務(wù)”Tab欄添加交互動作。在“全部服務(wù)頁03”畫板為“車主服務(wù)”和“生活服務(wù)”Tab欄添加交互動作。任務(wù)三：智慧城市驛站詳情界面設(shè)計任務(wù)3說明：1.進入驛站詳情頁頁面,頁面左上角顯示返回上一頁按鈕。2.頂端展示7張該驛站輪播照片,下方為該驛站地址,地址下面顯示該驛站聯(lián)系電話和提示辦理入住時間段,入住時間下方顯示男女和剩余床位數(shù)。3.下部為驛站詳細介紹,文本分為4部分：驛站簡介、房間配置、周邊配套和特色服務(wù)。操作步驟：1．進入驛站詳情頁頁面,頁面左上角顯示返回上一頁按鈕。（1）新建畫板750×1960像素,并將畫板重命名為"驛站詳情01"。（2）打開素材,選擇"白狀態(tài)欄.png",設(shè)置寬度W：750,高度H：52,位置X：0,Y：20。（3）繪制返回區(qū)域（正圓）,設(shè)置寬度W：50,高度H：50,位置X：40,Y：80,透明度：30,填充顏色：#000000。（4）打開素材,選擇"返回-白.png",位置X：45,Y：85。2．頂端展示7張該驛站輪播照片,下方為該驛站地址,地址下面顯示該驛站聯(lián)系電話和提示辦理入住時間段,入住時間下方顯示男女和剩余床位數(shù)。（1）打開素材,選擇"輪播圖.png",置于頁面頂部。（2）繪制頁碼區(qū)域（矩形）,設(shè)置寬度W：60,高度H：30,位置X：660,Y：400,透明度：30,圓角：26,填充顏色：#000000。添加頁碼文字"1/7",設(shè)置為思源黑體-Regular,字號20,文字填充顏色為：#FFFFFF,位置X：675,Y：404。（3）繪制驛站基本信息區(qū)域（單邊圓角矩形）,設(shè)置寬度W：750,高度H：420,位置X：0,Y：450,圓角：42,42,0,0,填充顏色：#000000。（4）在適當位置添加驛站標題"鉆石海灣驛站",設(shè)置字體為思源黑體-Medium,字號40,文字填充顏色為：#000000。（5）標題下方添加驛站地址、電話、時間,設(shè)置字體為思源黑體-Regular,字號28,透明度：50%,文字填充顏色為：#000000。（6）復(fù)制文本,移動到右邊,更改文字信息,將透明度更改為：75%。復(fù)制文本,移動到下方,更改文字信息為"剩余床位",將透明度更改為：100%,文字填充顏色為：#FF8000。（7）添加剩余床位圖標及文字,同時選中圖標與文字,使用重復(fù)網(wǎng)格向右拖拽生成列表,列數(shù)為2,調(diào)整網(wǎng)格橫向間距為80。更改圖標及對應(yīng)文字內(nèi)容。3.下部為驛站詳細介紹,文本分為4部分：驛站簡介、房間配置、周邊配套和特色服務(wù)。（1）繪制詳細介紹區(qū)域（矩形）,設(shè)置寬度W：750,高度H：1090,位置X：0,Y：870,填充顏色：#F8FCFF,如圖7.59所示。（2）繪制驛站簡介卡片（圓角矩形）,設(shè)置寬度W：690,高度H：360,位置X：30,Y：900,圓角：16,填充顏色：#FFFFFF。（3）添加驛站簡介文字,設(shè)置標題文字為思源黑體-Regular,字號32,文字填充顏色為：#000000。設(shè)置內(nèi)容文字為思源黑體-Light,字號28,文字填充顏色為：#000000。（4）復(fù)制以上卡片信息,垂直移動至下方并更改文字內(nèi)容及卡片大小。任務(wù)四：智慧城市市民熱線-新建訴求界面設(shè)計任務(wù)4說明：1．進入新建訴求頁頁面,頁面左上角顯示返回上一頁按鈕。2．頁面以填寫表格形式呈現(xiàn),每個填寫內(nèi)容包括填寫標題、輸入框以及輸入框內(nèi)的提示文字。3．填寫內(nèi)容包括標題填寫、承辦單位填寫、手機號填寫、訴求內(nèi)容填寫、上傳圖片、網(wǎng)絡(luò)圖片地址填寫。4．置底位置有"提交"按鈕。操作步驟：1．進入新建訴求頁頁面,頁面左上角顯示返回上一頁按鈕。（1）新建畫板750×1624像素,并將畫板重命名為"新建訴求頁01"。繪制矩形,設(shè)置寬度W：750,高度H：108,位置X：0,Y：72,填充顏色：#F8FCFF,（2）打開素材,選擇"黑狀態(tài)欄.png",置于頁面頂部,設(shè)置寬度W：750,高度H：52,位置X：0,Y：20。（3）添加標題欄文字"新建訴求",設(shè)置字體為：思源黑體-Regular,字號36,字間距100,文字填充顏色為：#000000,位置X：298,Y：108,打開素材,選擇"返回-黑.png",位置X：30,Y：108。2．頁面以填寫表格形式呈現(xiàn),每個填寫內(nèi)容包括填寫標題、輸入框以及輸入框內(nèi)的提示文字。（1）繪制訴求標題輸入框（圓角矩形）,設(shè)置寬度W：690,高度H：100,位置X：30,Y：200,圓角：16,填充顏色：#FFFFFF。（2）添加*號,設(shè)置字體為：思源黑體-Bold,字號40,文字填充顏色為：#FF8000,位置X：60,Y：240。（3）添加標題"訴求標題",設(shè)置字體為：思源黑體-Regular,字號28,文字填充顏色為：#000000,位置X：88,Y：236。（4）添加輸入框內(nèi)的提示文字"添加訴求標題",設(shè)置字體為：思源黑體-Light,字號28,文字填充顏色為：#CCCCCC,位置X：230,Y：236。（5）將輸入框、"*"號、標題、提示文字編組。3．填寫內(nèi)容包括標題填寫、承辦單位填寫、手機號填寫、訴求內(nèi)容填寫、上傳圖片、網(wǎng)絡(luò)圖片地址填寫。（1）復(fù)制"訴求標題"輸入框信息,垂直移動至下方并更改為"承辦單位"、"手機號碼"等相關(guān)文字內(nèi)容。（2）復(fù)制"手機號碼"輸入框信息,垂直移動至下方,將文字更改為"訴求內(nèi)容"相關(guān)內(nèi)容,將輸入框高度設(shè)置為H：260。（3）復(fù)制"訴求內(nèi)容"輸入框信息,垂直移動至下方,將標題文字更改為"上傳圖片",刪除提示文字和"*"號,將輸入框高度設(shè)置為H：300。（4）繪制上傳圖片按鈕區(qū)域（圓角矩形）,設(shè)置寬度W：300,高度H：160,圓角：16,填充顏色：#E3F3FF,邊界顏色：#2566FF,邊界大?。?,虛線：3,間隙：3。（5）添加圖片上傳按鈕內(nèi)的"+"號,設(shè)置字體為：思源黑體-Light,字號52,文字填充顏色為：#2566FF,"+"號與圖片上傳框居中對齊。（6）復(fù)制"手機號碼"輸入框信息,垂直移動至下方,將文字更改為"圖片網(wǎng)址"相關(guān)內(nèi)容,刪除"*"號。（7）選中所有輸入框組,垂直居中對齊,垂直平均分布。4．置底位置有"提交"按鈕。（1）繪制"提交"按鈕區(qū)域（圓角矩形）,設(shè)置寬度W：690,高度H：80,位置X：30,Y：1400,圓角：40,填充顏色：#2566FF。（2）添加按鈕文字“提交”,設(shè)置字體為：思源黑體-Regular,字號28,字間距：100,文字填充顏色為：#FFFFFF。任務(wù)五：智慧城市定制班車-日期選擇界面設(shè)計任務(wù)5說明：1．日期選擇頁面顯示標題欄,頁面左上角顯示返回上一頁按鈕。2．顯示日歷面板,面板頂部顯示年月,面板首排為星期一到星期日,日歷面板顯示用戶選擇的初始日期及結(jié)束日期,面板為當月的日期。3．日歷面板下為選擇的時間（時、分）。4．底部為"下一步"及"返回上一步"按鈕。操作步驟：1．日期選擇頁面顯示標題欄,頁面左上角顯示返回上一頁按鈕。（1）新建畫板750×1624像素,并將畫板重命名為"日期選擇頁01"。繪制矩形,設(shè)置寬度W：750,高度H：108,位置X：0,Y：72,填充顏色：#F8FCFF。（2）打開素材,選擇"黑狀態(tài)欄.png",置于頁面頂部,設(shè)置寬度W：750,高度H：52,位置X：0,Y：20。（3）添加標題欄文字"日期選擇",設(shè)置字體為：思源黑體-Regular,字號36,字間距100,文字填充顏色為：#000000,位置X：298,Y：108。（4）打開素材,選擇"返回-黑.png",設(shè)置位置為X：45,Y：85。2．顯示日歷面板,面板頂部顯示年月,面板首排為星期一到星期日,日歷面板顯示用戶選擇的初始日期及結(jié)束日期,面板為當月的日期。（1）繪制日歷面板區(qū)域（圓角矩形）,設(shè)置寬度W：680,高度H：630,位置X：35,Y：200,圓角：16,填充顏色：#FFFFFF。（2）添加年月"2023年8月",設(shè)置字體為：思源黑體-Regular,字號32,文字填充顏色為：#000000,位置X：299,Y：236。（3）打開素材,選擇"返回-黑.png",設(shè)置寬度W：20,高度H：20,位置X：70,Y：236。選中此圖標,按下快捷鍵Alt+Shift,左鍵拖動向右水平移動15px。再次重復(fù)此動作,將復(fù)制的箭頭向右水平移動45px。（4）同時選中向左的三個箭頭,按下快捷鍵Alt+Shift,左鍵拖動向右水平移動至對稱位置,選擇水平翻轉(zhuǎn)。（5）添加星期一文字,設(shè)置字體為：思源黑體-Bold,字號28,文字填充顏色為：#000000,位置X：82,Y：314。選擇文字,使用重復(fù)網(wǎng)格向右拖拽列表,列數(shù)為：7,間距：64。依次修改文字內(nèi)容。（6）復(fù)制星期列表,向下水平移動48px,修改字體為：DroidSansMono,字號28。依次修改文字內(nèi)容。使用重復(fù)網(wǎng)格向下拖拽列表,行數(shù)為：5,間距：60。依次修改文字內(nèi)容。（7）選擇日期,取消網(wǎng)格