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

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