《移動應(yīng)用界面設(shè)計》——項目五：數(shù)字社區(qū)1.知識與技能（1）通過本項目的學(xué)習(xí)，要求掌握數(shù)字社區(qū)項目界面設(shè)計的實施流程。

（2）掌握AdobeXD

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

項目目標任務(wù)一：數(shù)字社區(qū)首頁界面設(shè)計

任務(wù)二：數(shù)字社區(qū)全部動態(tài)界面設(shè)計

任務(wù)三：數(shù)字社區(qū)添加房屋界面設(shè)計

任務(wù)四：數(shù)字社區(qū)社交發(fā)帖詳情界面設(shè)計任務(wù)一：數(shù)字社區(qū)首頁界面設(shè)計

任務(wù)1說明：1.顯示系統(tǒng)廣告輪播圖，點擊輪播圖跳轉(zhuǎn)至數(shù)字社區(qū)對應(yīng)詳情頁面。2.顯示首頁快捷入口，可點擊跳轉(zhuǎn)至對應(yīng)詳情頁面；3.顯示社區(qū)動態(tài)，點擊新聞列表跳轉(zhuǎn)至對應(yīng)行文詳情頁面。右方顯示查看更多按鈕。

3.顯示底部導(dǎo)航欄，采用圖標加文字方式顯示，圖標在上，文字在下，共4個圖標分別為首頁、友鄰社交、社區(qū)服務(wù)、個人中心，點擊標簽進入對應(yīng)頁面，并用顏色標記當(dāng)前頁面所在導(dǎo)航欄。顯示系統(tǒng)廣告輪播圖，點擊輪播圖跳轉(zhuǎn)至民宿對應(yīng)詳情頁面。

（1）新建畫板，設(shè)置畫板尺寸為：iPhone12ProMax（428x926像素）。

（2）打開素材，選擇“狀態(tài)欄.png”，置于頁面頂部。設(shè)置寬度W：428，高度H：44。

（3）繪制一個矩形，設(shè)置寬度W：428，高度H：44，矩形填充為線性漸變，顏色為：#E1EDFF-#3476FE。

（4）打開素材選擇“城市素材.png”，設(shè)置寬度W：152，高度H：152

（5）繪制圓形兩個圓形，分別設(shè)置寬度W：105，高度H：105；W：65，高度H：65填充顏色為：#FFFFFF，分別不透明度為：40%、25%

（6）輸入文字數(shù)字社區(qū)已開通服務(wù)”，設(shè)置字體為微軟雅黑，大小為20px。

（7）繪制一個矩形按鈕，設(shè)置寬度W：140，高度H：32，圓角為30px，如圖5.11所示。添加填充顏色：#3476FE，添加邊界，大小為：1px，顏色為：#FFFFFF，如圖5.12所示。勾選“陰影”選項，設(shè)置X：0，Y：3，B：10，添加陰影顏色為：#7780FF操作步驟：2.顯示開門、我的房屋、我的車位、物業(yè)繳費、掃碼取件、社區(qū)公告、社區(qū)電話、投訴建議按鈕及名稱，點擊跳轉(zhuǎn)至對應(yīng)頁面；（1）繪制一個矩形，設(shè)置寬度W：398，高度H：204，圓角為：10px，如圖5.16所示。設(shè)置陰影X：0，Y：3，Z：10。

（2）開素材“圖標-開門.png”，放置適當(dāng)位置，在圖標下方輸入對應(yīng)導(dǎo)航按鈕文字，參數(shù)設(shè)置。調(diào)整對應(yīng)位置，復(fù)制七個相同的內(nèi)容，更改其圖片以及文字即可完成。

。3.社區(qū)動態(tài)標題，社區(qū)動態(tài)列表、查看更多按鈕。社區(qū)動態(tài)列表顯示標題、內(nèi)容、發(fā)布時間、圖片等信息。點擊列表任意信息，跳轉(zhuǎn)至對應(yīng)詳情頁面。

（1）繪制一個矩形，設(shè)置寬度W：73，高度H：10，圓角為：10px，矩形顏色為：#7780FF，更改不透明度為：50%。輸入文字“社區(qū)動態(tài)”，設(shè)置文體為“微軟雅黑”，字體大小為：18px，行間距為：24。

（2）在小標題右半邊輸入“查看更多>>”文字，設(shè)置文體為“微軟雅黑”，字體大小為：14px，行間距為：19。

（3）輸入新聞標題“社區(qū)舉辦首屆環(huán)保節(jié)，倡導(dǎo)綠色生活，社區(qū)群眾紛紛參與”，字體為“微軟雅黑”，大小為：16px，粗體，行間距：21，標題下方顯示新聞內(nèi)容，多出的內(nèi)容用“……”代替，設(shè)置字體為“微軟雅黑”，大小為：14px，行間距為：19，粗細為“Light”。在左下方輸入時間信息，設(shè)置字體為“微軟雅黑”，大小為：14px，行間距為：19，粗細為“Light”，在右方添加圖片信息。4.顯示底部導(dǎo)航欄，采用圖標加文字方式顯示，圖標在上，文字在下，共4個圖標分別為首頁、友鄰社交、社區(qū)服務(wù)、個人中心，點擊標簽進入對應(yīng)頁面，并用顏色標記當(dāng)前頁面所在導(dǎo)航欄。

（1）使用直線工具繪制導(dǎo)航區(qū)域，設(shè)置寬度W：428，高度H：0。

（2）置入圖標，打開素材，將首頁、攻略、民宿、我的等圖標放置到指定位置，并輸入文字。任務(wù)二：數(shù)字社區(qū)全部動態(tài)界面設(shè)計

任務(wù)2說明：1.顯示搜索框，搜索框內(nèi)有搜索圖標、提示文字；2.顯示民宿列表，列表項包括圖片、動態(tài)標題、動態(tài)內(nèi)容信息、發(fā)布時間等信息。操作步驟：顯示搜索框，搜索框內(nèi)有搜索圖標、提示文字；

（1）單擊工具箱中的“矩形工具”，設(shè)置寬度W：428，高度H：58，顏色為：#3476FE。在矩形上方再次繪制一個矩形，設(shè)置寬度W：399，高度H：40，圓角為：20px，選擇填充。

（2）置入搜索圖標，并輸入文字。2.顯示動態(tài)列表，列表項包括圖片、動態(tài)標題、動態(tài)內(nèi)容信息、發(fā)布時間等信息。

（1）繪制民宿展示區(qū)域6個，設(shè)置寬度W：190，高度H：105。

（2）置入圖形，打開素材，拖動放置在相應(yīng)位置，輸入文字。任務(wù)三：數(shù)字社區(qū)添加房屋界面設(shè)計任務(wù)3說明：1.添加房屋頁面，界面頂部顯示添加房屋標題欄，返回上一頁按鈕.2,繪制自動識別框，上訪顯示自動識別示例，顯示提示文字，顯示自動識別按鈕。3.繪制選擇房屋信息框，顯示房屋信息文字，以及設(shè)置默認選項。4.繪制住戶信息框，顯示住戶信息文字，以及身份證正反面信息示例圖。5.頁面下方顯示提交審核按鈕。操作步驟：添加房屋頁面，界面頂部顯示添加房屋標題欄，返回上一頁按鈕.

（1））設(shè)置導(dǎo)航欄尺寸為428x44像素，繪制一個矩形，設(shè)置寬度W：428，高度H：58，顏色為：#3476FE，導(dǎo)航欄下方文本內(nèi)容為“添加房屋”，從素材庫選擇“返回.png”置入標題欄左側(cè)適當(dāng)位置，作為返回上一頁按鈕2.,繪制自動識別框，上訪顯示自動識別示例，顯示提示文字，顯示自動識別按鈕。具體操作如下：（1）首先繪制一個矩形框，設(shè)置寬度W：398，高度H：163，填充顏色為：#3476FE，圓角為：10，將頁面至于底部。（2）在矩形上方輸入實例文字“設(shè)置文字字體為“微軟雅黑”，大小為：12px，粗細為：Regular，行間距為：16。（3）再次繪制一個矩形放置于上一個矩形上方，圓角為：10，填充顏色為：#FFFFFF顏色為：#000000，不透明度為：16%。（4）繪制一個矩形放置于右下方，設(shè)置寬度W：78，高度H：24，圓角為50px，填充顏色為：#3476FE，邊界顏色為：#FFFFFF，大小為：1，設(shè)置陰影顏色為：#3476FE，輸入文字,即可完成。3.。(1)繪制一個矩形，設(shè)置寬度W：398，高度H：353，圓角為10px(2)繪制一個小矩形。寬度W：10，高度H：32，設(shè)置右上角、右下角圓角為5px，填充顏色為：#3476FE,放置于矩形左側(cè)。（3）繪制一條直線。寬度W：364，不透明度為15%，邊界顏色為：#000000.（4）右側(cè)輸入文字“選擇房屋信息”。（5）在直線下方輸入“*”，設(shè)置文字字體為“微軟雅黑”，大小為：16px，粗細為：Regular，行間距為：21，顏色為：#FF0000.（6）右側(cè)輸入房屋信息相關(guān)文字，例如“小區(qū)”，設(shè)置文字字體為“微軟雅黑”，大小為：16px，粗細為：Regular，行間距為：21，顏色為：#333333，在矩形右側(cè)輸入文字“請選擇”，設(shè)置文字字體為“微軟雅黑”，大小為：16px，粗細為：Regular，行間距為：21，顏色為：#999999。3.繪制選擇房屋信息框(1)重復(fù)上述選擇房屋信息操作。(2)更改是文字信息。(3)在頁面下方添加素材“素材.jpg”。(4)在頁面下方繪制“提交審核”按鈕即可完成。任務(wù)四：數(shù)字社區(qū)社交發(fā)帖詳情界面設(shè)計任務(wù)4說明：1.發(fā)帖詳情頁面上半部包括帖子標題、圖片、文字介紹、發(fā)帖人以及發(fā)帖詳情、發(fā)布時間；2.下半部包括評論總數(shù)、發(fā)布評論的用戶頭像、昵稱、發(fā)布時間、評論點贊數(shù)和評論內(nèi)容，界面底部顯示發(fā)表評論輸入框和“發(fā)布”按鈕。操作步驟：發(fā)帖詳情頁面上半部包括發(fā)帖詳情標題、發(fā)布時間、發(fā)布人；（1）設(shè)置導(dǎo)航欄尺寸為428x44像素，繪制一個矩形，設(shè)置寬度W：428，高度H：58，顏色為：#3476FE，導(dǎo)航欄下方文本內(nèi)容為“發(fā)帖詳情”，從素材庫選擇“返回.png”置入標題欄左側(cè)適當(dāng)位置，作為返回上一頁按鈕，從素材庫選擇“返回.png”置入標題欄左側(cè)適當(dāng)位置作為返回上一頁按鈕.（2）標題欄下方內(nèi)容區(qū)上半部分包括文字介紹，添加標題，設(shè)置字體微軟雅黑，大小為18px。繪制瀏覽量圖標。發(fā)布人發(fā)布時間內(nèi)容、設(shè)置字體為微軟雅黑，大小為：14px。（3）在頁面右側(cè)繪制一個圓形，打開素材，選擇“頭像1.png”，將圖片放置于圓形內(nèi)，在頁面右側(cè)輸入發(fā)布人昵稱，例如“l(fā)iuuu”，設(shè)置字體為：微軟雅黑，大小為：16px，粗細為：Regular，行間距為：21，顏色為：#3333332.下半部包括評論總數(shù)、發(fā)布評論的用戶頭像、昵稱、發(fā)布時間、評論點贊數(shù)和評論內(nèi)容，界面底部顯示發(fā)表評論輸入框和“發(fā)布”按鈕,評論與上半部分文字介紹之間插入矩形框，尺寸為428x11，無邊界，填充顏色設(shè)置為“#DDDDDD”。

（1）單條評論區(qū)域，尺寸為428x300。內(nèi)部結(jié)構(gòu)為：用戶頭像選擇圓形，尺寸36x36；昵稱字體設(shè)置為“西瓜很甜”，字號設(shè)置為16px；從素材庫中選擇“點贊.png”，置入評論區(qū)域右上角，尺寸為13x14；評論點贊數(shù)在“點贊.png”后方，字號設(shè)置為14px；圖片及數(shù)字間的互相間距為8；評論內(nèi)容設(shè)置字號為16px。評論