ui視覺設(shè)計(jì)教案市公開課一等獎(jiǎng)省賽課微課金獎(jiǎng)?wù)n件

教學(xué)對(duì)象：ui視覺設(shè)計(jì)班學(xué)員講課內(nèi)容：詳細(xì)講解icon、pc端移動(dòng)端界面設(shè)計(jì)、原型圖繪制計(jì)劃課時(shí)：100課時(shí)UI視覺設(shè)計(jì)班教案1/32本章導(dǎo)讀第一章（3天）本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣繪制扁平格調(diào)圖標(biāo)（icon）·icon是什么，設(shè)計(jì)icon目標(biāo)以及規(guī)范要求·簡單介紹現(xiàn)今主流三大格調(diào)icon·繪制一套（8~12個(gè)）完整扁平格調(diào)圖標(biāo)，技巧手法注意事項(xiàng)·評(píng)講學(xué)生作業(yè)并輔導(dǎo)學(xué)生完成修改2/32本章導(dǎo)讀第一章（2~3天）本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣繪制扁平格調(diào)圖標(biāo)（icon）·icon是什么，設(shè)計(jì)icon目標(biāo)以及規(guī)范要求·簡單介紹現(xiàn)今主流三大格調(diào)icon·繪制一套（8~12個(gè)）完整扁平格調(diào)圖標(biāo)，技巧手法注意事項(xiàng)·評(píng)講學(xué)生作業(yè)并輔導(dǎo)學(xué)生完成修改3/32·教學(xué)生怎樣繪制一組扁平化圖標(biāo)·在PS里，靈活針對(duì)○□-△等圖形進(jìn)行布爾運(yùn)算（相交、相減、相加等）以實(shí)現(xiàn)上面圖標(biāo)效果；·臨摹時(shí)，需要臨摹一套格調(diào)圖標(biāo)，且不少于8個(gè)·繪制時(shí)，全部元素邊界都必須潔凈利落，沒有任何羽化、含糊、紋理等能做出3d效果元素·確保圖標(biāo)可讀性，認(rèn)知度要強(qiáng)，對(duì)應(yīng)圖標(biāo)配對(duì)對(duì)應(yīng)功效第一章（2~3天）4/32第一章（2~3天）手把手教你繪制酷炫有型火箭圖標(biāo)·繪制機(jī)體（布爾運(yùn)算）·繪制機(jī)翼（注意切換點(diǎn)）·長投影繪制，以及細(xì)節(jié)修飾布爾運(yùn)算5/32臨摹以下一套格調(diào)圖標(biāo)6/32本章導(dǎo)讀第二章（1~2天）本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣繪制單色矢量圖標(biāo)（icon）·單色適量圖標(biāo)制作規(guī)范要求·教學(xué)生繪制一套（不少于15個(gè)）單色矢量圖標(biāo)，方法技巧及注意事項(xiàng)·評(píng)講學(xué)生作業(yè)并輔導(dǎo)學(xué)生完成修改7/32第二章（1~2天）·教學(xué)生怎樣繪制一組單色適量圖標(biāo)（線形）+（單色扁平）·在PS里，靈活針對(duì)○□-△等圖形進(jìn)行布爾運(yùn)算（相交、相減、相加等）以實(shí)現(xiàn)上面圖標(biāo)效果；·鋼筆工具——繪制路徑、路徑選擇工具——調(diào)整路徑大小使用直接矛點(diǎn)選擇工具——調(diào)整矛點(diǎn)位置、轉(zhuǎn)角工具——調(diào)整路徑圓角和角度使用·記住三點(diǎn)：一是形狀工具及填充，二是描邊效果，三是用鋼筆錨點(diǎn)工具刪除無用路徑8/32輕松畫線形圖標(biāo)之——wifi圖標(biāo)第二章（1~2天）畫七個(gè)圓平均分布居中對(duì)齊形狀拼合并做布爾運(yùn)算將一個(gè)正方形翻轉(zhuǎn)45°后對(duì)齊圓形中心并做布爾運(yùn)算完成布爾運(yùn)算9/32依據(jù)上一頁講方法繪制以下列圖標(biāo)10/32第三章（4~5天）本章導(dǎo)讀本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣繪制擬物格調(diào)圖標(biāo)（icon）·擬物圖標(biāo)制作規(guī)范要求·教學(xué)生繪制一套（不少于6個(gè)）擬物圖標(biāo)，方法技巧及注意事項(xiàng)·重點(diǎn)在于細(xì)節(jié)、明暗對(duì)比、透視關(guān)系上·評(píng)講學(xué)生作業(yè)并輔導(dǎo)學(xué)生完成修改11/32第三章（4~5天）·教學(xué)生怎樣繪制一組擬物格調(diào)圖標(biāo)·經(jīng)過繪制擬物格調(diào)圖標(biāo)，了解圖層樣式各種表現(xiàn)方式·臨摹一款擬物格調(diào)圖標(biāo)，學(xué)會(huì)進(jìn)行圖層拆解，然后分步繪制，提升繪圖效率·擬物格調(diào)圖標(biāo)最能夠鍛煉設(shè)計(jì)師藝術(shù)造型能力，對(duì)質(zhì)感表現(xiàn)要求較高·可用ps或是ai進(jìn)行繪制12/32第三章（4~5天）繪制寫實(shí)質(zhì)感收音機(jī)①圖層分解外框揚(yáng)聲器頻道音量/指示燈13/32第三章（4~5天）繪制寫實(shí)質(zhì)感收音機(jī)①制作木頭紋理：創(chuàng)建新新圖層，填充木頭色。工具欄選擇“濾鏡>渲染>纖維”，調(diào)整適當(dāng)差異及強(qiáng)度；并繪制邊框→②完善邊框②分步繪制-外邊框③分步繪制-揚(yáng)聲器②繪制揚(yáng)聲器，設(shè)置圖層樣式并下載揚(yáng)聲器網(wǎng)格圖案（MetalMeshPatterns-Pack）進(jìn)行圖案疊加→14/32第三章（4~5天）繪制寫實(shí)質(zhì)感收音機(jī)五個(gè)不一樣大小且不一樣圖層樣式圓一層一層疊加起來，實(shí)現(xiàn)頻道效果，此處注意漸變、陰影、斜面和浮雕、描邊等效果配合使用④分步繪制-頻道⑤分步繪制-音量、指示燈、標(biāo)志音量和標(biāo)志繪制手法跟頻道類似指示燈用到外發(fā)光效果最終收尾進(jìn)行細(xì)節(jié)完善15/32第三章（4~5天）繪制藥片①圖層分解藥板底殼藥丸16/32第三章（4~5天）②分步制作-藥板繪制藥片圖層樣式：漸變、內(nèi)投影不一樣大小及不一樣圖層樣式圓角矩形疊加了解怎樣使用“羽化”功效用到漸變疊加、投影、外發(fā)光等圖層樣式③分步制作-底殼17/32第三章（4~5天）繪制藥片完成最上一層藥丸繪制，重點(diǎn)表現(xiàn)光質(zhì)感，高光跟陰影需要對(duì)應(yīng)，要讓藥丸顯得愈加真實(shí)細(xì)膩有質(zhì)感④分步制作-藥丸18/32第四章（4~5天）本章導(dǎo)讀本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣進(jìn)行PC端界面設(shè)計(jì)·網(wǎng)頁設(shè)計(jì)類別，以及不一樣格調(diào)網(wǎng)頁設(shè)計(jì)規(guī)范·優(yōu)異網(wǎng)頁設(shè)計(jì)配色方案·版式設(shè)計(jì)：講解網(wǎng)頁設(shè)計(jì)構(gòu)圖標(biāo)準(zhǔn)·淺談響應(yīng)式網(wǎng)頁設(shè)計(jì)·學(xué)生臨摹網(wǎng)頁設(shè)計(jì)，并指導(dǎo)其完成19/32網(wǎng)頁配色方案：依次提取三個(gè)顏色組成版面再次進(jìn)行練習(xí)。首先是紅磚和天空。天空藍(lán)因?yàn)樗{(lán)色本身冷色隱退性被作為了底色。磚紅色以暖色鮮亮特征被用在藍(lán)色上層。最終，碳黑色標(biāo)題在底色強(qiáng)烈對(duì)比下使信息更為顯著。20/32F模式·用戶極少逐字閱讀文字?！っ總€(gè)段落開始兩個(gè)字最為主要，這將決定內(nèi)容是否能留住用戶?！こ跏级温?，副標(biāo)題和關(guān)鍵點(diǎn)都要保持醒目。Z模式Z模式幾乎能夠適用到任何網(wǎng)頁交互，Z模式優(yōu)點(diǎn)就是簡單。假如你網(wǎng)站內(nèi)容很多而且很復(fù)雜話，那么用這個(gè)模式，效果就會(huì)稍差。當(dāng)然，這些都不是絕正確。當(dāng)Z模式簡化布局，就能夠增加轉(zhuǎn)化率兩種主要網(wǎng)頁瀏覽模式21/32對(duì)稱平衡假如你想在你網(wǎng)頁看上去美觀和優(yōu)雅，那么你應(yīng)該做一個(gè)網(wǎng)站對(duì)稱。四個(gè)超實(shí)用網(wǎng)頁設(shè)計(jì)構(gòu)圖標(biāo)準(zhǔn)不對(duì)稱平衡不對(duì)稱平衡帶來一個(gè)自由隨意感覺。盡管有時(shí)候看上去不是那么自然，不過它還是經(jīng)常在網(wǎng)頁設(shè)計(jì)中得到實(shí)用。水平平衡假如你想在你網(wǎng)頁看上去美觀和優(yōu)雅，那么你應(yīng)該做一個(gè)網(wǎng)站對(duì)稱。垂直平衡垂直結(jié)構(gòu)用于頭部和底部元素非常相同情形。這么布局往往利用于小元素展示。22/32怎樣創(chuàng)建一個(gè)銷售蘋果app網(wǎng)站>>>23/32創(chuàng)建背景圖（圖案疊加），繪制左右兩側(cè)圖形（圖層樣式>漸變疊加／內(nèi)投影／外發(fā)光等應(yīng)用），左側(cè)完成復(fù)制到右側(cè)并水平對(duì)稱繪制展示欄，注意透視關(guān)系光影效果，漸變需過渡自然；字體添加（圖層樣式應(yīng)用），將繪制好圖標(biāo)放入到展示區(qū)域繪制底板，漸變需過渡自然，邊框需合理利用圖層樣式；添加文字以及單色適量圖標(biāo)，最終進(jìn)行整體調(diào)整。24/32第五章（4~5天）本章導(dǎo)讀本章主要講課內(nèi)容·本章主要學(xué)習(xí)怎樣進(jìn)行移動(dòng)端界面設(shè)計(jì)·移動(dòng)端界面設(shè)計(jì)技巧（結(jié)合字體設(shè)計(jì)黃金7法則）·移動(dòng)端界面設(shè)計(jì)中色彩利用·版式在移動(dòng)界面中應(yīng)用·移動(dòng)界面動(dòng)效類型·移動(dòng)端界面尺寸講解·學(xué)生臨摹移動(dòng)界面設(shè)計(jì)，并指導(dǎo)其完成25/32移動(dòng)端界面中版式設(shè)計(jì)原理信息排布對(duì)任何信息進(jìn)行排布時(shí)候，首先必須要掌握是對(duì)齊/重復(fù)/親密/對(duì)比，貫通設(shè)計(jì)四大標(biāo)準(zhǔn)。對(duì)齊重復(fù)和對(duì)比親密性圖片使用頁面中圖片所占比率叫做圖版率，通常情況下降低圖版率會(huì)給人一個(gè)寧靜典雅、高級(jí)感覺。提升圖版率會(huì)有充滿活力，使畫面有富有感染力效果。圖版率高、感染力圖版率低、寧靜典雅使用色塊提升圖版率擬物繪圖提升圖版率26/32在移動(dòng)端界面中通常需要選取主色，標(biāo)準(zhǔn)色，點(diǎn)晴色。移動(dòng)端與網(wǎng)頁端稍微不一樣，主色即使是決定了畫面格調(diào)色彩不過往往不會(huì)被大面積使用。鄰近色、同色系、漸變、對(duì)比色、明暗色、多色搭配等顏色搭配顏色使用留白藝術(shù)一、能使頁面空間感更強(qiáng)，視線更開闊，經(jīng)過留白來減輕頁面壓迫感，使用戶進(jìn)入一個(gè)輕松氣氛。二、經(jīng)過留白區(qū)分元素存在，弱化元素與元素之間阻隔三、經(jīng)過留白有目標(biāo)突出表示重點(diǎn)四、賦予頁面組成產(chǎn)生不一樣改變①②③④27/32在觀看事物時(shí)，往往會(huì)產(chǎn)生一些不一樣視覺心理，著作權(quán)歸作者全部。在版式設(shè)計(jì)中一樣大量利用這些科學(xué)視覺方法對(duì)用戶進(jìn)行視覺上引導(dǎo)，也能讓設(shè)計(jì)師快速找到一些排版布局方法。視覺心理靈活利用通欄、間距通常采取黃金百分比圓角、圓形比直角更輕易讓人接收照片、相片通常使用方形展示防止單調(diào)，增加頁面節(jié)奏感經(jīng)過蒙版方式控制頁面色調(diào)沒有設(shè)計(jì)設(shè)計(jì)每一條線/每一行文字/每一個(gè)按鈕存在都是都有它存在理由。它不加無意義修飾、不須陪村和襯托，讓用戶更關(guān)注內(nèi)容主體，弱化對(duì)視覺認(rèn)知。甚至于用戶在滑動(dòng)時(shí)看到一個(gè)按鈕或一行文字也感覺這是理所當(dāng)然存在。讓用戶感知不到刻意設(shè)計(jì)，一切發(fā)生都是那么自然28/32移動(dòng)端界面中構(gòu)圖九宮格網(wǎng)格構(gòu)圖這種版式主要利用在分類為主一級(jí)頁面，起到功效分類作用。圓心點(diǎn)放射形構(gòu)圖我們將主要功效設(shè)置在版式中位置，就能引導(dǎo)用戶視線聚集在想要突出功效點(diǎn)上，就算視線原來不在中間位置，也能引導(dǎo)用戶再次回到中心聚集處。29/32移動(dòng)端界面中構(gòu)圖三角形構(gòu)圖主要利用在文字與圖標(biāo)版式中，讓界面保持平衡穩(wěn)定。從上至下式三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。在界面中三角形構(gòu)圖大部分都是圖