2/20“和茶網”裝修、美化設計作者姓名：王旭濤（黃河水利職業(yè)技術學院，河南開封475003）摘要：正所謂三分長相七分打扮，網店的頁面就像是附著了店主靈魂的銷售員，網店的美化如同實體店的裝修一樣，讓買家從視覺上和心理上感覺到店主對店鋪的用心，并且能夠最大限度的提升店鋪的形象，有利于網店品牌的形成，提高游覽量。增加顧客在你的網店停留時間，漂亮恰當?shù)木W店裝修，給顧客帶來美感，顧客瀏覽網頁時不易疲勞，自然顧客會細心察看你的網頁。好的商品在誘人的裝飾品的襯托下，會使人更加不愿意拒絕,有利于促進成交。關鍵詞：網店裝飾，茶葉商城，店鋪美化。一課題分析以及準備工作（一）本課題設計分析“和茶網”電子商務交易平臺是由福建和茶網絡科技有限公司搭建的各類優(yōu)質茶產品專業(yè)交易平臺。整合全國各個名優(yōu)茶產地的優(yōu)質茶產品，面向全球客戶進行銷售。該平臺現(xiàn)已成為全球用戶購買茶葉、茶具等茶產品的首選平臺。隨著網絡市場的細化，出現(xiàn)了越來越多的非綜合類商城，如“京東商城”，“夢芭莎服裝”，“凡客商城”等，和茶網擁有自己獨特的電子商城，但是作為“茶葉”的銷售者，商城沒有應有的獨特性，這在競爭激烈的電子商務時代是很不利的，所以需要自己獨特的風格。在這個背景下，我決定在現(xiàn)有的“和茶網”基礎上對其裝飾、美化。（二）使用軟件Photoshop主要處理以像素所構成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進行圖片編輯工作。EPSnap是一個完全免費并且功能強大的綠色屏幕抓圖工具，使用簡單方便。提供全屏捕捉、窗口或控件捕捉、擴展窗口捕捉、區(qū)域捕捉、滾動窗口捕捉、細小元素捕捉、超長網頁捕捉、特殊捕捉（視頻或游戲）等強大功能，支持使用鼠標手勢或快捷鍵啟動捕捉，支持自動保存，可選擇多種保存格式。二對原網頁的分析無論裝飾、美化什么樣網頁，都必須要深刻分析了解原來網頁的優(yōu)缺點，只有這樣才能保證不偏離主題。（附原網頁，圖1）（原網頁全圖圖1）（一）原網頁不足之處1.導航（原網頁導航圖2）首先“和茶網”是中國最大的出售茶葉的網站之一，本應品牌齊全，內容豐富。而本網站只將中國出名的茶葉放到導航欄上面，沒有做到分類齊全，讓顧客瀏覽困難，不能有效的節(jié)省時間。并且茶小類與大類放置一塊，所以本模塊必須改正，本人查閱資料，該區(qū)域可以按照茶葉顏色的分類填寫，如“綠茶”“紅茶”等（附圖2）2.熱門分類（原網頁提示圖3）在原網頁中，該模塊的功能不亞于導航欄，個人認為這樣擺放不僅浪費了寶貴的首頁上部空間，而且還沒有起到應有的作用。因為導航欄上面展示了中國幾大品牌的茶葉，而這個熱門分類里面雖然對茶有了一個分類，但是沒有和導航欄的內容起到一個很好的反應，反而倒是蓋過了導航欄的某些功能。所以本區(qū)域也必須改正，不過本模塊的解釋作用還是很好的一部分，有助于導購，可以留下來。個人建議：改而不去。（附圖3）3.banner細節(jié)處理不當（原網頁banner圖4）可以看出，在不同分辨率的電腦上面顯示的效果是不一樣的，所以在制作的時候必須注意細節(jié)，避免造成訪問者不便。（附圖4）4.首頁篇幅太長?？梢钥闯龌舅行畔⒍伎梢栽谑醉撋厦娴玫?，每個區(qū)域的銷售信息都展示在了首頁，訪問者一般就不會再去瀏覽其他頁面，并且過長的頁面還都是用圖片填充著，這樣會嚴重影響網頁打開速度，建議簡短首頁面。（附圖1）5.和茶相關信息（原網頁信息圖5）這類信息出現(xiàn)在網上商城里面是十分不應該的，并且還占據(jù)在首頁位置，所以直接去掉即可（附圖5）（二）原網頁可取之處1.會員登錄，購買物品信息欄。（原網頁會員信息圖6）無論是哪一個B2C的網站，會員以及選中物品信息都不會占據(jù)太多的空間，在這一點本網站做法很值得提倡，所以這一塊不用較大改動。（附圖6）2.搜索模塊以及熱門商品（原網頁搜索圖7）這一模塊有助于訪問者快速找到自己需要的商品以及相關幫助，并且熱門提示環(huán)節(jié)更能吸引瀏覽者的眼光。本區(qū)域不用太大變更，如果整體需要的話，把本模塊更換位置即可，不能去掉。（附圖7）3.商品活動模塊（原網頁商品圖8）這個地方時本網站亮點之一，這樣做的好處就是大大節(jié)省了寶貴的首頁空間，不僅新商品羅列清楚，還將活動展示在訪問者面前。本區(qū)域也不需要更改，稍微修改一下UI即可。（附圖8）4.指引模塊（原網頁指引圖9）在原網頁中，此模塊與上面重復出現(xiàn)，但是在裝飾的時侯，這個小模塊可以起到很大的幫助，可以發(fā)揮很大的作用。（附圖9）三構思設計及制定裝飾步驟（一）設計的指導思想1.取其精華，去其糟粕。這是本次設計中最重要的一點思想，在這個思想的指導下我仔細研究了原網站，將原網站的優(yōu)缺點分析透徹，一一羅列出來進行改造與繼承。2.博覽群網，擇善采之。瀏覽眾多網站，將其他網站優(yōu)點一一采納，將這些優(yōu)點合理運用在一塊，不能出現(xiàn)“買櫝還珠”的情況，花哨的界面脫離本體。3.貫穿主題，突出重點。內容緊扣設計主題，茶知識、茶文化等全部圍繞主題走；顏色緊扣設計主題，合理運用色彩搭配，設計簡約大氣，突出品牌感。合理優(yōu)化UI，使界面美觀。做好貫穿主題帶來的結果就是突出重點，將與其他網購網站區(qū)別開來。4.妥當工具，按照計劃。預先善其事，必先利其器。依據(jù)開題報告的計劃，有計劃有順序的進行設計。（二）美化網頁的步驟1.明確主題緊扣所裝飾網站的主題，否則一切都是白做。網站主題就是網站所包含內容的一個客觀體現(xiàn)。2.搜集材料明確了網站的主題以后，就要圍繞主題搜集材料。當然了，搜集的范圍要廣一點，不能太局限了。3.規(guī)劃網頁對一個已有網站的裝飾，首先要了解原網站哪里不合理，哪里需要更改。然后需要了解相關類型成功的網站，選擇成功網站亮點，結合需要裝飾網站主題，統(tǒng)一規(guī)劃。一個網站裝飾設計得成功與否，很大程度上取決于上面三者的合理搭配。網站規(guī)劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，只有在制作網頁之前把這些方面都考慮到了，制作出來的網頁才能有個性、有特色，具有吸引力。4.制作網頁依據(jù)步驟對原來網站進行裝飾，合理結合多個工具，結合開題報告分層次合理的進行制作。（三）裝飾網頁的要點1.頁面內容翔實網絡是虛擬的，而網站往往體現(xiàn)的是現(xiàn)實世界中的一個實體，如公司或個人。如何把這些實體的元素通過虛擬的網絡空間來展現(xiàn)出來，并且引起瀏覽者的注意呢？只有那些極富特色、內容翔實、瀏覽順暢、效果獨特的網頁才能使人駐足觀看，及使用、功能和服務容于網站之中，從而達到網站的特定目的。2.視覺效果新穎網頁形象要不落俗套，要重點突出一個“新”字，這個原則要求我們要結合自身的實際情況創(chuàng)作出一個獨特的網站。我們在設計網頁時，要盡量做到“少”而“精”,又必須突出“新”。把內容的獨特的元素，如名稱、標志、標準字體、標準色等等。通過這些元素的合理應用，來實現(xiàn)網站形象與個性的塑造提高視覺效果。3.欄目布局明確一個網站有很多的頁面和主題、鏈接，這就需要注意其流暢的導向性。要做到使頁面合理流暢、環(huán)環(huán)相扣、可信安全，這幾點是一個優(yōu)秀網站的精神所在，也是吸引力的來源。強調要注意把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。4.特殊字體慎用在photoshop中雖然可以使用任意字體，但是當頁面上傳至網絡空間中，文字是非圖片形式可編輯的時候，你不能預測你的訪問者在他們的計算機上將看到什么。也許在你的計算機里看起來相當好的網頁，在另一個不同的平臺上看起來可能就會變形走樣。所以要避免你所選擇的字體在訪問者的計算機上不能顯示，特殊字體要慎用。四美化效果及構思實現(xiàn)（一）最終效果最終效果圖基調緊扣原網站“茶”的主題，將主色調設計成“綠、淡綠”色，部分區(qū)域會是葉黃色，一些促銷區(qū)域使用醒目的紅色。為了使瀏覽者看著舒服，商品部分保持了白色，米黃色。功能模塊部分按照計劃都擺放到了指定位置，并在制作的過程中增添了許多新奇小飾品。最終效果圖如下。（最終效果圖10）（二）各功能模塊實現(xiàn)1.會員模塊（效果圖會員11）本網站是購物類型的網站，會員功能沒有必要占據(jù)較大的篇幅，只需要簡單但是功能必須要強大。我將會員板塊放到了網頁最頂端，這樣既節(jié)省空間，又能起到一目了然的作用。新網葉主題是綠色，為了起到醒目的作用，我將字體設為黑色。文中彩色CD是網站中自動播放音樂的，模塊中購物車是下載，其余部分均由個人完成，其中豎線“丨”是搜狗打字法輸入。2.導航模塊（效果圖導航圖12）（1）導航欄分為10個子欄目，分別是首頁、綠茶、紅茶、白茶、黑茶、花茶、烏龍茶、特色茶、精品茶具、進口紅酒。（2）世界茶種主要分為這幾大類，之所以改變了原網站將中國知名茶品放到了這個地方，是因為這樣做的好處就是層次明了，結構清晰。避免了給人重復雷同的感覺（3）版模塊特效使鼠標放在上面會稍微改變形狀，做法是：建立新圖層a，使其顏色與導航欄下部一樣。其他鼠標沒有觸及的到地方均是圖層b。兩種圖層都經過蒙版化處理，然后再建立新圖層輸入導航標題c，就完成了導航上面的部分。下面幾點就是利用“層”比較簡單就不一一敘述。3.滾動圖片模塊（1）展示部分本模塊主要使用與各大品牌的商品促銷及重大活動，共5張滾動圖片。這個模塊有效地起到提示作用，能讓訪問者率先點擊該圖片進入相關活動專區(qū)，另外在一些重大活動的時候還可以更換成活動的內容（限于篇幅僅舉例一張圖片），本圖片從原網站截圖獲得。（效果商品圖13）（2）提示部分除此之外本模塊還有一個小提示板塊，該模塊主要功能是對訪問者進行詳解，解釋“導航”模塊里面出現(xiàn)的幾種茶葉，能夠讓顧客能準確的找到商品，節(jié)省顧客時間。（效果導購圖14）做法如下：首先建立圖層a，選取顏色(R241,G241，B241)，小三角部分為網上素材，右上角紅色區(qū)域利用b多次處理可得到。漢字均為輸入c，右邊“更多”字樣系原網頁所截取。4.商品銷售模塊去除了原網站將商品集中擺放在首頁的缺點，并結合了原網站在商品區(qū)域的可取之處。本模塊改動成分頁式，只將新產品，熱銷產品，特價產品，清倉產品放到醒目位置，這些商品附帶鏈接，顧客點擊之后會自動進入到相關區(qū)域。這樣不僅可以節(jié)省訪問速度，還可以優(yōu)化網站，以避免出現(xiàn)人多時打不開頁面的情況。（效果商品圖15）（效果商品圖16）本模塊中用圖均由原網頁截取獲得，其中鼠標特效部分與上面一樣，首先建立層a，中間用到b、c、d等知識。5.幫助模塊（效果幫助圖17）作為網上商城，除了商品不能使顧客滿意而導致銷量不高的重要原因外，顧客不知道怎么操作是銷量不高的首要原因。所以本模塊對網購新手有很大的幫助作用，本模塊還有客服，可以更好的提供幫助。本模塊除了色調不同之外，其他的基本與原網站相同。圖中漢字經過處理，過程如下：建立文字圖層a，對文字使用“投影”先關知識，具體數(shù)據(jù)b，既可以得到圖中效果。四美化效果評述看到最終效果圖的那一刻，自己還是挺自豪的。辛苦了那么多天，經過多次與老師、同學的交流，刪改多次最終有了現(xiàn)在的成果，期間犯了很多錯誤當然同樣有很多收獲，下面是我設計期間所犯錯誤的總結與收獲。（一）總結1.了解原網站不管去改變什么事情，都需要對原來的事物了解的非常清楚，否則盲目開展活動，只會南轅北轍。對于本次課題剛開始我就犯了這樣的錯誤，后來通過與指導老師的交流，我改正了這個錯誤。在深刻了解原網站的基礎上我得知我需要一個什么樣的效果，以及在這個目標下我尋找類似網站的優(yōu)點，以及所需要的素材。2.尋找材料尋找材料的時候不能把眼光放得太窄，剛開始我只把眼光放到“茶葉”這個行業(yè)的網站中，但是幾天我發(fā)現(xiàn)根本就沒有找到用處很大的信息，后來我研究了“夢芭莎”“凡客”等的網站，并從中得到啟發(fā)。3.合理排版首頁上面需要什么樣的信息，什么信息不能出現(xiàn)在首頁上面。這個問題原來沒有考慮過，到著手做效果圖的時候才發(fā)現(xiàn)這是個大問題。合理的排版會讓人產生清爽的感覺，可以達到快速瀏覽的效果。但缺乏合理結構的首頁會使瀏覽非常困難，會導致流量的下降。這個過程中我訪問了大量的B2C網站，力求做到最大優(yōu)化。4.重點突出在數(shù)以千計萬計的網站中怎樣才能讓訪問者記住你的網站？網站的個性是必不可缺少的元素。真正的個性是網站主題的突出，本網站是“茶葉”，必須依據(jù)這個特點將主題發(fā)揮的淋漓盡致，切記出現(xiàn)服裝、電器、綜合一個基調。5.注重細節(jié)在用PS設計的過程中，不可避免出現(xiàn)某些小瑕疵，但是如果不注意的話，會讓訪問者對網站產生非常不好的印象，所以必須仔細觀察，做到完美。6.換位思考在制作的過程中，我經常會讓身邊的同學觀察效果圖，力求做到從同訪問者的眼中觀察網站。自己作為設計者，我自己也經常站在旁觀者的角度出發(fā)，揣摩該網站。從瀏覽者的角度思考網頁的所有元素，力求最大限度的改良網頁元素以適合瀏覽。（二）收獲1.在整個過程中缺乏與老師、同學的交流，造成否寫環(huán)節(jié)脫軌2.上課的時候學的知識把握不牢，運用的時候