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

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