《圖形圖像處理技術(shù)》 課件 張秀杰 項(xiàng)目4 UI設(shè)計(jì)

項(xiàng)目4UI設(shè)計(jì)任務(wù)4.1學(xué)習(xí)UI設(shè)計(jì)的基礎(chǔ)知識(shí)圖形圖像處理技術(shù)主要內(nèi)容01UI設(shè)計(jì)簡(jiǎn)介02UI設(shè)計(jì)的分類03UI設(shè)計(jì)的原則04UI設(shè)計(jì)流程05UI設(shè)計(jì)要素06UI設(shè)計(jì)風(fēng)格重點(diǎn)難點(diǎn)12341.熟知UI設(shè)計(jì)的基礎(chǔ)知識(shí)。2.學(xué)會(huì)UI流程設(shè)計(jì)。3.培養(yǎng)學(xué)生賞析意識(shí)，提升專業(yè)能力。.4.培養(yǎng)學(xué)生的家國(guó)情懷和中華民族文化素養(yǎng)。知識(shí)目標(biāo)素質(zhì)目標(biāo)教學(xué)目標(biāo)技能目標(biāo)能力目標(biāo)任務(wù)情境

【任務(wù)場(chǎng)景】UI

即用戶界面，UI設(shè)計(jì)行業(yè)已經(jīng)在全球軟件業(yè)蓬勃發(fā)展，屬于高新技術(shù)設(shè)計(jì)產(chǎn)業(yè)。國(guó)內(nèi)外眾多大型

IT企業(yè)（如聯(lián)想、華為、中國(guó)移動(dòng)、百度、騰訊、京東、淘寶等）都成立了專業(yè)的

UI

設(shè)計(jì)團(tuán)隊(duì)，但此行業(yè)人才稀缺，且人才資源爭(zhēng)奪激烈，就業(yè)市場(chǎng)供不應(yīng)求。因此，提高UI設(shè)計(jì)師的個(gè)人能力勢(shì)在必行。真正提升視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)、用戶體驗(yàn)3部分軟件產(chǎn)品個(gè)性化程度已成為中國(guó)UI行業(yè)發(fā)展的重中之重。任務(wù)情境【任務(wù)布置】掌握UI設(shè)計(jì)的基礎(chǔ)知識(shí)；熟練繪制UI圖標(biāo)、按鈕及導(dǎo)航；掌握不同類型表單控件的設(shè)計(jì)方法，并能獨(dú)立完成制作；通過(guò)任務(wù)4.3中的任務(wù)實(shí)施了解導(dǎo)航設(shè)計(jì)分類，并選擇合理的導(dǎo)航類別來(lái)完成制作。4.1.1UI設(shè)計(jì)簡(jiǎn)介UI（UserInterface，用戶界面）設(shè)計(jì)是指對(duì)產(chǎn)品的人機(jī)交互、思維邏輯、界面友好、美觀的整體設(shè)計(jì)。優(yōu)質(zhì)的UI設(shè)計(jì)不僅讓產(chǎn)品變得富有個(gè)性化，還會(huì)讓操作變得更加方便、快捷、順暢、自由，使產(chǎn)品能充分體現(xiàn)其定位，提升產(chǎn)品價(jià)值，并獲得目標(biāo)用戶群體的喜愛(ài)。知識(shí)準(zhǔn)備1.UI設(shè)計(jì)的概念4.1.1UI設(shè)計(jì)簡(jiǎn)介知識(shí)準(zhǔn)備2.UI設(shè)計(jì)應(yīng)用領(lǐng)域

在不同應(yīng)用領(lǐng)域中，UI設(shè)計(jì)要考慮其視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)、體驗(yàn)設(shè)計(jì)的效果。進(jìn)行視覺(jué)設(shè)計(jì)不僅要考慮圖標(biāo)、界面、元素，還要考慮平面構(gòu)成、版式設(shè)計(jì)、色彩搭配、設(shè)計(jì)創(chuàng)意、繪畫(huà)、心理表現(xiàn)等。交互設(shè)計(jì)是一種目標(biāo)導(dǎo)向設(shè)計(jì)，讓用戶更加快捷地完成任務(wù)、達(dá)成目標(biāo)。良好的交互設(shè)計(jì)要具備優(yōu)秀的邏輯思維、跨平臺(tái)的兼容性、視覺(jué)感染力和交互的便捷性。4.1.1UI設(shè)計(jì)簡(jiǎn)介UI圖形文件格式主要分為位圖和矢量圖兩種。位圖格式包括JPEG、BMP、GIF、PSD、TIFF、PNG等，矢量圖格式包括CDR、WMF、DWG、AI和EPS等。PC端UI各元素的存儲(chǔ)一般采用JPEG、BMP、GIF、AI、PNG格式；移動(dòng)端UI各元素的存儲(chǔ)一般采用PNG、GIF、JPEG格式。知識(shí)準(zhǔn)備3.UI圖形文件格式4.1.1UI設(shè)計(jì)簡(jiǎn)介知識(shí)準(zhǔn)備3.UI圖形文件格式名稱說(shuō)明PNG

它是一種采用無(wú)損壓縮算法的位圖格式，替代GIF和TIFF文件格式。PNG文件格式的特點(diǎn)是透明、體積小，適用于網(wǎng)頁(yè)和手機(jī)UI設(shè)計(jì)GIF

它是圖形交換位圖格式，用于超文本標(biāo)志語(yǔ)言，顯示索引色彩圖像，被廣泛應(yīng)用于互聯(lián)網(wǎng)和在線服務(wù)系統(tǒng)上。GIF文件格式的特點(diǎn)是體積小、傳輸速度快、支持動(dòng)畫(huà)，適用于網(wǎng)頁(yè)和手機(jī)UI設(shè)計(jì)JPEG

它是面向連續(xù)色調(diào)靜止圖像的一種壓縮標(biāo)準(zhǔn)，也是最常用的圖像文件格式，文件后綴名為“.jpg”“.jpeg”，以靈活的壓縮方式控制文件大小。JPEG文件格式的特點(diǎn)是支持極高的壓縮率，下載速度快，壓縮后畫(huà)質(zhì)清晰度相對(duì)低，印刷效果差，適用于網(wǎng)頁(yè)和手機(jī)UI設(shè)計(jì)AI

它是一種矢量圖文件格式，也是一種分層文件，使用戶可以對(duì)圖像內(nèi)的圖層進(jìn)行操作。AI文件格式是一個(gè)嚴(yán)格限制、高度簡(jiǎn)化的EPS子集，其特點(diǎn)是圖像可以被無(wú)限放大不失真，適用于印刷出版、海報(bào)書(shū)籍排版、專業(yè)插畫(huà)、多媒體圖像處理和互聯(lián)網(wǎng)UI圖形制作表4-1常用的UI圖形文件格式4.1.1UI設(shè)計(jì)簡(jiǎn)介知識(shí)準(zhǔn)備

移動(dòng)端UI設(shè)計(jì)是平面設(shè)計(jì)的一個(gè)分支，主要包括手機(jī)、平板電腦上的App設(shè)計(jì)和主題設(shè)計(jì)，是目前主流的UI設(shè)計(jì)。由于移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，因此很多公司以手機(jī)App開(kāi)發(fā)為主。PC端UI設(shè)計(jì)以軟件界面設(shè)計(jì)為主，如計(jì)算機(jī)上的軟件和網(wǎng)頁(yè)按鈕、表單設(shè)計(jì)等。相對(duì)于移動(dòng)端UI設(shè)計(jì)，PC端UI設(shè)計(jì)沒(méi)有那么多局限性，兩者之間的區(qū)別如表4-2所示。4.移動(dòng)端UI設(shè)計(jì)和PC端UI設(shè)計(jì)的區(qū)別4.1.1UI設(shè)計(jì)簡(jiǎn)介知識(shí)準(zhǔn)備4.移動(dòng)端UI設(shè)計(jì)和PC端UI設(shè)計(jì)的區(qū)別區(qū)別移動(dòng)端UI設(shè)計(jì)PC端UI設(shè)計(jì)應(yīng)用設(shè)備不同手機(jī)、平板等移動(dòng)設(shè)備上的UI設(shè)計(jì)計(jì)算機(jī)、其他設(shè)備終端上的UI設(shè)計(jì)屏幕尺寸不同手機(jī)、平板屏幕尺寸一般為4～12英寸PC端顯示器的屏幕尺寸一般為19～24英寸顯示區(qū)域不同手機(jī)、平板上的UI設(shè)計(jì)，因?yàn)槠聊伙@示尺寸有限，可以增加層級(jí)首頁(yè)要多放一些內(nèi)容，盡量減少層級(jí)的表現(xiàn)設(shè)計(jì)規(guī)范不同手機(jī)、平板上的UI操作一般是使用手指，手的精確度相對(duì)較低，圖標(biāo)尺寸可稍大些PC端的UI操作一般是使用鼠標(biāo)，鼠標(biāo)精確度較高，圖標(biāo)尺寸可小些UI交互操作不同手機(jī)、平板上只能實(shí)現(xiàn)點(diǎn)擊、按住和滑動(dòng)等操作，UI操作相對(duì)PC端弱化PC端可以實(shí)現(xiàn)單擊、雙擊、按住、移入、移出、右擊、滾輪等操作，UI操作性強(qiáng)表4-2移動(dòng)端UI設(shè)計(jì)和PC端UI設(shè)計(jì)的區(qū)別4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備PC端UI設(shè)計(jì)主要包括系統(tǒng)界面設(shè)計(jì)、軟件界面設(shè)計(jì)和網(wǎng)站界面設(shè)計(jì)，如圖4-1～圖4-3所示。1.PC端UI設(shè)計(jì)UI設(shè)計(jì)按用戶和界面進(jìn)行分類，可分為4種類型：PC端UI設(shè)計(jì)、移動(dòng)端UI設(shè)計(jì)、游戲UI設(shè)計(jì)與其他終端UI設(shè)計(jì)。圖4-1系統(tǒng)界面設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備圖4-2軟件界面設(shè)計(jì)圖4-3網(wǎng)站界面設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備

移動(dòng)端UI設(shè)計(jì)是指移動(dòng)應(yīng)用UI設(shè)計(jì)，如手機(jī)、平板、智能手表、智能手環(huán)、智能戒指等，是區(qū)別于PC端UI設(shè)計(jì)的一種叫法，主要有手機(jī)視覺(jué)界面設(shè)計(jì)、手機(jī)交互界面設(shè)計(jì)及手機(jī)用戶體驗(yàn)設(shè)計(jì)，還有可穿戴智能藍(lán)牙手表、可穿戴智能手環(huán)、智能戒指等界面設(shè)計(jì)，如圖4-4～圖4-11所示。2.移動(dòng)端UI設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備2.移動(dòng)端UI設(shè)計(jì)圖4-4手機(jī)視覺(jué)界面設(shè)計(jì)圖4-5手機(jī)交互界面設(shè)計(jì)圖4-6手機(jī)用戶體驗(yàn)設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備2.移動(dòng)端UI設(shè)計(jì)圖4-7可穿戴智能藍(lán)牙手表界面設(shè)計(jì)圖4-8可穿戴智能手環(huán)界面設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備2.移動(dòng)端UI設(shè)計(jì)圖4-9可穿戴智能運(yùn)動(dòng)手表界面設(shè)計(jì)圖4-10智能戒指界面設(shè)計(jì)

圖4-11未來(lái)可穿戴智能手機(jī)界面設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備3.游戲UI設(shè)計(jì)

游戲UI設(shè)計(jì)一般是策劃把系統(tǒng)設(shè)計(jì)完成后，呈現(xiàn)的視覺(jué)交互模型的界面設(shè)計(jì)，如圖4-12所示。圖4-12游戲UI設(shè)計(jì)4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備4.其他終端UII設(shè)計(jì)

終端（ComputerTerminal）是與計(jì)算機(jī)系統(tǒng)相連的一種輸入/輸出設(shè)備，支持與計(jì)算機(jī)會(huì)話或具有處理功能，對(duì)此登錄界面或交互界面進(jìn)行的設(shè)計(jì)稱為“終端UI設(shè)計(jì)”。常見(jiàn)的終端UI設(shè)計(jì)有醫(yī)用監(jiān)護(hù)儀界面、車載導(dǎo)航系統(tǒng)界面、自助機(jī)界面、自助排號(hào)機(jī)界面、ATM機(jī)界面和自助打印終端界面等，如圖4-13～圖4-18所示。圖4-13醫(yī)用監(jiān)護(hù)儀界面圖4-14車載導(dǎo)航系統(tǒng)界面圖4-15自助機(jī)界面4.1.2UI設(shè)計(jì)分類知識(shí)準(zhǔn)備4.其他終端UII設(shè)計(jì)圖4-16自助排號(hào)機(jī)界面圖4-17ATM機(jī)界面圖4-18自助打印終端界面4.1.3UI設(shè)計(jì)原則知識(shí)準(zhǔn)備1.簡(jiǎn)潔易識(shí)別UI設(shè)計(jì)的主要目的是讓用戶感受到軟件操作界面更加舒適簡(jiǎn)單，能體現(xiàn)產(chǎn)品的定位與特點(diǎn)。UI設(shè)計(jì)原則主要包括簡(jiǎn)潔易識(shí)別、風(fēng)格統(tǒng)一性、布局合理化、良好體驗(yàn)性、人性化設(shè)計(jì)。2．風(fēng)格統(tǒng)一性3．布局合理化4．良好體驗(yàn)性5．人性化4.1.4UI設(shè)計(jì)流程知識(shí)準(zhǔn)備4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備1．色彩用色范圍（1）主色運(yùn)用：主色起到烘托、渲染、突出內(nèi)容的作用，如圖標(biāo)設(shè)計(jì)、網(wǎng)頁(yè)主界面設(shè)計(jì)、導(dǎo)航欄設(shè)計(jì)、按鈕設(shè)計(jì)等，喚起人們的情感并與之產(chǎn)生共鳴。因此，主色在UI設(shè)計(jì)中是非常重要的。（2）輔色運(yùn)用：輔色在整體畫(huà)面中起到平衡主色、減弱對(duì)視覺(jué)的沖擊的作用，使色彩更加柔美、豐富，增加用戶視覺(jué)的舒服感、畫(huà)面感。4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備1．色彩用色范圍

（3）點(diǎn)睛色運(yùn)用：無(wú)論是在網(wǎng)頁(yè)UI設(shè)計(jì)中還是在移動(dòng)端UI設(shè)計(jì)中，點(diǎn)睛色在色彩選用上反差較大，應(yīng)用面積較小，起到引人注目、畫(huà)龍點(diǎn)睛的作用。在圖4-20所示的App界面中，深灰色為主色調(diào)，淺灰色為輔助色，藍(lán)色和橙色為點(diǎn)睛色。圖4-20色彩劃分4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備2．色彩對(duì)比原則1）明暗對(duì)比明暗對(duì)比決定了畫(huà)面的柔和度，可以用大面積的暗色鋪底，而在其上用明色主體構(gòu)圖，如圖4-21所示。暗色明色圖4-21明暗對(duì)比4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備2．色彩對(duì)比原則2）色相對(duì)比

色相對(duì)比是指兩種以上的顏色組合，由于色相差別而形成了色彩的對(duì)比效果。色彩的強(qiáng)弱主要是色相在色相環(huán)上的角度，如圖4-22所示。角度越小色相對(duì)比越弱，反差也就越?。唤嵌仍酱笊鄬?duì)比也越強(qiáng)，反差也就越大。在90°以內(nèi)的色相對(duì)比不太明顯，在180°位置上的色相對(duì)比反差最明顯，被稱為“補(bǔ)色”，如圖4-23所示。4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備2．色彩對(duì)比原則2）色相對(duì)比圖4-22色相環(huán)圖4-23色相對(duì)比圖4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備2．色彩對(duì)比原則3）飽和度對(duì)比將兩種以上的色彩畫(huà)面擺放在同一個(gè)頁(yè)面上，因色彩的飽和度不同，產(chǎn)生的差異化對(duì)比被稱為“飽和度對(duì)比”。例如，將一個(gè)鮮艷的綠色和一個(gè)含灰度的綠色放在同一個(gè)頁(yè)面上，能夠比較出兩者在色彩上的差異。飽和度越高的色彩越鮮亮，飽和度越低的色彩越混濁，如圖4-24所示。圖4-24飽和度對(duì)比4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備2．色彩對(duì)比原則4）面積對(duì)比

將兩種色彩不同的顏色放在同一個(gè)頁(yè)面中，大面積采用弱色，小面積采用強(qiáng)色，讓兩者之間產(chǎn)生強(qiáng)弱、明暗、彩度對(duì)比的效果，如圖4-25所示。圖4-25面積對(duì)比4.1.5UI設(shè)計(jì)要素知識(shí)準(zhǔn)備3．色彩搭配方法二維碼

4-3.mp4

（1）同種色系搭配：選擇使用一種色調(diào)及其相應(yīng)的多種亮色和暗色，整體頁(yè)面非常統(tǒng)一。（2）類似色系搭配：選擇使用色相類似的顏色，頁(yè)面元素不會(huì)相互沖突，更加協(xié)調(diào)且有質(zhì)感。

（3）互補(bǔ)色系搭配：選擇使用互補(bǔ)色，較好的搭配是一種顏色作為主色，另一種顏色作為輔色且用于強(qiáng)調(diào)，彼此有著非常強(qiáng)烈的對(duì)比度，一般用于特別強(qiáng)調(diào)某個(gè)元素時(shí)。（4）分散互補(bǔ)色搭配：采用3種顏色，其中兩種互相類似，另一種與它們形成對(duì)比，這種配色非常易學(xué)而且容易出效果。（5）立色搭配：就是色相環(huán)上對(duì)立的配色，最典型的是紅、黃、藍(lán)進(jìn)行配色。4.1.6UI設(shè)計(jì)風(fēng)格知識(shí)準(zhǔn)備1．扁平化風(fēng)格二維碼

4-3.mp4

扁平化風(fēng)格是去掉了多余的透視、紋理、漸變及3D效果，在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)和符號(hào)化。在扁平化設(shè)計(jì)中力求清新、干凈、簡(jiǎn)潔，給用戶帶來(lái)良好的體驗(yàn)效果，如圖4-26所示。

圖4-26扁平化風(fēng)格界面4.1.6UI設(shè)計(jì)風(fēng)格知識(shí)準(zhǔn)備2．?dāng)M物化風(fēng)格

擬物化風(fēng)格是對(duì)生活的真實(shí)反映，不是抽象的，可以在設(shè)計(jì)中加入寫(xiě)實(shí)細(xì)節(jié)，如色彩、陰影、透視、3D、疊加、材質(zhì)等效果，視覺(jué)刺激強(qiáng)烈；也可以適當(dāng)采用變形或夸張手法，對(duì)實(shí)物進(jìn)行再現(xiàn)，其主要特征是讓用戶一眼就能看出這是什么實(shí)物，提高辨識(shí)度，如圖4-27所示。圖4-27擬物化風(fēng)格界面本節(jié)內(nèi)容總結(jié)1.

UI設(shè)計(jì)的分類及原則2.UI設(shè)計(jì)流程3.UI設(shè)計(jì)要素4.UI設(shè)計(jì)風(fēng)格謝謝！項(xiàng)目4UI設(shè)計(jì)任務(wù)4.2設(shè)計(jì)圖標(biāo)、按鈕及導(dǎo)航圖形圖像處理技術(shù)主要內(nèi)容01圖標(biāo)設(shè)計(jì)02按鈕設(shè)計(jì)03App導(dǎo)航設(shè)計(jì)重點(diǎn)難點(diǎn)12341.熟知完成圖標(biāo)及標(biāo)志設(shè)計(jì)采用的工具。2.熟練繪制UI圖標(biāo)、按鈕及導(dǎo)航。3.培養(yǎng)學(xué)生賞析意識(shí)，提升專業(yè)能力。.4.培養(yǎng)學(xué)生的家國(guó)情懷和中華民族文化素養(yǎng)。知識(shí)目標(biāo)素質(zhì)目標(biāo)教學(xué)目標(biāo)技能目標(biāo)能力目標(biāo)任務(wù)情境

【任務(wù)場(chǎng)景】在掌握了

UI

設(shè)計(jì)的概念、分類、原則、流程、要素及風(fēng)格的基礎(chǔ)上，掌握按鈕、圖標(biāo)和導(dǎo)航的設(shè)計(jì)技巧與規(guī)范，用戶可以根據(jù)需要設(shè)計(jì)圖標(biāo)和按鈕，滿足客戶的需求。

【任務(wù)布置】了解圖標(biāo)設(shè)計(jì)的流程和原則；了解按鈕設(shè)計(jì)的基本知識(shí)；掌握按鈕設(shè)計(jì)的技巧和導(dǎo)航設(shè)計(jì)的分類；以理論知識(shí)作為實(shí)操的指導(dǎo)，學(xué)會(huì)設(shè)計(jì)圖標(biāo)和按鈕。4.2.1圖標(biāo)設(shè)計(jì)

圖標(biāo)是具有指代意義的標(biāo)識(shí)性計(jì)算機(jī)圖形符號(hào)，具有高度濃縮、快捷傳達(dá)信息、便于記憶的特性。它不僅是一種圖形，更是一種標(biāo)識(shí)。我們通過(guò)圖標(biāo)看到的不僅是圖標(biāo)本身，更是它所代表的內(nèi)在含義。

圖標(biāo)的應(yīng)用范圍很廣，在計(jì)算機(jī)可視操作系統(tǒng)中扮演著極為重要的角色。它可以代表一個(gè)文檔、一段程序、一張網(wǎng)頁(yè)或一段命令，而我們可以通過(guò)單擊圖標(biāo)執(zhí)行一段命令或打開(kāi)某種類型的文檔。在App設(shè)計(jì)中，圖標(biāo)不僅包括程序啟動(dòng)圖標(biāo)，還包括狀態(tài)欄、導(dǎo)航欄等位置的其他圖標(biāo)。常見(jiàn)的圖標(biāo)設(shè)計(jì)如圖4-68～圖4-70所示。知識(shí)準(zhǔn)備1.認(rèn)識(shí)圖標(biāo)4.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備1.認(rèn)識(shí)圖標(biāo)

圖4-68常見(jiàn)應(yīng)用程序啟動(dòng)圖標(biāo)圖4-69“京東”App導(dǎo)航欄圖標(biāo)圖4-70“懶人聽(tīng)書(shū)”網(wǎng)站導(dǎo)航欄圖標(biāo)4.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備2.認(rèn)識(shí)圖標(biāo)（1）定義主題（2）尋找隱喻（3）抽象圖形（4）繪制草圖：（5）確定風(fēng)格（6）制作和調(diào)整（7）場(chǎng)景測(cè)試4.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備3.圖標(biāo)設(shè)計(jì)原則（1）可識(shí)別性原則（2）差異性原則（3）統(tǒng)一性原則圖4-72差異性圖標(biāo)圖4-73造型風(fēng)格統(tǒng)一圖4-74圖標(biāo)色調(diào)統(tǒng)一4.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備4.圖標(biāo)設(shè)計(jì)技巧（1）正負(fù)組合（2）折疊圖形（3）線形（4）透明漸變（5）色塊拼接（6）復(fù)用圖形（7）背景組合4.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備5.圖標(biāo)設(shè)計(jì)規(guī)范（1）Android系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范像素密度比例關(guān)系分辨率/像素屏幕尺寸/像素圖標(biāo)尺寸/像素主菜單狀態(tài)欄通知圖標(biāo)LDPI0.75240×3202.736×3624×2418×18MDPI1320×4803.248×4832×3224×24HDPI1.5480×8003.472×7248×4836×36XHDPI2720×12804.6596×9664×6448×48XXHDPI31080×19205.2144×14496×9672×72XXXHDPI41440×25605.96192×192128×12896×964.2.1圖標(biāo)設(shè)計(jì)知識(shí)準(zhǔn)備5.圖標(biāo)設(shè)計(jì)規(guī)范（2）蒙系統(tǒng)圖標(biāo)設(shè)計(jì)規(guī)范1）信息展示完整：設(shè)計(jì)規(guī)范建議展開(kāi)態(tài)不應(yīng)出現(xiàn)頁(yè)面內(nèi)的內(nèi)容元素?cái)?shù)量減少，或者圖形化元素模糊、分辨率下降、視覺(jué)體量減小等損失，應(yīng)該確保展開(kāi)態(tài)的內(nèi)容元素不少于折疊態(tài)內(nèi)容元素信息的3/4。2）字體/圖片自動(dòng)適配：設(shè)計(jì)規(guī)范建議展開(kāi)態(tài)圖標(biāo)和字體不應(yīng)發(fā)生明顯變化，在保證可讀性的基礎(chǔ)上，建議保持跟折疊態(tài)一樣大的字號(hào)。3）彈出框適配。設(shè)計(jì)規(guī)范建議展開(kāi)太和折疊態(tài)彈出框保持相同的大小，或者大小變化不超過(guò)1.2倍。4.2.2按鈕設(shè)計(jì)知識(shí)準(zhǔn)備1.按鈕狀態(tài)

按鈕是用戶在執(zhí)行某項(xiàng)操作時(shí)直接接觸的對(duì)象，按鈕的狀態(tài)可以將操作結(jié)果反饋給用戶。在設(shè)計(jì)按鈕時(shí)有4種不同的狀態(tài)。（1）默認(rèn)狀態(tài)：按鈕的默認(rèn)狀態(tài)或靜止時(shí)的狀態(tài)。表示按鈕處于活動(dòng)狀態(tài)，但是當(dāng)前并未被使用。（2）懸浮狀態(tài)：在按鈕表面滑過(guò)時(shí)該按鈕的狀態(tài)，這個(gè)狀態(tài)是提醒用戶，滑過(guò)按鈕可以引發(fā)某個(gè)動(dòng)作。（3）按下?tīng)顟B(tài)：按下該按鈕時(shí)的狀態(tài)，表示按鈕當(dāng)前已被選中。（4）禁用狀態(tài)：按鈕未被啟用且無(wú)法被使用4.2.2按鈕設(shè)計(jì)知識(shí)準(zhǔn)備2.按鈕設(shè)計(jì)技巧1）匹配品牌2）匹配風(fēng)格3）突出對(duì)比度4）使用描邊和小圖標(biāo)5）按鈕主次分明6）尺寸規(guī)格圖4-85匹配品牌按鈕圖4-86匹配風(fēng)格按鈕圖4-87突出對(duì)比度按鈕圖4-88使用小圖標(biāo)按鈕圖4-89按鈕主次對(duì)比4.2.3App導(dǎo)航設(shè)計(jì)知識(shí)準(zhǔn)備1.標(biāo)簽式導(dǎo)航

標(biāo)簽式導(dǎo)航又被稱為“選項(xiàng)卡式導(dǎo)航”，分為底部標(biāo)簽式導(dǎo)航、舵式導(dǎo)航和Tab標(biāo)簽式導(dǎo)航，如圖4-90～圖4-92所示。圖4-90底部標(biāo)簽式導(dǎo)航圖4-91舵式導(dǎo)航圖4-92Tab標(biāo)簽式導(dǎo)航4.2.3App導(dǎo)航設(shè)計(jì)知識(shí)準(zhǔn)備2.抽屜式導(dǎo)航3.宮格式導(dǎo)航4.列表式導(dǎo)航圖4-93抽屜式導(dǎo)航圖4-94宮格式導(dǎo)航圖4-95列表式導(dǎo)航本節(jié)內(nèi)容總結(jié)1．認(rèn)識(shí)圖標(biāo)2.學(xué)會(huì)圖標(biāo)設(shè)計(jì)流程3.明確圖標(biāo)設(shè)計(jì)原則4.掌握?qǐng)D標(biāo)、按鈕、

App導(dǎo)航設(shè)計(jì)技巧謝謝！項(xiàng)目4UI設(shè)計(jì)任務(wù)4.3設(shè)計(jì)表單控件圖形圖像處理技術(shù)主要內(nèi)容01表單控件分類02表單控件設(shè)計(jì)原則重點(diǎn)難點(diǎn)12341.熟知表單控件分類及設(shè)計(jì)原則2.靈活按要求完成表單控件的設(shè)計(jì)。3.培養(yǎng)學(xué)生賞析意識(shí)，提升專業(yè)能力。.4.培養(yǎng)學(xué)生的家國(guó)情懷和中華民族文化素養(yǎng)。