新時(shí)期高職高專網(wǎng)頁美工技術(shù)課程的項(xiàng)目化研究

吳海靜 曹維祥

摘 要： 隨著信息技術(shù)的普及，網(wǎng)頁已經(jīng)滲透到人類社會(huì)的各行各業(yè)，網(wǎng)頁美工技術(shù)已成為最基本的網(wǎng)絡(luò)應(yīng)用技術(shù)，要掌握這門技術(shù)，首先要掌握一種網(wǎng)頁美工技術(shù)工具——PHOTOSHOP。本文對(duì)網(wǎng)頁美工技術(shù)課程案例進(jìn)行研究，考慮到高職高專的應(yīng)用型，更兼具理論性，從課程中選取三個(gè)具有代表性的課程案例加以分析說明。在課程案例中，弱化作業(yè)性，強(qiáng)調(diào)理論知識(shí)，突出項(xiàng)目化；讓學(xué)生在網(wǎng)頁加工制作中學(xué)習(xí)，在學(xué)習(xí)中制作。

關(guān)鍵詞： 高職高專 網(wǎng)頁美工技術(shù)課程 項(xiàng)目化研究

當(dāng)下某些高職高專教育中主要倡導(dǎo)的是更具職業(yè)定向的學(xué)科和方法，往往忽略原有學(xué)科的大部分課程的“古典部分”。自我國(guó)經(jīng)濟(jì)飛速發(fā)展以來，由經(jīng)濟(jì)發(fā)展衍生的學(xué)科專業(yè)有許多，例如先后有高爾夫?qū)I(yè)、新媒體藝術(shù)專業(yè)、電子商務(wù)專業(yè)等，在這些新興的學(xué)科專業(yè)當(dāng)中，實(shí)用性和工業(yè)性占據(jù)了主導(dǎo)位置，這些專業(yè)的設(shè)置無疑為社會(huì)、為國(guó)家培養(yǎng)了一批批人才，對(duì)學(xué)生職業(yè)選擇的影響深遠(yuǎn)。

本文根據(jù)當(dāng)下高職高專的知識(shí)與技能的方面要求，以課例的形式，從教學(xué)目標(biāo)、能力要求、知識(shí)儲(chǔ)備和項(xiàng)目訓(xùn)練等方面進(jìn)行探索，意在培養(yǎng)更具專業(yè)性和職業(yè)性的學(xué)生；通過三個(gè)具有代表性的課程案例，讓學(xué)生自主探究學(xué)習(xí)，在掌握信息技術(shù)能力的基礎(chǔ)上，創(chuàng)造工作環(huán)境，進(jìn)行設(shè)計(jì)，體驗(yàn)職業(yè)。

一、海報(bào)設(shè)計(jì)與制作

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

（一）教學(xué)目標(biāo)

知識(shí)與技能方面，使學(xué)生掌握海報(bào)設(shè)計(jì)與制作的方法和步驟，會(huì)正確理解海報(bào)設(shè)計(jì)的概念與設(shè)計(jì)要素等知識(shí)。

過程與方法上，我充分利用信息化平臺(tái)和數(shù)字資源，使學(xué)生通過自主學(xué)習(xí)、小組合作探究的方式，提高學(xué)習(xí)能力。

通過學(xué)習(xí)，激發(fā)學(xué)生主動(dòng)參與實(shí)踐的興趣，培養(yǎng)認(rèn)真仔細(xì)的工作態(tài)度，踐行精益求精的工匠精神。

本節(jié)課的教學(xué)重點(diǎn)確定為用Photoshop軟件中的圖層、圖像、文字等制作海報(bào)的方法和步驟，教學(xué)難點(diǎn)為海報(bào)設(shè)計(jì)各個(gè)板塊的整合與海報(bào)設(shè)計(jì)整體效果的美感。

（二）能力要求

會(huì)使用Photoshop cs6網(wǎng)頁設(shè)計(jì)工具制作一張海報(bào)；能夠熟練進(jìn)行文字、圖像、圖層、通道操作，并按要求設(shè)置進(jìn)行電腦操作；熟練掌握海報(bào)設(shè)計(jì)的操作方法，能夠根據(jù)要求進(jìn)行簡(jiǎn)單的海報(bào)設(shè)計(jì)；

（三）知識(shí)儲(chǔ)備

按照用途分類，海報(bào)按大致可以分為商業(yè)海報(bào)、文化海報(bào)、電影海報(bào)和公益海報(bào)。對(duì)各種分類的海報(bào)知識(shí)進(jìn)行介紹。

在了解各類型的海報(bào)知識(shí)之后，學(xué)生還需要對(duì)平面設(shè)計(jì)的基本原則進(jìn)行了解和掌握：

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

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

3.關(guān)聯(lián)原則：位置的接近意味著內(nèi)容的關(guān)聯(lián)，海報(bào)設(shè)計(jì)的內(nèi)容要遵循關(guān)聯(lián)原則。相關(guān)的項(xiàng)目組織在一起不會(huì)顯得元素四散，雜亂無章。在制作一張海報(bào)當(dāng)中，標(biāo)題要對(duì)應(yīng)相關(guān)文本，圖片要響應(yīng)對(duì)應(yīng)內(nèi)容，大小層次，關(guān)聯(lián)原則保證了內(nèi)容傳達(dá)的有效性。

4.對(duì)齊原則：海報(bào)中的任何元素都不能隨意放置，否則會(huì)失去“靈魂”。海報(bào)中的設(shè)計(jì)內(nèi)容要存在視覺聯(lián)系。對(duì)齊原則是位置相距較遠(yuǎn)的內(nèi)容，需要運(yùn)用輔助元素將不同的內(nèi)容聯(lián)系在一起。

（四）項(xiàng)目訓(xùn)練

為某個(gè)學(xué)院五四大型文藝晚會(huì)制作宣傳海報(bào)1張，尺寸：50X70CM。

二、淘寶網(wǎng)商品詳情頁制作

淘寶網(wǎng)商品詳情頁是當(dāng)代大學(xué)生日常生活中最常接觸的利用Photoshop軟件制作的網(wǎng)頁，以此作為實(shí)訓(xùn)課例，引導(dǎo)學(xué)生學(xué)習(xí)，有很好的教育意義。學(xué)生在瀏覽淘寶網(wǎng)的商品詳情頁時(shí)，通過對(duì)不同的商品詳情頁進(jìn)行對(duì)比分析；針對(duì)不同商品網(wǎng)頁的風(fēng)格進(jìn)行研究；通過研究發(fā)現(xiàn)版式設(shè)計(jì)通過文字圖形的空間組合表達(dá)的和諧與美。

（一）教學(xué)目標(biāo)

1.使學(xué)生掌握淘寶詳情頁制作的方法和步驟，會(huì)正確理解淘寶詳情頁的概念與排版設(shè)計(jì)要素等知識(shí)。

2.充分利用信息化平臺(tái)和數(shù)字資源，使學(xué)生通過自主學(xué)習(xí)、小組合作探究的方式，提高學(xué)習(xí)能力。通過學(xué)習(xí)，激發(fā)學(xué)生主動(dòng)參與實(shí)踐的興趣，培養(yǎng)認(rèn)真仔細(xì)的工作態(tài)度，從而形成精益求精的工匠精神。

3.學(xué)會(huì)用Photoshop軟件中的圖層、圖像、文字等制作海報(bào)的方法和步驟，淘寶詳情頁設(shè)計(jì)的各個(gè)部分統(tǒng)一和諧與整體效果有美感。

（二）能力要求

會(huì)使用Photoshop cs6網(wǎng)頁設(shè)計(jì)工具設(shè)計(jì)完成一個(gè)產(chǎn)品的淘寶詳情頁；熟悉進(jìn)行文字、圖像、圖層、通道操作，并按要求設(shè)置進(jìn)行電腦操作；熟練掌握淘寶詳情頁設(shè)計(jì)的操作方法，根據(jù)要求進(jìn)行簡(jiǎn)單的網(wǎng)頁排版設(shè)計(jì)。

（三）知識(shí)儲(chǔ)備

淘寶詳情因?yàn)橹匾纳虡I(yè)作用，其作用是為了吸引眼球，以此帶來流量轉(zhuǎn)化。吸引眼球的過程中要極力避免視覺疲勞。以下是需要注意的幾點(diǎn)：

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

2.文本頁面不宜過長(zhǎng)。文本的運(yùn)用可以起到很好的解釋說明作用，可以有效介紹產(chǎn)品，突出吸引力，過長(zhǎng)的文本會(huì)加深視覺疲勞。人們?yōu)榱碎喿x這些長(zhǎng)文本，不得不使用卷滾條，浪費(fèi)了用戶在網(wǎng)上沖浪的時(shí)間。

3.風(fēng)格忌雜亂。詳情頁中所有設(shè)計(jì)元素，包括圖像、文字不可風(fēng)格多樣。此外，詳情頁中的設(shè)計(jì)風(fēng)格還要符合網(wǎng)頁風(fēng)格，應(yīng)堅(jiān)持對(duì)齊原則，讓網(wǎng)頁中的各類要素風(fēng)格呼應(yīng)、協(xié)調(diào)。這樣讀者看起來舒服、順暢，才愿意在該網(wǎng)頁停留。

（四）項(xiàng)目訓(xùn)練

為某一產(chǎn)品制作手機(jī)版淘寶詳情頁，并要求尺寸為620px*960px。

三、某個(gè)淘寶網(wǎng)店鋪的網(wǎng)頁制作

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

（一）教學(xué)目標(biāo)

1.學(xué)會(huì)使用PHOTOSHOP軟件。

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

3.了解頁面布局的幾種結(jié)構(gòu)形式，例如“國(guó)字”型布局、T型布局、POP全景式布局等；學(xué)會(huì)針對(duì)產(chǎn)品進(jìn)行設(shè)計(jì)運(yùn)用符合其風(fēng)格的頁面布局形式，網(wǎng)頁頁面布局簡(jiǎn)潔，板塊布局尺寸合適，整體和諧。

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

（二）能力要求

會(huì)使用Photoshop cs6網(wǎng)頁設(shè)計(jì)工具制作一個(gè)淘寶網(wǎng)頁；能夠熟悉進(jìn)行文字、圖像、圖層、通道操作，并按要求設(shè)置進(jìn)行電腦操作；熟練掌握海報(bào)設(shè)計(jì)的操作方法，根據(jù)要求進(jìn)行簡(jiǎn)單的海報(bào)設(shè)計(jì)；

（三）知識(shí)儲(chǔ)備

1.頁面內(nèi)容要新穎。網(wǎng)頁內(nèi)容的選擇要不落俗套，重點(diǎn)突出一個(gè)“新”字，在設(shè)計(jì)網(wǎng)站內(nèi)容時(shí)不能照抄別人的內(nèi)容，要結(jié)合自身實(shí)際情況創(chuàng)作。在設(shè)計(jì)網(wǎng)頁時(shí)，選材盡量做到“少”而“精”，又必須突出“新”。

2.網(wǎng)頁內(nèi)容要易讀。網(wǎng)站設(shè)計(jì)最重要的是設(shè)計(jì)的網(wǎng)頁要易讀，首先要做好規(guī)劃文字與背景顏色的搭配方案。注意文字的字體、大小、色彩及對(duì)頁面的影響，要符合讀者的閱讀習(xí)慣。

3.善用表格布局。使人一眼就能看出網(wǎng)站重點(diǎn)突出，結(jié)構(gòu)分明。

（四）項(xiàng)目訓(xùn)練

為某一淘寶網(wǎng)店進(jìn)行網(wǎng)站布局設(shè)計(jì)，并要求尺寸為1020px*1710px。

在學(xué)生進(jìn)行項(xiàng)目訓(xùn)練時(shí)，需要提前構(gòu)思，按照順序依次進(jìn)行，如：首先確定主題，明確主題的基礎(chǔ)上進(jìn)行構(gòu)思創(chuàng)意，對(duì)于產(chǎn)品的海報(bào)、詳情頁或淘寶網(wǎng)頁進(jìn)行整體風(fēng)格和特色定位，并組織結(jié)構(gòu)。在設(shè)計(jì)總體方案時(shí)要主題鮮明突出，要點(diǎn)明確，使用的配色和圖片需要圍繞預(yù)定的主題；著重表現(xiàn)網(wǎng)頁的個(gè)性和情趣，突出網(wǎng)站的特點(diǎn)。其次是形式內(nèi)容方面，靈活運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美感。

工業(yè)進(jìn)程的加劇讓信息化時(shí)代科技發(fā)展迅速，網(wǎng)頁美工技術(shù)廣泛應(yīng)用于網(wǎng)絡(luò)頁面設(shè)計(jì)之中，成為網(wǎng)絡(luò)頁面設(shè)計(jì)中不可或缺的一部分?，F(xiàn)在的網(wǎng)絡(luò)頁面設(shè)計(jì)當(dāng)中不僅僅注重單一功能性，更注重網(wǎng)頁的美工設(shè)計(jì)對(duì)整個(gè)網(wǎng)頁界面的主題表達(dá)、界面風(fēng)格及新穎性特點(diǎn)。本文中整合平面設(shè)計(jì)類知識(shí)融入軟件學(xué)習(xí)中，希望通過學(xué)科交匯貫通的形式讓學(xué)生學(xué)習(xí)更專業(yè)化，技能方法更加成熟，更能適應(yīng)社會(huì)的發(fā)展。

參考文獻(xiàn)：

[1][美]艾斯納，著.李雁冰，譯.學(xué)校課程設(shè)計(jì)與評(píng)價(jià)[M].北京：教育科學(xué)出版社，2008.4.

[2][美]魯?shù)婪颉ぐ⒍骱Ｄ?視覺思維：審美視覺心理學(xué)[M].成都：四川人民出版社，1998.3.

[3][美]麥克尼爾，著.石華耀，譯.網(wǎng)頁設(shè)計(jì)創(chuàng)意書[M].北京：人民郵電出版社，2014.2.

[4]彭澎，郭芹.Photoshop圖形圖像處理實(shí)用教程[M].北京：機(jī)械工業(yè)出版社，2017.8.