期刊在線咨詢服務(wù),立即咨詢
時(shí)間:2023-03-16 17:32:06
導(dǎo)言:作為寫(xiě)作愛(ài)好者,不可錯(cuò)過(guò)為您精心挑選的10篇網(wǎng)頁(yè)設(shè)計(jì)論文,它們將為您的寫(xiě)作提供全新的視角,我們衷心期待您的閱讀,并希望這些內(nèi)容能為您提供靈感和參考。
二、網(wǎng)頁(yè)設(shè)計(jì)不應(yīng)打破慣例
前面已經(jīng)提到,網(wǎng)頁(yè)是一個(gè)要求即看即用的特殊“產(chǎn)品”,也就是一看我們就要知道如何使用。我們雖然使用了若干手機(jī),但我們購(gòu)買(mǎi)了一款新的手機(jī)時(shí),我們還是得閱讀說(shuō)明書(shū)后才能正常使用,網(wǎng)頁(yè)確不需要。那如何才能達(dá)到即看即用呢?使用慣例就是最好的武器,這也是提高所有產(chǎn)品易用性的重要法寶。慣例就是我們已經(jīng)習(xí)慣了的東西,我們一看就知道它的意思,就知道怎么去操作,因?yàn)閼T例是我們?nèi)粘I钪蟹e累起來(lái)的,已經(jīng)存入大腦的固有知識(shí)。唐納德•A•諾曼在《設(shè)計(jì)心理學(xué)》中將知識(shí)分為了存儲(chǔ)于外部的知識(shí)和存儲(chǔ)于頭腦內(nèi)部的知識(shí),使用存儲(chǔ)于外部的知識(shí)不需要學(xué)習(xí),但效率低;使用頭腦內(nèi)部的知識(shí)需要專門(mén)學(xué)習(xí),但效率高。而慣例是已經(jīng)存儲(chǔ)在頭腦內(nèi)部的知識(shí),具有外部知識(shí)的高易用性和頭腦內(nèi)部知識(shí)的高效率。在網(wǎng)頁(yè)設(shè)計(jì)中有很多慣例是不能輕易去打破的,一是重要導(dǎo)航在頁(yè)面的位置,按照慣例一般布置在頁(yè)面的上部、左上部或右上部,首頁(yè)的鏈接放置在最前面;二是網(wǎng)站的標(biāo)識(shí)放置在頁(yè)面的左上部,瀏覽者用其來(lái)判別是否到達(dá)了目標(biāo)網(wǎng)站;三是文字鏈接要加下劃線(也可以鼠標(biāo)放上去才出現(xiàn)),瀏覽者用其來(lái)判斷是否有超級(jí)鏈接;四是常用標(biāo)識(shí)符號(hào),如在多頁(yè)文檔中,代表向上翻頁(yè),代表向下翻頁(yè);在視頻、音頻播放中■代表停止,代表暫停,代表播放。這些標(biāo)識(shí)符號(hào)在網(wǎng)頁(yè)中已經(jīng)具有特定的意義,是不能隨意改變的。
三、設(shè)計(jì)層面之間的邏輯聯(lián)系
在《用戶體驗(yàn)的要素——以用戶為中心的Web設(shè)計(jì)》一書(shū)中論述了網(wǎng)頁(yè)設(shè)計(jì)的五個(gè)層面,包括戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層,并確定了自下而上的建設(shè)流程,規(guī)定了設(shè)計(jì)的程序。自下而上的各個(gè)層面,從抽象逐漸變成具體,并且包含著密切的邏輯聯(lián)系。戰(zhàn)略層確定的網(wǎng)站目標(biāo)和用戶需求,是整個(gè)網(wǎng)站設(shè)計(jì)的基石,其決定范圍層的內(nèi)容選擇和功能設(shè)計(jì);結(jié)構(gòu)層是對(duì)范圍層選擇的內(nèi)容進(jìn)行分類和組織,形成信息架構(gòu),以及對(duì)確定的功能進(jìn)行交互設(shè)計(jì),確定交互的過(guò)程和交互行為;框架層是在結(jié)構(gòu)層信息架構(gòu)的基礎(chǔ)上,根據(jù)完成任務(wù)的需要,利用超級(jí)鏈接設(shè)置來(lái)完成導(dǎo)航設(shè)計(jì),以及規(guī)劃信息架構(gòu)在頁(yè)面空間中的位置關(guān)系,形成布局框架;表現(xiàn)層是對(duì)框架層進(jìn)行具體的視覺(jué)表現(xiàn),包括圖形設(shè)計(jì)、色彩設(shè)計(jì)、信息圖表設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)、視頻設(shè)計(jì)等。從上面的分析可以看出,下一層是上一層的設(shè)計(jì)依據(jù)或設(shè)計(jì)對(duì)象,上一層是下一層的進(jìn)一步深化和具體,相鄰層之間緊密聯(lián)系,既不能交換,也不能跨越,更不能缺少,具有嚴(yán)格的秩序,形成了完整的邏輯鏈條,理性思維貫穿在整個(gè)設(shè)計(jì)過(guò)程之中。
1.討論網(wǎng)站的主題。
網(wǎng)站整體規(guī)劃是做網(wǎng)頁(yè)的第一步也是制作網(wǎng)頁(yè)最關(guān)鍵的一步它決定了你要表答的信息,因此我選擇了我選擇我最喜愛(ài)的服飾來(lái)為它做網(wǎng)頁(yè)。在平時(shí)我也對(duì)服裝的網(wǎng)頁(yè)比較關(guān)心,無(wú)論是淘寶網(wǎng)上的衣店還是各種品牌裝。這次我是為“易菲”服飾做的網(wǎng)頁(yè)。
2.定位網(wǎng)站的CI形象?!耙追啤敝哺袊?guó)文化之精髓,汲取自然稟賦之靈性,形成一個(gè)既有濃厚文化底蘊(yùn),又有現(xiàn)代自然人文氣息的特色品牌?!耙住奔词侨?,是包容,是寬容,是五千年中華民族的文化精髓,是厚德載物,是對(duì)人性寬度的一種拓展?!胺啤蓖ǚ?,是生機(jī)、是個(gè)性、是春意盎然、是自強(qiáng)不息,是對(duì)人性深度的一種挖掘?!吧钊缁?,自在快樂(lè)”是YIFINI易菲的設(shè)計(jì)理念,倡導(dǎo)一種與自然和諧相處,如花兒綻放般美好舒適、自在快樂(lè)的生活方式。這也便是我網(wǎng)站的CI形象。
3.確定欄目和板塊。
于時(shí)間的關(guān)系在本次我準(zhǔn)備做四張網(wǎng)頁(yè):一張主頁(yè)三張二級(jí)頁(yè)面。分別設(shè)計(jì)了“時(shí)尚首頁(yè)、時(shí)尚衣秀、推薦產(chǎn)品、潮流信息”等四個(gè)欄目。在這四張頁(yè)面中我打算都用淡藍(lán)色做背景顏色來(lái)映襯我網(wǎng)頁(yè)的主打色綠色。
2.網(wǎng)站的整體風(fēng)格和創(chuàng)意。
整個(gè)網(wǎng)站的創(chuàng)意就在于顏色的搭配,與各種圖片的搭配,它們相互輝映,相互襯托。以便達(dá)到表現(xiàn)其品牌的和諧之美、自然之美。我踩用淡藍(lán)色和綠色為我網(wǎng)站的主打色主要是因?yàn)槲业漠a(chǎn)品特性。在設(shè)計(jì)上,YIEINI易菲推崇“自然美”,將帶表女性氣質(zhì)的花卉和自然元素融入設(shè)計(jì)之中,充分體現(xiàn)設(shè)計(jì)師和顧客所追求的一種灑脫、舒適的生活氛圍,力求表現(xiàn)悠閑、舒暢、自然的生活情趣。因此我用天空與自然的顏色來(lái)表達(dá)這張自然之美、和諧之美。
二、網(wǎng)頁(yè)制作的前期策劃與準(zhǔn)備,在本階級(jí)主要有兩方面的工作。
1.資料的搜集。
在做網(wǎng)頁(yè)我上網(wǎng)收集了許多方面的資料主要是有關(guān)網(wǎng)站的布局與服飾品牌方面的資料,我首先進(jìn)它的企業(yè)網(wǎng)站找了一些關(guān)于“易菲”服飾的圖片主要是一些代言形象還有代表其企業(yè)形象的圖片。其次我去瀏覽了許多的網(wǎng)頁(yè)觀察其網(wǎng)頁(yè)的布局、顏色搭配、欄目、板塊等方面的內(nèi)容,同時(shí)也搜集了一些對(duì)我有用的資料。在搜索資料最困難的便是動(dòng)態(tài)圖片的搜集,動(dòng)態(tài)圖片其gif格式的還是好保存,但是要搜集flash動(dòng)態(tài)圖片就相對(duì)較難了。我用了一天的時(shí)間來(lái)搜集我的flash都不太成功,不過(guò)還搜到了可以換自己圖片的代碼。在開(kāi)始時(shí)我根本就不知道flash是怎樣搜索,不過(guò)經(jīng)過(guò)三次像老實(shí)詢問(wèn)我終于懂得一些關(guān)于代碼的搜索。在搜集資料的過(guò)程之中我發(fā)現(xiàn)了自己的許多不足之處,最關(guān)鍵就是平時(shí)對(duì)知識(shí)的掌握不夠,連最基本的資料搜尋都覺(jué)得困難。也是我平時(shí)不夠認(rèn)真和努力的表現(xiàn)。通過(guò)這次的教訓(xùn)在以后我一定會(huì)做得更好,爭(zhēng)取不范類似錯(cuò)誤。
2.熟悉制作軟件。
做網(wǎng)頁(yè)主要用的工具便是Dremweaver、Photoshop、Flash軟件。在這些軟件我對(duì)Dremweaver、Photoshop相對(duì)比較熟悉,因?yàn)樵谄綍r(shí)上課是老師帶領(lǐng)我們運(yùn)用過(guò)。所以我還可以正常的運(yùn)用,但是出現(xiàn)的問(wèn)題還是有很多。有很多不懂如何操作,只有通過(guò)在次去看書(shū)才能夠了解,這也體現(xiàn)了我學(xué)習(xí)方面的缺點(diǎn),它是我平時(shí)不夠認(rèn)真的具體表現(xiàn)。
三、網(wǎng)頁(yè)制作,這便進(jìn)入我該次的主題了具體制作流程如下。
1.構(gòu)建站點(diǎn)框架。
在我打開(kāi)Dremweaver后第一步便是新建站點(diǎn),我把我的站點(diǎn)建立在F\儀下面。并將我搜集的全部資料都保存在其文件夾中,以便網(wǎng)頁(yè)制作時(shí)可以方便的使用。
2.設(shè)計(jì)主頁(yè)及二級(jí)頁(yè)面。
在主頁(yè)我設(shè)首頁(yè)制作時(shí),時(shí)刻考慮著網(wǎng)頁(yè)的基本原則:統(tǒng)一,連貫,分割,對(duì)比及和諧的原則,內(nèi)容統(tǒng)一,都是為了主題服務(wù),美容美體,一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體,只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的;連貫,頁(yè)面之間關(guān)系連貫,統(tǒng)成一體;每版內(nèi)容都自成一體,顏色各異,便于瀏覽;整個(gè)網(wǎng)頁(yè)有動(dòng)有靜,色彩呼應(yīng),搭配協(xié)調(diào),不呆板,富有生氣;顏色各異,但又不同之中又相同,渾然一體。而且制作過(guò)程中,不忘以下原則:
簡(jiǎn)潔實(shí)用:這是非常重要的,網(wǎng)絡(luò)特殊環(huán)境下,盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的,所以要去掉所有的冗余的東西。使用方便:同第一個(gè)是相一致的,滿足使用者的要求,網(wǎng)頁(yè)做得越適合使用,就越顯示出其功能美;頁(yè)面用色協(xié)調(diào),布局符合形式美的要求:布局有條理,充分利用美的形式,是網(wǎng)頁(yè)富有可欣賞性,提高檔次。當(dāng)然雅俗共賞是人人都追求的。
交互式強(qiáng):發(fā)揮網(wǎng)絡(luò)的優(yōu)勢(shì),是每個(gè)使用者都參與到其中來(lái),這樣的設(shè)計(jì)才能算成功的設(shè)計(jì)。這樣的網(wǎng)頁(yè)才算真正的美的設(shè)計(jì)。每個(gè)子頁(yè)都設(shè)有上導(dǎo)航欄,便于瀏覽和跳轉(zhuǎn)。3個(gè)二級(jí)網(wǎng)頁(yè)制作時(shí),使用的是表格,每一個(gè)頁(yè)面都用表格為它布局好,然后在插入圖片文字及其他,這樣有一定的規(guī)劃性,體現(xiàn)了連貫統(tǒng)一性,不同的內(nèi)容根據(jù)各自的特色建立了不同的表格,突出各自的主題,增強(qiáng)了對(duì)比性。在做這些網(wǎng)頁(yè)的時(shí)候我就進(jìn)行了如上所述的方法。但我所以網(wǎng)頁(yè)的背景顏色及主題顏色都是相同的以便突出我每一個(gè)網(wǎng)頁(yè)都是為凸顯我主題而服務(wù)。
3.實(shí)現(xiàn)網(wǎng)頁(yè)間的鏈接。
我的鏈接按鈕主要有四個(gè)“時(shí)尚首頁(yè)、時(shí)尚衣秀、推薦產(chǎn)品、潮流信息”它分別鏈接到我所做的四個(gè)網(wǎng)頁(yè)。鏈接的過(guò)程其實(shí)很簡(jiǎn)單,主要是把要鏈接的文字選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網(wǎng)頁(yè)單擊確定便可以了。
4.向靜太網(wǎng)頁(yè)插入動(dòng)態(tài)效果。
1.1案例教學(xué)法案
例教學(xué)法是一種具有啟發(fā)性、實(shí)踐性,能開(kāi)發(fā)學(xué)生思維能力,提高學(xué)生判斷能力、決策能力和綜合素質(zhì)的新型教學(xué)方——“分析案例”——“制作案例”的過(guò)程,培養(yǎng)學(xué)生分析問(wèn)題,解決問(wèn)題的能力,達(dá)到學(xué)習(xí)知識(shí)技能,靈活應(yīng)用的目的。例如,在講解ASP中的Request對(duì)象時(shí),教師先展示一個(gè)表單提交的案例,然后引領(lǐng)學(xué)生分析我們?cè)邳c(diǎn)擊提交按鈕后,如何在另外一個(gè)頁(yè)面中,得到提交頁(yè)面相應(yīng)的屬性值呢?學(xué)生在老師的啟發(fā)下動(dòng)腦思考,引出Request對(duì)象的作用,接著教師講授Request對(duì)象的各種方法的使用。學(xué)生在深入理解后,運(yùn)用知識(shí)制作此案例。
1.2任務(wù)驅(qū)動(dòng)法
任務(wù)驅(qū)動(dòng)法在課堂教學(xué)中,教師為學(xué)生布置上機(jī)操作任務(wù),通過(guò)實(shí)際任務(wù)展開(kāi)教學(xué)。學(xué)生通過(guò)親自動(dòng)手操作,主動(dòng)建構(gòu)探究,培養(yǎng)了學(xué)生創(chuàng)新精神和實(shí)踐能力,提高了學(xué)生的綜合運(yùn)用知識(shí)的能力。例如在學(xué)習(xí)表單制作時(shí),以現(xiàn)實(shí)生活中注冊(cè)電子郵件為例,提出表單的概念,然后講解其實(shí)現(xiàn)理論,接著布置實(shí)際任務(wù)——投票系統(tǒng),讓學(xué)生用知識(shí)去解決任務(wù),進(jìn)一步加深理解知識(shí)。
1.3分層教學(xué)法
成人的學(xué)習(xí)能力差異大,存在個(gè)體差異,因此,教學(xué)中采用分層教學(xué)法。在實(shí)際教學(xué)中,教師根據(jù)學(xué)生現(xiàn)有的知識(shí)、能力水平和潛力傾向把學(xué)生科學(xué)地分成水平各自相近的幾組,如A、B、C三組,A組是按大綱基本要求進(jìn)行教學(xué)的學(xué)生;B組是按略高于基本要求進(jìn)行教學(xué)的學(xué)生;C組是按較高要求(能發(fā)揮學(xué)生數(shù)學(xué)特長(zhǎng))進(jìn)行教學(xué)的學(xué)生。學(xué)生分組不是固定的,而是隨著學(xué)習(xí)情況及時(shí)調(diào)整。每組布置知識(shí)程度不同的學(xué)習(xí)任務(wù),并且在教師恰當(dāng)?shù)闹笇?dǎo)下,讓全體學(xué)生從各自的層面體驗(yàn)成功的愉悅。
2模擬化網(wǎng)絡(luò)教學(xué)
開(kāi)放教育是傳統(tǒng)教育與網(wǎng)絡(luò)教學(xué)相互融合的產(chǎn)物。網(wǎng)絡(luò)教學(xué)以其獨(dú)特的魅力在開(kāi)放教育中發(fā)揮著越來(lái)越重要的作用。學(xué)習(xí)已經(jīng)不再局限于課堂,學(xué)生只要有上網(wǎng)條件,無(wú)論何時(shí)何地,都可以方便的學(xué)習(xí),打破了時(shí)間和空間的限制,因此,網(wǎng)上資源的好壞直接影響學(xué)生的學(xué)習(xí)效果。因此,筆者充分利用網(wǎng)絡(luò)資源,以教學(xué)大綱為依據(jù),遵循厚基礎(chǔ)、重能力的原則,開(kāi)發(fā)了此門(mén)課的模擬化網(wǎng)絡(luò)教學(xué)系統(tǒng)。此系統(tǒng)有“教學(xué)大綱”、“課程教案”、“模擬實(shí)驗(yàn)”、“經(jīng)典案例”、“自我測(cè)試”、“課程討論”等欄目。分層次,多模塊,手段直觀、豐富有趣的一系列實(shí)驗(yàn)教學(xué)單元。制作文字、圖像、聲音、動(dòng)畫(huà)于一體的豐富多彩的模擬實(shí)驗(yàn)教學(xué)內(nèi)容。模擬實(shí)驗(yàn)教學(xué)的指導(dǎo)效率更高。使理論教學(xué)與實(shí)驗(yàn)教學(xué)、基礎(chǔ)與前沿、經(jīng)典與現(xiàn)代、實(shí)驗(yàn)內(nèi)容與實(shí)際應(yīng)用有機(jī)結(jié)合,更有利于學(xué)生學(xué)習(xí),并且可以反復(fù)閱讀,是面授課堂一種好的補(bǔ)充與強(qiáng)化手段。
3多樣化互動(dòng)教學(xué)
3.1課堂互動(dòng)
成人有豐富的社會(huì)閱歷和人生體驗(yàn),有更為強(qiáng)烈的對(duì)話意識(shí)和平等意識(shí),因此,師生活動(dòng)主要體現(xiàn)在,放下身段,深入到學(xué)生們之中,和他們們交朋友,交流心得,平等對(duì)話,互相學(xué)習(xí)。鼓勵(lì)學(xué)生大膽地表達(dá)自己的想法,暢所欲言,和學(xué)生共去探索知識(shí)的世界。所謂生生互動(dòng),就是學(xué)生和學(xué)生之間可以互相討論,交流心得。在實(shí)際操作中將學(xué)生分組,合作學(xué)習(xí),這樣促使小組成員積極參與,培養(yǎng)學(xué)生團(tuán)結(jié)合作意識(shí),集體榮譽(yù)感。人機(jī)互動(dòng)是學(xué)習(xí)《動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)》這門(mén)課必不可少的環(huán)節(jié)。只懂理論,不會(huì)應(yīng)用,猶如紙上談兵,完全失去了學(xué)習(xí)的意義。所以,課上學(xué)生必須上機(jī)實(shí)踐,在實(shí)踐中掌握知識(shí),消化知識(shí),融會(huì)貫通。
商業(yè)網(wǎng)站是企業(yè)向用戶和網(wǎng)民提品和服務(wù)的一種方式,是企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái),其網(wǎng)頁(yè)頁(yè)面由具體的文字(標(biāo)題、廣告語(yǔ)、單位名稱、Email地址等)、企業(yè)標(biāo)志、商標(biāo)、產(chǎn)品圖形、和信息菜單等內(nèi)容組成,這些內(nèi)容又常常表現(xiàn)為點(diǎn)線面、色彩、動(dòng)靜、主次等視覺(jué)因素,這些因素的不同使用都會(huì)影響讀者的視覺(jué)習(xí)慣和心理變化。
本文將試析商業(yè)網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)因素的心理規(guī)律,揭示商業(yè)網(wǎng)頁(yè)設(shè)計(jì)如何通過(guò)視覺(jué)心理因素更有效、更合理的表現(xiàn)與傳達(dá)信息。展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略。
一、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中點(diǎn)、線、面視覺(jué)心理因素的運(yùn)用
點(diǎn)、線、面是商業(yè)網(wǎng)頁(yè)設(shè)計(jì)基本的視覺(jué)元素,是表現(xiàn)視覺(jué)形象的基本設(shè)計(jì)語(yǔ)言。從視覺(jué)角度看網(wǎng)頁(yè)設(shè)計(jì)主要是如何經(jīng)營(yíng)好三者的關(guān)系,因?yàn)椴还苁侨魏我曈X(jué)形象或者版式構(gòu)成,歸結(jié)到底,都可以歸納為點(diǎn)、線和面。
1.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的點(diǎn)
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中的點(diǎn)是構(gòu)成網(wǎng)頁(yè)的最基本單位,是指頁(yè)面中具備點(diǎn)的視覺(jué)特點(diǎn)、體積較小的物象。相對(duì)于整體背景而言一個(gè)單獨(dú)的點(diǎn)是相比較而言的;是有大小、形狀和體積的。點(diǎn)的大小、形態(tài)、位置不同,所產(chǎn)生的視覺(jué)效果、心理作用也不同。一個(gè)網(wǎng)頁(yè)往往需要有數(shù)量不等,形狀各異的點(diǎn)來(lái)構(gòu)成,可以是具體產(chǎn)品、商品標(biāo)志等,也可以是感覺(jué)上的點(diǎn)。例如,天空中的飛鳥(niǎo)、沙灘上的腳印、花瓣上的蜜蜂等,在其周?chē)尘耙r托下,都給人以“點(diǎn)”的視覺(jué)心理感受。
點(diǎn)在設(shè)計(jì)中即可以起一種穩(wěn)定造型的作用,亦可起到活潑生動(dòng)、吸引視覺(jué)中心的作用,使用得當(dāng),甚至可以畫(huà)龍點(diǎn)睛;點(diǎn)的形狀、方向、大小、位置、聚集與發(fā)散,還能夠給人帶來(lái)不同的心理感受。
(1)單點(diǎn)的應(yīng)用:點(diǎn)在人們的視覺(jué)中具有很強(qiáng)的吸引作用,如:點(diǎn)(商品)設(shè)計(jì)在網(wǎng)頁(yè)的上方或左右位置,則給人不穩(wěn)定感和相對(duì)的動(dòng)感。
(2)多點(diǎn)的應(yīng)用:兩點(diǎn)(二商品)之間會(huì)產(chǎn)生心理連線的感覺(jué),多點(diǎn)時(shí)則會(huì)出現(xiàn)不同排列,順序的虛擬的面或形體。
2.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的線
點(diǎn)的延伸形成線。線在頁(yè)面中的作用在于表示方向、位置、長(zhǎng)短、寬度、形狀、質(zhì)量和情緒。線是分割頁(yè)面的主要元素之一,是決定頁(yè)面現(xiàn)象的基本要素。商業(yè)網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)因素中的線主要指文字的行線,商品圖形、圖象的輪廊線,各種裝飾線。線的形態(tài)主要有直線和曲線兩大類:
(1)直線給人一種緊張、銳利、簡(jiǎn)潔、剛直感,從心理或生理感覺(jué)來(lái)看具有男性特點(diǎn)。直線又有:細(xì)直線,給人纖細(xì)、敏銳的心理感覺(jué);粗直線,給人豪爽、拙樸、厚重的感覺(jué);垂直線,給人一種挺拔、莊嚴(yán)感;水平直線則給人方向感和強(qiáng)烈的動(dòng)感。
(2)曲線表現(xiàn)出一種動(dòng)態(tài),活潑,輕快的意味,顯示了女性美的特征,商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用文字行、圖象輪廊線或裝飾線的造型,創(chuàng)造一種女性化的審美感。自由曲線是最好的情感抒發(fā)手段。打破了水平線組成的莊嚴(yán)和單調(diào),給商業(yè)網(wǎng)頁(yè)增加了豐富、流暢、活潑的氣氛。水平線和自由曲線的組合運(yùn)用,形成新穎的形式和不同情感的對(duì)比。
3.網(wǎng)頁(yè)設(shè)計(jì)造型要素中的面
線的推移形成面。面是無(wú)數(shù)點(diǎn)和線的組合。面具有一定的面積和質(zhì)量,占據(jù)空間的位置更多,因而相比點(diǎn)和線來(lái)說(shuō)視覺(jué)沖擊力更大更強(qiáng)烈。面在網(wǎng)頁(yè)設(shè)計(jì)中通常指各種圖形、色塊的形狀設(shè)計(jì),不同形狀的面具有自己鮮明的個(gè)性和情感特征,能給人不同的心理感受,如方形的面具有沉著,穩(wěn)重,厚實(shí),堅(jiān)強(qiáng)的男性特征;三角形、梯形面常給人一種穩(wěn)定、端正之感;但如果將它們倒過(guò)來(lái)設(shè)計(jì),則給人一種輕、不穩(wěn)定的感覺(jué)。圓形充實(shí)、圓滿、活潑的感覺(jué),比較適合表現(xiàn)兒童產(chǎn)品或者女性用品。菱形或不規(guī)則形體則給人一種活潑、輕快之感。
在商業(yè)網(wǎng)頁(yè)的視覺(jué)構(gòu)成中,點(diǎn)、線、面既是最基本的造型元素,又是最重要的表現(xiàn)手段。在確定商業(yè)網(wǎng)頁(yè)主體形象的位置、動(dòng)態(tài)時(shí),點(diǎn)線面將是需要最先考慮的因素。必須熟練掌握設(shè)計(jì)語(yǔ)言。要善于根據(jù)商業(yè)特性采用不同的組合去體現(xiàn)不同的情感訴求,達(dá)到推銷(xiāo)、銷(xiāo)售商品和服務(wù)的作用。只有合理的安排好點(diǎn)線面的互相關(guān)系,才能設(shè)計(jì)出具有最佳視覺(jué)效果的頁(yè)面,充分的表達(dá)出商業(yè)網(wǎng)頁(yè)最終的訴求!二、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中色彩視覺(jué)心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中色彩是確立網(wǎng)站風(fēng)格的靈魂。色彩能產(chǎn)生強(qiáng)烈的視覺(jué)效果,使頁(yè)面更加生動(dòng)。色彩設(shè)計(jì)的好壞直接影響閱讀者的觀賞興趣與心理變化。因此,地位十分重要。商業(yè)網(wǎng)頁(yè)的色彩設(shè)計(jì)應(yīng)從以下幾個(gè)方面把握和利用其心理特征:
首先,整個(gè)頁(yè)面要確定一個(gè)主色調(diào),其有利于體現(xiàn)網(wǎng)站主題。每一種色彩都具有它自身的性格,如:彩度高,明度高的色彩常給人一種華麗感,相反彩度低,低明度的色彩則給人一種樸實(shí)感。暖色系、高明度的色彩能給人一種面積大的前進(jìn)感。冷色系、低明度的色彩則能給人一種面積小的后退感。每個(gè)人群對(duì)色彩的喜好也有所不同,如男性較喜歡冷色,女性則偏好暖色或高明度、高彩度的色彩,兒童喜好純色,討厭濁色,老人則偏好濁色,中年人或文化層次較高的人偏好冷灰色等。因此在設(shè)計(jì)中要考慮主要讀者群的背景和構(gòu)成以及如何與商品的屬性相呼應(yīng)。
其次,在主色調(diào)下的色調(diào)搭配。若頁(yè)面空間整體、色彩和諧統(tǒng)一,則給人一種幽雅、寧?kù)o感;若以對(duì)比手法處理,圖形文字色彩明快突出于背景色,則頁(yè)面空間氛圍會(huì)顯得活躍而有生氣。但是,要注意不能有強(qiáng)烈的色彩對(duì)比,因?yàn)檫^(guò)于豐富的背景色彩會(huì)影響前景商品圖片和文字的取色,使文字溶于背景中,不易辨識(shí)。所以背景一般應(yīng)以單純?yōu)橐恕?/p>
最后,作為設(shè)計(jì)師在考慮網(wǎng)頁(yè)設(shè)計(jì)時(shí),還應(yīng)考慮到時(shí)代流行性色和企業(yè)標(biāo)準(zhǔn)色的問(wèn)題。所謂流行色,是指在一定范圍內(nèi)和時(shí)間內(nèi),非常盛行并易為人們接受的某些式樣或顏色。而標(biāo)準(zhǔn)色的運(yùn)用在網(wǎng)上擴(kuò)大了品牌效應(yīng),也是對(duì)公司整體形象的統(tǒng)一應(yīng)用,從而構(gòu)成了企業(yè)識(shí)別系統(tǒng)(CIS)的重要部分。
三、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中動(dòng)、靜的視覺(jué)心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)構(gòu)成要素可分為兩種狀態(tài):靜態(tài)與動(dòng)態(tài)。靜態(tài)要素設(shè)計(jì)具體指靜止的商品圖形、文字、按紐等;動(dòng)態(tài)要素,具體指動(dòng)態(tài)按紐、按紐連接、網(wǎng)頁(yè)動(dòng)畫(huà)和視頻等,它們是豐富、生動(dòng)網(wǎng)頁(yè)、張顯個(gè)性、突出主題重要手段。
動(dòng)靜以及不同的動(dòng)靜組合都可以反映不同的心理與性格,如,動(dòng)大體上給人活潑、生動(dòng)的印象,但極慢的動(dòng)常給人憂慮感;迅速或突然的動(dòng)常給人焦慮、驚慌感。另外,靜也常給人寧?kù)o、沉悶兩種感覺(jué)。
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中要注意處理好動(dòng)靜的關(guān)系,要整體和諧統(tǒng)一,給人生動(dòng)而不躁動(dòng)或厭惡感。同時(shí)還要遵循動(dòng)態(tài)性原則與交互性原則。
1.動(dòng)態(tài)性原則,即要有四維空間或五維空間的運(yùn)作觀念。一件網(wǎng)頁(yè)商品、圖片不僅是二維的平面或三維的視覺(jué),也要有時(shí)間與空間的變換,情感與思維認(rèn)識(shí)的演變等多維因素。
2.交互性原則,即界面設(shè)計(jì)強(qiáng)調(diào)交互過(guò)程。一方面是物的信息傳達(dá),另一方面是人的接受與反饋,對(duì)任何物的信息都能動(dòng)地認(rèn)識(shí)與把握。
四、商業(yè)網(wǎng)頁(yè)設(shè)計(jì)中視覺(jué)流程心理因素的運(yùn)用
商業(yè)網(wǎng)頁(yè)設(shè)計(jì)是通過(guò)視覺(jué)元素引起人注目而實(shí)現(xiàn)商品信息內(nèi)容的傳達(dá),為了使網(wǎng)頁(yè)獲得最大的視覺(jué)傳達(dá)功能,使網(wǎng)頁(yè)真正成為可讀強(qiáng)性而且新穎的媒體,必須適應(yīng)人們視覺(jué)流程的心理和生理的特點(diǎn)。
視覺(jué)流程的形成是由人類的視覺(jué)特性所決定的。心理學(xué)家葛斯達(dá)認(rèn)為:人們閱讀時(shí),版面的上部比下部的注目?jī)r(jià)值高,左側(cè)比右側(cè)的注目?jī)r(jià)值高。因此,版面的左上側(cè)位置最為引人注目,因此,在網(wǎng)頁(yè)設(shè)計(jì)中一些突出的商品信息,如主標(biāo)題、每天更新的內(nèi)容等通常都放在這個(gè)位置。以便于一開(kāi)始就吸引受眾的視線,誘導(dǎo)其由上到下,由左到右地移動(dòng)。此位置也被稱作視覺(jué)的最佳視域。也就是最優(yōu)選的地方。當(dāng)然視覺(jué)流程是一種感覺(jué)而非確切的數(shù)學(xué)公式,只要符合人們認(rèn)識(shí)過(guò)程的心理順序和思維發(fā)展的邏輯順序,就可以更為靈活地運(yùn)用。設(shè)計(jì)者可以利用視線移動(dòng)規(guī)律,誘導(dǎo)讀者的視線作左右流動(dòng)、上下流動(dòng)以及斜線的不穩(wěn)定流動(dòng),通過(guò)編排設(shè)計(jì),人為地產(chǎn)生最佳視域,突出主要商品,以達(dá)到一定的視覺(jué)效果,傳遞商品信息。
商業(yè)網(wǎng)頁(yè)作為一種新的企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái),它的發(fā)展雖然沒(méi)有多長(zhǎng)時(shí)間,卻兼容了傳統(tǒng)平面設(shè)計(jì)的特征,又具備其所沒(méi)有的優(yōu)勢(shì),成為今后商品信息交流的一個(gè)非常有影響的途徑。其設(shè)計(jì)是一種綜合性的設(shè)計(jì),它所涉及的范圍非常的廣泛,包括消費(fèi)者心理學(xué)、視覺(jué)設(shè)計(jì)美學(xué)、人機(jī)工程、哲學(xué)等諸多方面,而本文中只從視覺(jué)心理因素的角度進(jìn)行了一些闡述與分析,僅作拋磚引玉之用。
參考文獻(xiàn):
[1]李彬彬:設(shè)計(jì)效果心理評(píng)價(jià)[M].北京:中國(guó)輕工出版社,2005.1
科技的發(fā)展,使視覺(jué)這門(mén)藝術(shù)不再僅僅局限于二維空間的發(fā)展,動(dòng)畫(huà)、視頻等網(wǎng)頁(yè)設(shè)計(jì)元素的運(yùn)用,極大地豐富了網(wǎng)頁(yè)的信息內(nèi)容,這些元素成為網(wǎng)頁(yè)設(shè)計(jì)中最生動(dòng)、最活躍的因素,給受眾帶來(lái)試聽(tīng)方面的雙重享受。動(dòng)聽(tīng)的音樂(lè),服飾的動(dòng)態(tài)展示,給受眾帶來(lái)愉悅感的同時(shí),像一種調(diào)劑一樣平衡了視覺(jué)和心理上的感受,同時(shí)還留給了受眾對(duì)服飾想象空間的延伸。在服飾網(wǎng)頁(yè)設(shè)計(jì)中,通常用Flas的方式來(lái)展示服飾產(chǎn)品。當(dāng)然,伴隨著三維動(dòng)畫(huà)的運(yùn)用,服飾網(wǎng)頁(yè)的設(shè)計(jì)將會(huì)越來(lái)越科學(xué)和藝術(shù)。動(dòng)畫(huà)等視頻藝術(shù)的運(yùn)用,能夠營(yíng)造出受眾者對(duì)服飾的一種情緒,一種感覺(jué)與情感。動(dòng)畫(huà)方式的服飾展示,不僅使人們的情感得到張揚(yáng),而且使人機(jī)對(duì)話的過(guò)程也變得更加生動(dòng)有趣。其總的設(shè)計(jì)目標(biāo)是營(yíng)造出一種放松的氣氛,使人們感到輕松、活潑與休閑,在閱讀過(guò)程中,使受眾者在視覺(jué)與心理上獲取愉悅,產(chǎn)生消費(fèi)的熱情。
(2)整體色彩感。
網(wǎng)絡(luò)媒體是一種非常特殊的媒體形式,通過(guò)光和色將要傳遞的信息展現(xiàn)在屏幕上,用于人們交流與溝通。因此,設(shè)計(jì)出符合人的心理與生理等要求的,合理的色彩搭配就顯得尤為重要。在設(shè)置色彩的彩度及明度時(shí)要特別慎重,受眾者的要求以及服飾品牌風(fēng)格色調(diào)的和諧就需要得到綜合全面地考慮??梢圆捎迷O(shè)置背景的方法,一來(lái)減少人們由于長(zhǎng)時(shí)間注視亮背景所引起的神經(jīng)疲勞以及心理上的厭煩感,二者烘托服飾風(fēng)格,這樣使網(wǎng)頁(yè)的總體風(fēng)格超越文字和圖形的既定內(nèi)涵,給受眾者勾畫(huà)出一個(gè)完整的審美意境。其次,還可以通過(guò)利用和諧的色彩搭配及色彩有規(guī)律的變化,營(yíng)造視覺(jué)上的流動(dòng)感,使受眾者在獲取信息的同時(shí),也能夠得到視覺(jué)和精神上的購(gòu)物享受。
2服飾網(wǎng)頁(yè)框架布局
網(wǎng)頁(yè)的框架布局是網(wǎng)站視覺(jué)設(shè)計(jì)研究的重要環(huán)節(jié)之一,網(wǎng)頁(yè)設(shè)計(jì)中把不同的設(shè)計(jì)要素進(jìn)行有機(jī)整合,主要借助框架結(jié)構(gòu)來(lái)完成。這種框架結(jié)構(gòu)相當(dāng)于普通頁(yè)面的版式設(shè)計(jì)。常見(jiàn)的網(wǎng)頁(yè)布局有層,還有表格定位的方式。在服飾網(wǎng)頁(yè)設(shè)計(jì)中,通常兩種定位方式同時(shí)采用,他們互相取長(zhǎng)補(bǔ)短,相得益彰。由于服飾網(wǎng)站的特殊性質(zhì),受眾瀏覽網(wǎng)站的目的、閱讀信息的方式以及在站內(nèi)逗留的時(shí)間的不同,在策劃網(wǎng)頁(yè)頁(yè)面的編排創(chuàng)意時(shí),采取“少則多”的設(shè)計(jì)原則,這樣單個(gè)頁(yè)面雖然容納的信息量較少,但視覺(jué)表現(xiàn)力卻比較集中。這種設(shè)計(jì)手法滿足了受眾者對(duì)服飾好奇、探求的欲望,為服飾網(wǎng)站的個(gè)性化風(fēng)格營(yíng)造了氛圍;再者,人機(jī)對(duì)話的方式誘發(fā)了受眾的活力與興趣,增加了網(wǎng)絡(luò)互動(dòng)性,這樣有利于消費(fèi)者與設(shè)計(jì)師之間的溝通與交流。服飾網(wǎng)頁(yè)頁(yè)面編排時(shí),還需要結(jié)合服裝品牌的主題風(fēng)格與素材,不斷調(diào)整頁(yè)面的均衡,在統(tǒng)一中尋求變化,獲得秩序感,給受眾者創(chuàng)造最佳的視覺(jué)效果,最終完成信息的傳遞。
1.1從編寫(xiě)代碼到創(chuàng)建實(shí)際任務(wù)。傳統(tǒng)的網(wǎng)頁(yè)教學(xué)總是以編寫(xiě)HTML超文本標(biāo)記語(yǔ)言、CSS層疊樣式表文件、JavaScript為基礎(chǔ),通過(guò)Dreamweaver工具的拆分模式實(shí)現(xiàn)可視化的實(shí)際效果與基礎(chǔ)理論的結(jié)合來(lái)展開(kāi)。這樣的教學(xué)方式與網(wǎng)頁(yè)的實(shí)際應(yīng)用聯(lián)系較少。使得學(xué)生在學(xué)完網(wǎng)頁(yè)之后難以解決具體的實(shí)際問(wèn)題。采用任務(wù)驅(qū)動(dòng)的教學(xué)方法,通過(guò)實(shí)際項(xiàng)目,引入真實(shí)情境,如玩具銷(xiāo)售店、我的大學(xué)生活、學(xué)科資源網(wǎng)站等。讓學(xué)們從單純的學(xué)生角色轉(zhuǎn)化為網(wǎng)站構(gòu)建者,成為一個(gè)生產(chǎn)者。這樣大大激發(fā)了學(xué)生的學(xué)習(xí)動(dòng)力,并肩負(fù)責(zé)任感和成就感去學(xué)習(xí)。學(xué)生在構(gòu)建實(shí)際網(wǎng)站過(guò)程中直接、頻繁地接觸計(jì)算思維的概念,如網(wǎng)頁(yè)結(jié)構(gòu)的搭建,樣式美化的屬性設(shè)置等,并不斷提升系統(tǒng)性的思考能力和創(chuàng)意思維能力。構(gòu)建網(wǎng)站時(shí)系統(tǒng)性的思考力是指學(xué)生需要在設(shè)計(jì)諸如導(dǎo)航條或鏈接中從設(shè)計(jì)網(wǎng)站、解決問(wèn)題和理解用戶需求的角度去“仔細(xì)思考用戶與網(wǎng)站的互動(dòng)方式以及根據(jù)意圖實(shí)現(xiàn)功能的方式解決問(wèn)題”[1]。構(gòu)建網(wǎng)站中的創(chuàng)意思維是指學(xué)生可以把網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)融入到創(chuàng)作具有實(shí)際意義和真實(shí)內(nèi)容及富有個(gè)性的網(wǎng)站構(gòu)建過(guò)程中,將學(xué)科學(xué)習(xí)與實(shí)際生活相統(tǒng)一。
1.2從獨(dú)立開(kāi)發(fā)到小組合作、組間協(xié)作。網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開(kāi)發(fā)的工作不是一個(gè)人獨(dú)立完成的,而是需要團(tuán)隊(duì)的合作共同完成,當(dāng)前的信息產(chǎn)業(yè)的工作都不是一個(gè)人獨(dú)立能夠完成的,而需要與他人合作完成。因此,獨(dú)立思考和學(xué)習(xí)確實(shí)能促進(jìn)學(xué)生知識(shí)掌握能力、而通過(guò)合作構(gòu)建網(wǎng)站可以分解復(fù)雜任務(wù)。利用這種協(xié)作模式可以培養(yǎng)計(jì)算思維能力中除知識(shí)技能方面的其他方面——過(guò)程與方法、情感態(tài)度與價(jià)值觀。
2考核評(píng)價(jià)
根據(jù)《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開(kāi)發(fā)課程》的三維教學(xué)目標(biāo)(知識(shí)技能、過(guò)程與方法、情感態(tài)度三方面)制定考核方法及評(píng)價(jià)標(biāo)準(zhǔn)??己嗽u(píng)價(jià)改變傳統(tǒng)的單一的總結(jié)性評(píng)價(jià)的方法,采用平時(shí)的過(guò)程評(píng)價(jià)、階段評(píng)價(jià)和綜合評(píng)價(jià)相結(jié)合的評(píng)價(jià)方法。過(guò)程評(píng)價(jià)是指學(xué)生平時(shí)的學(xué)習(xí)過(guò)程,根據(jù)精心設(shè)計(jì)的學(xué)習(xí)情境對(duì)學(xué)生的學(xué)習(xí)過(guò)程進(jìn)行記錄和評(píng)分。這其中包括學(xué)生出勤情況、學(xué)習(xí)態(tài)度、單元情境的完成情況;階段評(píng)價(jià)即是期中評(píng)價(jià),通過(guò)期初時(shí)提出主題網(wǎng)站任務(wù),學(xué)生在學(xué)習(xí)過(guò)程中著手規(guī)劃、設(shè)計(jì)、實(shí)施并完成任務(wù),在學(xué)期中期進(jìn)行集中評(píng)價(jià)[2],起到貫穿始終、承前啟后的作用;期末考試采用上機(jī)考試,題型包括根據(jù)給定素材及代碼截圖拼出網(wǎng)頁(yè)頁(yè)面,根據(jù)給定模板和主題要求,在現(xiàn)有素材的基礎(chǔ)上實(shí)現(xiàn)網(wǎng)站規(guī)劃及網(wǎng)頁(yè)設(shè)計(jì)。
二、圖形元素
圖形元素的存在大大美化了網(wǎng)頁(yè)設(shè)計(jì),它擁有強(qiáng)烈的藝術(shù)美感和視覺(jué)沖擊力,是文字之后最早被引入到網(wǎng)頁(yè)設(shè)計(jì)中的元素,它所傳遞信息的直觀性遠(yuǎn)勝于文字。圖形設(shè)計(jì)中的色彩搭配、元素構(gòu)成、版式布局都要符合瀏覽者的審美心理,才能使得網(wǎng)頁(yè)在短時(shí)間內(nèi)給受眾留下深刻的印象。網(wǎng)頁(yè)設(shè)計(jì)中的圖片提供導(dǎo)向和鏈接的功能。根據(jù)人機(jī)心理學(xué)研究,人們的視線在瀏覽網(wǎng)頁(yè)時(shí),會(huì)首先垂直的落在屏幕中心,然后向四周游動(dòng)。決定了設(shè)計(jì)師要將重要的信息安排在注視點(diǎn)高的區(qū)域,所以設(shè)計(jì)師要根據(jù)視覺(jué)流程來(lái)合理安排圖片的適度位置。網(wǎng)頁(yè)設(shè)計(jì)中的圖片是要經(jīng)過(guò)網(wǎng)絡(luò)下載才可以最后看到,受到寬帶的限制,所以要求圖形文件量盡可能的小。在圖片大小固定的情況下,文件量越低說(shuō)明圖片分辨率要越低。對(duì)于顯示器上的圖片而言,分辨率為72dpi是大多數(shù)圖片的最佳選擇。
三、色彩元素
色彩的配色設(shè)計(jì)直接影響網(wǎng)站的整體定位、風(fēng)格。作為設(shè)計(jì)中不可缺少的元素,它建立在文字圖形的基礎(chǔ)上,依靠眼睛的功能,通過(guò)感覺(jué)的視覺(jué)沖擊力對(duì)心理起作用。每一種顏色都有不同的心理暗示。冷色中的藍(lán)色代表平靜,暖色中的紅色代表激動(dòng);黑色給人沉重感,淺色則讓物體輕盈;色彩從色調(diào)、飽和度、明度三個(gè)方面影響著網(wǎng)頁(yè),我們可以找到很多運(yùn)用廣泛的色彩配色方案,來(lái)作為實(shí)際學(xué)習(xí)和工作中的向?qū)?。網(wǎng)頁(yè)設(shè)計(jì)中的色彩元素需要符合國(guó)際色彩的標(biāo)準(zhǔn),因?yàn)榛ヂ?lián)網(wǎng)絡(luò)是建立在國(guó)際互聯(lián)網(wǎng)統(tǒng)一的平臺(tái)上的。最簡(jiǎn)單的說(shuō)就是采用網(wǎng)頁(yè)安全色,不能毫無(wú)節(jié)制的運(yùn)用太多顏色,一般情況下先根據(jù)總體風(fēng)格的要求定出主色調(diào)和輔助色進(jìn)行色彩的搭配。網(wǎng)頁(yè)色彩模式一般采取RGB模式。網(wǎng)頁(yè)設(shè)計(jì)是通過(guò)顯示器來(lái)進(jìn)行展示的,目前顯示器大都采用RGB顏色標(biāo)準(zhǔn),這與RGB顏色模式的原理分不開(kāi)。RGB是從顏色發(fā)光的原理來(lái)設(shè)計(jì)定的,通俗點(diǎn)說(shuō)它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈,當(dāng)它們的光相互疊合的時(shí)候,色彩相混,而亮度卻等于兩者亮度之總和,越混合亮度越高,即加法混合。在顯示器上,通過(guò)電子槍打在屏幕的紅、綠、藍(lán)三色發(fā)光極上來(lái)產(chǎn)生色彩的。
2、色彩在網(wǎng)頁(yè)設(shè)計(jì)中的重要性
如今,人們打開(kāi)一個(gè)網(wǎng)頁(yè),已經(jīng)不再滿足于文字的內(nèi)容,他們有了更高的審美意識(shí),對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō),藝術(shù)設(shè)計(jì)的地位就越來(lái)越重要了。色彩包含在美學(xué)當(dāng)中,各種色彩代表不一樣的內(nèi)涵。以網(wǎng)頁(yè)的內(nèi)容以及特點(diǎn)為基礎(chǔ),合理的運(yùn)用色彩構(gòu)成,正確的搭配色彩,可以增加網(wǎng)頁(yè)的視覺(jué)效果,從而引起人們的共鳴,影響人們的情緒,不但可以傳達(dá)信息,還可以產(chǎn)生情感上的交流。對(duì)于藝術(shù)設(shè)計(jì)來(lái)說(shuō),色彩是很關(guān)鍵的要素。色彩搭配的好,可以給人們很直觀的視覺(jué)沖擊,以及藝術(shù)享受,可以讓人們站在美學(xué)的角度來(lái)理解網(wǎng)站的內(nèi)容,這就是網(wǎng)頁(yè)色彩設(shè)計(jì)的初衷。網(wǎng)頁(yè)在性質(zhì)上屬于視覺(jué)傳遞的新型載體,和雜志、電視、報(bào)刊以及廣播等傳統(tǒng)的媒體比較起來(lái),構(gòu)成更加復(fù)雜一些,將文字、圖像以及聲音融于一體。用戶打開(kāi)一個(gè)網(wǎng)頁(yè),最初的印象就是色彩。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō),色彩有著重要的意義,它不但可以表達(dá)網(wǎng)頁(yè)作品的內(nèi)容,還可以實(shí)現(xiàn)視覺(jué)的傳達(dá)。
3、網(wǎng)頁(yè)設(shè)計(jì)中色彩的應(yīng)用
3.1網(wǎng)頁(yè)設(shè)計(jì)中色彩的調(diào)和與搭配。網(wǎng)頁(yè)的形式各種各樣,宣傳效果也是大不相同,我們要對(duì)網(wǎng)頁(yè)設(shè)計(jì)的各種色彩搭配以及理念進(jìn)行研究,所謂的理念,就是把色彩融入到網(wǎng)頁(yè)的構(gòu)成當(dāng)中,從全局的角度體現(xiàn)出具體和局部的美,此外,可以依據(jù)宣傳內(nèi)容,利用色調(diào)和色彩表達(dá)出來(lái),根據(jù)不同的網(wǎng)頁(yè)種類,用各種形式進(jìn)行表達(dá)。
3.1.1針對(duì)各種群體,采取網(wǎng)頁(yè)色彩表達(dá)。因?yàn)槭鼙娙后w是不一樣的,網(wǎng)頁(yè)的色彩也有要區(qū)別,舉個(gè)例子,以年齡段不同進(jìn)行區(qū)分的受眾群體,就要表現(xiàn)出性格以及年齡的特征,每一個(gè)年齡段的群體,情感需要是不一樣的,在設(shè)計(jì)網(wǎng)頁(yè)時(shí),選擇的方法也是不一樣的。對(duì)于兒童來(lái)說(shuō),主要以紅色以及綠色為主色帶,在關(guān)鍵地方表現(xiàn)出來(lái),然后在輔以其他顏色,這種色彩可以體現(xiàn)出活潑的格調(diào)。
3.1.2針對(duì)各種類型的網(wǎng)頁(yè)設(shè)計(jì)宣傳理念,如何進(jìn)行色彩搭配。不同的網(wǎng)頁(yè),所要實(shí)現(xiàn)的宣傳目標(biāo)是不一樣的,通常來(lái)說(shuō),我們利用各種感覺(jué)通到以及色彩的感受,去領(lǐng)域宣傳的本質(zhì)內(nèi)涵。我們?cè)O(shè)計(jì)網(wǎng)頁(yè),主要是為了實(shí)現(xiàn)宣傳的目的,利用色彩的方式,可以把這種目的體現(xiàn)出來(lái),這就叫做不同產(chǎn)品設(shè)計(jì)理念的不同理解以及表達(dá)。
3.2網(wǎng)頁(yè)設(shè)計(jì)中色彩對(duì)應(yīng)與分配。
3.2.1設(shè)計(jì)網(wǎng)頁(yè)時(shí),色彩搭配要注重層次性。在設(shè)計(jì)網(wǎng)頁(yè)時(shí),我們想要傳達(dá)給受眾的是多層的信息,而不是一層兩層,同時(shí),各個(gè)層次還是可以相互包容的,這種包容就體現(xiàn)了色彩搭配,而且不同色彩之間還有各種元素交織在一起,為了更好的傳達(dá)信息,也為了更生動(dòng)準(zhǔn)確的傳達(dá)信息,我們必須體現(xiàn)出色彩的層次性,這也是我們所要表達(dá)的設(shè)計(jì)理念。色彩的層次性關(guān)鍵是精,而不是多,更主要的是合理以及整潔,所謂的合理有序指的是色彩的合理分布以及有序搭配,我們所倡導(dǎo)的是前面是主色調(diào),隨后是單色調(diào);帶有宣傳目的色彩置于前面,而搭配意義的背景可以置于后面,這種搭配方式可以起到很好的效果,而且這種層次性還可以讓人們有一種煥然一新的感覺(jué),然后通過(guò)色彩的形式表達(dá)出來(lái),實(shí)現(xiàn)宣傳的目的。
3.2.2設(shè)計(jì)網(wǎng)頁(yè)時(shí),色彩搭配需要注重包容性。色彩的包容性,指的是各個(gè)色彩之間的搭配以及穿插,這種搭配以及穿插,可以把各種顏色融合在一起,從而表達(dá)出一種感情。網(wǎng)頁(yè)設(shè)計(jì)不同,色彩包容的顏色也不同,舉個(gè)例子,某些網(wǎng)頁(yè)是為了宣傳某種產(chǎn)品,在廣告中,利用的是反思維的方式來(lái)引導(dǎo)受眾,然后引出產(chǎn)品的形式以及構(gòu)成。這種網(wǎng)頁(yè)的主色調(diào)會(huì)置于一個(gè)關(guān)鍵的位置,在它的周?chē)约皟?nèi)部進(jìn)行科學(xué)的搭配。
3.3網(wǎng)頁(yè)設(shè)計(jì)中色彩的簡(jiǎn)單與復(fù)雜規(guī)劃。
3.3.1簡(jiǎn)單色彩形式的網(wǎng)頁(yè)設(shè)計(jì)。這種形式的網(wǎng)頁(yè)設(shè)計(jì),主要是為了體現(xiàn)出重點(diǎn),營(yíng)造出需要的氛圍,表達(dá)出一種情感。而這種情感也就是我們秉承的設(shè)計(jì)理念以及規(guī)劃。體現(xiàn)出重點(diǎn),也就是體現(xiàn)出網(wǎng)頁(yè)的內(nèi)容,這種情況通??梢圆捎靡曈X(jué)沖擊力較強(qiáng)的色彩來(lái)表達(dá),而在搭配背景顏色時(shí),要更加清淡,做一些簡(jiǎn)單的描繪以及勾勒,主要的目的還是體現(xiàn)出網(wǎng)頁(yè)的關(guān)鍵內(nèi)容。
二、什么樣的設(shè)計(jì)更適合web頁(yè)面
1.慎用較“重”的圖形元素這里圖形元素的輕重不是色調(diào)的輕重,是形式的輕和重,形式的輕重和內(nèi)容相呼應(yīng),網(wǎng)頁(yè)設(shè)計(jì)的一大趨勢(shì)就是越來(lái)越“輕”。除了對(duì)圓角效果和高光效果等效果的審美疲勞之外,網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)始意識(shí)到好的網(wǎng)頁(yè)設(shè)計(jì)更注重的是將網(wǎng)頁(yè)內(nèi)容與網(wǎng)頁(yè)形式結(jié)合起來(lái),而非形式的堆砌。所以設(shè)計(jì)師在應(yīng)用那些較“重”的圖形設(shè)計(jì)時(shí),一定要慎重思考,考慮到該圖形的應(yīng)用是否有必要以及該設(shè)計(jì)是否與受眾的氣質(zhì)相契合。
2.內(nèi)容和形式的分離對(duì)于一些比較強(qiáng)調(diào)視覺(jué)效果的特殊產(chǎn)品,也可以利用圖片格式和一些前端知識(shí)對(duì)網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行優(yōu)化,比如內(nèi)容和形式的分離。一些國(guó)外比較流行的設(shè)計(jì)風(fēng)格都是通過(guò)大幅的背景圖進(jìn)行氣氛的渲染和意境的傳達(dá)。這樣做的一個(gè)好處就是能把需要用到圖片的視覺(jué)元素進(jìn)行集中的壓縮優(yōu)化,同時(shí)因?yàn)榍岸藢?shí)現(xiàn)時(shí)一般會(huì)用相近的背景色先進(jìn)行填充,然后在逐步顯示背景圖,就不會(huì)因?yàn)榧虞d太慢而拖慢用戶的訪問(wèn)速度。
3.通過(guò)較小的視覺(jué)犧牲換取較大的性能提升有時(shí)候?yàn)榱颂嵘?yè)面的加載速度達(dá)到更好的用戶體驗(yàn),不得不對(duì)設(shè)計(jì)進(jìn)行優(yōu)化,這個(gè)時(shí)候就需要犧牲一部分視覺(jué)效果利用網(wǎng)頁(yè)設(shè)計(jì)師掌握的圖片格式知識(shí)更有目的性的優(yōu)化設(shè)計(jì)網(wǎng)頁(yè)。例如著名的淘寶“雙十一”大促銷(xiāo)活動(dòng)的宣傳網(wǎng)頁(yè)網(wǎng)頁(yè),由于雙十一期間,該網(wǎng)頁(yè)的訪問(wèn)量非常大并且為了配合商家的宣傳活動(dòng)需要在網(wǎng)頁(yè)上加載非常多的商品圖片,這時(shí)候就需要網(wǎng)頁(yè)設(shè)計(jì)師對(duì)雙十一的促銷(xiāo)活動(dòng)網(wǎng)頁(yè)的圖形進(jìn)行優(yōu)化以達(dá)到提升網(wǎng)頁(yè)性能的目的。網(wǎng)頁(yè)設(shè)計(jì)師可以去掉一些不太重要的高光、漸變和陰影效果,從而降低圖片文件的大小,提高圖片文件的加載速度。
4.圖形藝術(shù)的界面處理新穎的網(wǎng)頁(yè)圖形藝術(shù)設(shè)計(jì)可以牢牢地吸引住瀏覽者的注意力,設(shè)計(jì)具有創(chuàng)意、布局合理、設(shè)計(jì)規(guī)范的網(wǎng)頁(yè)也是提高網(wǎng)頁(yè)瀏覽量的的重中之重。一個(gè)圖形運(yùn)用恰當(dāng)、設(shè)計(jì)人性化的網(wǎng)頁(yè)可以讓瀏覽者對(duì)網(wǎng)站心生好感,極大地提高瀏覽者瀏覽該網(wǎng)頁(yè)的欲望。所以,網(wǎng)頁(yè)設(shè)計(jì)者要注重運(yùn)用一切科學(xué)技術(shù)手段來(lái)設(shè)計(jì)圖形藝術(shù),保證頁(yè)面效果給人以眼前一亮或是舒適的感覺(jué),讓圖形首先在視覺(jué)上給予客戶一種沖擊,給客戶一個(gè)良好的第一印象。
2選擇適合高職院校學(xué)生特點(diǎn)的教材
我院具有所有高職院校所共有的職業(yè)特點(diǎn),但又有著我們自身更為突出的特點(diǎn),要以“面向高職學(xué)生以應(yīng)用”為目的的思想為指導(dǎo),以能力為本位,適應(yīng)社會(huì)的需要,這就要求我們?cè)谶x擇教材時(shí)一定要準(zhǔn)確實(shí)用,我院幼兒教育系選用的是由清華大學(xué)出版社出版的第二版《Dreamweaver網(wǎng)頁(yè)制作實(shí)用教程》,本教材以“實(shí)例+知識(shí)點(diǎn)”的結(jié)構(gòu)構(gòu)建內(nèi)容,采用“任務(wù)驅(qū)動(dòng)教學(xué)法”讓學(xué)生邊做邊學(xué),并配以相應(yīng)的光盤(pán),生動(dòng)直觀,能夠讓學(xué)生在短時(shí)間內(nèi)迅速掌握所學(xué)知識(shí),是一本符合培養(yǎng)高職院校學(xué)生技能的好教材。
3遵循高職教學(xué)規(guī)律,加強(qiáng)和改進(jìn)教學(xué)工作
高職院校不同于其他高校的地方就是它是以實(shí)踐操作能力的培養(yǎng)為主導(dǎo),理論知識(shí)的學(xué)習(xí)為輔的教學(xué)指導(dǎo)方針進(jìn)行教學(xué),對(duì)于網(wǎng)頁(yè)設(shè)計(jì)與制作這門(mén)實(shí)踐性很強(qiáng)的課程來(lái)說(shuō)更是如此。想要教好這門(mén)課程,教師就必須在教學(xué)過(guò)程中進(jìn)行一系列的教學(xué)設(shè)計(jì)才能達(dá)到較好的效果,如何組織好這門(mén)課對(duì)于教學(xué)工作和效果尤為重要。
3.1網(wǎng)頁(yè)設(shè)計(jì)與制作課程的教學(xué)思路
首先,要上好第一堂課。教師要在課前做好充分的準(zhǔn)備工作,要利用第一堂課想辦法牢牢抓住學(xué)生的心,讓學(xué)生真正認(rèn)識(shí)到學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)課程的重要性和必要性,不能讓學(xué)生有沉悶和枯燥的感覺(jué)。所謂萬(wàn)事開(kāi)頭難,好的開(kāi)始必定能為之后的教學(xué)打下一個(gè)堅(jiān)實(shí)而良好的基礎(chǔ),但好的開(kāi)始并不意味著之后的教學(xué)就會(huì)一帆風(fēng)順的進(jìn)行,之后的教學(xué)務(wù)必要在多媒體課件上下工夫。多媒體課件是教學(xué)的靈魂,它不是文字、圖象、音頻、視頻和動(dòng)畫(huà)信息等各種元素的堆砌,而是它們的完美融合,利用它們使課堂變得更加生動(dòng)和精彩,從而盡可能的提高學(xué)生的學(xué)習(xí)興趣。
3.2網(wǎng)頁(yè)設(shè)計(jì)與制作課程的教學(xué)方法
用實(shí)例作為課堂切入點(diǎn),讓學(xué)生先看到實(shí)際效果,首先啟發(fā)學(xué)生思考用之前學(xué)到的知識(shí)和技巧能否做出此種效果,然后再由教師演示實(shí)例,在演示實(shí)例的過(guò)程中引出新的知識(shí)點(diǎn),將知識(shí)點(diǎn)融入到具體實(shí)例中。比如,在表格布局和內(nèi)嵌框架的教學(xué)模塊中,我們采用任務(wù)驅(qū)動(dòng)教學(xué)內(nèi)容。教學(xué)目標(biāo)是用布局表格設(shè)計(jì)網(wǎng)站主頁(yè),在演示此實(shí)例之前,讓學(xué)生先利用之前學(xué)習(xí)的表格知識(shí)設(shè)計(jì)此網(wǎng)站主頁(yè),目的一是鞏固前面章節(jié)所學(xué)知識(shí)和操作技巧,目的二是為接下來(lái)的布局表格設(shè)計(jì)做好充分的鋪墊,讓學(xué)生從內(nèi)心有所比較,哪種方法更適合用來(lái)設(shè)計(jì)網(wǎng)站主頁(yè),在教師演示實(shí)例過(guò)程中可以更好地抓住學(xué)生的注意力和調(diào)動(dòng)學(xué)習(xí)的積極性。演示案例制作一個(gè)介紹“學(xué)習(xí)教程”的站點(diǎn),主要包含六個(gè)模塊,包括“我的主頁(yè)”LOGO、“導(dǎo)航”、“網(wǎng)站信息”、“教程熱點(diǎn)”、“熱門(mén)下載”、“最新教程”、“最新軟件”等等。基本要求是在此實(shí)例中,添加“左上角三疊圖”和“最下面友情鏈接”,資料在網(wǎng)絡(luò)中獲取,合理設(shè)置網(wǎng)頁(yè)的背景以及圖片和文本的屬性,頁(yè)面美觀大方。較高要求是用此站點(diǎn)結(jié)構(gòu)制作一個(gè)介紹自己的個(gè)人站點(diǎn),要求除基本要求外,要有六處超級(jí)鏈接,且六處鏈接頁(yè)面要有一致的框架結(jié)構(gòu),站點(diǎn)中導(dǎo)航清晰,布局合理,配色美觀大方。
3.3教學(xué)過(guò)程中因時(shí)因人改進(jìn)教學(xué)手段和方法
高職具有較強(qiáng)的職業(yè)特色,而學(xué)生水平存在著個(gè)體差異,故不能進(jìn)行一成不變的教學(xué)方法。在課程進(jìn)行到中期的時(shí)候,學(xué)生對(duì)課程知識(shí)的索求和動(dòng)手實(shí)踐的欲望會(huì)漸漸減弱,他們的厭學(xué)情緒越來(lái)越重,或者總是出現(xiàn)眼高手低的現(xiàn)象。在這個(gè)階段學(xué)生已經(jīng)掌握了一定的網(wǎng)頁(yè)設(shè)計(jì)與制作的知識(shí)和技能,教師可以放手給學(xué)生,在授課過(guò)程中可以由主動(dòng)變?yōu)楸粍?dòng),讓學(xué)生由被動(dòng)變?yōu)橹鲃?dòng),譬如找某位學(xué)生來(lái)演示課堂實(shí)例,教師在旁指導(dǎo),把學(xué)生的注意力拉回課堂,以此來(lái)推動(dòng)教學(xué)進(jìn)度順利高效的向前進(jìn)行。
4明確教學(xué)目標(biāo),把握教學(xué)內(nèi)容
4.1選擇合適的網(wǎng)頁(yè)制作工具
目前最好的網(wǎng)頁(yè)制作與設(shè)計(jì)軟件工具是Dre-amweaver。它一直以來(lái)作為可視網(wǎng)頁(yè)編輯工作的標(biāo)準(zhǔn),在代碼編輯和應(yīng)用程序開(kāi)發(fā)方面的功能比較強(qiáng)大,更重要的是它是所見(jiàn)即所得類型的網(wǎng)頁(yè)設(shè)計(jì)軟件,對(duì)高職院校非計(jì)算機(jī)專業(yè)的學(xué)生來(lái)將非常適合。同時(shí),可以選擇Flash制作網(wǎng)頁(yè)中的動(dòng)畫(huà)素材,選擇photoshop處理和制作網(wǎng)頁(yè)中的圖片素材。
4.2要求學(xué)生能夠利用Dreamweaver設(shè)計(jì)各種網(wǎng)頁(yè),開(kāi)發(fā)初具規(guī)模的網(wǎng)站
我系課程方案中要求采用以Dreamweaver為主導(dǎo),逐步講解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí),初步了解HTML語(yǔ)言、簡(jiǎn)單認(rèn)識(shí)CSS網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)。這里需要特別說(shuō)明的一點(diǎn)是,首先,對(duì)HTML的教學(xué),有些人認(rèn)為對(duì)于高職非計(jì)算機(jī)專業(yè)的學(xué)生來(lái)說(shuō),不用學(xué)習(xí)太多語(yǔ)言,其實(shí)不然,HTML可以說(shuō)是網(wǎng)頁(yè)的靈魂,它不像C語(yǔ)言那樣生澀難懂,高職非計(jì)算機(jī)專業(yè)的學(xué)生完全有能力學(xué)會(huì)和掌握。其次,要掌握CSS的基本使用方法,CSS是英文單詞CascadingStyleSheets縮寫(xiě),翻譯為“層疊樣式表”。通俗講CSS是控制網(wǎng)頁(yè)中內(nèi)容的顏色、字體、文字大小和寬度、邊框、背景及浮動(dòng)等樣式來(lái)實(shí)現(xiàn)各式各樣、花樣百出的網(wǎng)頁(yè)樣式的統(tǒng)稱。由于允許同時(shí)控制多重頁(yè)面的樣式和布局,CSS可以稱得上網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的一個(gè)突破,作為網(wǎng)站開(kāi)發(fā)者、設(shè)計(jì)者能夠?yàn)槊總€(gè)HTML元素定義樣式,并將之應(yīng)用到希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新,只需簡(jiǎn)單地改變樣式,然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。
5考核方式
根據(jù)高職院校學(xué)生的實(shí)際能力水平和課程教學(xué)質(zhì)量基本要求,傳統(tǒng)理論考試已不適宜于網(wǎng)頁(yè)設(shè)計(jì)和制作課程,網(wǎng)頁(yè)設(shè)計(jì)和制作課程采用的是考查的考核形式。這種考核方式更適合網(wǎng)頁(yè)設(shè)計(jì)課程的特點(diǎn),更加強(qiáng)調(diào)學(xué)生學(xué)習(xí)的靈活多樣性。期末總評(píng)學(xué)習(xí)成績(jī)可由三部分組成:課程考核(平時(shí)到課考勤、課堂上的表現(xiàn)、課堂實(shí)訓(xùn)作業(yè)和)占30%、小結(jié)考核(階段測(cè)驗(yàn)作品)占30%和期末考核(期末綜合作品)占40%。這種考核方式注重實(shí)際操作能力和靈活應(yīng)用能力的培養(yǎng),可盡可能地調(diào)動(dòng)學(xué)生的學(xué)習(xí)興趣,發(fā)揮學(xué)生的學(xué)習(xí)積極性和主動(dòng)性。期末考試要求學(xué)生在教師規(guī)定的時(shí)間內(nèi)完成一整個(gè)網(wǎng)站項(xiàng)目的設(shè)計(jì)與制作,項(xiàng)目中包含一個(gè)學(xué)期中所學(xué)過(guò)的全部知識(shí)點(diǎn)和技能點(diǎn)?!毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程是當(dāng)下一種全新的教學(xué)內(nèi)容,教師在教學(xué)中應(yīng)將自己獨(dú)特的教學(xué)理念運(yùn)用于教學(xué)方法中,即讓學(xué)生輕松愉快地學(xué)會(huì)制作網(wǎng)頁(yè)的方法和技巧,又能在建立網(wǎng)站的過(guò)程中充分發(fā)揮自己的想象力和創(chuàng)造力,從而能培養(yǎng)更多適應(yīng)信息化社會(huì)的綜合型網(wǎng)頁(yè)設(shè)計(jì)人才。
6社會(huì)實(shí)踐
如果說(shuō)課堂考核方式是檢測(cè)和鞏固學(xué)生設(shè)計(jì)網(wǎng)頁(yè)能力最有效的方法,那么課外的實(shí)踐則是拓展和提高學(xué)生設(shè)計(jì)網(wǎng)站能力最有效的渠道。可以組織學(xué)生進(jìn)行學(xué)院網(wǎng)頁(yè)設(shè)計(jì)的比賽,也可以走出校園去參加社會(huì)團(tuán)體組織的設(shè)計(jì)大賽,或者進(jìn)行一段時(shí)間的頂崗實(shí)習(xí),這樣可以最大程度的提高他們對(duì)此課程的學(xué)習(xí)積極性,也可以讓學(xué)生找到差距,激勵(lì)他們更加努力,不斷完善和提高自己設(shè)計(jì)網(wǎng)頁(yè)的水平。