網(wǎng)站網(wǎng)店裝修論文

1、黃河水利職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)（論文）“和茶網(wǎng)”裝修、美化設(shè)計(jì)作者姓名：王旭濤（黃河水利職業(yè)技術(shù)學(xué)院，河南 開封 475003）摘要：正所謂三分長(zhǎng)相七分打扮，網(wǎng)店的頁面就像是附著了店主靈魂的銷售員，網(wǎng)店的美化如同實(shí)體店的裝修一樣，讓買家從視覺上和心理上感覺到店主對(duì)店鋪的用心，并且能夠最大限度的提升店鋪的形象，有利于網(wǎng)店品牌的形成，提高游覽量。增加顧客在你的網(wǎng)店停留時(shí)間，漂亮恰當(dāng)?shù)木W(wǎng)店裝修，給顧客帶來美感，顧客瀏覽網(wǎng)頁時(shí)不易疲勞，自然顧客會(huì)細(xì)心察看你的網(wǎng)頁。好的商品在誘人的裝飾品的襯托下，會(huì)使人更加不愿意拒絕,有利于促進(jìn)成交。關(guān)鍵詞：網(wǎng)店裝飾，茶葉商城，店鋪美化。一 課題分析以及準(zhǔn)備工作（一） 本

2、課題設(shè)計(jì)分析“和茶網(wǎng)”電子商務(wù)交易平臺(tái)是由福建和茶網(wǎng)絡(luò)科技有限公司搭建的各類優(yōu)質(zhì)茶產(chǎn)品專業(yè)交易平臺(tái)。整合全國(guó)各個(gè)名優(yōu)茶產(chǎn)地的優(yōu)質(zhì)茶產(chǎn)品，面向全球客戶進(jìn)行銷售。該平臺(tái)現(xiàn)已成為全球用戶購買茶葉、茶具等茶產(chǎn)品的首選平臺(tái)。隨著網(wǎng)絡(luò)市場(chǎng)的細(xì)化，出現(xiàn)了越來越多的非綜合類商城，如“京東商城”，“夢(mèng)芭莎服裝”，“凡客商城”等，和茶網(wǎng)擁有自己獨(dú)特的電子商城，但是作為“茶葉”的銷售者，商城沒有應(yīng)有的獨(dú)特性，這在競(jìng)爭(zhēng)激烈的電子商務(wù)時(shí)代是很不利的，所以需要自己獨(dú)特的風(fēng)格。在這個(gè)背景下，我決定在現(xiàn)有的“和茶網(wǎng)”基礎(chǔ)上對(duì)其裝飾、美化。（二） 使用軟件Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖

3、工具，可以更有效的進(jìn)行圖片編輯工作。EPSnap是一個(gè)完全免費(fèi)并且功能強(qiáng)大的綠色屏幕抓圖工具，使用簡(jiǎn)單方便。提供全屏捕捉、窗口或控件捕捉、擴(kuò)展窗口捕捉、區(qū)域捕捉、滾動(dòng)窗口捕捉、細(xì)小元素捕捉、超長(zhǎng)網(wǎng)頁捕捉、特殊捕捉（視頻或游戲）等強(qiáng)大功能，支持使用鼠標(biāo)手勢(shì)或快捷鍵啟動(dòng)捕捉，支持自動(dòng)保存，可選擇多種保存格式。二 對(duì)原網(wǎng)頁的分析無論裝飾、美化什么樣網(wǎng)頁，都必須要深刻分析了解原來網(wǎng)頁的優(yōu)缺點(diǎn)，只有這樣才能保證不偏離主題。（附原網(wǎng)頁，圖1） （原網(wǎng)頁全圖 圖1）（一）原網(wǎng)頁不足之處1.導(dǎo)航（原網(wǎng)頁導(dǎo)航圖2）首先“和茶網(wǎng)”是中國(guó)最大的出售茶葉的網(wǎng)站之一，本應(yīng)品牌齊全，內(nèi)容豐富。而本網(wǎng)站只將中國(guó)出名的茶葉放

4、到導(dǎo)航欄上面，沒有做到分類齊全，讓顧客瀏覽困難，不能有效的節(jié)省時(shí)間。并且茶小類與大類放置一塊，所以本模塊必須改正，本人查閱資料，該區(qū)域可以按照茶葉顏色的分類填寫，如“綠茶”“紅茶”等（附圖2）2.熱門分類 （原網(wǎng)頁提示圖3）在原網(wǎng)頁中，該模塊的功能不亞于導(dǎo)航欄，個(gè)人認(rèn)為這樣擺放不僅浪費(fèi)了寶貴的首頁上部空間，而且還沒有起到應(yīng)有的作用。因?yàn)閷?dǎo)航欄上面展示了中國(guó)幾大品牌的茶葉，而這個(gè)熱門分類里面雖然對(duì)茶有了一個(gè)分類，但是沒有和導(dǎo)航欄的內(nèi)容起到一個(gè)很好的反應(yīng)，反而倒是蓋過了導(dǎo)航欄的某些功能。所以本區(qū)域也必須改正，不過本模塊的解釋作用還是很好的一部分，有助于導(dǎo)購，可以留下來。個(gè)人建議：改而不去。（附圖3

5、）3.banner細(xì)節(jié)處理不當(dāng) （原網(wǎng)頁banner圖4）可以看出，在不同分辨率的電腦上面顯示的效果是不一樣的，所以在制作的時(shí)候必須注意細(xì)節(jié)，避免造成訪問者不便。（附圖4）4.首頁篇幅太長(zhǎng)?？梢钥闯龌舅行畔⒍伎梢栽谑醉撋厦娴玫?，每個(gè)區(qū)域的銷售信息都展示在了首頁，訪問者一般就不會(huì)再去瀏覽其他頁面，并且過長(zhǎng)的頁面還都是用圖片填充著，這樣會(huì)嚴(yán)重影響網(wǎng)頁打開速度，建議簡(jiǎn)短首頁面。（附圖1）5.和茶相關(guān)信息（原網(wǎng)頁信息圖5）這類信息出現(xiàn)在網(wǎng)上商城里面是十分不應(yīng)該的，并且還占據(jù)在首頁位置，所以直接去掉即可（附圖5）（二）原網(wǎng)頁可取之處1.會(huì)員登錄，購買物品信息欄。（原網(wǎng)頁會(huì)員信息圖6）無論是哪一個(gè)B2

6、C的網(wǎng)站，會(huì)員以及選中物品信息都不會(huì)占據(jù)太多的空間，在這一點(diǎn)本網(wǎng)站做法很值得提倡，所以這一塊不用較大改動(dòng)。（附圖6）2.搜索模塊以及熱門商品 （原網(wǎng)頁搜索圖7）這一模塊有助于訪問者快速找到自己需要的商品以及相關(guān)幫助，并且熱門提示環(huán)節(jié)更能吸引瀏覽者的眼光。本區(qū)域不用太大變更，如果整體需要的話，把本模塊更換位置即可，不能去掉。（附圖7）3.商品活動(dòng)模塊（原網(wǎng)頁商品圖8）這個(gè)地方時(shí)本網(wǎng)站亮點(diǎn)之一，這樣做的好處就是大大節(jié)省了寶貴的首頁空間，不僅新商品羅列清楚，還將活動(dòng)展示在訪問者面前。本區(qū)域也不需要更改，稍微修改一下UI即可。（附圖8）4.指引模塊（原網(wǎng)頁指引圖9）在原網(wǎng)頁中，此模塊與上面重復(fù)出現(xiàn)，但

7、是在裝飾的時(shí)侯，這個(gè)小模塊可以起到很大的幫助，可以發(fā)揮很大的作用。（附圖9）三 構(gòu)思設(shè)計(jì)及制定裝飾步驟（一）設(shè)計(jì)的指導(dǎo)思想1.取其精華，去其糟粕。這是本次設(shè)計(jì)中最重要的一點(diǎn)思想，在這個(gè)思想的指導(dǎo)下我仔細(xì)研究了原網(wǎng)站，將原網(wǎng)站的優(yōu)缺點(diǎn)分析透徹，一一羅列出來進(jìn)行改造與繼承。2.博覽群網(wǎng)，擇善采之。瀏覽眾多網(wǎng)站，將其他網(wǎng)站優(yōu)點(diǎn)一一采納，將這些優(yōu)點(diǎn)合理運(yùn)用在一塊，不能出現(xiàn)“買櫝還珠”的情況，花哨的界面脫離本體。3.貫穿主題，突出重點(diǎn)。內(nèi)容緊扣設(shè)計(jì)主題，茶知識(shí)、茶文化等全部圍繞主題走；顏色緊扣設(shè)計(jì)主題，合理運(yùn)用色彩搭配，設(shè)計(jì)簡(jiǎn)約大氣，突出品牌感。合理優(yōu)化UI，使界面美觀。做好貫穿主題帶來的結(jié)果就是突出重

8、點(diǎn)，將與其他網(wǎng)購網(wǎng)站區(qū)別開來。4.妥當(dāng)工具，按照計(jì)劃。預(yù)先善其事，必先利其器。依據(jù)開題報(bào)告的計(jì)劃，有計(jì)劃有順序的進(jìn)行設(shè)計(jì)。（二）美化網(wǎng)頁的步驟1.明確主題 緊扣所裝飾網(wǎng)站的主題，否則一切都是白做。網(wǎng)站主題就是網(wǎng)站所包含內(nèi)容的一個(gè)客觀體現(xiàn)。2.搜集材料 明確了網(wǎng)站的主題以后，就要圍繞主題搜集材料。當(dāng)然了，搜集的范圍要廣一點(diǎn)，不能太局限了。3.規(guī)劃網(wǎng)頁 對(duì)一個(gè)已有網(wǎng)站的裝飾，首先要了解原網(wǎng)站哪里不合理，哪里需要更改。然后需要了解相關(guān)類型成功的網(wǎng)站，選擇成功網(wǎng)站亮點(diǎn)，結(jié)合需要裝飾網(wǎng)站主題，統(tǒng)一規(guī)劃。一個(gè)網(wǎng)站裝飾設(shè)計(jì)得成功與否，很大程度上取決于上面三者的合理搭配。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、

9、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，只有在制作網(wǎng)頁之前把這些方面都考慮到了，制作出來的網(wǎng)頁才能有個(gè)性、有特色，具有吸引力。4.制作網(wǎng)頁 依據(jù)步驟對(duì)原來網(wǎng)站進(jìn)行裝飾，合理結(jié)合多個(gè)工具，結(jié)合開題報(bào)告分層次合理的進(jìn)行制作。 （三）裝飾網(wǎng)頁的要點(diǎn)1.頁面內(nèi)容翔實(shí)網(wǎng)絡(luò)是虛擬的，而網(wǎng)站往往體現(xiàn)的是現(xiàn)實(shí)世界中的一個(gè)實(shí)體，如公司或個(gè)人。如何把這些實(shí)體的元素通過虛擬的網(wǎng)絡(luò)空間來展現(xiàn)出來，并且引起瀏覽者的注意呢？只有那些極富特色、內(nèi)容翔實(shí)、瀏覽順暢、效果獨(dú)特的網(wǎng)頁才能使人駐足觀看，及使用、功能和服務(wù)容于網(wǎng)站之中，從而達(dá)到網(wǎng)站的特定目的。2.視覺效果新穎 網(wǎng)頁形象要不落俗套，要重點(diǎn)突出一個(gè)

10、“新”字，這個(gè)原則要求我們要結(jié)合自身的實(shí)際情況創(chuàng)作出一個(gè)獨(dú)特的網(wǎng)站。我們?cè)谠O(shè)計(jì)網(wǎng)頁時(shí)，要盡量做到“少”而“精”,又必須突出“新”。把內(nèi)容的獨(dú)特的元素，如名稱、標(biāo)志、標(biāo)準(zhǔn)字體、標(biāo)準(zhǔn)色等等。通過這些元素的合理應(yīng)用，來實(shí)現(xiàn)網(wǎng)站形象與個(gè)性的塑造提高視覺效果。3.欄目布局明確 一個(gè)網(wǎng)站有很多的頁面和主題、鏈接，這就需要注意其流暢的導(dǎo)向性。要做到使頁面合理流暢、環(huán)環(huán)相扣、可信安全，這幾點(diǎn)是一個(gè)優(yōu)秀網(wǎng)站的精神所在，也是吸引力的來源。強(qiáng)調(diào)要注意把網(wǎng)站內(nèi)容的層次性和空間性突出顯示出來，使人一眼就能看出你的網(wǎng)站重點(diǎn)突出，結(jié)構(gòu)分明。 4.特殊字體慎用 在photoshop中雖然可以使用任意字體，但是當(dāng)頁面上傳至網(wǎng)絡(luò)

11、空間中，文字是非圖片形式可編輯的時(shí)候，你不能預(yù)測(cè)你的訪問者在他們的計(jì)算機(jī)上將看到什么。也許在你的計(jì)算機(jī)里看起來相當(dāng)好的網(wǎng)頁，在另一個(gè)不同的平臺(tái)上看起來可能就會(huì)變形走樣。所以要避免你所選擇的字體在訪問者的計(jì)算機(jī)上不能顯示，特殊字體要慎用。四 美化效果及構(gòu)思實(shí)現(xiàn)（一）最終效果最終效果圖基調(diào)緊扣原網(wǎng)站“茶”的主題，將主色調(diào)設(shè)計(jì)成“綠、淡綠”色，部分區(qū)域會(huì)是葉黃色，一些促銷區(qū)域使用醒目的紅色。為了使瀏覽者看著舒服，商品部分保持了白色，米黃色。功能模塊部分按照計(jì)劃都擺放到了指定位置，并在制作的過程中增添了許多新奇小飾品。最終效果圖如下。 （最終效果圖10）（二）各功能模塊實(shí)現(xiàn)1.會(huì)員模塊（效果圖會(huì)員11

12、）本網(wǎng)站是購物類型的網(wǎng)站，會(huì)員功能沒有必要占據(jù)較大的篇幅，只需要簡(jiǎn)單但是功能必須要強(qiáng)大。我將會(huì)員板塊放到了網(wǎng)頁最頂端，這樣既節(jié)省空間，又能起到一目了然的作用。新網(wǎng)葉主題是綠色，為了起到醒目的作用，我將字體設(shè)為黑色。文中彩色CD是網(wǎng)站中自動(dòng)播放音樂的，模塊中購物車是下載，其余部分均由個(gè)人完成，其中豎線“丨”是搜狗打字法輸入。2.導(dǎo)航模塊（效果圖導(dǎo)航圖12）（1）導(dǎo)航欄分為10個(gè)子欄目，分別是首頁、綠茶、紅茶、白茶、黑茶、花茶、烏龍茶、特色茶、精品茶具、進(jìn)口紅酒。（2）世界茶種主要分為這幾大類，之所以改變了原網(wǎng)站將中國(guó)知名茶品放到了這個(gè)地方，是因?yàn)檫@樣做的好處就是層次明了，結(jié)構(gòu)清晰。避免了給人重復(fù)

13、雷同的感覺（3）版模塊特效使鼠標(biāo)放在上面會(huì)稍微改變形狀，做法是：建立新圖層a，使其顏色與導(dǎo)航欄下部一樣。其他鼠標(biāo)沒有觸及的到地方均是圖層b。兩種圖層都經(jīng)過蒙版化處理，然后再建立新圖層輸入導(dǎo)航標(biāo)題c，就完成了導(dǎo)航上面的部分。下面幾點(diǎn)就是利用“層”比較簡(jiǎn)單就不一一敘述。3.滾動(dòng)圖片模塊（1）展示部分本模塊主要使用與各大品牌的商品促銷及重大活動(dòng)，共5張滾動(dòng)圖片。這個(gè)模塊有效地起到提示作用，能讓訪問者率先點(diǎn)擊該圖片進(jìn)入相關(guān)活動(dòng)專區(qū)，另外在一些重大活動(dòng)的時(shí)候還可以更換成活動(dòng)的內(nèi)容（限于篇幅僅舉例一張圖片），本圖片從原網(wǎng)站截圖獲得。 （效果商品圖13）（2）提示部分除此之外本模塊還有一個(gè)小提示板塊，該模塊

14、主要功能是對(duì)訪問者進(jìn)行詳解，解釋“導(dǎo)航”模塊里面出現(xiàn)的幾種茶葉，能夠讓顧客能準(zhǔn)確的找到商品，節(jié)省顧客時(shí)間。（效果導(dǎo)購圖14）做法如下：首先建立圖層a，選取顏色(R241,G241，B241)，小三角部分為網(wǎng)上素材，右上角紅色區(qū)域利用b多次處理可得到。漢字均為輸入c，右邊“更多”字樣系原網(wǎng)頁所截取。4.商品銷售模塊去除了原網(wǎng)站將商品集中擺放在首頁的缺點(diǎn)，并結(jié)合了原網(wǎng)站在商品區(qū)域的可取之處。本模塊改動(dòng)成分頁式，只將新產(chǎn)品，熱銷產(chǎn)品，特價(jià)產(chǎn)品，清倉產(chǎn)品放到醒目位置，這些商品附帶鏈接，顧客點(diǎn)擊之后會(huì)自動(dòng)進(jìn)入到相關(guān)區(qū)域。這樣不僅可以節(jié)省訪問速度，還可以優(yōu)化網(wǎng)站，以避免出現(xiàn)人多時(shí)打不開頁面的情況。 （效果

15、商品圖15）（效果商品圖16）本模塊中用圖均由原網(wǎng)頁截取獲得，其中鼠標(biāo)特效部分與上面一樣，首先建立層a，中間用到b、c、d等知識(shí)。5.幫助模塊（效果幫助圖17）作為網(wǎng)上商城，除了商品不能使顧客滿意而導(dǎo)致銷量不高的重要原因外，顧客不知道怎么操作是銷量不高的首要原因。所以本模塊對(duì)網(wǎng)購新手有很大的幫助作用，本模塊還有客服，可以更好的提供幫助。本模塊除了色調(diào)不同之外，其他的基本與原網(wǎng)站相同。圖中漢字經(jīng)過處理，過程如下：建立文字圖層a，對(duì)文字使用“投影”先關(guān)知識(shí)，具體數(shù)據(jù)b，既可以得到圖中效果。四 美化效果評(píng)述看到最終效果圖的那一刻，自己還是挺自豪的。辛苦了那么多天，經(jīng)過多次與老師、同學(xué)的交流，刪改多次

16、最終有了現(xiàn)在的成果，期間犯了很多錯(cuò)誤當(dāng)然同樣有很多收獲，下面是我設(shè)計(jì)期間所犯錯(cuò)誤的總結(jié)與收獲。（一）總結(jié)1.了解原網(wǎng)站不管去改變什么事情，都需要對(duì)原來的事物了解的非常清楚，否則盲目開展活動(dòng)，只會(huì)南轅北轍。對(duì)于本次課題剛開始我就犯了這樣的錯(cuò)誤，后來通過與指導(dǎo)老師的交流，我改正了這個(gè)錯(cuò)誤。在深刻了解原網(wǎng)站的基礎(chǔ)上我得知我需要一個(gè)什么樣的效果，以及在這個(gè)目標(biāo)下我尋找類似網(wǎng)站的優(yōu)點(diǎn)，以及所需要的素材。2.尋找材料尋找材料的時(shí)候不能把眼光放得太窄，剛開始我只把眼光放到“茶葉”這個(gè)行業(yè)的網(wǎng)站中，但是幾天我發(fā)現(xiàn)根本就沒有找到用處很大的信息，后來我研究了“夢(mèng)芭莎”“凡客”等的網(wǎng)站，并從中得到啟發(fā)。3.合理排版

17、首頁上面需要什么樣的信息，什么信息不能出現(xiàn)在首頁上面。這個(gè)問題原來沒有考慮過，到著手做效果圖的時(shí)候才發(fā)現(xiàn)這是個(gè)大問題。合理的排版會(huì)讓人產(chǎn)生清爽的感覺，可以達(dá)到快速瀏覽的效果。但缺乏合理結(jié)構(gòu)的首頁會(huì)使瀏覽非常困難，會(huì)導(dǎo)致流量的下降。這個(gè)過程中我訪問了大量的B2C網(wǎng)站，力求做到最大優(yōu)化。 4.重點(diǎn)突出在數(shù)以千計(jì)萬計(jì)的網(wǎng)站中怎樣才能讓訪問者記住你的網(wǎng)站？網(wǎng)站的個(gè)性是必不可缺少的元素。真正的個(gè)性是網(wǎng)站主題的突出，本網(wǎng)站是“茶葉”，必須依據(jù)這個(gè)特點(diǎn)將主題發(fā)揮的淋漓盡致，切記出現(xiàn)服裝、電器、綜合一個(gè)基調(diào)。5.注重細(xì)節(jié)在用PS設(shè)計(jì)的過程中，不可避免出現(xiàn)某些小瑕疵，但是如果不注意的話，會(huì)讓訪問者對(duì)網(wǎng)站產(chǎn)生非常

18、不好的印象，所以必須仔細(xì)觀察，做到完美。6.換位思考 在制作的過程中，我經(jīng)常會(huì)讓身邊的同學(xué)觀察效果圖，力求做到從同訪問者的眼中觀察網(wǎng)站。自己作為設(shè)計(jì)者，我自己也經(jīng)常站在旁觀者的角度出發(fā)，揣摩該網(wǎng)站。從瀏覽者的角度思考網(wǎng)頁的所有元素，力求最大限度的改良網(wǎng)頁元素以適合瀏覽。（二）收獲1.在整個(gè)過程中缺乏與老師、同學(xué)的交流，造成否寫環(huán)節(jié)脫軌2.上課的時(shí)候?qū)W的知識(shí)把握不牢，運(yùn)用的時(shí)候效率不高。3.相關(guān)知識(shí)掌握不夠，在入手的時(shí)候很吃力。秉著用以致學(xué)的態(tài)度，自己查閱資料然后解決所遇到的問題。4.缺乏獨(dú)特的思維，很難設(shè)計(jì)出出眾的作品，只有“博覽群書，閱網(wǎng)無數(shù)”才能有靈感。一直做到電腦前面是行不通的。在過程中不斷瀏覽網(wǎng)頁，不斷借鑒模板才能集眾人之長(zhǎng)。5.在設(shè)計(jì)過程中需要用到很多老師沒有教過的東西，自己只能百度查詢，或看教程。在過程中不知不覺感覺技術(shù)與操作熟練度慢慢提高。五 結(jié)束語在結(jié)束的這一刻首先要感謝我們的指導(dǎo)者田豐老師。在整個(gè)創(chuàng)作構(gòu)思、設(shè)計(jì)、實(shí)施的過程中，由于種種