圖形創(chuàng)意（微課版）課件 項(xiàng)目8 UI設(shè)計(jì)-天氣預(yù)報(bào) App圖形創(chuàng)意

項(xiàng)目8UI設(shè)計(jì)—天氣預(yù)報(bào)App圖形創(chuàng)意圖形創(chuàng)意（微課版）高等院校藝術(shù)設(shè)計(jì)精品系列教材項(xiàng)目描述隨著智能手機(jī)、平板等移動(dòng)設(shè)備的普及，App（Application，簡(jiǎn)稱(chēng)App）成為人們?nèi)粘Ｉ钪胁豢苫蛉钡膽?yīng)用程序，為人們生活提供了極大便利，由于人們活動(dòng)范圍的擴(kuò)大和出行需要，天氣預(yù)報(bào)也成為人們生活中的主要信息需求之一。由于傳統(tǒng)的天氣預(yù)報(bào)方式在實(shí)時(shí)性、功能性上已無(wú)法滿(mǎn)足人們需求，各種天氣預(yù)報(bào)App應(yīng)運(yùn)而生，“蔚見(jiàn)天氣”App就是其中之一，在新技術(shù)、新思潮、新審美的環(huán)境下，“蔚見(jiàn)天氣”App需要優(yōu)化自身的界面內(nèi)容和界面視覺(jué)效果。項(xiàng)目目標(biāo)項(xiàng)目背景項(xiàng)目名稱(chēng)“蔚見(jiàn)天氣”AppUI設(shè)計(jì)“蔚見(jiàn)天氣”App主要為用戶(hù)提供當(dāng)前與未來(lái)15天各地區(qū)的天氣預(yù)報(bào)、空氣質(zhì)量、氣象預(yù)警、穿衣建議和出行建議等信息，幫助用戶(hù)及時(shí)做好各方面的計(jì)劃和防護(hù)措施?，F(xiàn)“蔚見(jiàn)天氣”需要重新優(yōu)化UI設(shè)計(jì)，需要設(shè)計(jì)師按照要求完成App啟動(dòng)圖標(biāo)設(shè)計(jì)和天氣預(yù)報(bào)界面設(shè)計(jì)作品主題天氣預(yù)報(bào)作品規(guī)格App啟動(dòng)圖標(biāo)尺寸為1024px×1024px，界面尺寸為1125px×2436px效果要求①風(fēng)格：圖標(biāo)風(fēng)格沒(méi)有限制，可以采用簡(jiǎn)約、寫(xiě)實(shí)、扁平或輕質(zhì)感等風(fēng)格進(jìn)行設(shè)計(jì)；界面風(fēng)格要求簡(jiǎn)潔②字體：盡量選擇簡(jiǎn)約、端莊、穩(wěn)重的字體，字體類(lèi)型限制在1~3種，不宜過(guò)多③圖形創(chuàng)意：圖形主要包括App啟動(dòng)圖標(biāo)、界面中的天氣預(yù)報(bào)圖標(biāo)和提示圖標(biāo)太復(fù)雜④色彩：采用明度較高的、與天氣相關(guān)的色彩，如藍(lán)色、白色、黃色等CONTENTS8.1廣告的類(lèi)型8.2廣告文字的分類(lèi)8.1.1圖標(biāo)設(shè)計(jì)圖標(biāo)設(shè)計(jì)是指將某些實(shí)體活動(dòng)以及真實(shí)、幻想或抽象的動(dòng)機(jī)做成圖形符號(hào)的過(guò)程，用于幫助用戶(hù)理解與吸引用戶(hù)視線(xiàn)，是用戶(hù)成功進(jìn)行交互和提高用戶(hù)體驗(yàn)的關(guān)鍵一環(huán)，也是UI設(shè)計(jì)中的圖形創(chuàng)意重點(diǎn)。設(shè)計(jì)師進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)，應(yīng)遵守以下4條原則。設(shè)計(jì)準(zhǔn)確具體表現(xiàn)在表意準(zhǔn)確和造型準(zhǔn)確兩個(gè)方面。01具備識(shí)別性設(shè)計(jì)的圖標(biāo)效果要能準(zhǔn)確地表達(dá)圖標(biāo)內(nèi)容，避免產(chǎn)生誤導(dǎo)和歧義。02設(shè)計(jì)同一主題或同一個(gè)App中的圖標(biāo)時(shí)，要有合理的規(guī)劃，既要強(qiáng)調(diào)統(tǒng)一性，又要突出差異性。03具備統(tǒng)一性和差異性具體表現(xiàn)在圖標(biāo)外觀和交互動(dòng)效方面的簡(jiǎn)潔性。04簡(jiǎn)潔舒適8.1.2手機(jī)界面設(shè)計(jì)戶(hù)外廣告是指在建筑物外表、街道、廣場(chǎng)等室外公共場(chǎng)設(shè)立的廣告。戶(hù)外廣告的受眾較廣泛，且可在固定的地點(diǎn)長(zhǎng)時(shí)間展示廣告信息，因此，戶(hù)外廣告的傳播效果較好。手機(jī)界面是用戶(hù)與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，手機(jī)界面設(shè)計(jì)必須基于手機(jī)設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性，針對(duì)手機(jī)中的各種頁(yè)面，以及用戶(hù)在手機(jī)上的瀏覽習(xí)慣，進(jìn)行界面設(shè)計(jì)。手機(jī)界面的組成包括狀態(tài)欄、導(dǎo)航欄、內(nèi)容區(qū)域和標(biāo)簽欄組成，每個(gè)區(qū)域?qū)?yīng)的內(nèi)容不同。中國(guó)農(nóng)業(yè)銀行App界面8.1.3網(wǎng)站頁(yè)面設(shè)計(jì)網(wǎng)站頁(yè)面設(shè)計(jì)則是根據(jù)集合內(nèi)容和不同使用需求對(duì)網(wǎng)站頁(yè)面進(jìn)行規(guī)劃和美化，網(wǎng)站頁(yè)面中的圖形設(shè)計(jì)應(yīng)該風(fēng)格統(tǒng)一，每個(gè)頁(yè)面干凈直觀，以一個(gè)主色調(diào)為主，配上合適的文字和圖形，讓用戶(hù)流暢、舒適，愉快地接收信息，與網(wǎng)站頁(yè)面進(jìn)行交互。Monsters網(wǎng)頁(yè)（ByAfterglow）8.1.4應(yīng)用軟件界面設(shè)計(jì)應(yīng)用軟件界面設(shè)計(jì)主要是指針對(duì)應(yīng)用軟件的不同界面功能進(jìn)行設(shè)計(jì)。設(shè)計(jì)師在設(shè)計(jì)應(yīng)用軟件界面時(shí)，應(yīng)統(tǒng)一不同界面的風(fēng)格，并在不同界面中保留相同的圖形元素，使界面之間互有關(guān)聯(lián)。某數(shù)據(jù)平臺(tái)應(yīng)用軟件界面CONTENTS8.1廣告的類(lèi)型8.2廣告文字的分類(lèi)8.2.1圖標(biāo)設(shè)計(jì)規(guī)范圖標(biāo)常與文本搭配使用，不僅能傳達(dá)出豐富的信息，還能提升整個(gè)界面的美觀性和信息識(shí)別度。同時(shí)，有的圖標(biāo)還具有交互性和功能性，當(dāng)用戶(hù)點(diǎn)擊這些圖標(biāo)時(shí)，就會(huì)執(zhí)行特定的操作，觸發(fā)相應(yīng)功能。各種應(yīng)用程序的啟動(dòng)圖標(biāo)通常以024px×1024px的尺寸來(lái)設(shè)計(jì)，后續(xù)應(yīng)用于不同界面中時(shí)再根據(jù)需要調(diào)整合適大小。界面中可點(diǎn)擊的功能型圖標(biāo)常見(jiàn)尺寸有“48px×48px”“40px×40px”“32px×32px”“24px×24px”“18px×18px”。界面中用于引導(dǎo)、裝飾、提示狀態(tài)、或不可點(diǎn)擊的修飾型圖標(biāo)常見(jiàn)尺寸有“16px×16px”“12px×12px”“10px×10px”。8.2.2按鈕設(shè)計(jì)規(guī)范按鈕是UI設(shè)計(jì)中常見(jiàn)的圖形，設(shè)計(jì)師應(yīng)將按鈕的設(shè)計(jì)規(guī)范以文字的形式標(biāo)注清楚，包括按鈕的尺寸大小、圓角大小、描邊大小，以及按鈕中的文字大小等。按鈕的視覺(jué)效果體現(xiàn)主要包括默認(rèn)狀態(tài)、點(diǎn)擊狀態(tài)和禁用狀態(tài)3種。各種按鈕的標(biāo)注不同狀態(tài)按鈕的視覺(jué)效果項(xiàng)目實(shí)施1．天氣預(yù)報(bào)App圖形設(shè)計(jì)構(gòu)思本例的“蔚見(jiàn)天氣”AppUI設(shè)計(jì)中涉及到的圖形主要包括啟動(dòng)圖標(biāo)、天氣預(yù)報(bào)圖標(biāo)、氣象圖標(biāo)和建議信息圖標(biāo)。啟動(dòng)圖標(biāo)設(shè)計(jì)構(gòu)思草圖參考示例天氣預(yù)報(bào)設(shè)計(jì)圖標(biāo)構(gòu)思天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì)構(gòu)思項(xiàng)目實(shí)施啟動(dòng)圖標(biāo)設(shè)計(jì)構(gòu)思草圖參考示例天氣預(yù)報(bào)設(shè)計(jì)圖標(biāo)構(gòu)思天氣預(yù)報(bào)圖標(biāo)設(shè)計(jì)構(gòu)思項(xiàng)目實(shí)施2．天氣預(yù)報(bào)App原型圖繪制界面整體采用對(duì)稱(chēng)式構(gòu)圖方式，在對(duì)稱(chēng)中適當(dāng)進(jìn)行了變化，增加界面的活躍感和層次感。界面最上方為狀態(tài)欄和導(dǎo)航欄版塊，然后是作為視覺(jué)焦點(diǎn)的今日天氣狀態(tài)版塊，下方采用圖形色塊劃分了氣象信息、穿衣建議、出行建議、未來(lái)天氣預(yù)報(bào)版塊，通過(guò)各版塊的位置形成直線(xiàn)視覺(jué)流程引導(dǎo)用戶(hù)從上至下縱向?yàn)g覽界面，版塊內(nèi)部的橫線(xiàn)裝飾元素則能有效引導(dǎo)用戶(hù)從左至右橫向?yàn)g覽內(nèi)容。天氣預(yù)報(bào)App原型圖項(xiàng)目實(shí)施3．天氣預(yù)報(bào)App圖標(biāo)制作填充漸變顏色繪制啟動(dòng)圖標(biāo)外部路徑繪制啟動(dòng)圖標(biāo)內(nèi)部路徑減去路徑填充漸變顏色制作外發(fā)光效果繪制“晴”圖標(biāo)局部完成“晴”圖標(biāo)效果項(xiàng)目實(shí)施4．天氣預(yù)報(bào)App界面制作繪制白云和矩形制作白云裝飾效果繪制版塊背景和裝飾直線(xiàn)項(xiàng)目實(shí)施4．天氣預(yù)報(bào)App界面制作建立剪切蒙版制作風(fēng)格化效果添加圖標(biāo)輸入文字項(xiàng)目實(shí)訓(xùn)項(xiàng)目背景項(xiàng)目名稱(chēng)旅游網(wǎng)登錄頁(yè)UI設(shè)計(jì)長(zhǎng)假即將來(lái)臨，某旅游網(wǎng)站想重新設(shè)計(jì)登錄頁(yè)，使登錄頁(yè)效果更加簡(jiǎn)約、生動(dòng)、美觀，更能吸引用戶(hù)注冊(cè)、登錄，增加用戶(hù)對(duì)該旅游網(wǎng)的好感作品主題旅游網(wǎng)登錄頁(yè)作品規(guī)格1920px×1080px效果要求①風(fēng)格：扁平插畫(huà)風(fēng)格，簡(jiǎn)約、清新②字體：宜選擇易識(shí)別、簡(jiǎn)潔、端正的字體③圖形創(chuàng)意：符合旅游行業(yè)屬