中職《電商視覺設計》校本教材的開發(fā)與實踐

劉鴻生

摘要：《電商視覺設計》校本教材的開發(fā)是基于提升中職電子商務專業(yè)學生的美術素養(yǎng)為目的，是對電子商務專業(yè)必修專業(yè)課的補充和拓展。課程在高二年級開設，是對高一專業(yè)課的有力補充，以色彩訓練、摳圖訓練、視覺營銷訓練、商品主圖和商品詳情頁設計四個主題的訓練為途徑，一方面幫助學生鞏固知識，另一方面提升學生的審美水平，使學生在美術核心素養(yǎng)方面有一定的提升，也是為學生在高三階段的綜合實踐專業(yè)課學習做好支撐。該教材以photoshop軟件的相關操作為載體，讓學生通過色彩訓練、摳圖訓練、視覺營銷訓練、商品主圖和商品詳情頁設計四個主題的訓練，通過翻轉課堂等多種教學方法的實施，創(chuàng)新發(fā)展性考核評價方式，有效提升學生美術核心素養(yǎng)，為學生的職場發(fā)展支撐助力。

關鍵詞：中職;電商視覺設計;校本課程;美術核心素養(yǎng);主題

電商視覺設計師是中職電商專業(yè)畢業(yè)生起薪最高的崗位之一，也是電商行業(yè)對學歷要求不是太注重的崗位，頗受中職電商專業(yè)學生的青睞。中職電商專業(yè)畢業(yè)生雖然具備較熟練的軟件操作技能，進入美工設計崗位相對容易，但在實際工作中還是較難讓客戶真正滿意，網店裝修不夠賞心悅目或吸引眼球，缺少美感，究其原因是美感素養(yǎng)較為薄弱，也造成職業(yè)發(fā)展的后驅力不足。反觀現階段中職電商專業(yè)，師資配備多為計算機專業(yè)的教師，在美術素養(yǎng)上顯得不足，在網站設計類課程實施過程中更多側重于在軟件操作技術上進行大量練習，在美術核心素養(yǎng)培養(yǎng)上卻是一帶而過。學生在獨立設計網店各模塊圖時或者是東拼西湊，或者刻意模仿。高一年級專業(yè)必修課程《商品拍攝與圖像處理》中有涉及美感要求，但過于簡單，學生領會提高不均。在高二、高三兩個學年中沒有此類課程的設置，而高三的《網站建設》等綜合實踐專業(yè)課更需要美術修養(yǎng)的支撐輔助。《電商視覺設計》校本教材的開發(fā)是基于提升中職電子商務專業(yè)學生的美術素養(yǎng)為目的，在高二年級開設，是對高一專業(yè)課的有力補充，以色彩訓練、摳圖訓練、視覺營銷訓練、商品主圖和商品詳情頁設計四個主題的訓練為途徑，一方面幫助學生鞏固知識，更重要的一方面是提升學生的審美水平，使學生在美術核心素養(yǎng)方面有一定的提升，也是為學生在高三階段的綜合實踐專業(yè)課學習做好支撐。

一、課程目標

（一）總體目標

《電商視覺設計》校本課程旨在突破初學photoshop軟件時在操作技巧層面的學習，基于提升學生的美術核心素養(yǎng)，即圖像識讀、美術表現、審美判斷、創(chuàng)意實踐和文化理解等五個方面。

（二）具體目標

1.知識與技能。熟練掌握photoshop軟件主要功能的應用;具備美術圖像識讀的能力，會分析、運用網店頁面各模塊中顏色、形狀的選擇、搭配、構圖布局的能力，使網店頁面既有營銷功能又富有美感。

2.過程與方法。品讀、分析優(yōu)秀的網店設計作品，豐富學生對“商業(yè)”與“美感”的理解，培養(yǎng)學生具備創(chuàng)意實踐的美術核心素養(yǎng)，在設計過程中形成創(chuàng)新意識、運用創(chuàng)意思維和創(chuàng)造方法;通過專題訓練和任務驅動法將學習的過程演化為工作的過程，在工作中學習，在學習中工作，培養(yǎng)終身學習的理念，鼓勵學生個人自主探究和集體合作探究的方式參與網店設計。

3.情感態(tài)度與價值觀。具備審美判斷的美術核心素養(yǎng)，對優(yōu)秀的設計作品中的審美對象進行感知、評價、判斷與表達。能形成基本的審美能力，顯示健康的審美趣味。能用形式美原理對審美對象進行感知、描述、分析和評價。提高學生對網店設計中形式美欣賞和探索的素養(yǎng)，逐步達到“商業(yè)”與“美感”的兼顧和均衡，尊重個性發(fā)展，拓寬眼界。

二、課程內容

本課程內容由色彩訓練、摳圖訓練、視覺營銷訓練、商品主圖設計和商品詳情頁設計訓練等四個主題組成。

（一）主題一：色彩訓練培養(yǎng)圖像識讀素養(yǎng)

色彩是第一時間抓住消費者眼球的元素，在視覺營銷上講究色彩的誘目性，好的配色是吸引人在網店多停留的重要因素。本專題訓練偏重于探索色彩給予的影響，包括配色和色彩對人的心理和生理的影響，根據不同的網店要求運用“適當的色彩”是要解決的問題。對于美術基礎較弱的中職學生而言，他們對色彩的運用和把握較差。所以，色彩訓練是一直貫穿在整個課程的各個主題中的。在色彩訓練中，培養(yǎng)學生圖像識讀的素養(yǎng)是視覺設計的前提，學生可以比較與辨識作品中各種圖像符號的造型、色彩、比例和肌理等形式特征，清楚它是運用了哪些形式美的法則，做到有章可循。在讀懂看透的條件下，教師可以結合學生實際情況展開專題訓練，比如在“色彩的明度”這一專項訓練中，教師可以將一些富有美感的漸變圖案做成空白格子，讓學生來進行明度漸變的填色練習（見圖一），在練習過程中既熟練了填充工具的操作，又理解了明度這個色彩三要素之一，同時還掌握了“漸變”這種形式美法則，專題訓練要結合網店案例，展示以明度漸變?yōu)橹饕O計思路的banner例子（見圖二），讓學生從學習到應用，培養(yǎng)美術表現核心素養(yǎng)，完成知識的遷移。學生在色彩訓練時可運用色彩構成圖案進行練習，也可以設計別出心裁的練習，比如在“色彩的年齡”專項訓練中（教學設計見下圖），以服裝為載體讓學生進行填色練習，以此來提高學生對色彩所表達含義的敏銳性（見圖三）。

1.《色彩的年齡》教學設計。

教學目標：知識與技能：學生可以掌握色彩搭配不同年齡段的特點，學會區(qū)分不同年齡段的網店色彩企劃。過程與方法：欣賞不同年齡段網店配色圖片，結合課堂練習法，來體會并運用色彩的年齡特征。情感態(tài)度與價值觀：學生可以增強對色彩年齡的感受力，發(fā)揮在色彩搭配時的主動性和創(chuàng)造力。

教學重點：學生能夠掌握不同年齡段色彩的特征，并可以運用ps為媒介進行配色創(chuàng)作。

教學難點：色彩搭配的美感。

教學過程：

學生在教師的引導下，能夠感知到色彩是有年齡區(qū)分的，本課意圖也在于培養(yǎng)學生善于發(fā)現生活中的色彩除了年齡，是否還有其他方面的特質，比如性別、職業(yè)等，激發(fā)學生的求知欲。電子商務專業(yè)的學生缺乏色彩知識的系統(tǒng)學習，配色是一個長期訓練并積累和嘗試的過程，不是一個主題訓練就可以解決的，須貫穿到整個選修課程的教學中去。

（二）主題二：摳圖訓練實踐美術表現核心素養(yǎng)

摳圖又稱摳像、去背景等，它是進行視覺設計必經的基礎步驟。通過摳圖可以制作出美術表現中表達思想與情感的媒介、符號和隱喻手段。摳圖的質量直接決定了商品頁面的精致程度，要求既要精細又要有效率。高效地判斷摳取某件商品所適合的摳圖工具并熟練摳取，是本專題要解決的問題。摳圖水平能夠反映美工的軟件操作熟練度和對圖像特點把握程度，看似是耗時間的機械勞動，實際考驗的是美工對畫面中形狀和顏色的判斷和提煉，要想取得較高的效率，除了對軟件工具熟悉，更重要的是判斷圖像的經驗。比如平滑帶有弧度的商品可選擇鋼筆工具摳取，形狀瑣碎的樹葉、細密飛揚的毛發(fā)可選擇用通道或調整邊緣摳取，主體和背景色彩反差大的圖可用色彩范圍摳取等，有些圖還須多個摳圖工具的配合才能完成。摳圖中如果具備豐富的色彩常識將會使得該訓練事半功倍，比如在通道摳圖時要判斷色彩的對比度，要通過調整色階來加強圖像的反差等。

（三）主題三：視覺營銷訓練培養(yǎng)創(chuàng)意實踐素養(yǎng)

本主題訓練學生運用聯想、想象和變通的方式進行構想與生成有創(chuàng)意的方案，并利用商品和文案等元素進行創(chuàng)造和實踐。網店的最終目的是產生銷售，如何利用視覺營銷的相關知識讓網店增長銷售額是本專題訓練的目的。創(chuàng)意實踐美術核心素養(yǎng)可以在此主題中得以培養(yǎng)。網店商品的展示技法與視覺表現逐漸受到重視，如果缺乏創(chuàng)意則顧客的視線將不會過多地停留，美國市場營銷學會（AMA）研究表明，人們決定是否要購買一件商品僅需在關注它的前三秒，而且70%是因為商品的視覺表現力。電商視覺設計的設計是為了引起消費者的共鳴，產生購買欲望，最終轉化成交，因此，課程中要融入聯想、想象等創(chuàng)意思維，以提升產品的銷量。電商視覺設計在進行店鋪裝修時首先具備整體意識，整個頁面符合人體工程學的要求，符合人的視覺流動規(guī)律。人的視線運動具有直線性特點，即視線在多個視點之間轉移時是以直線形式，在多種刺激樣式之間轉移時也是以直線的形式，如何在直線運動的軌跡上布置商品頁面，如何合理地設置多個刺激點抓住顧客的眼球，是這一專題要訓練的創(chuàng)意實踐素養(yǎng)。人的視線會習慣先看大氛圍，再看小細節(jié)，反復多次移動，如果網店頁面中某一信息對視覺刺激較強，它被關注的時間就越長，更多的信息量就會傳遞給買家，如何富有創(chuàng)意地利用色彩、形狀、文字來吸引買家關注，也正是這一主題要專門訓練的。

（四）主題四：商品主圖和詳情頁設計培養(yǎng)美術表現素養(yǎng)

美術表現素養(yǎng)是指運用傳統(tǒng)與現代的媒材、技術和美術語言，通過構思與反思，創(chuàng)作具有思想和文化內涵的美術作品，或用來表達自己的各種想法與情感。本主題要求用美術語言表達思想內涵和商品賣點。在設計主圖前，要對拍攝的原圖進行篩選并作相應處理，保證圖片具有更好地展示效果，制作之前還要先對主圖樣式、風格進行分析，然后再在photoshop中進行設計;完成主圖制作之后需要對商品詳情頁的設計與制作，對網店中銷售的單個商品進行詳細介紹，根據商品的風格和特點來設計詳情頁，包含banner、商品信息模塊、商品賣點模塊和商品展示模塊。以banner為例，概括提煉典型的美術表現手法，以美術語言來進行設計（見圖八）。商品主圖和詳情頁設計過程不是孤立的，要一直貫穿色彩搭配常識、摳圖技術和視覺營銷知識等。

《電商視覺設計》校本選修課程在內容選擇上具有科學性，與時俱進，專注于培養(yǎng)學生的美術核心素養(yǎng)，不局限于教材，可以根據學生情況廣泛選擇參考書目，并結合最前沿的網店裝修案例，去粗取精，整合出適合中職電商視覺設計的內容來進行教學。

三、課堂教學

（一）教學計劃

根據電商視覺設計從業(yè)人員的職業(yè)能力與基本素質的要求，系統(tǒng)的為學生量身定制教學計劃，見表1：

傳統(tǒng)的“翻轉課堂”由于中職學生的個體差異，導致課前任務完成質量較差。本選修課采用“課內翻轉課堂”的教學模式（見圖五），區(qū)別于傳統(tǒng)的“翻轉課堂”即學生在課堂上教師的監(jiān)督下學習微課，在規(guī)定的時間內獨立完成自主學習，經過小組交流、展示、評價和問題反饋，教師和學生集中解決普遍問題，達成目標后再進入下一環(huán)節(jié)，教師控制時間和節(jié)奏，成績好的學生做助教輔導個別同學，最后師生一起串聯知識點并總結，形成一節(jié)課的整體脈絡。這能有效解決傳統(tǒng)的“翻轉課堂”由于中職學生的個體差異，導致課前任務完成質量較差的問題。

1.課內翻轉課堂教學設計。

【課題】設計商品推廣海報

【課時】2課時

【教學目標】

知識與技能：學生能夠了解商品推廣海報的背景制作和工作流程。

過程與方法：通過課內翻轉課堂，自主探究，學生掌握并熟練運用同類色、色調的相關知識來配色，熟悉商品推廣海報的設計思路和制作技巧，設計商品推廣海報。

情感態(tài)度與價值觀：體會色調統(tǒng)一的美感，學會避免畫面“花”“亂”的問題。

【重點與難點】

教學重點：了解商品推廣海報的背景、各構成要素設計要點和工作流程。

教學難點：根據實際需求設計美觀、有效的商品推廣海報。

【教學方法】

本節(jié)課是實操課，教師運用講授法、任務驅動法等方法進行教學，學生運用討論、自主學習等方法。

【教學過程】

本節(jié)課為實訓操作課，在2課時時間里，學生通過微課學習，初步感知課堂要點，按照任務進行課堂練習，在練習過程中發(fā)現自學中問題，通過討論，完成自主學習，普遍存在的問題，教師有的放矢統(tǒng)一解決，提高課堂效率，并照顧到學生個體差異。由于課時所限，只能深入練習同類色配色法，對比色等配色有待于學生利用微課課后自主學習。在課內翻轉課堂的教學模式下，本選修課結合任務驅動法與案例教學法來組織教學。

（二）教學方法

1.任務驅動法。在教學過程中，教師在任務中巧妙地整合知識點，學生在總任務的驅動下，通過教師的指導完成各個具體任務，并從中學到新的知識。例如，在“詳情頁海報設計”教學中，教師先指導學生了解詳情頁海報設計的要求，分析該商品的賣點;然后，根據賣點制定主題內容，搜集素材;最后，通過版式、配色、字體、文案等達到形式美的效果。在任務實施過程中，把教學內容劃分成設計海報背景、設計商品圖片、設計促銷文字三個子任務，學生在任務引領下主動參與學習，在完成任務的同時培養(yǎng)了自主解決問題的能力和創(chuàng)造意識。

2.案例教學法。高二學生已經掌握初步的photoshop的操作知識，因此可以在商品圖的“校色”“摳圖”“修圖”等內容上采用案例教學法。例如，在講解“校色”內容時，以學生自己拍攝的“白瓷茶杯”主題的照片為素材，要求處理圖像的偏色、畸變等問題。學生拿到素材，獨立思考，運用最近發(fā)展區(qū)理論，先發(fā)揮出自己的水平，再與同學探究，與老師研討，運用已掌握的曲線、色相/飽和度、色階等工具來解決問題，達到知識的升華。采用案例教學方法，可以激發(fā)學生內在的動力，調動學生的學習積極性。

四、考核評價

（一）考核標準與崗位標準對接

《電商視覺設計》選修課除了重視三維目標評價，更要重視發(fā)展性評價，側重點在于網店裝修美感把握上，重視學生在上課中表現出來的對布局、配色的實踐能力，教師通過下企業(yè)鍛煉、實地調查等方式，了解最新崗位的需求，把電商視覺設計從業(yè)人員所需的知識結構、業(yè)務素質、甚至行為規(guī)范要求引入課程評價中，讓學生就業(yè)實現技能和心態(tài)上的無縫對接，為其踏入崗位做好準備。

（二）評價內容將美感量化

從美術作品的角度對一張banner做評價，無論是教師還是學生往往趨向于主觀化，很難給學生一個明確的方向，但是本選修課嘗試將美感客觀化、量化。以制作茶葉網店banner為例，滿分是50分，樣圖和見下圖（圖六）：

圖六 《春茶上新》banner的樣圖

（三）評價方式多元多維

多元評價強調的是多元化，即評價主體多元化、評價內容多維化、評價標準多樣化，既有自我評價，又有他人評價;既有形成性評價，又有終結性評價，具體如表3所示。

五、實踐成效

《電商視覺設計》校本選修課課受到學生喜愛，每學期期末由教學部門對校本選修課進行問卷調查，《電商視覺設計》選修課兩個學期共發(fā)放問卷65份，收回65份，有效問卷65份，調查研究目的是了解學生對《電商視覺設計》校本選修課的認同感及其成效。學生調查問卷的指標包括教師授課方式、美術核心素養(yǎng)的培養(yǎng)、專業(yè)技能的提高、學習愉悅感等。結果有89%的學生認為提高了審美素養(yǎng)，能夠對網店裝修的美感上有所把握，而不僅僅是注重操作技能，而忽略了藝術性。有超過85%的學生非常希望能持續(xù)開設并繼續(xù)選修《電商視覺設計》的選修課。

學生經過《電商視覺設計》校本選修課的學習，在專業(yè)技能之外提升美術修養(yǎng)，在我校的技能節(jié)上，高二年級分為文案策劃、網店商品詳情制作、網店輪播海報三個賽項。這三個賽項，使學生運用現有的知識并結合自己的創(chuàng)意，投入到實踐中，考驗了同學們的創(chuàng)意思維以及美感表達能力;在學校舉辦的貿易節(jié)上，高二年級歷時一個月，以班級或社團為單位，經歷了班級網店運營的整個流程，實踐了專業(yè)知識，選修課上的學生成為網店美化裝修、優(yōu)化的主力軍;學生在省電子商務大賽中獲得一等獎，在全國職業(yè)院校技能大賽中職組電子商務技能賽項中，獲得三等獎的佳績;此外，學生在美術表現和創(chuàng)意實踐方面大膽嘗試，在各級各類比賽中，用photoshop軟件設計出的原創(chuàng)創(chuàng)意海報分別獲得了市一等獎和省二等獎的好成績，這得益于本選修課對學生美術核心素養(yǎng)的培養(yǎng)?！峨娚桃曈X設計》的培養(yǎng)目標與崗位需求對接，具有它的教學價值。隨著網上購物、微商的不斷普及，每個店鋪新產品的上架和宣傳都需要電商視覺設計類的人才，在這樣的背景下，中小企業(yè)的大量需求使得電商視覺設計人才成為炙手可熱的高薪階層，電商視覺設計的社會需求量大，教學價值就顯得越來越大。

綜上所述，本課程的開發(fā)與實踐有效彌補了傳統(tǒng)教材的不足，提高了學生課堂參與度，促進了教學有效性的提高。但是，筆者也認為還有一些需要后續(xù)優(yōu)化，一些內容需要給以重視和強化。例如，在校本教材的編寫上，各個模塊中設計“知識鏈接”部分，輔以優(yōu)秀、典型的美術作品，并指明其與電商設計相關的亮點，兩者相互印證。教材的所有操作案例中，所提供的工具、命令的設置參數務必準確。選修課任課教師熟練軟件操作外，須多閱讀美術類、設計類的書，如《配色設計原理》《設計中的設計》等。學生的分組訓練，要考慮到分組的有效性，真正做到人人有事做，比如文案處理、背景設計，摳圖，色彩、構圖的整體把握等，分工明確，避免能者多勞，一人做，眾人看的情況。評價環(huán)節(jié)，由教師控制好時間，做好引導提醒，避免拖沓，時間分配不均的情況。

【參考文獻】

[1]張巖，邵忠國.電商網站的創(chuàng)造性視覺設計分析[J].設計，2016（07）：140-141.

[2]耿甜.空間在電商視覺設計中的應用[J].大眾文藝，2016（08）：85.

[3]張巖.電商網站視覺設計應用研究[D].湖北工業(yè)大學，2016.

[4]梁爽，劉迎春，屠蕓.課內漸進式翻轉課堂教學模式的設計與應用——以中職學校“網頁制作”課程為例[J].現代教育技術，2016，26（07）：78-84.

[5]馮浩煜.電商網頁界面視覺設計元素解析[J].科技視界，2018（01）：159-160.

[6]賀正悅.電商網站視覺設計與應用[J].時代金融，2018（12）：181-182.

[7]周天姿.電商網頁UI視覺設計研究[D].湖北美術學院，2018.

[8]全秋燕.基于混合式教學的電商視覺設計人才培養(yǎng)探索[J].無線互聯科技，2018，15（09）：70-71.

[9]張雯丹.數據驅動下的電商視覺設計[J].辦公自動化，2018，23（22）：44-46.

[10]傅俊，商瑋.雙師工作室在電商視覺設計方向學徒制改革中的作用[J].中國商論，2018（33）：15-16.

[11]姚廣燦.電商網站視覺設計應用研究[J].西部皮革，2018，40（24）：22-23.

[12]高美琪，王一帆.視覺設計C2C電商平臺的信用評價模型[J].當代經濟，2019（02）：88-93.