ui視覺設計教案

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