《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)一

了解AdobeXD界面本模塊以產(chǎn)品原型為目標(biāo)，考查參賽選手熟練收集、分析和歸納客戶需求，清晰梳理業(yè)務(wù)流程，熟練使用UI設(shè)計(jì)軟件進(jìn)行產(chǎn)品UI/UE設(shè)計(jì)，掌握正確的UI配色方案，設(shè)計(jì)出符合業(yè)務(wù)邏輯的人體工學(xué)移動(dòng)App原型優(yōu)秀作品。讓我們先來了解一下AdobeXD的用法?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.創(chuàng)建面板2.繪制圖形3.文本4.畫板工具5.圖層6.原型工具【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】點(diǎn)擊左側(cè)工具欄中的“選擇”工具，選中繪制的矩形，如圖1-1-14所示。然后，點(diǎn)擊右側(cè)面板中的“重復(fù)網(wǎng)格”，可以橫排和豎排拉出重復(fù)的矩形，如圖1-1-15所示。圖1-1-14選中矩形圖1-1-15重復(fù)網(wǎng)格【任務(wù)實(shí)施】1.創(chuàng)建面板AdobeXD是一種輕量級(jí)矢量圖形編輯器和原型設(shè)計(jì)工具，AdobeXD-全功能UI/UX解決方案，從概念到原型分分鐘搞定，自帶一鍵標(biāo)注和一鍵導(dǎo)出。其中，Windows操作系統(tǒng)和MacOS操作系統(tǒng)均支持打開編輯Sketch、Psd源文件。創(chuàng)建一個(gè)新面板，用于此次實(shí)訓(xùn)。（見1-1-1）點(diǎn)擊Windows開始按鈕，在所有程序中,點(diǎn)擊AdobeXD程序圖標(biāo)，打開如圖1-1-1所示界面。【任務(wù)實(shí)施】圖1-1-1打開AdobeXD圖1-1-2創(chuàng)建新面板啟動(dòng)軟件，選擇1080×1920像素的面板，如圖1-1-2所示。【任務(wù)實(shí)施】2.繪制圖形和PS軟件一樣，AdobeXD界面布局的畫布左邊是工具欄，右邊是屬性欄，通過選擇不同的工具，可以選擇繪制矩形、圓、和多邊形。點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形如圖1-1-3所示。【任務(wù)實(shí)施】圖1-1-3繪制矩形如果想調(diào)整矩形的角的弧度，在右側(cè)屬性欄中，修改數(shù)值，調(diào)整弧度，如圖1-1-4所示。圖1-1-4調(diào)整弧度【任務(wù)實(shí)施】3.文本如圖1-1-5所示，點(diǎn)擊工具欄“文本”，通過文字面板在AdobeXD中輸入文字。圖1-1-5選擇文本調(diào)整文字大小、字體、顏色、粗細(xì)如圖1-1-6所示圖1-1-6調(diào)整文字樣式【任務(wù)實(shí)施】4.畫板工具點(diǎn)擊工具欄“畫板”如圖1-1-7所示，選中右側(cè)畫板尺寸。圖1-1-7選擇畫板工具【任務(wù)實(shí)施】再點(diǎn)擊任意位置可添加相同尺寸的畫板如圖1-1-8所示圖1-1-8添加畫板【任務(wù)實(shí)施】點(diǎn)擊畫布名稱，選中畫布，點(diǎn)擊鼠標(biāo)，然后，按住Alt＋鼠標(biāo)左鍵拖拽，復(fù)制畫板，如圖1-1-9所示。圖1-1-9復(fù)制畫板【任務(wù)實(shí)施】5.圖層點(diǎn)擊工具欄中“圖層”工具，如圖1-1-10所示選擇圖層工具。圖1-1-10選擇圖層工具拖動(dòng)圖層，可調(diào)整位置、鎖定、添加導(dǎo)出標(biāo)記、隱藏等，如圖1-1-11所示。圖1-1-11圖層樣式【任務(wù)實(shí)施】6.原型工具點(diǎn)擊左側(cè)工具欄中的“選擇”工具，選中繪制的矩形，如圖1-1-12所示。圖1-1-12選中矩形選中后，點(diǎn)擊上方原型工具，右側(cè)可以對(duì)矩形的屬性進(jìn)行調(diào)整，如圖1-1-13所示。圖1-1-13進(jìn)入原型設(shè)計(jì)面板THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)二

繪制狀態(tài)欄繪制狀態(tài)欄，狀態(tài)欄高度為72px?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.創(chuàng)建面板2.繪制矩形3.繪制狀態(tài)欄的內(nèi)容【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】矩形填充顏色時(shí)可以用透明度或顏色填充，選擇矩形點(diǎn)擊右側(cè)填充，顏色為#DCFAFF，可以實(shí)現(xiàn)與設(shè)置透明度一樣的效果，如圖1-2-17所示。圖1-2-17填充顏色【任務(wù)實(shí)施】1.創(chuàng)建面板點(diǎn)擊Windows開始按鈕，在所有程序中點(diǎn)擊AdobeXD,如圖1-2-1所示。圖1-2-1打開AdobeXD【任務(wù)實(shí)施】啟動(dòng)軟件，選擇1080×1920像素的面板如圖1-2-2所示。圖1-2-2創(chuàng)建新面板【任務(wù)實(shí)施】2.繪制矩形選擇左側(cè)工具欄的里矩形工具，如圖1-2-2所示。圖1-2-2選擇矩形【任務(wù)實(shí)施】在畫板頂部，繪制一個(gè)1080×72px的矩形。其中，長寬分別為W:1080，H:72；坐標(biāo)的位置分別為：X:0，Y:0，如圖1-2-3所示。圖1-2-3繪制矩形【任務(wù)實(shí)施】選中繪制的矩形，點(diǎn)擊左側(cè)填充顏色為#209EFF，邊框顏色為#209EFF，如圖1-2-4所示。圖1-2-4填充顏色【任務(wù)實(shí)施】3.繪制狀態(tài)欄的內(nèi)容（1）選擇左側(cè)工具欄“文本”，點(diǎn)擊狀態(tài)欄右上角輸入時(shí)間9：41，如圖1-2-5所示。圖1-2-5輸入文本【任務(wù)實(shí)施】（2）點(diǎn)擊左側(cè)工具欄“選擇”，選中文字，右側(cè)修改文本大小為30，居中，如圖1-2-6所示。圖1-2-6修改字體樣式【任務(wù)實(shí)施】選擇左側(cè)工具欄的里矩形工具，如圖1-2-7所示。圖1-2-7選擇矩形【任務(wù)實(shí)施】（3）繪制四個(gè)矩形做為信號(hào)圖標(biāo)，按住shift選中四個(gè)矩形右擊點(diǎn)擊組，如圖1-2-8所示。圖1-2-8合并為組【任務(wù)實(shí)施】長寬分別為6，12:；6，18；6，23；6，28，位置為X:855，Y:25，如圖1-2-9所示。圖1-2-9圖形大小和位置【任務(wù)實(shí)施】（4）點(diǎn)擊左側(cè)工具欄中的“鋼筆”，在畫布上繪制一個(gè)曲線大小為W：20，H：5，如圖1-2-10所示。圖1-2-10繪制曲線【任務(wù)實(shí)施】選中曲線，右擊點(diǎn)擊拷貝，左擊拷貝，移到第一個(gè)曲線上方，右側(cè)調(diào)整大小為W:29，H:8，如圖1-2-11所示。圖1-2-11繪制曲線【任務(wù)實(shí)施】（5）復(fù)制曲線移到第二個(gè)曲線上方，調(diào)整大小為W:44，H:12。如圖1-2-12所示。圖1-2-12【任務(wù)實(shí)施】（6）按住shift依次點(diǎn)擊畫完的三個(gè)曲線，右鍵點(diǎn)擊組，如圖1-2-13所示。圖1-2-13合并為組【任務(wù)實(shí)施】圖1-2-14調(diào)整位置右側(cè)位置修改為X:906，Y:24，如圖1-2-14所示?！救蝿?wù)實(shí)施】（7）點(diǎn)擊左側(cè)工具欄“矩形”，繪制兩個(gè)矩形大小位置分別為W:35，H:16，X:959，Y:27;W:43,H:22，X:955，Y:24，如圖1-2-15所示。圖1-2-15繪制矩形【任務(wù)實(shí)施】設(shè)置第二個(gè)矩形透明度為35，如圖1-2-16所示。圖1-2-16調(diào)整透明度THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)三

繪制導(dǎo)航欄底部導(dǎo)航欄元素“找工作、寵物醫(yī)院、看電影、物流查詢”設(shè)計(jì)完整。

【任務(wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.創(chuàng)建面板2.繪制內(nèi)容【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】按住shift＋鼠標(biāo)左鍵選擇繪制完成的三個(gè)矩形，按Ctrl＋G可以合并為組，如圖1-3-23所示。圖1-3-24合并圖形【任務(wù)實(shí)施】1.創(chuàng)建面板點(diǎn)擊windows開始按鈕，在所有程序中點(diǎn)擊AdobeXD程序，如圖1-3-1所示。圖1-3-1打開AdobeXD【任務(wù)實(shí)施】啟動(dòng)AdobeXD軟件主界面后，選擇1080×1920像素的面板如圖1-3-2所示。圖1-3-2創(chuàng)建新面板【任務(wù)實(shí)施】2.繪制內(nèi)容點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形長寬、位置為W:1080,H:144,X:0,Y:1776,如圖1-3-3所示。圖1-3-3繪制矩形【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“矩形”繪制一個(gè)矩形，大小、位置為W:52,H:45,X:149,Y:1811，如圖1-3-5所示。圖1-3-5繪制矩形【任務(wù)實(shí)施】再次繪制兩個(gè)矩形大小、位置分別為W:26,H:12,X:162,Y:1801；W:18，H：16，X:166，Y:1826，如圖1-3-6所示。圖1-3-6繪制矩形【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“直線”繪制兩個(gè)直線，長短、位置分別為W:17，H:8，X:149，Y:1822；W:17，H:8，X:183，Y:1822。如圖1-3-7所示。圖1-3-7繪制直線【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“文本”，輸入找工作，右側(cè)文本字體大小為30，靠左。文本位置為X:130，Y:1856，如圖1-3-8所示。圖1-3-8輸入文本【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“多邊形”，繪制一個(gè)三角形，大小、位置為W:71,H:24,X:368,Y:1807，如圖1-3-9所示。圖1-3-9繪制多邊形【任務(wù)實(shí)施】填充顏色為#6E6E6E，點(diǎn)擊左側(cè)工具欄“矩形”，繪制矩形，大小、位置為W:47，H:42，X:369，Y:1831.如圖1-3-10所示。圖1-3-10繪制矩形【任務(wù)實(shí)施】點(diǎn)擊右側(cè)“填充”，填充顏色為#6E6E6E，如圖1-3-11所示。圖1-3-11填充顏色【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“矩形”繪制兩個(gè)矩形，位置分別為W:6，H:21，X:381,Y:1827；W:6，H:21，X:389,Y:1821。如圖1-3-12所示。圖1-3-12繪制矩形【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“文本”，輸入寵物醫(yī)院，右側(cè)文本字體大小為30，靠左。文本位置為X:347，Y:1856，如圖1-3-13所示。圖1-3-14輸入文本【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形，大小、位置為W:49，H:36，X:607，Y：1825,如圖1-3-15所示。圖1-3-15繪制矩形【任務(wù)實(shí)施】點(diǎn)擊右側(cè)“填充”，填充顏色為#707070，如圖1-3-16所示。圖1-3-16填充顏色【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形，大小、位置為W:16，H:9，X:607，Y：1813,如圖1-3-17所示。圖1-3-17繪制矩形【任務(wù)實(shí)施】點(diǎn)擊右側(cè)“填充”，填充顏色為#707070，如圖1-3-18所示。圖1-3-19填充顏色【任務(wù)實(shí)施】點(diǎn)擊剛剛繪制的矩形，點(diǎn)擊鼠標(biāo)右鍵拷貝，右鍵粘貼，復(fù)制兩個(gè)矩形，右側(cè)位置輸入X:624，Y:1813，X:640，Y:1813.如圖1-3-20所示。圖1-3-20復(fù)制矩形【任務(wù)實(shí)施】點(diǎn)擊剛剛繪制的矩形，點(diǎn)擊鼠標(biāo)右鍵拷貝，右鍵粘貼，復(fù)制兩個(gè)矩形，右側(cè)位置輸入X:624，Y:1813，X:640，Y:1813.如圖1-3-20所示。圖1-3-20復(fù)制矩形【任務(wù)實(shí)施】點(diǎn)擊剛剛繪制的矩形，點(diǎn)擊鼠標(biāo)右鍵拷貝，右鍵粘貼，復(fù)制兩個(gè)矩形，右側(cè)位置輸入X:624，Y:1813，X:640，Y:1813.如圖1-3-20所示。圖1-3-20復(fù)制矩形【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形，大小、位置、傾斜度為W:42，H:6，X:605，Y：1794，,如圖1-3-21所示。圖1-3-21繪制圖形【任務(wù)實(shí)施】點(diǎn)擊右側(cè)“填充”，填充顏色為#707070，如圖1-3-21所示。圖1-3-21填充顏色【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“文本”，輸入看電影，右側(cè)文本字體大小為30，靠左。文本位置為X:585，Y:1857，如圖1-3-22所示。圖1-3-22輸入文本THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)四

實(shí)現(xiàn)搜索框功能制作搜索框，實(shí)現(xiàn)搜索框功能?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制基本圖形2.插入組件3.加入動(dòng)作【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】點(diǎn)擊左側(cè)工具欄“直線”，繪制一條直線，大小、位置為W:0，H:82，X:865，Y:284，如圖1-4-15所示。圖1-4-15繪制直線【技術(shù)介紹】點(diǎn)擊看電影-1面板的名稱，按住Alt拖動(dòng)面板，可以快速復(fù)制面板，如圖1-4-16所示。圖1-4-16復(fù)制面板【任務(wù)實(shí)施】繪制基本圖形點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。在打開的主界面上，點(diǎn)擊左側(cè)工具欄“矩形”，繪制一個(gè)矩形，大小、位置為：W:1006，H:110，X:39，Y：270，如圖1-4-1所示。圖1-4-1繪制矩形【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“文本”，輸入請輸入搜索內(nèi)容，右側(cè)文本字體大小為40，靠左。文本位置為X:64，Y:299，如圖1-4-2所示。圖1-4-2輸入文本【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“文本”，輸入搜索，右側(cè)文本字體大小為40，靠左。文本位置為X:921，Y:299，如圖1-4-3所示。圖1-4-4輸入文本【任務(wù)實(shí)施】圖1-4-6設(shè)置懸停狀態(tài)點(diǎn)擊懸停狀態(tài)，雙擊文字輸入l，右側(cè)文字大小為50，左對(duì)齊，如圖1-4-6所示?！救蝿?wù)實(shí)施】點(diǎn)擊切換狀態(tài)，如圖1-4-7所示。圖1-4-7選中切換狀態(tài)【任務(wù)實(shí)施】雙擊文字輸入變形金剛，右側(cè)文字大小為40，左對(duì)齊，如圖1-4-8所示。圖1-4-8調(diào)整樣式【任務(wù)實(shí)施】點(diǎn)擊左側(cè)工具欄“畫板”，點(diǎn)擊右側(cè)iPhone12Promax，右側(cè)畫板大小改為W：1080，H：1920，如圖1-4-9所示。圖1-4-9新建畫布【任務(wù)實(shí)施】點(diǎn)擊原型，進(jìn)入原型設(shè)計(jì)界面如圖1-4-10所示。圖1-4-11進(jìn)入原型【任務(wù)實(shí)施】點(diǎn)擊看電影-2中的搜索，如圖1-4-12所示。圖1-4-12選中文本【任務(wù)實(shí)施】按住藍(lán)色箭頭拖動(dòng)到畫板看電影-2中，如圖1-4-13所示。圖1-4-13連接畫板【任務(wù)實(shí)施】點(diǎn)擊右側(cè)類型中的自動(dòng)制作動(dòng)畫，觸發(fā)中的點(diǎn)擊，如圖1-4-14所示。圖1-4-14設(shè)置屬性THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)五

設(shè)計(jì)輪播圖界面頁面中制作輪播圖

【任務(wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.插入照片2.調(diào)整圖片大小位置3.設(shè)置原型動(dòng)作【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】插入的照片可以設(shè)置圓角來提升美觀度，點(diǎn)擊導(dǎo)入的照片，右側(cè)圓角設(shè)置為20，如圖1-5-13所示。圖1-5-13調(diào)整圓角【技術(shù)介紹】點(diǎn)擊看電影-1，按住Alt鍵拖動(dòng)選中的畫板，可以快速復(fù)制面板，如圖1-5-14所示。圖1-5-14復(fù)制面板

【任務(wù)實(shí)施】1.插入照片點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。點(diǎn)擊左上角文件，點(diǎn)擊導(dǎo)入，如圖1-5-1所示。圖1-5-1導(dǎo)入照片【任務(wù)實(shí)施】選擇素材庫1-1-1，點(diǎn)擊確定，如圖1-5-2所示。圖1-5-2導(dǎo)入照片【任務(wù)實(shí)施】調(diào)整圖片位置、大小，點(diǎn)擊導(dǎo)入的照片，右側(cè)大小、位置為W:1020，X:30，H:301，Y:407，如圖1-5-3所示。圖1-5-3導(dǎo)入照片【任務(wù)實(shí)施】復(fù)制看電影-1，點(diǎn)擊看電影-1面板，鼠標(biāo)右擊拷貝，如圖1-5-4所示。圖1-5-4復(fù)制面板【任務(wù)實(shí)施】在空白處右擊鼠標(biāo)，點(diǎn)擊粘貼，復(fù)制面板就完成了，再次右擊復(fù)制一個(gè)面板，如圖1-5-5所示。圖1-5-5粘貼面板【任務(wù)實(shí)施】點(diǎn)擊看電影-1-2面板中的照片右擊，點(diǎn)擊替換圖像，如圖1-5-6所示。圖1-5-6替換圖像【任務(wù)實(shí)施】選中素材庫中的1-1-2.jpg，點(diǎn)擊導(dǎo)入，如圖1-5-7所示。圖1-5-7導(dǎo)入照片【任務(wù)實(shí)施】點(diǎn)擊看電影-1-3面板中的照片右擊，點(diǎn)擊替換圖像，如圖1-5-8所示。圖1-5-8替換圖像【任務(wù)實(shí)施】選中素材庫中的1-1-3.jpg，點(diǎn)擊導(dǎo)入，如圖1-5-9所示。圖1-5-9替換圖像【任務(wù)實(shí)施】點(diǎn)擊上方原型，進(jìn)入原型界面，選中看電影-1面板連接到看電影-1-2面板，如圖1-5-10所示。圖1-5-10連接面板【任務(wù)實(shí)施】點(diǎn)擊上方原型，進(jìn)入原型界面，選中看電影-1-2面板連接到看電影-1-3面板，如圖1-5-11所示。圖1-5-11連接面板【任務(wù)實(shí)施】點(diǎn)擊上方原型，進(jìn)入原型界面，選中看電影-1-3面板連接到看電影-1面板，如圖1-5-11所示。圖1-5-11連接面板【任務(wù)實(shí)施】選中看電影-1面板，右側(cè)觸發(fā)：時(shí)間，延遲：三秒，類型：自動(dòng)制作動(dòng)畫，目標(biāo)：看電影-1-2，緩動(dòng)：漸出，持續(xù)時(shí)間：0.3秒，如圖1-5-12所示。此外，看電影-1-2，看電影-1-3制作流程同上所示。圖1-5-12設(shè)置屬性THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)六

設(shè)計(jì)服務(wù)入口服務(wù)入口需要顯示提示小標(biāo)題，服務(wù)入口的不同圖標(biāo)，對(duì)應(yīng)的服務(wù)入口名稱等信息。【任務(wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制小標(biāo)題2.導(dǎo)入圖片3.輸入文字4.復(fù)制粘貼【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】在右側(cè)“屬性欄”面板，點(diǎn)擊“重復(fù)網(wǎng)格”時(shí)，注意行與行所調(diào)整的間距，根據(jù)頁面整體美觀進(jìn)行調(diào)整，根據(jù)題目繪制相應(yīng)的個(gè)數(shù)，在調(diào)整完之后，點(diǎn)擊右側(cè)“屬性欄”中選擇“取消網(wǎng)格編組”按鈕如圖1-6-12所示。圖1-6-12重復(fù)網(wǎng)格【任務(wù)實(shí)施】繪制小標(biāo)題點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。利用“直線”工具在全部服務(wù)下方（W:0,H:45,X:44,Y:876）繪制一個(gè)小豎線，如圖1-6-1所示。圖1-6-1繪制直線【任務(wù)實(shí)施】選中小豎線顏色修改為#49B0FE，大小改為10如圖1-6-2所示。圖1-6-2填充顏色【任務(wù)實(shí)施】點(diǎn)擊“文本”工具，在豎線后（X:52,Y:868）輸入“全部服務(wù)”文字如圖1-6-3所示。圖1-6-3輸入文本【任務(wù)實(shí)施】點(diǎn)擊文本框，修改顏色為黑色，字體大小為40，字體粗細(xì)為Regular如圖1-6-4所示。圖1-6-4修改樣式【任務(wù)實(shí)施】2.導(dǎo)入圖片點(diǎn)擊左側(cè)工具欄中“主頁”，選擇“橢圓”工具，在頁面中繪制一個(gè)圓形（W:124,H:124,X:99,Y:969）如圖1-6-5所示。圖1-6-6繪制圓形【任務(wù)實(shí)施】點(diǎn)擊右側(cè)屬性欄填充，選擇顏色如圖1-6-6所示。圖1-6-6填充顏色【任務(wù)實(shí)施】將圖標(biāo)復(fù)制在橢圓中（W:42,H:42,X:139,Y:1010）修改顏色為白色如圖1-6-7所示。圖1-6-7繪制圖標(biāo)【任務(wù)實(shí)施】3.輸入文字點(diǎn)擊左側(cè)工具欄中的文本工具，在橢圓的下方輸入服務(wù)名稱（X:118,Y:1100）如圖1-6-8所示。圖1-6-8輸入文本【任務(wù)實(shí)施】選中文本框，修改文字（顏色為#A6A6A6，字體大小為40，字體粗細(xì)為Regular）如圖1-6-9所示。圖1-6-9修改屬性【任務(wù)實(shí)施】4.復(fù)制粘貼選中橢圓和服務(wù)名稱結(jié)合成組，利用“重復(fù)網(wǎng)格”工具復(fù)制相應(yīng)個(gè)數(shù)后移動(dòng)合適位置點(diǎn)擊“取消網(wǎng)格編組”按鈕如圖1-6-10所示。圖1-6-10復(fù)制組件【任務(wù)實(shí)施】將復(fù)制出的剩余組件，按照要求修改對(duì)應(yīng)內(nèi)容如圖1-6-11所示。圖1-6-11修改位置THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)七

繪制信息顯示板塊信息顯示板塊需要顯示電影封面圖片，電影名稱，購票按鈕等相關(guān)內(nèi)容信息?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制小標(biāo)題2.導(dǎo)入圖片3.輸入電影名稱4.繪制購票按鈕【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】制作小標(biāo)題時(shí)，可以對(duì)垂直豎線或輸入的文字進(jìn)行顏色大小字體上的更改，但最后修改完成的格式，一定要與整個(gè)頁面的布局顏色進(jìn)行統(tǒng)一，如圖1-7-16所示。圖1-7-16調(diào)整布局顏色【任務(wù)實(shí)施】1.繪制小標(biāo)題點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。利用“直線”工具在全部服務(wù)下方（W:0,H:45,X:44,Y:1195）繪制一個(gè)小豎線如圖1-7-1所示。圖1-7-1繪制直線【任務(wù)實(shí)施】選中小豎線顏色修改為#49B0FE，大小改為10如圖1-7-2所示。圖1-7-2修改顏色、大小【任務(wù)實(shí)施】點(diǎn)擊“文本”工具，在豎線后（X:52,Y:1187）輸入“正在熱映”文字如圖1-7-3所示。圖1-7-3輸入文本【任務(wù)實(shí)施】2.導(dǎo)入圖片點(diǎn)擊上方菜單欄中“主頁”，選擇“導(dǎo)入”功能，選擇素材庫1-1-4，點(diǎn)擊“導(dǎo)入”按鈕。圖1-7-5導(dǎo)入照片【任務(wù)實(shí)施】如圖1-7-6所示將圖片導(dǎo)入至頁面（W:242,H:356,X:82,Y:1270）。圖1-7-6調(diào)整大小【任務(wù)實(shí)施】3.輸入電影名稱點(diǎn)擊左側(cè)工具欄中的文本工具，在電影圖片的下方輸入電影名稱（X:143,Y:1626）如圖1-7-7所示。圖1-7-7輸入文本【任務(wù)實(shí)施】選中文本框，修改文字（顏色為黑色，字體大小為30，字體粗細(xì)為Regular）如圖1-7-8所示。圖1-7-8修改文字屬性【任務(wù)實(shí)施】選中文本框，修改文字（顏色為黑色，字體大小為30，字體粗細(xì)為Regular）如圖1-7-8所示。圖1-7-8修改文字屬性【任務(wù)實(shí)施】4.繪制購票按鈕（1）利用左側(cè)工具欄中的矩形工具，在電影名稱下方繪制一個(gè)小矩形（W:149,H:65,X:143,Y:1688）如圖1-7-9所示。圖1-7-9繪制矩形【任務(wù)實(shí)施】（2）選中矩形，在右側(cè)屬性欄面板中選擇“外觀”中的圓角度數(shù)（輸入：38），填充顏色為：#FF8800，大小為：1，如圖1-7-10所示。圖1-7-10修改矩形樣式【任務(wù)實(shí)施】（3）利用文本工具在圓角矩形中輸入“購票”文字（X:192,Y:1701），如圖1-7-11所示。圖1-7-11輸入文字【任務(wù)實(shí)施】（4）修改文字（文字顏色：白色，文字大?。?0，文字粗細(xì)：Regular）如圖1-7-12所示。圖1-7-12修改文字【任務(wù)實(shí)施】（5）點(diǎn)擊圓角矩形和購票文字，結(jié)合成組如圖1-7-13所示。圖1-7-13合并成組【任務(wù)實(shí)施】（6）選擇電影圖片，電影名稱，購票按鈕結(jié)合成組，利用“重復(fù)網(wǎng)格”工具復(fù)制相應(yīng)個(gè)數(shù)后點(diǎn)擊“取消網(wǎng)格編組”按鈕，如圖1-7-14所示。圖1-7-14復(fù)制組件【任務(wù)實(shí)施】（7）將復(fù)制出的剩余組件，按照要求修改對(duì)應(yīng)內(nèi)容如圖1-7-15所示。圖1-7-15修改位置THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)八

設(shè)計(jì)物流查詢主界面

實(shí)現(xiàn)設(shè)計(jì)某物流公司查詢主頁面功能：點(diǎn)擊底部導(dǎo)航欄“物流查詢”，進(jìn)入物流查詢頁面，頁面包括：搜索輸入框、廣告輪播圖、物流公司推薦，并且，下方顯示物流公司列表，列表項(xiàng)顯示物流公司名稱和縮略圖等項(xiàng)?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.新建畫板頁面2.修改畫板固定布局3.繪制搜索輸入框4.插入廣告輪播圖5.繪制物流公司推薦6.繪制物流公司列表【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】制作輪播圖時(shí)，將繪制完成的畫板復(fù)制三個(gè)（輪播圖有幾張圖就復(fù)制幾個(gè)畫板）如圖1-8-54所示。圖1-8-54：復(fù)制畫板【技術(shù)介紹】將剩余兩個(gè)畫板的展示圖片更換成不同的圖片，如圖1-8-55所示。點(diǎn)擊軟件中的原型模式，選中畫板。圖1-8-55：修改圖片【技術(shù)介紹】在右側(cè)屬性欄中的交互方式選擇“時(shí)間”，延遲“2秒”，類型“自動(dòng)制作動(dòng)畫”，緩動(dòng)“對(duì)齊”持續(xù)時(shí)間“0.3秒”如圖1-8-56所示。圖1-8-56：設(shè)置數(shù)值【技術(shù)介紹】三個(gè)畫板相互連接即可完成如圖1-8-57所示。圖1-8-57：連接畫板【任務(wù)實(shí)施】1.新建畫板頁面點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。在打開的主界面上，請按照題目中的規(guī)定尺寸（1080×1920）新建畫板，用于繪制物流公司頁面的相關(guān)內(nèi)容，點(diǎn)擊頁面左上角“文件”點(diǎn)擊“新建”按鈕，進(jìn)入新建頁面如圖1-8-1所示。【任務(wù)實(shí)施】2.修改畫板固定布局選擇某一個(gè)繪制完成的畫板，右鍵復(fù)制粘貼，將內(nèi)容全部刪除，只留下空白的標(biāo)簽欄導(dǎo)航欄，狀態(tài)欄如圖1-8-2所示。圖1-8-2：空白頁面【任務(wù)實(shí)施】單擊選中狀態(tài)欄，在“素材庫”里選擇圖標(biāo)素材，點(diǎn)擊“導(dǎo)入”按鈕，導(dǎo)入至狀態(tài)欄，修改其大小（W:1080,H:49,X:0,Y:7）如圖1-8-3所示。圖1-8-3：導(dǎo)入時(shí)間素材【任務(wù)實(shí)施】單擊選中導(dǎo)航欄，在頁面右側(cè)屬性面板中選擇“填充”，（顏色為：#49B0FE）如圖1-8-4所示。圖1-8-4：填充顏色【任務(wù)實(shí)施】單擊關(guān)閉“屬性”下方的“邊界”，點(diǎn)擊取消前面的勾選框如圖1-8-5所示。圖1-8-5：填充顏色【任務(wù)實(shí)施】3.繪制搜索輸入框（1）在導(dǎo)航欄下方繪制搜索輸入框，在左側(cè)的工具欄面板中點(diǎn)擊“矩形”工具，在導(dǎo)航欄下方繪制一條矩形如圖1-8-6所示。如圖1-8-6繪制矩形【任務(wù)實(shí)施】并填充顏色（顏色為：#EEF8FF）如圖1-8-7如圖。圖1-8-7：填充顏色【任務(wù)實(shí)施】關(guān)閉“邊界”勾選框如圖1-8-8所示。圖1-8-8：關(guān)閉“邊界”勾選框【任務(wù)實(shí)施】（2）左側(cè)工具欄面板中選擇“文本”工具，在繪制完成的矩形上點(diǎn)擊輸入“請輸入內(nèi)容”等相關(guān)類型的提示文字如圖1-8-9所示。圖1-8-9：添加提示語【任務(wù)實(shí)施】（3）輸入完成后，單擊文本框，在右側(cè)屬性面板中的“文本”（字體大?。?5，字體粗細(xì)：Regular）如圖1-8-10所示。圖1-8-10：修改字體【任務(wù)實(shí)施】點(diǎn)擊“填充”顏色為（#B1B1B1）“邊界”顏色相同如圖1-8-11所示。圖1-8-11：修改顏色字體【任務(wù)實(shí)施】將修改后的文本框放置在矩形框內(nèi)（X:116,Y:275）如圖1-8-12所示。圖1-8-12：更改位置【任務(wù)實(shí)施】（4）按住shift鍵點(diǎn)擊繪制完成的文字和矩形，單擊鼠標(biāo)右鍵選擇“組”結(jié)合成組件如圖1-8-13所示。圖1-8-13：結(jié)合成組【任務(wù)實(shí)施】（5）點(diǎn)擊左側(cè)工具欄面板中的“矩形”工具，在搜索輸入框的右側(cè)（W:171,H:110,X:843,Y:250）繪制一個(gè)等比例縮小的矩形如圖1-8-14。圖1-8-14：繪制矩形【任務(wù)實(shí)施】顏色填充為白色，邊界為灰色（#707070）如圖1-8-15所示。圖1-8-15：填充顏色【任務(wù)實(shí)施】在右側(cè)屬性面板中找到“外觀”，修改矩形的圓角弧度如圖1-8-16所示。圖1-8-16：修改圓角弧度【任務(wù)實(shí)施】利用“文本”工具在矩形內(nèi)輸入“搜索”文字（X:884,Y:275），修改文字（字體大小：45，字體粗細(xì)：Regular，邊界顏色：黑色，填充顏色：黑色）如圖1-8-17所示。圖1-8-17：修改字體【任務(wù)實(shí)施】（6）單擊輸入框組件，選中后點(diǎn)擊屬性面板中的“組件”效果，點(diǎn)擊“組件”后的“+”出現(xiàn)“默認(rèn)狀態(tài)”如圖1-8-18所示。圖1-8-18：默認(rèn)狀態(tài)【任務(wù)實(shí)施】點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇懸停狀態(tài)如圖1-8-19所示。圖1-8-19：懸停狀態(tài)【任務(wù)實(shí)施】再次點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇切換狀態(tài)如圖1-8-20所示。圖1-8-20：切換狀態(tài)【任務(wù)實(shí)施】（7）選中“懸停狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-8-21所示。圖1-8-21：雙擊輸入框【任務(wù)實(shí)施】將文本框刪除，就可以在矩形中增加內(nèi)容，單擊“直線”工具，在矩形內(nèi)繪制一條（W:0,H:41,X:123,Y:285）直線如圖1-8-22所示。圖1-8-22：添加直線【任務(wù)實(shí)施】點(diǎn)擊直線，修改顏色為黑色，將“大小”修改為8，如圖1-8-23所示。圖1-8-23：修改大小【任務(wù)實(shí)施】（8）選中“切換狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-8-24所示。圖1-8-24：雙擊輸入框【任務(wù)實(shí)施】單擊矩形內(nèi)的文本框，輸入某物流公司名稱，點(diǎn)擊文本框進(jìn)行修改（顏色：黑色，字體大小：45，字體粗細(xì)：Regular）如圖1-8-25所示。圖1-8-25：修改字體【任務(wù)實(shí)施】4.插入廣告輪播圖（1）點(diǎn)擊頁面左上角的“文件”，選擇“導(dǎo)入”功能，單擊進(jìn)入“素材包”，在素材包中選擇自己所需要的圖片（選擇10-1,10-2,10-3圖片）點(diǎn)擊導(dǎo)入如圖1-8-26所示?！救蝿?wù)實(shí)施】（2）選擇需要的圖片后（若需要多張圖片按住shift鍵進(jìn)行多選），點(diǎn)擊“導(dǎo)入”按鈕，所選擇的圖片就會(huì)出現(xiàn)在AdobeXD頁面中的畫板上如圖1-8-27所示。圖1-8-27：導(dǎo)入圖片【任務(wù)實(shí)施】（3）對(duì)導(dǎo)入的圖片進(jìn)行組合成組件，按住shift鍵點(diǎn)擊圖片后，右擊選擇“組”功能如圖1-8-28所示。圖1-8-28：結(jié)合成組進(jìn)行調(diào)整圖片大?。?080×400）以及位置（W:3240,H:400,X:0,Y:385）如圖1-8-29所示。圖1-8-29：修改圖片【任務(wù)實(shí)施】5.繪制物流公司推薦（1）利用“直線”工具在輪播圖下方（W:0,H:46,X:40,Y:842）繪制一個(gè)小豎線如圖1-8-30所示。圖1-8-30：繪制小標(biāo)題選中小豎線顏色修改為#49B0FE，大小改為10如圖1-8-31所示。圖1-8-31：繪制小標(biāo)題【任務(wù)實(shí)施】點(diǎn)擊“文本”工具，在豎線后（X:52,Y:837）輸入“物流公司推薦”文字如圖1-8-32所示。圖1-8-32：修改文字【任務(wù)實(shí)施】點(diǎn)擊文本框，修改顏色為黑色，字體大小為40，字體粗細(xì)為Regular如圖1-8-33所示。圖1-8-33：調(diào)整顏色【任務(wù)實(shí)施】（2）點(diǎn)擊頁面左上角的“文件”，選擇“導(dǎo)入”功能，單擊進(jìn)入“素材包”，選擇自己所需要的圖片如圖（10-13）1-8-34所示。圖1-8-34：導(dǎo)入圖片【任務(wù)實(shí)施】（3）選擇完需要的圖片后，點(diǎn)擊“導(dǎo)入”按鈕，所選擇的圖片就出現(xiàn)在AdobeXD頁面中如圖1-8-35所示。圖1-8-35：導(dǎo)入圖片【任務(wù)實(shí)施】（4）調(diào)整圖片大?。?28×128）以及位置（W:128,H:128,X:92,Y:924）如圖1-8-37所示。如圖1-8-37：調(diào)整圖片【任務(wù)實(shí)施】點(diǎn)擊“文本”工具，在物流公司圖片下方（X:86,Y:1052）輸入該物流公司的名稱并結(jié)合成組（字體大小：35，字體粗細(xì)：Regular）如圖1-8-38所示。圖1-8-38：結(jié)合成組【任務(wù)實(shí)施】（5）選中組件，在右側(cè)屬性欄點(diǎn)擊“重復(fù)網(wǎng)格”按鈕，根據(jù)題目繪制相應(yīng)的個(gè)數(shù)如圖1-8-39所示。圖1-8-39：重復(fù)網(wǎng)格【任務(wù)實(shí)施】在等比例調(diào)整后點(diǎn)擊“取消網(wǎng)格編組”按鈕如圖1-8-40所示。圖1-8-40：利用“重復(fù)網(wǎng)格”【任務(wù)實(shí)施】（6）點(diǎn)擊某個(gè)組件，雙擊選中圖片，右鍵選擇“替換圖像”在“素材庫”中選擇自己所需要的圖片（10-6—10-13）更改圖片后。將下方對(duì)應(yīng)的物流公司名稱也一并更改如圖1-8-41所示。圖1-8-41：修改內(nèi)容【任務(wù)實(shí)施】6.繪制物流公司列表（1）利用“直線”工具在“物流公司推薦列表”下方繪制一個(gè)小豎線如圖1-8-42所示。圖1-8-42：繪制小標(biāo)題選中小豎線顏色修改為#49B0FE，大小改為10如圖1-8-43所示。圖1-8-43：線條大小【任務(wù)實(shí)施】點(diǎn)擊“文本”工具，在豎線后（X:52,Y:1329）輸入“其他物流公司列表”文字如圖1-8-44所示。圖1-8-44：輸入文本【任務(wù)實(shí)施】點(diǎn)擊文本框，修改顏色為黑色，字體大小為40，字體粗細(xì)為Regular如圖1-8-45所示。圖1-8-45：修改字體【任務(wù)實(shí)施】（2）在標(biāo)題下方位置導(dǎo)入圖片（W:128,H:128,X:86,Y:1403）調(diào)整大小（128×128）如圖1-8-46所示。圖1-8-46：調(diào)整圖片【任務(wù)實(shí)施】利用“文本”工具在圖片一側(cè)（X:238,Y:1436）輸入物流公司名稱（字體顏色：黑色，字體大?。?5，字體粗細(xì)：Regular）如圖1-8-47所示。圖1-8-47：調(diào)整字體【任務(wù)實(shí)施】將圖片和文字結(jié)合成組件如圖1-8-48所示。圖1-8-48：結(jié)合成組（3）選中組件，在右側(cè)屬性欄中點(diǎn)擊“重復(fù)網(wǎng)格”，根據(jù)題目繪制相應(yīng)的個(gè)數(shù)如圖1-8-49所示。圖1-8-49：利用重復(fù)網(wǎng)格工具【任務(wù)實(shí)施】列表超出畫板時(shí)，雙擊選中畫板點(diǎn)擊底部邊框向下拖動(dòng)至合適位置如圖1-8-50所示。圖1-8-50：修改畫板在等比例調(diào)整之后，右鍵選擇“取消網(wǎng)格編組”如圖1-8-51所示。圖1-8-51：取消網(wǎng)格編組【任務(wù)實(shí)施】（4）點(diǎn)擊某個(gè)組件，雙擊選中圖片，右鍵選擇“替換圖像”在“素材庫”中選擇自己所需要的圖片（10-14—10-18）更改圖片后，將下方對(duì)應(yīng)的物流公司名稱也一并更改如圖1-8-52所示。圖1-8-52：修改列表【任務(wù)實(shí)施】修改完成后，點(diǎn)擊底部導(dǎo)航欄，將其圖層拖移到所有圖層最上方，然后在屬性面板中選擇“滾動(dòng)式固定位置”如圖1-8-53所示。圖1-8-53：滾動(dòng)時(shí)固定位置【任務(wù)實(shí)施】（5）全部修改完后，選中畫板Ctrl+c復(fù)制，Ctrl+v粘貼新的畫板，按照首字母A-Z和Z-A進(jìn)行“其他物流公司列表”順序的顛倒修改如圖1-8-53所示。圖1-8-53：復(fù)制粘貼THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)九

實(shí)現(xiàn)物流排序功能

實(shí)現(xiàn)顯示物流公司列表，列表項(xiàng)顯示物流公司名稱和縮略圖。在“物流查詢頁面”中的“其他物流公司”中，包含2個(gè)單選按鈕，每個(gè)元素完整顯示，點(diǎn)擊排序按鈕能夠正常實(shí)現(xiàn)排序功能?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制提示標(biāo)題2.繪制排序按鈕3.導(dǎo)入圖片，輸入文字4.最后修改【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】在右側(cè)“屬性欄”面板，點(diǎn)擊“重復(fù)網(wǎng)格”時(shí)，注意行與行所調(diào)整的間距，根據(jù)頁面整體美觀進(jìn)行調(diào)整，根據(jù)題目繪制相應(yīng)的個(gè)數(shù)，在調(diào)整完之后，點(diǎn)擊右側(cè)“屬性欄”中選擇“取消網(wǎng)格編組”按鈕如圖1-9-21所示。圖1-9-21：畫面美觀【任務(wù)實(shí)施】繪制提示標(biāo)題點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。在打開主界面上，完成以下操作。（1）利用“直線”工具在“物流公司推薦列表”下方（W:0,H:46,X:40,Y:1334）繪制一個(gè)小豎線如圖1-9-1所示。圖1-9-1：繪制小標(biāo)題【任務(wù)實(shí)施】選中小豎線顏色修改為#49B0FE，大小改為10如圖1-9-2所示。圖1-9-2：線條大小點(diǎn)擊“文本”工具，在豎線后（X:52,Y:1329）輸入“其他物流公司列表”文字如圖1-9-3所示。圖1-9-3：輸入文本【任務(wù)實(shí)施】點(diǎn)擊文本框，修改顏色為黑色，字體大小為40，字體粗細(xì)為Regular如圖1-9-4所示。圖1-9-4：修改字體繪制排序按鈕點(diǎn)擊左側(cè)“工具欄”面板中的“橢圓”工具，在小標(biāo)題下方繪制兩個(gè)大小相同的小橢圓形（第1個(gè)圓形：W:70,H:70,X:96,Y:1416），（第2個(gè)圓形：W:70,H:70,X:456,Y:1416）如圖1-9-5所示。圖1-9-5：繪制圓形【任務(wù)實(shí)施】（2）將第一個(gè)橢圓形填充顏色（#49B0FE），點(diǎn)擊取消“邊界”前的勾選框進(jìn)行區(qū)分如圖1-9-6所示。圖1-9-6：填充顏色【任務(wù)實(shí)施】（3）左側(cè)“工具欄”面板選擇“文本”工具，在兩個(gè)橢圓形的一側(cè)（第1個(gè)排序：X:180,Y:1428）（第2個(gè)排序：X:540,Y:1428）如圖1-9-7所示。圖1-9-7：字體位置【任務(wù)實(shí)施】（4）字體顏色為黑色，字體大小為35，字體粗細(xì)為Regular。輸入排序方式如圖1-9-8所示。圖1-9-8：調(diào)整字體3.導(dǎo)入圖片，輸入文字（1）在標(biāo)題下方位置導(dǎo)入圖片（W:128,H:128,X:80,Y:1509）調(diào)整大小（128×128）如圖1-9-9。圖1-9-9：調(diào)整圖片【任務(wù)實(shí)施】利用“文本”工具在圖片一側(cè)（X:232,Y:1542）輸入物流公司名稱（字體顏色：黑色，字體大?。?5，字體粗細(xì)：Regular）如圖1-9-10所示。圖1-9-10：調(diào)整字體將圖片和文字結(jié)合成組件如圖1-9-11所示。圖1-9-11：結(jié)合成組【任務(wù)實(shí)施】（2）選中組件，在右側(cè)屬性欄中點(diǎn)擊“重復(fù)網(wǎng)格”，根據(jù)題目繪制相應(yīng)的個(gè)數(shù)如圖1-9-12所示。圖1-9-12：利用重復(fù)網(wǎng)格工具列表超出畫板時(shí)，雙擊選中畫板點(diǎn)擊底部邊框向下拖動(dòng)至合適位置（W:1080,H:2392,X:12104,Y:-14287）如圖1-9-13所示。圖1-9-13：修改畫板【任務(wù)實(shí)施】在等比例調(diào)整之后，右鍵選擇“取消網(wǎng)格編組”如圖1-9-14所示。圖1-9-14：取消網(wǎng)格編組（3）點(diǎn)擊某個(gè)組件，雙擊選中圖片，右鍵選擇“替換圖像”在“素材庫”中選擇自己所需要的圖片（10-14—10-18）更改圖片后，將下方對(duì)應(yīng)的物流公司名稱也一并更改如圖1-9-15所示。圖1-9-15：修改列表【任務(wù)實(shí)施】修改完成后，點(diǎn)擊底部導(dǎo)航欄，將其圖層拖移到所有圖層最上方，然后在屬性面板中選擇“滾動(dòng)式固定位置”如圖1-9-16所示。圖1-9-16：滾動(dòng)時(shí)固定位置（4）全部修改完后，選中畫板Ctrl+c復(fù)制，ctrl+v粘貼新的畫板，按照首字母A-Z和Z-A進(jìn)行“其他物流公司列表”順序的顛倒修改如圖1-8-53所示。圖1-9-17：復(fù)制粘貼【任務(wù)實(shí)施】4.最后修改在“Z-A排序”頁面中復(fù)制三個(gè)畫板，將輪播圖圖片更換如圖1-9-18所示。圖1-9-18：復(fù)制畫板在“A-Z排序”頁面中復(fù)制三個(gè)畫板，將輪播圖圖片更換如圖1-9-19所示。圖1-9-19：復(fù)制畫板【任務(wù)實(shí)施】進(jìn)入軟件“原型”模式，將輪播圖對(duì)應(yīng)圖片的兩個(gè)不同畫板相互連接如圖1-9-20所示。圖1-9-20：連接畫板THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十設(shè)計(jì)物流公司詳情頁

物流公司詳情頁面展示新聞資訊輪播，公司簡介，運(yùn)輸方式介紹，運(yùn)費(fèi)介紹信息?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.導(dǎo)入圖片2.制作小標(biāo)題3.輸入文字內(nèi)容【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】

制作小標(biāo)題時(shí)，可以對(duì)垂直豎線或輸入的文字進(jìn)行顏色大小字體上的更改，但最后修改完成的格式一定要與整個(gè)頁面的布局顏色進(jìn)行統(tǒng)一如圖1-10-18所示。圖1-10-18畫面布局【任務(wù)實(shí)施】1.導(dǎo)入圖片點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。（1）點(diǎn)擊上方菜單欄中“主頁”，選擇“導(dǎo)入”功能，選擇所需圖片（圖片：10-11），點(diǎn)擊“導(dǎo)入”按鈕如圖1-10-1所示。圖1-10-1導(dǎo)入圖片【任務(wù)實(shí)施】將圖片導(dǎo)入至頁面（W：1080，H：1920，X：0，Y：216），更改其大小（1080×475）如圖1-10-2所示。圖1-10-2修改數(shù)值2.制作小標(biāo)題（1）使用左側(cè)工具欄面板中的“文本”工具和“直線”工具，利用直線工具繪制出一條垂直短線，顏色：#49B0FE，大小：10。如圖1-10-3所示。圖1-10-3繪制豎線【任務(wù)實(shí)施】點(diǎn)擊文本工具，在繪制的短線后面輸入標(biāo)題內(nèi)容（X:79,Y:723），字體，字體大小：40，字體粗細(xì)：Regular如圖1-10-4所示。圖1-10-4繪制字體3.輸入文字內(nèi)容（1）在“文字素材”中粘貼所需要的文字段落（12-1），Ctrl+c復(fù)制文字段落，雙擊選中ctrl+v粘貼至畫板，如圖1-10-5所示。圖1-10-5粘貼文本【任務(wù)實(shí)施】（2）在右側(cè)屬性欄面板中選擇更改字體大?。ㄗ煮w大小：40，字體粗細(xì)：Regular，字體顏色：黑色）如圖1-10-6所示。圖1-10-6修改字體（3）將文本框移動(dòng)至（W:300,H:300,X:62,Y:792），拖動(dòng)邊框，將文本框拖移至（W:966,H:491,X:62,Y:792）單擊任意區(qū)域，取消文本框藍(lán)色框架如圖1-10-7所示。圖1-10-7更改文本框【任務(wù)實(shí)施】（4）使用左側(cè)工具欄面板中的“文本”工具和“直線”工具，利用直線工具繪制出一條垂直短線（W:0,H:46,X:62,Y:1310），顏色：#49B0FE，大小：10如圖1-10-8所示。圖1-10-8繪制小標(biāo)題點(diǎn)擊文本工具，在繪制的短線后面輸入標(biāo)題內(nèi)容（X:79,Y:1303），字體，字體大?。?0，字體粗細(xì)：Regular如圖1-10-9所示。圖1-10-9更改顏色【任務(wù)實(shí)施】（5）在“文字素材”中粘貼所需要的文字段落（12-2），Ctrl+c復(fù)制文字段落，雙擊選中ctrl+v粘貼至畫板如圖1-10-10所示。圖1-10-10粘貼文本（6）在右側(cè)屬性欄面板中選擇更改字體大?。ㄗ煮w大?。?0，字體粗細(xì)：Regular，字體顏色：黑色）如圖1-10-11所示。圖1-10-11修改字體【任務(wù)實(shí)施】（7）將文本框移動(dòng)至（W:300,H:300,X:62,Y:1376），拖動(dòng)邊框，將文本框拖移至（W:413,H:78,X:62,Y:1376）單擊任意區(qū)域，取消文本框藍(lán)色框架如圖1-10-12所示。圖1-10-12拖動(dòng)文本框（8）使用左側(cè)工具欄面板中的“文本”工具和“直線”工具，利用直線工具繪制出一條垂直短線（W:0,H:46,X:57,Y:1488），顏色：#49B0FE，大?。?0如圖1-10-13所示。圖1-10-13繪制小標(biāo)題【任務(wù)實(shí)施】點(diǎn)擊文本工具，在繪制的短線后面輸入標(biāo)題內(nèi)容（X:74,Y:1481），字體，字體大?。?0，字體粗細(xì)：Regular如圖1-10-14所示。圖1-10-14更改顏色【任務(wù)實(shí)施】（9）在“文字素材”中粘貼所需要的文字段落（12-3），Ctrl+c復(fù)制文字段落，雙擊選中ctrl+v粘貼至畫板如圖1-10-15所示。圖1-10-15粘貼文本【任務(wù)實(shí)施】（10）在右側(cè)屬性欄面板中選擇更改字體大?。ㄗ煮w大?。?0，字體粗細(xì)：Regular，字體顏色：黑色）如圖1-10-16所示。圖1-10-16修改字體【任務(wù)實(shí)施】（11）將文本框移動(dòng)至（W:300,H:300,X:62,Y:1561），拖動(dòng)邊框，將文本框拖移至（W:361,H:127,X:62,Y:1561）單擊任意區(qū)域，取消文本框藍(lán)色框架如圖1-10-17所示。圖1-10-17拖動(dòng)文本框THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十一

設(shè)計(jì)找工作界面

點(diǎn)擊底部導(dǎo)航欄，找工作進(jìn)入找工作頁面，頁面具備宣傳幻燈片，職位搜索框，熱門職業(yè)職位列表顯示功能，職位列表包括職位名稱，崗位職責(zé)，公司地點(diǎn)，薪資待遇?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.導(dǎo)入圖片2.繪制職位搜索框3.輸入熱門職業(yè)4.繪制職位列表5.繪制列表內(nèi)詳細(xì)信息【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】（1）利用“直線”工具在搜索框下方（W:0,H:45,X:44,Y:817）繪制一個(gè)小豎線如圖1-11-39所示。圖1-11-38繪制小標(biāo)題選中小豎線顏色修改為#49B0FE，大小改為8如圖1-11-40所示。圖1-11-49繪制小標(biāo)題【技術(shù)介紹】點(diǎn)擊“文本”工具，在豎線后（X:52,Y:806）輸入“熱門職業(yè)”文字如圖1-11-41所示。圖1-11-40修改文字點(diǎn)擊文本框，字體大小為45，字體粗細(xì)為Regular如圖1-11-42所示。圖1-11-41調(diào)整字體大小【任務(wù)實(shí)施】1.導(dǎo)入圖片點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。

（1）在打開的主界面上，點(diǎn)擊上方菜單欄中“主頁”，選擇“導(dǎo)入”功能，選擇所需圖片（圖片：10-3-10-5），點(diǎn)擊“導(dǎo)入”按鈕如圖1-11-1所示。圖1-11-1導(dǎo)入圖片【任務(wù)實(shí)施】將圖片導(dǎo)入至頁面右擊結(jié)合成組如圖1-11-2所示。圖1-11-2結(jié)合成組（2）將選擇的圖片拖動(dòng)至（X:0,Y:216）如圖1-11-3所示。圖1-11-3移動(dòng)位置【任務(wù)實(shí)施】圖片大小全部設(shè)置為（1080×400），圖片組件放置在（W:3240,H:400,X:0,Y:216）如圖1-11-4所示。圖1-11-4放置圖片2.繪制職位搜索框（1）在輪播圖下方繪制搜索輸入框，在左側(cè)的工具欄面板中點(diǎn)擊“矩形”工具，在輪播圖下方繪制一條矩形如圖1-11-5所示。圖1-11-5繪制矩形【任務(wù)實(shí)施】并填充顏色（顏色為：#EEF8FF）如圖1-11-6如圖。圖1-11-6填充顏色關(guān)閉“邊界”勾選框如圖1-11-7所示。圖1-11-7關(guān)閉“邊界”勾選框【任務(wù)實(shí)施】（2）左側(cè)工具欄面板中選擇“文本”工具，在繪制完成的矩形上點(diǎn)擊輸入“請輸入內(nèi)容”等相關(guān)類型的提示文字，如圖1-11-8所示。圖1-11-8添加提示語（3）輸入完成后，單擊文本框，在右側(cè)屬性面板中的“文本”（字體大?。?5，字體粗細(xì)：Regular）如圖1-11-9所示。圖1-11-9修改字體【任務(wù)實(shí)施】點(diǎn)擊“填充”顏色為（#B1B1B1）“邊界”顏色相同，如圖1-11-10所示。圖1-11-10修改顏色字體將修改后的文本框放置在矩形框內(nèi)（X:116,Y:676）如圖1-11-11所示。圖1-11-11更改位置【任務(wù)實(shí)施】（4）按住shift鍵點(diǎn)擊繪制完成的文字和矩形，單擊鼠標(biāo)右鍵選擇“組”結(jié)合成組件如圖1-11-12所示。圖1-11-12結(jié)合成組（5）點(diǎn)擊左側(cè)工具欄面板中的“矩形”工具，在搜索輸入框的右側(cè)繪制一個(gè)等比例縮小的矩形如圖1-11-13。圖1-11-13繪制矩形【任務(wù)實(shí)施】顏色填充為白色，邊界為灰色（#707070）如圖1-11-14所示。圖1-11-14填充顏色【任務(wù)實(shí)施】在右側(cè)屬性面板中找到“外觀”，修改矩形的圓角弧度如圖1-11-15所示。圖1-11-15修改圓角弧度【任務(wù)實(shí)施】利用“文本”工具在矩形內(nèi)輸入“搜索”文字（X:902,Y:673），修改文字（字體大?。?5，字體粗細(xì)：Regular，邊界顏色：黑色，填充顏色：黑色）如圖1-11-16所示。圖1-11-16修改字體【任務(wù)實(shí)施】（6）單擊輸入框組件，選中后點(diǎn)擊屬性面板中的“組件”效果，點(diǎn)擊“組件”后的“+”出現(xiàn)“默認(rèn)狀態(tài)”如圖1-11-17所示。圖1-11-17默認(rèn)狀態(tài)圖1-11-18懸停狀態(tài)點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇懸停狀態(tài)如圖1-11-18所示?！救蝿?wù)實(shí)施】再次點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇切換狀態(tài)如圖1-11-19所示。圖1-11-19切換狀態(tài)（7）選中“懸停狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-11-20所示。圖1-11-20雙擊輸入框【任務(wù)實(shí)施】圖1-11-21添加直線點(diǎn)擊直線，修改顏色為黑色，將“大小”修改為8如圖1-11-22所示。圖1-11-22修改大小將文本框刪除，就可以在矩形中增加內(nèi)容，單擊“直線”工具，在矩形內(nèi)繪制一條直線，如圖1-11-21所示?！救蝿?wù)實(shí)施】（8）選中“切換狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-11-23所示。圖1-11-23雙擊輸入框單擊矩形內(nèi)的文本框，輸入工作崗位名稱，點(diǎn)擊文本框進(jìn)行修改（顏色：黑色，字體大?。?5，字體粗細(xì)：Regular）如圖1-11-24所示。圖1-11-24修改字體【任務(wù)實(shí)施】3.輸入熱門職業(yè)（1）在左側(cè)工具欄面板中選擇矩形工具和文本工具，利用矩形工具繪制一個(gè)小矩形，如圖1-11-25所示。圖1-11-25繪制矩形再點(diǎn)擊文本工具，在矩形中輸入熱門職業(yè)的名稱（X:129,Y:1087）如圖1-11-26所示。圖1-11-26繪制文字【任務(wù)實(shí)施】選中矩形和文字結(jié)合成組件如圖1-11-27所示。圖1-11-27結(jié)合組件（1）將組件移動(dòng)到合適位置（W:206,H:83,X:116,Y:915）如圖1-11-28所示。圖1-11-28拖移位置【任務(wù)實(shí)施】選中組件，點(diǎn)擊右側(cè)屬性欄面板中的重復(fù)網(wǎng)格，上下進(jìn)行拖動(dòng)，保留自己所需要的數(shù)量后點(diǎn)擊取消網(wǎng)格編組按鈕如圖1-11-29所示。圖1-11-29重復(fù)網(wǎng)絡(luò)【任務(wù)實(shí)施】（4）雙擊選中剩余的矩形，將矩形內(nèi)的文字逐一按題目進(jìn)行修改內(nèi)容如圖1-11-30所示。圖1-11-30修改信息4.繪制職位列表（1）使用左側(cè)工具欄面板中的矩形工具，在頁面中繪制一條較長的矩形如圖1-11-31所示。圖1-11-31繪制矩形【任務(wù)實(shí)施】調(diào)整大小及顏色（大?。?，顏色：#707070）如圖1-11-32所示。圖1-11-32修改顏色（2）使用左側(cè)工具欄面板中的文本工具，在繪制的矩形中，輸入職位列表的相關(guān)信息（字體大?。?8，字體粗細(xì)：Regular,字體顏色：黑色）如圖1-11-33所示。圖1-11-33修改字體【任務(wù)實(shí)施】5.繪制列表內(nèi)詳細(xì)信息（1）點(diǎn)擊左側(cè)工具欄中的文本工具。在職位列表矩形中輸入職位名稱（x:80，y：1428），字體顏色：黑色如圖1-11-34所示。圖1-11-34修改字體（2）點(diǎn)擊左側(cè)工具欄中的文本工具。在職位列表矩形中輸入崗位職責(zé)（x:80，y：1428），字體顏色：黑色如圖1-11-35所示。圖1-11-35輸入文字【任務(wù)實(shí)施】（3）點(diǎn)擊左側(cè)工具欄中的文本工具在職位列表中輸入公司地點(diǎn)（x:80，y：1428），字體顏色：黑色如圖1-11-36所示。圖1-11-36輸入文字（4）點(diǎn)擊左側(cè)工具欄中的文本工具在職位列表中輸入薪資待遇（x:80，y：1428），字體顏色：黑色如圖1-11-37所示。

圖1-11-37輸入文字THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十二

實(shí)現(xiàn)熱門職位搜索

將鼠標(biāo)放置熱門職位搜索框中，點(diǎn)擊出現(xiàn)搜索結(jié)果，點(diǎn)擊搜索按鈕。能夠跳轉(zhuǎn)至對(duì)應(yīng)的熱門職位詳情頁面?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.使用組件2.修改組件中的對(duì)應(yīng)狀態(tài)3.實(shí)現(xiàn)搜索功能【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】將完成的畫板根據(jù)輪播圖圖片的張數(shù)復(fù)制畫板，確保每個(gè)畫板中的輪播圖各不相同如圖1-12-10所示。圖1-12-10復(fù)制畫板進(jìn)入軟件“原型”模式，雙擊選中畫板，將三個(gè)畫板相互連接起來（在右側(cè)屬性欄中的交互方式選擇“時(shí)間”，延遲“2秒”，類型“自動(dòng)制作動(dòng)畫”，緩動(dòng)“對(duì)齊”持續(xù)時(shí)間“0.3秒”）如圖1-12-11所示。圖1-12-11更改數(shù)值【任務(wù)實(shí)施】1.使用組件點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。（1）在打開的主界面上，單擊輸入框組件，選中后點(diǎn)擊屬性面板中的“組件”效果，點(diǎn)擊“組件”后的“+”出現(xiàn)“默認(rèn)狀態(tài)”如圖1-12-1所示。圖1-12-1默認(rèn)狀態(tài)【任務(wù)實(shí)施】點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇懸停狀態(tài)如圖1-12-2所示。圖1-12-2懸停狀態(tài)再次點(diǎn)擊“默認(rèn)狀態(tài)”中的“+”選擇切換狀態(tài)如圖1-12-3所示。圖1-12-3切換狀態(tài)【任務(wù)實(shí)施】2.修改組件中的對(duì)應(yīng)狀態(tài)（1）選中“懸停狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-12-4所示。圖1-12-4雙擊輸入框?qū)⑽谋究騽h除，就可以在矩形中增加內(nèi)容，單擊“直線”工具，在矩形內(nèi)繪制一條直線，如圖1-12-5所示。圖1-12-5添加直線【任務(wù)實(shí)施】點(diǎn)擊直線，修改顏色為黑色，將“大小”修改為8如圖1-12-6所示。圖1-12-6修改大小（2）選中“切換狀態(tài)”后，雙擊輸入框，在外圈綠色點(diǎn)狀線變成綠色直線如圖1-12-7所示。圖1-12-7雙擊輸入框【任務(wù)實(shí)施】單擊矩形內(nèi)的文本框，輸入某職位名稱，點(diǎn)擊文本框進(jìn)行修改（顏色：黑色，字體大?。?5，字體粗細(xì)：Regular）如圖1-12-8所示。圖1-12-8修改字體3.實(shí)現(xiàn)搜索功能（1）選中“搜索”按鈕，進(jìn)入軟件“原型”模式，點(diǎn)擊按鈕，將按鈕連接至所需連接的頁面（觸發(fā)：點(diǎn)擊，類型：自動(dòng)制作動(dòng)畫，緩動(dòng)：對(duì)齊）如圖1-12-9所示。圖1-12-9連接畫板THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十三

設(shè)計(jì)寵物醫(yī)院界面

點(diǎn)擊底部導(dǎo)航欄，寵物醫(yī)院進(jìn)入寵物醫(yī)院頁面，頁面包括寵物種類標(biāo)題和種類，我的問診，問診案例標(biāo)題和案例列表?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制小標(biāo)題2.繪制寵物種類按鈕3.繪制我的問診內(nèi)容4.繪制問診案例列表【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】（1）使用左側(cè)工具欄面板中的“文本”工具和“直線”工具，利用直線工具繪制出一條垂直短線（W:0,H:50,X:51,Y:790），顏色：#49B0FE，大?。?0。如圖1-13-21所示。圖1-13-21繪制豎線點(diǎn)擊文本工具，在繪制的短線后面輸入標(biāo)題內(nèi)容（X:63,Y:786），字體大小：45，字體粗細(xì)：Regular如圖1-13-22所示。圖1-13-22繪制字體【任務(wù)實(shí)施】1.繪制小標(biāo)題點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。（1）在打開的主界面上，利用“直線”工具在導(dǎo)航欄下方（W:0,H:50,X:51,Y:258）繪制一個(gè)小豎線如圖1-13-1所示。圖1-13-1繪制小標(biāo)題【任務(wù)實(shí)施】選中小豎線顏色修改為#49B0FE，大小改為7如圖1-13-2所示。圖1-13-2繪制小標(biāo)題點(diǎn)擊“文本”工具，在豎線后（X:63,Y:254）輸入“寵物分類”文字如圖1-11-3所示。圖1-13-3修改文字【任務(wù)實(shí)施】點(diǎn)擊文本框，修改顏色為#47A3FF，字體大小為40，字體粗細(xì)為Regular如圖1-13-4所示。圖1-13-4調(diào)整顏色【任務(wù)實(shí)施】2.繪制寵物種類按鈕（1）點(diǎn)擊頁面左上角的文件，選擇導(dǎo)入功能，進(jìn)入素材庫，選擇自己所需要的圖片（W:200,H:200,X:440,Y:718）如圖1-13-5所示。圖1-13-5修改位置【任務(wù)實(shí)施】（2）圖片導(dǎo)入至桌面，將圖片拖動(dòng)至合適位置（W:128,H:128,X:83,Y:347）調(diào)整圖片大小，如圖1-13-6所示。圖1-13-6拖動(dòng)位置（3）更改圖片大小后，利用文本工具在圖片下方輸入寵物種類名稱（X:98,Y:463）更改字體（顏色：#000000，字體大?。?5，字體粗細(xì)：Regular）如圖1-13-7所示。圖1-13-7輸入文字【任務(wù)實(shí)施】將圖片和文字組合成組件如圖1-13-8所示。圖1-13-8結(jié)合組件（4）點(diǎn)擊組件利用重復(fù)網(wǎng)格功能，選擇自己所需要的個(gè)數(shù)后，點(diǎn)擊取消重復(fù)網(wǎng)格按鈕如圖1-13-9所示。圖1-13-9利用重復(fù)網(wǎng)格【任務(wù)實(shí)施】（5）修改利用重復(fù)網(wǎng)格所得出的組件，將組件中的圖片和寵物種類的名字都進(jìn)行修改如圖1-13-10所示。圖1-13-10修改其他分類3.繪制我的問診內(nèi)容（1）點(diǎn)擊左側(cè)工具欄中的矩形工具，在頁面繪制一個(gè)較大的矩形，如圖1-13-11所示。圖1-13-11繪制矩形【任務(wù)實(shí)施】點(diǎn)擊文本工具，在矩形中輸入醫(yī)生的名字和案例描述，調(diào)整字體（顏色：#000000，字體大?。?5，字體粗細(xì)：Regular）如圖1-13-12所示。圖1-13-12修改文字最后在矩形中導(dǎo)入醫(yī)生的圖片（15-10）調(diào)整大?。╓:235,H:235,X:52,Y:883）如圖1-13-13所示。圖1-13-13調(diào)整圖片【任務(wù)實(shí)施】（2）將圖片，文字和矩形框結(jié)合在一起，結(jié)合成組如圖1-13-14所示。圖1-13-14結(jié)合成組選中組件，復(fù)制粘貼調(diào)整位置修改內(nèi)容如圖1-13-15所示。圖1-13-15修改內(nèi)容【任務(wù)實(shí)施】4.繪制問診案例列表（1）點(diǎn)擊左側(cè)工具欄中的矩形工具，在頁面繪制一個(gè)較大的矩形（W:939,H:238,X:51,Y:1499）如圖1-13-16所示。圖1-13-16繪制矩形【任務(wù)實(shí)施】點(diǎn)擊文本工具，在矩形中輸入醫(yī)生的名字和案例描述，調(diào)整字體（顏色：#000000，字體大小：45，字體粗細(xì)：Regular）如圖1-13-17所示。圖1-13-17修改文字【任務(wù)實(shí)施】最后在矩形中導(dǎo)入醫(yī)生的圖片（15-14）調(diào)整大?。╓:238,H:238,X:49,Y:1499）如圖1-13-18所示。圖1-13-18調(diào)整圖片【任務(wù)實(shí)施】（2）將圖片，文字和矩形框結(jié)合在一起，結(jié)合成組如圖1-13-19所示。圖1-13-19結(jié)合成組【任務(wù)實(shí)施】選中組件，復(fù)制粘貼調(diào)整位置（W:939,H:238,X:51,Y:1759）修改內(nèi)容如圖1-13-20所示。圖1-13-20修改內(nèi)容THANKS

《移動(dòng)應(yīng)用與開發(fā)項(xiàng)目實(shí)戰(zhàn)》任務(wù)十四

設(shè)計(jì)找醫(yī)生界面

點(diǎn)擊我的問診，列表進(jìn)入找醫(yī)生頁面，頁面顯示，醫(yī)生圖片，職位，工作年齡，擅長案例以及工作編號(hào)?！救蝿?wù)描述】【任務(wù)目標(biāo)】【關(guān)鍵技術(shù)描述】1.繪制矩形2.輸入列表內(nèi)容3.導(dǎo)入醫(yī)生圖片4.查看醫(yī)生擅長【使用工具】AdobeXD軟件中XXX工具【技術(shù)介紹】選中導(dǎo)航欄，點(diǎn)擊“文本”工具，在導(dǎo)航欄上輸入本頁標(biāo)題如圖1-14-25所示。圖1-14-25輸入標(biāo)題選中文本框，在屬性面板中調(diào)整字體（顏色：#FFFFFF，字體大?。?0，字體粗細(xì)：Regular），居中顯示（X:435,Y:120）如圖1-14-26所示。圖1-14-26調(diào)整數(shù)值【任務(wù)實(shí)施】1.繪制矩形點(diǎn)擊Windows開始按鈕，在主菜單的所有程序中，點(diǎn)擊AdobeXD程序圖標(biāo)，打開AdobeXD主界面。（1）在打開的主界面上，點(diǎn)擊左側(cè)工具欄面板中的矩形工具在頁面中繪制一個(gè)較大的矩形（W:976,H:240,X:52,Y:319）如圖1-14-1所示。圖1-14-1繪制矩形【任務(wù)實(shí)施】調(diào)整矩形框顏色（顏色：純黑色，大?。?）如圖1-14-2所示。圖1-14-2修改顏色2.輸入列表內(nèi)容（1）點(diǎn)擊左側(cè)導(dǎo)航欄中的文本工具，在繪制的矩形上輸入醫(yī)生姓名（W:210,H:40,X:347,Y:335）如圖1-14-3所示。圖1-14-3放置位置【任務(wù)實(shí)施】選中文本框，修改字體（字體顏色：#000000，填充/邊界：黑色，字體粗細(xì)：Regular，字體大?。?0）如圖1-14-4所示。圖1-14-4字體修改（2）點(diǎn)擊左側(cè)導(dǎo)航欄中的文本工具，在繪制的矩形上輸入醫(yī)生職稱（X:347,Y:375）如圖1-14-5所示。圖1-14-5文字位置【任務(wù)實(shí)施】修改文字（字體顏色：#000000，填充/邊界：黑色，字體粗細(xì)：Regular，字體大?。?0）如圖1-14-6所示。圖1-14-6修改數(shù)據(jù)（3）點(diǎn)擊左側(cè)導(dǎo)航欄中的文本工具，在繪制的矩形上輸入醫(yī)生執(zhí)業(yè)編號(hào)如圖1-14-7所示。圖1-14-7放置位置【任務(wù)實(shí)施】修改文字（字體顏色：#000000，填充/邊界：黑色，字體粗細(xì)：Regular，字體大小：30）如圖1-14-8所示。圖1-14-8修改數(shù)據(jù)（4）點(diǎn)擊左側(cè)導(dǎo)航欄中的文本工具，在繪制的矩形上，輸入醫(yī)生擅長描述，如圖1-14-9所示。圖1-14-9放置位置【任務(wù)實(shí)施】修改文字（字體顏色：#000000，填充/邊界：黑色，字體粗細(xì)：Regular，字體大?。?0）如圖1-14-10所示。圖1-14-10修改數(shù)據(jù)（5）點(diǎn)擊左側(cè)導(dǎo)航欄中的文