ui視覺(jué)設(shè)計(jì)教案

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