《商品信息采編》（文求實）719-8 教案 第18課 設計數(shù)碼電器類和珠寶首飾類商品詳情頁

PAGE10PAGE10PAGE11PAGE11

課題設計數(shù)碼電器類和珠寶首飾類商品詳情頁課時2課時（90min）教學目標知識技能目標：（1）了解數(shù)碼電器類和珠寶首飾類商品詳情頁的模塊安排（2）能夠完成數(shù)碼電器類和珠寶首飾類商品詳情頁的設計工作素質目標：感受中國傳統(tǒng)手工藝的魅力，為留住手藝、傳承匠心貢獻一分力量教學重難點教學重點：數(shù)碼電器類和珠寶首飾類商品詳情頁的設計教學難點：數(shù)碼電器類和珠寶首飾類商品詳情頁的設計教學方法問答法、討論法、講授法、實踐法教學用具電腦、投影儀、多媒體課件、教材教學設計第1節(jié)課：→→→任務實施（28min）→課堂討論（10min）第2節(jié)課：→任務實施（27min）→課堂討論（10min）→課堂小結（3min）→作業(yè)布置（2min）教學過程主要教學內容及步驟設計意圖第一節(jié)課課前任務【教師】布置課前任務，和學生負責人取得聯(lián)系，讓其提醒同學通過文旌課堂APP或其他學習軟件，預習本節(jié)課要學習的知識【學生】完成課前任務通過課前任務，使學生預習本節(jié)課要學習的知識，增加學生的學習興趣考勤（2min）【教師】使用文旌課堂APP進行簽到【學生】班干部報請假人員及原因培養(yǎng)學生的組織紀律性，掌握學生的出勤情況問題導入（5min）【教師】提出以下問題：數(shù)碼電器類商品詳情頁中應安排些什么內容？【學生】聆聽、思考、舉手回答【教師】總結學生的回答數(shù)碼電器類商品詳情頁中除了要安排宣傳或促銷、賣點等模塊外，一些大件商品還會安排售后服務模塊，讓消費者買得放心、安心?！局R鏈接】一些網(wǎng)店還會在商品詳情頁安排一個用于展示營業(yè)許可的模塊來提升消費者對品牌的信任度。通過問題導入，引導學生主動思考，激發(fā)學生的學習興趣任務實施（28min）【教師】講解設計移動硬盤詳情頁的具體步驟，并要求學生以小組為單位完成相關任務?【教師】組織學生掃碼觀看“設計移動硬盤詳情頁”視頻（詳見教材），讓學生對設計過程有一個大致地了解設計思路（1）模塊安排：頁頭安排宣傳內容，以吸引消費者注意；接下來的三個模塊均安排移動硬盤的賣點，讓消費者深入了解移動硬盤及其特點；最后兩個模塊分別安排移動硬盤詳細信息和套餐內容，讓消費者全面了解移動硬盤。（2）配色分析：移動硬盤圖片多為灰色調，采用白色背景和黑色、灰色文案，能打造具有高級感的畫面效果，而一些圖標、線條使用品牌標志顏色（紅色），既可以引導消費者識別品牌，又可以豐富畫面效果，為畫面增添活力。?【教師】提出以下問題，隨機邀請學生進行回答移動硬盤詳情頁的布局方式應該使用哪一種布局？為什么？?【學生】聆聽、思考、回答?【教師】總結學生的回答，并通過多媒體展示“移動硬盤詳情頁效果”圖片（詳見教材）（3）布局方式：采用層疊布局方式，可以增加畫面的層次感?！窘處煛孔寣W生分組討論設計思路【學生】組內討論、確定思路、由小組代表發(fā)表討論結果【教師】點評、總結各組的發(fā)言2.設計步驟1）制作宣傳模塊【教師】演示并講解設計步驟及具體操作步驟1新建一個名為“移動硬盤詳情頁”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書配套素材“IMG_9759.jpg”文件，并調整其大小和位置，然后打開項目5中制作的“移動硬盤主圖.psd”文件，選中標志所在圖層，將其復制到“移動硬盤詳情頁”文檔中，最后在標志下方添加文本和矩形裝飾。需要注意的是，移動硬盤圖片有些發(fā)灰，需用CameraRaw濾鏡調整其對比度（在“基本”設置項下的“對比度”編輯框中輸入“40”）。步驟3用“橢圓工具”繪制一個寬度為60像素、高度為60像素的正圓，然后設置其填充為無，描邊色為紅色，描邊寬度為1像素，最后在其內部和下方添加文本。步驟4復制步驟2中制作的圖標并修改內容，然后用“直線工具”在圖標之間添加豎線?！拘√崾尽啃枰⒁獾氖牵琍hotoshop提供智能參考線，在移動對象時會自動顯示，因此，移動復制的圖標時要充分利用智能參考線，讓圖標之間間距相等?！緦W生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作宣傳模塊任務【教師】巡堂輔導、答疑解惑2）制作賣點模塊【教師】演示并講解設計步驟及具體操作步驟1創(chuàng)建第一個賣點模塊標題（后續(xù)大部分文本所用的字體樣式、大小與此相同，以下不再贅述），然后在標題下方添加正文并放置本書配套素材“IMG_9766.jpg”文件。步驟2創(chuàng)建第二個賣點模塊標題并添加矩形裝飾，然后在標題下方添加正文，右側放置本書配套素材“IMG_9538.jpg”“IMG_9553.jpg”文件，并為移動硬盤標注尺寸，接著繪制一個寬度為682像素、高度為452像素的矩形，并設置其填充為無，描邊色為淺灰色（#c9caca），描邊寬度為2像素，最后在矩形偏左上方放置本書配套素材“IMG_9772.jpg”文件。步驟3采用步驟1的方法制作賣點模塊3?！緦W生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作賣點模塊任務【教師】巡堂輔導、答疑解惑3）制作商品信息和套餐模塊【教師】演示并講解設計步驟及具體操作步驟1繪制矩形裝飾，并在其中添加本書配套素材“IMG_9545.jpg”文件和文本。步驟2用“直線工具”在文本“容量”和“尺寸”之間繪制直線，然后在工具屬性欄設置描邊色為淺灰色（#c9caca），描邊寬度為2像素，在“設置形狀描邊類型”下拉面板中選擇虛線類型。步驟3復制步驟2中繪制的虛線裝飾并移至其他文本之間。【小提示】如果虛線效果不理想，可單擊“設置形狀描邊類型”下拉面板中的“更多選項”按鈕，在打開的“描邊”對話框中設置虛線的間隙。步驟4首先創(chuàng)建套餐模塊標題，然后置入本書配套素材“IMG_9776.jpg”文件，接著用“直線工具”和“橢圓選框工具”繪制指示器，最后添加標注文本。至此，移動硬盤詳情頁制作完成?！緦W生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作商品信息和套餐模塊任務【教師】巡堂輔導、答疑解惑【學生】制作完成后，由小組代表展示本組設計的商品詳情頁圖片【教師】與學生一起評選出最佳的商品詳情頁通過設計移動硬盤詳情頁任務，幫助學生熟悉設計數(shù)碼電器類商品詳情頁的流程和方法課堂討論（10min）【教師】組織學生分組討論音響詳情頁的設計思路參照以下提示梳理音響詳情頁的設計思路。（1）確定模塊安排：確定音響詳情頁中安排哪些模塊，并根據(jù)模塊安排確定具體內容，包括圖片和文案。需要注意的是，在賣點模塊中可放置使用場景圖及相關文案，以表現(xiàn)其可隨處安放的特點。（2）確定配色方案：此款音響詳情頁的配色方案可參考移動硬盤詳情頁的配色方案。（3）確定布局方式：根據(jù)模塊及模塊中的元素安排選擇合適的布局方式。組內討論、確定思路、由小組代表發(fā)表討論結果【教師】點評各組的發(fā)言通過小組討論，幫助學生進一步鞏固所學知識第二節(jié)課問題導入（3min）【教師】提出以下問題：珠寶首飾類商品詳情頁中應設計哪些模塊？【學生】聆聽、思考、舉手回答【教師】總結學生的回答珠寶首飾類商品詳情頁中除了要安排宣傳或促銷、搭配、賣點等模塊外，通常還會安排工藝和包裝等模塊，以展示商品的附加值。通過問題導入，引導學生主動思考，激發(fā)學生的學習興趣任務實施（27min）【教師】講解設計項鏈詳情頁的具體步驟，并要求學生以小組為單位完成相關任務?【教師】組織學生掃碼觀看“設計項鏈詳情頁”視頻（詳見教材），讓學生對設計過程有一個大致地了解1.設計思路（1）模塊安排：頁頭安排宣傳內容，吸引消費者注意；接下來安排賣點模塊，讓消費者了解項鏈的特點；最后兩個模塊分別展示項鏈佩戴效果和項鏈詳細信息，讓消費者全面、深入地了解項鏈。（2）配色分析：用白色作為背景顏色，用黑色和不同深淺的灰色作為文案顏色，能使整個頁面呈現(xiàn)出干凈、大氣，又極具層次感的效果。此外，一些地方用藍色線條和色塊作裝飾，能豐富頁面色彩，避免畫面顯得單調。?【教師】提出以下問題，隨機邀請學生進行回答哪一種布局方式更適合項鏈詳情頁？?【學生】聆聽、思考、回答?【教師】總結學生的回答，并通過多媒體展示“項鏈詳情頁效果”圖片（詳見教材）（3）布局方式：采用層疊和錯位布局方式，可以增強畫面的層次感和動感?！窘處煛孔寣W生分組討論設計思路【學生】組內討論、確定思路、由小組代表發(fā)表討論結果【教師】點評、總結各組的發(fā)言2.設計步驟1）制作宣傳模塊【教師】演示并講解設計步驟及具體操作步驟1新建一個名為“項鏈詳情頁”，寬度為750像素，高度自定，分辨率為72像素/英寸，顏色模式為RGB模式的文檔。步驟2置入本書配套素材“IMG_9622.jpg”文件，然后將其轉換為普通圖層，接著用“矩形選框工具”框選圖片底部多余背景，并按“Delete”鍵刪除?？蜻x圖片頂部背景，并用變換工具調整所選區(qū)域的高度，最后按“Ctrl+D”組合鍵取消選區(qū)。步驟3在圖片上添加文本。其中，“YOURETHEONLYONE”文本需添加下劃線（單擊“字符”面板底部的“下劃線”按鈕添加）?！緦W生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作宣傳模塊任務【教師】巡堂輔導、答疑解惑2）制作賣點模塊【教師】演示并講解設計步驟及具體操作步驟1先創(chuàng)建賣點模塊標題，然后新建一個圖層，用“矩形選框工具”繪制一個寬度為664像素、高度為3像素的矩形選區(qū)，并為其填充淺灰色（#f5f5f5），最后按“Ctrl+D”組合鍵取消選區(qū)。步驟2首先新建一個圖層，然后繪制一個寬度為345像素、高度為300像素的矩形選區(qū)，并為其填充淺藍色（#eef4fe），接著按“Ctrl+D”組合鍵取消選區(qū)，最后拷貝矩形并移至合適的位置，為其填充白色、添加描邊圖層樣式。步驟3置入本書配套素材“IMG_9581.jpg”文件（保證其在復制矩形圖層的上方），按住“Alt”鍵的同時將光標移至該圖層與復制矩形圖層之間，當光標呈狀時單擊創(chuàng)建剪貼蒙版。步驟4在圖片右側添加文本和線條裝飾，然后在文本左側添加一個寬度為5像素、高度為85像素的淺藍色（#eef4fe）矩形裝飾。?【教師】提出以下問題，隨機邀請學生進行回答在PS軟件中，復制圖層有哪些方法？?【學生】聆聽、思考、回答?【教師】總結學生的回答步驟5復制兩份步驟2至步驟4創(chuàng)建的圖層，并調整位置、修改內容。【學生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作賣點模塊任務【教師】巡堂輔導、答疑解惑3）制作商品展示和商品信息模塊【教師】演示并講解設計步驟及具體操作步驟1復制賣點模塊標題并修改內容。步驟2置入本書配套素材“IMG_7121.jpg”“IMG_7122.jpg”“IMG_7124.jpg”文件并放在合適的位置，然后用CameraRaw濾鏡調整圖片的影調和細節(jié)，使其與整體頁面效果協(xié)調統(tǒng)一。步驟3在圖片下方添加文本并設置其字體樣式為“方正北魏楷書簡體”，字體大小為“18點”，行距為“36點”。步驟4復制商品展示模塊標題并修改內容。步驟5新建一個圖層，然后繪制一個寬度為66像素、高度為20像素的矩形選區(qū)，并為其填充藍色（#69a3d8），最后在相應的位置添加文本。步驟6復制九份步驟5中創(chuàng)建的圖層并修改內容。至此，項鏈詳情頁制作完成。【學生】聆聽、觀看、理解、記憶【教師】讓學生分組進行制作【學生】組內分工，根據(jù)本組的設計思路完成制作商品展示和信息模塊任務【教師】巡堂輔導、答疑解惑【學生】制作完成后，由小組代表展示本組設計的商品詳情頁圖片【教師】與學生一起評選出最佳的商品詳情頁通過設計項鏈詳情頁任務，幫助學生熟悉設計珠寶首飾類商品詳情頁的流程和方法課堂討論（10min）【教師】組織學生分組討論手表詳情頁的設計思路參照以下提示梳理手表詳情頁的設計思路。（1）確定模塊安排：確定手表詳情頁中安排哪些模塊，并根據(jù)模塊安排確定具體內容，包括圖片和文案。（2）確定配色方案：該款手表的目標消費者為女性，因此配色可以亮色調、暖色調為主，使整個頁面充滿女性氣息。（3）確定布局方式：根據(jù)模塊及模塊中的元素安排選擇合適的布局方式。組內討論、確定思路、由小組代表發(fā)表討論結果【教師】點評各組的發(fā)言通過小組討論，幫助學生進一步鞏固所學知識課堂小結（3min）【教師】簡要總結本節(jié)課的要點本節(jié)課學習了設計數(shù)碼電器類和珠寶首飾類商品詳情頁的相關知識，同時通過具體的設計任務，幫助大家熟悉了這兩類商品詳情頁的設計方法，希望大家在課下多加復習，鞏固