電子商務美工技術教程 （第二版）教案

《電子商務美工技術教程》教案教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊一知識點解析教學目的1.掌握PhotoshopCC的應用領域。2.掌握圖像分辨率、位圖與矢量圖的區(qū)別。3.掌握PhotoshopCC軟件的基礎工具。4.掌握美工設計的構成要素。5.掌握標題欄的設計方法。教學重點1.掌握PhotoshopCC工具的基本用途。2.能夠設計點、線、面。3.能夠設計制作標題欄。教學難點1.掌握PhotoshopCC工具的基本用途。2.能夠設計點、線、面。3.能夠設計制作標題欄。更新、補充刪節(jié)內容無課外作業(yè)安裝PhotoshopCC軟件，熟悉操作界面。課后體會與建議學生學習興趣濃厚，要求學生注意該門課程的學習習慣和方法，課程資源以及與教師的互動可以登錄Moddle平臺設置。授課主要內容模塊一知識點解析一、PhotoshopCC概述PhotoshopCC是由Adobe公司開發(fā)的圖像處理軟件之一，它集圖像掃描、編輯修改、圖像制作、廣告設計、圖像輸入與輸出于一體，深受廣大平面設計人員和電腦美術愛好者的喜愛。（一）PhotoshopCC在平面設計中的應用（二）PhotoshopCC在網(wǎng)頁設計中的應用（三）PhotoshopCC在UI設計中的應用（四）PhotoshopCC在插畫設計中的應用（五）PhotoshopCC在數(shù)碼攝影中的應用（六）PhotoshopCC在動畫設計中的應用（七）PhotoshopCC在效果圖后期制作中的應用二、圖像的分辨率圖像的分辨率是指單位長度內所包含的像素點的數(shù)量，其單位是“像素/英寸（PPI）”。假如圖像的分辨率是“300ppi”，則指每英寸包含300個像素點。圖像的分辨率越高，每英寸包含的像素就越多，圖像越清晰，印刷的質量越好。一、PhotoshopCC軟件介紹（一）PhotoshopCC的工作界面（二）工具箱（三）矩形選框工具組（四）套索工具組（五）魔棒工具組（六）輔助工具1.標尺2.參考線3.網(wǎng)格4.度量工具5.畫板工具（七）文件的相關操作1.新建文件2.打開文件3.存儲文件4.圖像與畫布四、美工設計的構成要素（一）點（二）線（三）面五、標題欄的設計方法（一）文字（二）文字+線條（三）形狀（四）素材總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊一任務1、模塊一任務2教學目的運用“矩形選框工具”“多邊形套索工具”“自由變換”“文字工具”等命令設計版面。教學重點1.使用“變形命令”進行變形設計。2.使用“多邊形套索工具”設計不規(guī)則形狀。3.使用“文字工具”創(chuàng)建文字。教學難點運用“矩形選框工具”“多邊形套索工具”“自由變換”“文字工具”等命令設計版面。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議學生對于概念的理解接受能力較強，但是對于幾種工具的交替使用有點陌生，每次2課時的訓練比較倉促，學生需要利用課余時間進行強化。授課主要內容復習上節(jié)課內容本次課內容模塊一制作標題欄任務1任務背景某廣告公司需要設計一款標題欄。任務要求標題欄簡明扼要，尺寸：17厘米*14厘米。參考效果圖任務分析運用“矩形選框工具”“多邊形套索工具”“自由變換”“文字工具”等命令設計版面。任務重點1.使用“變形命令”進行變形設計。2.使用“多邊形套索工具”設計不規(guī)則形狀。3.使用“文字工具”創(chuàng)建文字。任務2任務背景某廣告公司需要設計十款標題欄。任務要求使用“矩形選框工具”“橢圓選框工具”“多邊形套索工具”“自由變換命令”“油漆桶工具”“文字工具”。參考效果圖(c)(c)總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊二知識點解析教學目的1.能設計炫彩海報。2.能設計同類色、鄰近色、對比色、互補色的海報。3.掌握色彩的含義、屬性與調性。4.掌握色彩搭配的原則與方法。5.掌握Photoshop中的色彩調整。教學重點1.能設計炫彩海報。2.能設計同類色、鄰近色、對比色、互補色的海報。教學難點1.能設計炫彩海報。2.能設計同類色、鄰近色、對比色、互補色的海報。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議知識點解析中對應的素材練習。授課主要內容復習上次課內容新課內容一、色彩概述（一）色彩的含義色彩是一種視覺語言。我們肉眼見到的光線是由波長范圍很窄的電磁波產生的，不同波長的電磁波表現(xiàn)為不同的顏色，對色彩的辨認是肉眼收到電磁波輻射刺激后所引起的一種視覺神經的感覺。不同的色彩產生的生理和心理效應不同，不同的商品有不同的色彩特征。在電子商務視覺營銷過程中，將色彩搭配應用得恰到好處，才能體現(xiàn)獨特的品牌調性。（二）色彩的屬性1.色相色相指的是各類色彩的相貌，它是色彩的首要特征，是區(qū)別各種不同色彩的最準確的標準。三種基本顏色稱為三原色，我們通常所說的三原色是“光學三原色（RGB）”和“色彩三原色（CMYK）”。2.明度3.純度（三）色彩的調性1.紅色2.橙色3.黃色4.綠色5.青色6.藍色7.紫色二、色彩搭配（一）色彩搭配的原則1.主色突出2.不超過三種色相3.大協(xié)調小沖突4.黃金比例（二）色彩搭配的方法1.同類色2.鄰近色3.對比色4.互補色三、圖像色彩調整顏色調整是Photoshop的一個重要功能，PhotoshopCC中提供了完善的色彩和色調的調整功能，這些功能在“圖像”>“調整”命令的子菜單中，執(zhí)行“窗口”>“調整”，“調整”面板會顯示在主界面右側以方便設置。電子商務行業(yè)常用的調整項目有亮度/對比度、色階、曲線、曝光度、自然飽和度、色相/飽和度、色彩平衡、照片濾鏡。（一）調整亮度/對比度（二）調整色階（三）調整曲線（四）調整曝光度（五）調整自然飽和度（六）調整色相/飽和度（七）調整色彩平衡（八）調整照片濾鏡總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊二任務1、模塊二任務2教學目的運用“漸變”“圖案疊加”等命令設計炫彩效果。教學重點背景色以及圓形、矩形中漸變色的搭配設計。教學難點背景色以及圓形、矩形中漸變色的搭配設計。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議學生對于概念的理解接受能力較強，但是對于幾種工具的交替使用有點陌生，每次2課時的訓練比較倉促，學生需要利用課余時間進行強化。授課主要內容復習上節(jié)課內容本次課內容任務1標題欄的設計與制作任務背景某公司擬進行商品的低價促銷活動，需要設計一張具有炫彩效果的海報。任務要求海報的“寬度*高度”為“900*1400像素”。參考效果圖（左）任務分析運用“漸變”“圖案疊加”等命令設計炫彩效果。任務重點背景色以及圓形、矩形中漸變色的搭配設計。任務2十款標題欄的設計與制作任務背景某公司新品上市，需要設計一張具有視覺吸引力的海報。任務要求海報的“寬度*高度”為“900*1400像素”，海報具有炫彩效果。參考效果圖（右）總結本次課內容

教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊三知識點解析教學目的1.掌握字形結構、字體筆畫、字體特征、字體性格。2.掌握黑體、宋體、書法字體、三維字體。3.掌握字體細節(jié)調整。4.掌握PhotoshopCC軟件的文字工具。教學重點1.能夠設計秒殺字體。2.能夠掌握PhotoshopCC軟件的文字工具。3.能夠利用黑體、宋體、書法字體、三維字體進行字體設計。4.能夠掌握文字與文字段落的排版。教學難點1.能夠設計秒殺字體。2.能夠掌握PhotoshopCC軟件的文字工具。3.能夠利用黑體、宋體、書法字體、三維字體進行字體設計。4.能夠掌握文字與文字段落的排版。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議知識點解析中對應的素材練習。授課主要內容復習上次課內容新課內容模塊三知識點解析一、字體概述字體是由字形結構、字體筆畫和字體特征三個基本要素構成的。字形結構的松散與疏密、筆畫的粗細與曲直、細節(jié)的特征修飾對字體有著重要的影響。就如同人由骨骼、脂肪和衣著構成一般，高矮、胖瘦、著衣風格這些外在的形象在一定程度上可以反映出一個人的性格特征。同理，字形結構、字體筆畫、字體特征也可以反映出一個字體的性格。通過字形結構、字體筆畫、字體特征的差異塑造形式多變的字體，在第一時間準確地傳達字體情感，可以給人帶來不同的視覺感受。（一）字形結構1.字形結構的扁平與高瘦2.字形結構的松散與緊湊（二）字體筆畫1.字體筆畫的輕盈與緊湊2.字體筆畫的曲與直（三）字體特征（四）字體性格1.女性字體2.男性字體3.促銷類字體4.文藝民族風字體二、字體類型字的邊角沒有襯線裝飾、豎線和橫線筆畫粗細均等的字體稱為無襯線字體；字體的線條右邊帶有襯線裝飾、豎線比橫線粗的字體稱為有襯線字體。黑體屬于無襯線字體，宋體屬于有襯線字體。中文字體大致可分為四種類型：黑體、宋體、書法體字、三維字體。（一）黑體（二）宋體（三）書法字體（四）三維字體三、細節(jié)調整（一）加入圖形（二）筆畫連接（三）筆畫變形（四）轉換位置四、文字工具（一）文字工具的選項欄1.更改文本方向2.設置消除文字鋸齒（二）點文字和段落文本1.創(chuàng)建點文字2.創(chuàng)建段落文本3.添加文字樣式（三）文字變形（四）路徑文字1.創(chuàng)建路徑文字2.移動和翻轉路徑文字（五）使用“字符”面板設置文字屬性1.行距2.水平/垂直縮放3.字距微調和字距調整（六）使用“段落”面板設置段落屬性總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊三任務1、模塊三任務2教學目的運用“鋼筆工具”“橢圓選框工具”“多邊形套索工具”“畫筆工具”等命令設計版面。教學重點1.使用“鋼筆工具”設計基礎字形。2.使用“多邊形套索工具”設計字體效果。3.使用“畫筆工具”設計字體背景。教學難點運用“鋼筆工具”“橢圓選框工具”“多邊形套索工具”“畫筆工具”等命令設計版面。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議該模塊的任務非常實用，熟悉練習后，與模塊五中的圖層樣式內容可以結合使用。授課主要內容復習上次課內容新課內容模塊三任務1秒殺字體的設計與制作任務背景某電商公司需要設計一款秒殺字體。任務要求秒殺字體醒目突出，尺寸：1200像素*800像素。參考效果圖（左）任務分析運用“鋼筆工具”“橢圓選框工具”“多邊形套索工具”“畫筆工具”等命令設計版面。任務重點1.使用“鋼筆工具”設計基礎字形。2.使用“多邊形套索工具”設計字體效果。使用“畫筆工具”設計字體背景。任務2標題文字的設計與制作任務背景某廣告公司需要設計一款標題文字。任務要求使用“矩形選框工具”“多邊形套索工具”“油漆桶工具”“文字工具”。參考效果圖（右）總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊四知識點解析教學目的1.掌握版式設計的基本原則和設計要素。2.掌握版式設計的視覺流程。3.掌握版式設計的基本類型。教學重點1.能夠設計商品直通車圖。2.掌握版式設計素材的運用。3.掌握各種版式的設計制作。教學難點1.能夠設計商品直通車圖。2.掌握版式設計素材的運用。3.掌握各種版式的設計制作。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議知識點解析中對應的素材練習。文字是用來傳達作品信息的最主要的方式，在平面設計中文字除了具有記錄和表達的功能外，還起到美化版面、強化主體的作用，是作品的重要組成部分。授課主要內容復習上次課內容新課內容模塊四知識點解析一、版式設計概述版式設計是指將文字、圖形、色彩等視覺元素有機地進行整理與配置，以更好地傳達信息。版式設計也稱布局與排版。版式設計的應用主要涉及電子商務視覺設計、UI設計、廣告、包裝等多個設計領域。（一）基本原則1.主題鮮明突出2.形式與內容統(tǒng)一3.強化整體布局（二）設計要素1.文字2.圖片（1）照片（2）設計圖二、版式設計的視覺流程設計是一項以顧客為對象的工作，不同的顧客有不同的心理傾向。在版式設計中，設計人員須把握顧客的心理傾向，對顧客進行視覺引導，將設計中的信息傳達給顧客。視覺引導事關設計作品的成功與否，因此設計人員必須具備引導顧客視線的能力，讓顧客關注設計人員希望他們關注的地方。（一）自上而下（二）從大到?。ㄈ┫蛳噜徫矬w移動（四）趨向相同形狀（五）趨向相同顏色（六）向下一號碼移動（七）沿箭頭移動三、版式設計的基本類型（一）圖文左對齊圖文居中（三）圖文右對齊（四）圖文“裝箱式”總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊四任務1、模塊四任務2教學目的將文案、裝飾元素、商品三個要素分別組合在主圖的不同位置，形成六個不同的版式設計。教學重點六種版式差異化的體現(xiàn)。教學難點將文案、裝飾元素、商品三個要素分別組合在主圖的不同位置，形成六個不同的版式設計。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議文字是用來傳達作品信息的最主要的方式，在平面設計中文字除了具有記錄和表達的功能外，還起到美化版面、強化主體的作用，是作品的重要組成部分。授課主要內容復習上次課內容新課內容模塊四任務1、模塊四任務2任務1直通車圖的設計與制作任務背景某電商公司需要設計一款商品的直通車圖。任務要求主圖尺寸：800像素*800像素，設計六種不同的版式，畫面干凈整齊、有利于視覺傳達和商品展示。參考效果圖任務2不同版式直通車圖的設計與制作任務背景某生活用品公司需要設計一組直通車圖。任務要求使用不同的版式進行設計?？偨Y本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊五知識點解析教學目的1.掌握圖標的含義、作用與圖標設計的基本原則。2.掌握圖標設計的流程。3.掌握圖標設計的分類。教學重點1.能夠設計制作線面型圖標。2.能夠設計實心圖標、空心圖標、應用圖標、功能圖標、扁平圖標、寫實圖標。教學難點1.能夠設計制作線面型圖標。2.能夠設計實心圖標、空心圖標、應用圖標、功能圖標、扁平圖標、寫實圖標。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議知識點解析中對應的素材練習。每種樣式中參數(shù)的設置不同，圖片效果完全不同。授課主要內容復習上次課內容新課內容模塊五知識點解析一、圖標設計概述（一）圖標設計的含義圖標是一種圖形化的標識，是界面設計中一個重要的元素，在一定程度上能夠體現(xiàn)界面設計的風格和精細程度。圖標有廣義和狹義之分。廣義的圖標指的是所有現(xiàn)實中有明確指向含義的圖形符號；狹義的圖標指的是在計算機、移動端等設備界面中的圖形符號。（二）圖標設計的作用（三）圖標設計的基本原則1.可識別性原則2.視覺統(tǒng)一性原則3.差異性原則二、圖標設計的流程定義樣式定義樣式提煉特征繪制草圖調整細節(jié)（一）定義樣式（二）提煉特征（三）繪制草圖（四）調整細節(jié)三、圖標設計的分類（一）線性圖標、面性圖標與混合型圖標1.線性圖標2.面性圖標3.混合型圖標（二）實心圖標與空心圖標（三）應用圖標與功能圖標1.應用圖標2.功能圖標（四）扁平圖標和寫實圖標1.扁平圖標2.寫實圖標總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊五任務1任務2教學目的MBE風格圖標采用粗線條描邊，可以采用斷點式進行設計。教學重點1、使用“橢圓工具”對圖標進行框架設計。2、使用“圓角矩形工具”設計圖標的輪廓。3、使用“多邊形工具”讓圖標更具個性。教學難點MBE風格圖標采用粗線條描邊，可以采用斷點式進行設計。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議圖層是Photoshop最為核心的功能之一，可以把圖層看作是一張張透明的玻璃紙，對每個圖層上的圖像進行單獨的編輯，透過上層的玻璃紙可以看見下層玻璃紙上的內容。授課主要內容復習上次課內容新課內容模塊五任務1任務2任務1設計與制作MBE風格圖標任務背景某公司要求設計一組MBE風格圖標。任務要求圖標的設計符合可識別性、視覺統(tǒng)一性、差異性原則。參考效果圖任務分析MBE風格圖標采用粗線條描邊，可以采用斷點式進行設計。任務重點1、使用“橢圓工具”對圖標進行框架設計。2、使用“圓角矩形工具”設計圖標的輪廓。3、使用“多邊形工具”讓圖標更具個性。任務2十二生肖圖標的設計與制作任務背景某公司需要設計十二生肖圖標。任務要求圖標的“寬度*高度”為“800*800像素”，圖標具有可愛的特點。參考效果圖總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊六綜合案例（一）——電商平臺主圖設計教學目的1.掌握美工設計流程。2.掌握主圖的設計要素。3.掌握主圖成交轉化五部曲。教學重點1.能夠掌握統(tǒng)一色調設計。2.能夠掌握融入品牌設計。3.能夠設計斜方位視角的設計。教學難點1.能夠掌握統(tǒng)一色調設計。2.能夠掌握融入品牌設計。3.能夠設計斜方位視角的設計。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議圖層是用黑白灰來表現(xiàn)透明狀態(tài)的。在蒙版中的黑色就是蒙住當前圖層的內容，顯示當前圖層下面的圖層的內容，蒙版中的白色則是顯示當前層的內容。設計的首頁輪播圖色彩明快、促銷信息明確，突出手機專享的優(yōu)惠信息，符合嬰童用品的特征。授課主要內容復習上次課內容新課內容模塊六知識點解析一、美工設計流程（一）素材規(guī)劃（二）圖片設計（三）處理上傳二、主圖的設計要素主圖是買家接觸到店鋪商品信息的第一張圖，這張圖必須足夠吸引買家，才能引來對方目光的駐留。（一）設計要素1.創(chuàng)意賣點2.比例適中3.化繁為簡4.豐富細節(jié)（二）案例分析1.消毒液主圖設計書包主圖設計3.窗簾主圖設計三、主圖的多種設計（一）方案一：統(tǒng)一色調設計（二）方案二：融入品牌設計（三）方案三：斜方位視角設計總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊七綜合案例（二）——電商平臺詳情頁設計教學目的1.掌握詳情頁設計的作用。2.掌握詳情頁的主要構成。3.掌握高轉化率詳情頁的四種方式。教學重點1.能夠設計商品詳情頁。2.能夠設計高轉化率的四種詳情頁。教學難點1.能夠設計商品詳情頁。2.能夠設計高轉化率的四種詳情頁。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議設計的放射光芒效果容易出現(xiàn)異?，F(xiàn)象，及時調整圖像的寬度和高度可以達到合適效果。授課主要內容復習上次課內容新課內容模塊七知識點解析一、詳情頁的作用（一）提高轉化率（二）促進自然流量（三）帶動關聯(lián)銷售二、詳情頁的主要構成商品詳情頁中一般會通過多種形式的圖片（含文案）來描述商品，如模特圖、產品圖（平鋪圖）、細節(jié)圖等，目的是將商品真實、清晰、生動地展現(xiàn)在消費者眼前。（一）首屏海報（二）買家訴求（三）賣點提煉（四）基本信息（五）核心競爭力三、高轉化率詳情頁的四種表現(xiàn)方式（一）重復“洗腦”式（二）論點論據(jù)式（三）講故事式（四）敘述式總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊八綜合案例（三）——電商平臺首頁設計教學目的1.掌握熱力圖、點擊率、轉化率、客單價、訪問深度、平均訪問時長的概念。2.掌握首頁的基本構成。3.掌握網(wǎng)店首頁與APP首頁的頁面布局。教學重點1.能夠利用數(shù)據(jù)分析提升轉化率。2.能夠設計首頁的店招區(qū)、Banner、促銷海報、推薦商品模塊。3.能夠設計現(xiàn)代簡約風、中國民族風與卡通漫畫風風格的首頁。教學難點1.能利用數(shù)據(jù)分析提升轉化率。2.能設計首頁的店招區(qū)、Banner、促銷海報、推薦商品模塊。3.能設計現(xiàn)代簡約風、中國民族風與卡通漫畫風風格的首頁。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議通道在摳取人物頭發(fā)以及將婚紗處理成半透明方面的效果特別明顯，學生對于原理的理解有利于技能的掌握。授課主要內容復習上次課內容新課內容模塊八知識點解析一、數(shù)據(jù)分析（一）熱力圖（二）點擊率點擊率=（點擊的數(shù)量/商品的展現(xiàn)數(shù)量）×100%。（三）轉化率轉化率=（產生購買行為的客戶人數(shù)/所有到達店鋪的訪客人數(shù)）×100%。（四）客單價客單價=（成交金額/成交用戶的數(shù)量）×100%。（五）訪問深度（六）平均訪問時長平均訪問時長=（總訪問時長/訪問次數(shù)）×100%。二、首頁的基本構成（一）店招區(qū)（二）Banner（三）促銷海報（四）推薦商品三、首頁的應用分類（一）PC端首頁（二）APP首頁1.平臺導流型首頁2.消費內容型首頁3.即時通訊型首頁4.地圖導航型首頁四、首頁的設計風格（一）現(xiàn)代簡約風（二）中國民族風（三）卡通漫畫風總結本次課內容教案教師姓名授課日期授課班級授課形式講授○實驗○實訓●練習○其它○授課章節(jié)名稱模塊九綜合案例（一）教學目的模塊九綜合案例（四）——移動端UI界面設計教學重點1.掌握移動端UI界面設計的原則與規(guī)范。2.掌握嘻哈樂園UI界面設計的結構。教學難點1.能夠設計UI界面規(guī)范。2.能設計移動端UI界面。更新、補充刪節(jié)內容無課外作業(yè)練習課后體會與建議學生對于陌生種類的物品的設計需要下真功夫，利用課余時間進行強化。授課主要內容復習上節(jié)課內容本次課內容模塊九綜合案例（四）一、UI界面設計概述（一）定義UI（UserInterface）界面設計是人與機器進行交互的操作平臺，是用戶與機器相互傳遞信息的媒介。（二）設計原則1.清晰性?2.功能性?3.一致性4.美觀性5.響應性?二、UI界面設計規(guī)范（一）制定統(tǒng)一的柵格系統(tǒng)（二）色彩規(guī)范（三）字體1.字號2.文本行高（四）圖標圖標分為功能性圖標和展示性圖標。功能性圖標用于引導用戶理解和操作，須表達精確和簡潔，方便用戶識別其含義。功能性圖標常規(guī)狀態(tài)下為無彩色。展示性圖標通常為頁面入口，會有更多形狀、顏色、質感的表達，吸引用戶的注意力和點擊欲望，強調差異性，比如各品類區(qū)的圖標、徽章、等級圖標等。圖標規(guī)范通常來說會先定一些基礎尺寸，梳理好各個頁面的圖標尺寸進行整合，最后確定好幾個基礎尺寸，功能層級一致的圖標尺寸要一致。為了保證不同形狀的圖標在視覺上保持大小一致，設計人員會制作一個圖標的基礎制作說明。制作說明里會統(tǒng)一圖標的圓角、描邊的粗細。如果涉及展示性圖標，則還有圖標的視角選擇、配色選擇，以及如何表現(xiàn)質感等。1.原則2.圖標基礎尺寸3.圖標繪制模板4.圖標制作說明（五）占位圖三、嘻哈樂園UI界面設計（一）公司介紹（二）嘻哈樂園UI界面設計結構圖（三）嘻哈樂園UI界面設計效果圖嘻哈樂園UI界面設計依托IOS系統(tǒng)，頁面寬度為1125像素、高度為2436像素。1.“引導頁”設計2.“賬號管理”設計3.“內容頁”設計（1）分類（2）我的（3）購物車（4）確認訂單總結本次課內容教案教