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

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