新時期高職高專網頁美工技術課程的項目化研究

吳海靜 曹維祥

摘 要： 隨著信息技術的普及，網頁已經滲透到人類社會的各行各業，網頁美工技術已成為最基本的網絡應用技術，要掌握這門技術，首先要掌握一種網頁美工技術工具——PHOTOSHOP。本文對網頁美工技術課程案例進行研究，考慮到高職高專的應用型，更兼具理論性，從課程中選取三個具有代表性的課程案例加以分析說明。在課程案例中，弱化作業性，強調理論知識，突出項目化；讓學生在網頁加工制作中學習，在學習中制作。

關鍵詞： 高職高專 網頁美工技術課程 項目化研究

當下某些高職高專教育中主要倡導的是更具職業定向的學科和方法，往往忽略原有學科的大部分課程的“古典部分”。自我國經濟飛速發展以來，由經濟發展衍生的學科專業有許多，例如先后有高爾夫專業、新媒體藝術專業、電子商務專業等，在這些新興的學科專業當中，實用性和工業性占據了主導位置，這些專業的設置無疑為社會、為國家培養了一批批人才，對學生職業選擇的影響深遠。

本文根據當下高職高專的知識與技能的方面要求，以課例的形式，從教學目標、能力要求、知識儲備和項目訓練等方面進行探索，意在培養更具專業性和職業性的學生；通過三個具有代表性的課程案例，讓學生自主探究學習，在掌握信息技術能力的基礎上，創造工作環境，進行設計，體驗職業。

一、海報設計與制作

當下時代的風格和種類，越是清晰易懂、越是簡單明快的形狀越能吸引消費者的眼光。現代人高速的生活方式，以及某些公司、某些品牌和機構的廣告目的，使得抽象又富有表達意義的海報設計油然而生。因此，在海報設計中，最重要的是明確又清晰的“視覺力”的結構。這種富有“視覺力”的結構，就是通過結合廣告把圖像、文字、版面、圖形等元素集合在一起；這里展示的“視覺力”結構的海報設計，是在計算機上進行加工與創造，實現表達廣告目的和意圖。

（一）教學目標

知識與技能方面，使學生掌握海報設計與制作的方法和步驟，會正確理解海報設計的概念與設計要素等知識。

過程與方法上，我充分利用信息化平臺和數字資源，使學生通過自主學習、小組合作探究的方式，提高學習能力。

通過學習，激發學生主動參與實踐的興趣，培養認真仔細的工作態度，踐行精益求精的工匠精神。

本節課的教學重點確定為用Photoshop軟件中的圖層、圖像、文字等制作海報的方法和步驟，教學難點為海報設計各個板塊的整合與海報設計整體效果的美感。

（二）能力要求

會使用Photoshop cs6網頁設計工具制作一張海報；能夠熟練進行文字、圖像、圖層、通道操作，并按要求設置進行電腦操作；熟練掌握海報設計的操作方法，能夠根據要求進行簡單的海報設計；

（三）知識儲備

按照用途分類，海報按大致可以分為商業海報、文化海報、電影海報和公益海報。對各種分類的海報知識進行介紹。

在了解各類型的海報知識之后，學生還需要對平面設計的基本原則進行了解和掌握：

1.重復原則：是指視覺元素在整個作品中重復出現。一類是設計中的某一元素（字體、顏色、圖案）進行元素的重復；一類是字體元素的改變，包括字體樣式、字體大小或字體行間距的改變，使得海報效果發生變化。

2.對比原則：對比是讓各元素之間區別開來，這樣可以防止重復原則帶來的單調。有重復一定有對比，如果重復是基調，那么對比就是焦點。常見的對比方法有字體的大小對比，線條的粗細對比，色彩的冷暖對比等。

3.關聯原則：位置的接近意味著內容的關聯，海報設計的內容要遵循關聯原則。相關的項目組織在一起不會顯得元素四散，雜亂無章。在制作一張海報當中，標題要對應相關文本，圖片要響應對應內容，大小層次，關聯原則保證了內容傳達的有效性。

4.對齊原則：海報中的任何元素都不能隨意放置，否則會失去“靈魂”。海報中的設計內容要存在視覺聯系。對齊原則是位置相距較遠的內容，需要運用輔助元素將不同的內容聯系在一起。

（四）項目訓練

為某個學院五四大型文藝晚會制作宣傳海報1張，尺寸：50X70CM。

二、淘寶網商品詳情頁制作

淘寶網商品詳情頁是當代大學生日常生活中最常接觸的利用Photoshop軟件制作的網頁，以此作為實訓課例，引導學生學習，有很好的教育意義。學生在瀏覽淘寶網的商品詳情頁時，通過對不同的商品詳情頁進行對比分析；針對不同商品網頁的風格進行研究；通過研究發現版式設計通過文字圖形的空間組合表達的和諧與美。

（一）教學目標

1.使學生掌握淘寶詳情頁制作的方法和步驟，會正確理解淘寶詳情頁的概念與排版設計要素等知識。

2.充分利用信息化平臺和數字資源，使學生通過自主學習、小組合作探究的方式，提高學習能力。通過學習，激發學生主動參與實踐的興趣，培養認真仔細的工作態度，從而形成精益求精的工匠精神。

3.學會用Photoshop軟件中的圖層、圖像、文字等制作海報的方法和步驟，淘寶詳情頁設計的各個部分統一和諧與整體效果有美感。

（二）能力要求

會使用Photoshop cs6網頁設計工具設計完成一個產品的淘寶詳情頁；熟悉進行文字、圖像、圖層、通道操作，并按要求設置進行電腦操作；熟練掌握淘寶詳情頁設計的操作方法，根據要求進行簡單的網頁排版設計。

（三）知識儲備

淘寶詳情因為重要的商業作用，其作用是為了吸引眼球，以此帶來流量轉化。吸引眼球的過程中要極力避免視覺疲勞。以下是需要注意的幾點：

1.文字不宜閃爍。文字的閃爍具有醒目的作用。在詳情中的運用，稍有不慎會給用戶一種眼花繚亂的感覺，反而會影響用戶訪問該網站的其他內容，造成適得其反的影響。

2.文本頁面不宜過長。文本的運用可以起到很好的解釋說明作用，可以有效介紹產品，突出吸引力，過長的文本會加深視覺疲勞。人們為了閱讀這些長文本，不得不使用卷滾條，浪費了用戶在網上沖浪的時間。

3.風格忌雜亂。詳情頁中所有設計元素，包括圖像、文字不可風格多樣。此外，詳情頁中的設計風格還要符合網頁風格，應堅持對齊原則，讓網頁中的各類要素風格呼應、協調。這樣讀者看起來舒服、順暢，才愿意在該網頁停留。

（四）項目訓練

為某一產品制作手機版淘寶詳情頁，并要求尺寸為620px*960px。

三、某個淘寶網店鋪的網頁制作

電子商務網站領域是以營利為目的的，通過設計對商品或企業進行優化的方式投資回報，淘寶網采用的是這種設計方法。我們給學生展示一些設計精美的淘寶網站，這些淘寶網站需要傳達出一些信息，例如“打破常規”“不走尋常路”，不遵循傳統標準模式；或是打開網頁，看起來并不符合主流審美，而是一些“小眾”形式感強的網頁，但這些網頁極其注重各個元素的組合，如顏色搭配整體協調、圖形與圖像相匹配、文字處理清晰、精簡等，當然可以引導學生觀察在使用網站時鼠標在某處懸停狀態的效果。我們在講授時著重于使用PHOTOSHOP軟件進行操作。學習那些成熟的、優秀的網頁，提高高職高專學生的設計能力，所謂“熟讀唐詩三百首，不會作詩也會吟”。我們進行淘寶網頁頁面設計的目的是讓消費者在網站上購物享受此過程，達到欣賞其商品風格的美好視覺體驗。

（一）教學目標

1.學會使用PHOTOSHOP軟件。

2.了解影響頁面整體風格的設計元素，包括經典設計元素和流行元素。這些元素包括：紋理、“徽章”、三維、背景圖案、混合字體、幾何圖形、相似形等。掌握這些元素的使用方法。

3.了解頁面布局的幾種結構形式，例如“國字”型布局、T型布局、POP全景式布局等；學會針對產品進行設計運用符合其風格的頁面布局形式，網頁頁面布局簡潔，板塊布局尺寸合適，整體和諧。

4.能清楚地向瀏覽者傳遞頁面信息，文字清晰具有提示性，瀏覽者使用起來便捷。網頁能夠向用戶傳遞某種信息，例如展示出產品、服務、理念或文化。

（二）能力要求

會使用Photoshop cs6網頁設計工具制作一個淘寶網頁；能夠熟悉進行文字、圖像、圖層、通道操作，并按要求設置進行電腦操作；熟練掌握海報設計的操作方法，根據要求進行簡單的海報設計；

（三）知識儲備

1.頁面內容要新穎。網頁內容的選擇要不落俗套，重點突出一個“新”字，在設計網站內容時不能照抄別人的內容，要結合自身實際情況創作。在設計網頁時，選材盡量做到“少”而“精”，又必須突出“新”。

2.網頁內容要易讀。網站設計最重要的是設計的網頁要易讀，首先要做好規劃文字與背景顏色的搭配方案。注意文字的字體、大小、色彩及對頁面的影響，要符合讀者的閱讀習慣。

3.善用表格布局。使人一眼就能看出網站重點突出，結構分明。

（四）項目訓練

為某一淘寶網店進行網站布局設計，并要求尺寸為1020px*1710px。

在學生進行項目訓練時，需要提前構思，按照順序依次進行，如：首先確定主題，明確主題的基礎上進行構思創意，對于產品的海報、詳情頁或淘寶網頁進行整體風格和特色定位，并組織結構。在設計總體方案時要主題鮮明突出，要點明確，使用的配色和圖片需要圍繞預定的主題；著重表現網頁的個性和情趣，突出網站的特點。其次是形式內容方面，靈活運用對比與調和、對稱與平衡、節奏與韻律及留白等手段，通過空間、文字、圖形之間的相互關系建立整體的均衡狀態，產生和諧的美感。

工業進程的加劇讓信息化時代科技發展迅速，網頁美工技術廣泛應用于網絡頁面設計之中，成為網絡頁面設計中不可或缺的一部分。現在的網絡頁面設計當中不僅僅注重單一功能性，更注重網頁的美工設計對整個網頁界面的主題表達、界面風格及新穎性特點。本文中整合平面設計類知識融入軟件學習中，希望通過學科交匯貫通的形式讓學生學習更專業化，技能方法更加成熟，更能適應社會的發展。

參考文獻：

[1][美]艾斯納，著.李雁冰，譯.學校課程設計與評價[M].北京：教育科學出版社，2008.4.

[2][美]魯道夫·阿恩海姆.視覺思維：審美視覺心理學[M].成都：四川人民出版社，1998.3.

[3][美]麥克尼爾，著.石華耀，譯.網頁設計創意書[M].北京：人民郵電出版社，2014.2.

[4]彭澎，郭芹.Photoshop圖形圖像處理實用教程[M].北京：機械工業出版社，2017.8.