時尚淘導(dǎo)購網(wǎng)站的設(shè)計與實現(xiàn)畢業(yè)設(shè)計

第1章網(wǎng)站設(shè)計背景1.1企業(yè)網(wǎng)站設(shè)計目的隨著科技的快速發(fā)展和網(wǎng)絡(luò)的廣泛普及，網(wǎng)上購物已經(jīng)成為了時代的主流，各種網(wǎng)上商城層出不窮，商品更是五花八門。豐富多樣、品種繁多的商品，網(wǎng)絡(luò)購物的風(fēng)險使得消費者無所適從。在這種現(xiàn)狀下，導(dǎo)購網(wǎng)站應(yīng)運而生，導(dǎo)購網(wǎng)站通過篩選各大網(wǎng)購平臺在售貨品，將質(zhì)優(yōu)價廉的商品，推薦給消費者，為廣大網(wǎng)購者提供了一個快速、便捷、高效的購物方式。導(dǎo)購類網(wǎng)站通過商品具體數(shù)據(jù)、商品交易數(shù)據(jù)、消費者購買行為、以及其他專業(yè)可靠的數(shù)據(jù)，準確的挖掘出消費者所需要的商品，并對商品進行合理的組織，讓消費者能找到所需的商品，從而購買到物美價廉的東西。本網(wǎng)站是以時尚潮流服飾為主題的導(dǎo)購網(wǎng)站，面向熱衷時尚的女性網(wǎng)購消費者，采用時尚搭配導(dǎo)購的方式向她們推薦時尚服裝、鞋子、包包等商品。本網(wǎng)站建設(shè)的主要目的是旨在為時尚女性網(wǎng)購消費者提供豐富多樣、時尚前衛(wèi)且物美價廉的商品。1.2網(wǎng)站建設(shè)需求分析"十二五"以來，我國電子商務(wù)行業(yè)發(fā)展迅猛，產(chǎn)業(yè)規(guī)模迅速擴大，電子商務(wù)信息、交易和技術(shù)等服務(wù)企業(yè)不斷涌現(xiàn)。2011年我國電子商務(wù)交易總額達到5.88萬億元，其中中小企業(yè)電子商務(wù)交易額達到3.21萬億元。2012年中國電子商務(wù)市場交易額突破8萬億元，同比增長31.7%,其中跨境電子商務(wù)成為新的發(fā)展熱點。2013年中國電子商務(wù)市場交易規(guī)模達到9.9萬億元，同比增長21.3%。淘寶雙十一自從2009年開始，就伴隨著中國電子商務(wù)的蓬勃發(fā)展而成為了全國乃至全世界的焦點。如今，雙十一也早已經(jīng)被公認是中國電子商務(wù)行業(yè)的年度盛事。下圖1-1是近年來雙十一交易額增長圖，2013年交易額到達350億，2014年再創(chuàng)高峰，總交易額到達600億。圖1-1雙十一交易數(shù)據(jù)圖隨著網(wǎng)購的普及，網(wǎng)購的劣勢也隨之而出，2014年接到電子商務(wù)投訴50180起，其中淘寶第一，購物的安全性和質(zhì)量問題成了網(wǎng)購的關(guān)鍵。在這種現(xiàn)狀下，導(dǎo)購網(wǎng)站應(yīng)運而生，導(dǎo)購網(wǎng)站通過篩選各大網(wǎng)購平臺在售貨品，將質(zhì)優(yōu)價廉的商品，推薦給消費者，為廣大網(wǎng)購者提供了一個快速、便捷、高效的購物方式。時尚淘導(dǎo)購網(wǎng)站是一個推薦女性時尚單品搭配的網(wǎng)站，精選款式美、質(zhì)量優(yōu)、價格合理的衣服、鞋子、包包和配飾等潮流商品，讓萬千女性在這里享受購物樂趣，發(fā)現(xiàn)時尚精品。時尚淘還設(shè)置了搭配推薦欄目，提供時下流行服飾搭配，瀏覽者可以根據(jù)網(wǎng)站搭配推介購買服飾套裝，提升個人衣著品位。1.3網(wǎng)站整體結(jié)構(gòu)網(wǎng)站結(jié)構(gòu)對網(wǎng)站的搜索引擎友好性及用戶體驗有著非常重要的影響。網(wǎng)站結(jié)構(gòu)是衡量網(wǎng)站用戶體驗好壞的重要指標之一，清晰的網(wǎng)站結(jié)構(gòu)可以幫助用戶快速獲取所需信息。網(wǎng)站的超鏈接是一個較復(fù)雜的結(jié)構(gòu)，雖說它建立在目錄結(jié)構(gòu)之上，但是它可以跨越目錄，所采用的拓撲結(jié)構(gòu)有兩種基本形式：星型鏈接結(jié)構(gòu)和樹型鏈接結(jié)構(gòu)。較好的結(jié)構(gòu)設(shè)計是在網(wǎng)站首頁與一級頁面之間采用星型鏈接結(jié)構(gòu)，在一級頁面與下一級頁面之間采用樹型鏈接結(jié)構(gòu)。本網(wǎng)站依據(jù)欄目策劃，規(guī)劃網(wǎng)站的總體結(jié)構(gòu)為：時尚淘時尚淘首頁每日搭配衣服鞋子包包配飾羽絨服毛衣打底褲小腳褲長靴短靴雪地靴厚底鞋雙肩包單肩包手拿包錢包圍巾帽子發(fā)箍襪子登陸注冊圖1-2網(wǎng)站結(jié)構(gòu)圖

第2章前期準備2.1素材收集整理首先確定網(wǎng)站定位、網(wǎng)站風(fēng)格及網(wǎng)站結(jié)構(gòu)，明確好這些后，接下來便是收集網(wǎng)站設(shè)計所需的素材。本網(wǎng)站的大部分產(chǎn)品原始圖片是從網(wǎng)絡(luò)收集的，后采用Photoshop圖像處理軟件對圖片進行加工處理，并將處理好的產(chǎn)品圖片加以重命名，使其保存在images文件夾內(nèi)，方便網(wǎng)站設(shè)計實現(xiàn)時使用。本網(wǎng)站圖片素材主要采用了Photoshop圖像處理軟件的仿制圖章工具，比如：網(wǎng)站首頁中的輪播圖片，先用仿制圖章工具將圖片上的文字覆蓋，然后寫上新的文字，組合成網(wǎng)站的圖片。圖2-1首頁輪播圖本網(wǎng)站Flash主要是將圖片用Photoshop軟件進行處理，然后用Flash軟件將圖片做成輪播效果，生成.swf格式，最后插入到網(wǎng)站當中，使網(wǎng)站產(chǎn)生動態(tài)效果，更加生動。圖2-2Flash素材2.2LOGO設(shè)計每個網(wǎng)站都有一個代表其單位或公司，并具有特殊意義的標志。它體現(xiàn)了網(wǎng)站獨特的文化元素，同時也是吸引瀏覽者眼球的第一法寶。一個有創(chuàng)意的LOGO，對網(wǎng)站的宣傳推廣有事倍功半的效果，對于企業(yè)來說，它不僅是一個標志，更像一個商鋪的招牌。所以，在企業(yè)中LOGO的設(shè)計不僅要協(xié)調(diào)，更要體現(xiàn)企業(yè)文化的內(nèi)涵。時尚淘導(dǎo)購網(wǎng)網(wǎng)站標志簡單明了，突出主題。中間是時尚淘網(wǎng)站的中文名字，后面是一個桃心，“桃”字與“淘”字同音，突出了網(wǎng)站的主題，淘你所喜，淘你所愛。標志使用的是網(wǎng)站的主色調(diào)玫紅色，是女性的代表色，深受女性所喜愛。網(wǎng)站LOGO如下圖所示：圖2-3網(wǎng)站LOGO2.3Banner設(shè)計本網(wǎng)站是女性時尚單品推薦的導(dǎo)購網(wǎng)站，banner主要體現(xiàn)的是導(dǎo)購功能，為顧客推薦最新的店鋪動態(tài)，方便購買。由于本網(wǎng)站是一個面向女性消費者的網(wǎng)站，所以Banner采用了鮮明的色調(diào)，緊扣女性時尚這一宗旨來展現(xiàn)。在技術(shù)實現(xiàn)方面，本網(wǎng)站banner采用了Photoshop軟件的濾鏡技術(shù)，通過雜色菜單制作完成，并保存為.gif圖片。圖2-4網(wǎng)站banner2.4首頁效果圖圖2-5網(wǎng)站首頁

第3章網(wǎng)頁設(shè)計制作3.1首頁設(shè)計制作網(wǎng)站首頁是用戶瀏覽網(wǎng)站的第一步，也是一個網(wǎng)站“門面”,首頁的制作效果直接影響了用戶的網(wǎng)站瀏覽的體驗度，因此，其頁面的布局和欄目內(nèi)容的選擇顯得尤為重要。通常來說，首頁顯示一些重要的信息,或者能突出網(wǎng)站主題的內(nèi)容。作為一個以時尚服飾為主題的導(dǎo)購網(wǎng)站，本網(wǎng)站中的首頁包括有：網(wǎng)站導(dǎo)航欄、人氣單品推薦、衣服、鞋子、包包、配飾等板塊內(nèi)容，每個主題信息部分布局明晰，讓瀏覽者在首頁中可以感受到整個網(wǎng)站的風(fēng)格，并清晰明了地找到所需商品的類目。此外，對于一些新品、精品或暢銷爆款產(chǎn)品,會采用動態(tài)特效的形式放于網(wǎng)站首頁醒目位置,以吸引用戶注意。例如:首頁中的活動信息宣傳部分,為了突出重點,同時也為了引起瀏覽者的注意,采用flash動畫軟件做成flash動畫效果放于首頁頂部,使整個頁面具有視覺上的動感,不再顯得呆板。1、網(wǎng)站風(fēng)格網(wǎng)站是為女性推薦時尚單品搭配主題的導(dǎo)購網(wǎng)站，為客戶推薦好的服飾單品與時下流行的穿著搭配，讓瀏覽者能夠快速的找到自己想要的商品，節(jié)省尋找時間。本網(wǎng)站作為一個女性時尚單品導(dǎo)購網(wǎng)站，整體色調(diào)為玫紅色，玫紅色是女性的代表色，深受女性所喜愛。2、首頁布局本網(wǎng)站采用的是“國”字型布局方式，使網(wǎng)站主題鮮明，簡潔清晰。網(wǎng)站首頁主要由登錄、注冊、QQ聯(lián)系、導(dǎo)航欄、人氣單品推薦、衣服、鞋子、包包、配飾、客服熱線等組成。以下是本網(wǎng)站的首頁布局圖：登錄/注冊QQ聯(lián)系招牌導(dǎo)航欄導(dǎo)航輪播動畫最新動態(tài)人氣單品推薦衣服鞋子包包配飾售后以及聯(lián)系方式圖3-1首頁布局圖3.導(dǎo)航欄本網(wǎng)站導(dǎo)航主要以玫紅色為主，展現(xiàn)了整個網(wǎng)站的風(fēng)格與色調(diào)。導(dǎo)航采用Javascript做了下拉菜單，使瀏覽者能在最短時間內(nèi)找到自己所需商品類目。導(dǎo)航如下圖3-2所示：<scripttype="text/javascript">functionMM_showHideLayers(){//v9.0vari,p,v,obj,args=MM_showHideLayers.arguments;for(i=0;i<(args.length-2);i+=3)with(document)if(getElementById&&((obj=getElementById(args[i]))!=null)){v=args[i+2];if(obj.style){obj=obj.style;v=(v=='show')?'visible':(v=='hide')?'hidden':v;}obj.visibility=v;}}</script>圖3-2下拉菜單4.QQ在線作為一家導(dǎo)購網(wǎng)站，為及時了解消費者需求，搭建與網(wǎng)站客戶的溝通渠道是非常有必要的。為此，本網(wǎng)站首頁設(shè)置了QQ交談，使用戶在使用本網(wǎng)站時產(chǎn)生的問題能第一時間得到解決。<imgSRC=/pa?p=1:735987139:1alt="QQ交談"hspace="20"border="0"style="CURSOR:pointer"onclick="javascript:window.open('/webc.htm?new=0&sid=735987139&o=&q=7','_blank','height=502,width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">圖3-3QQ交談5.flash動畫效果網(wǎng)站中flash效果最大魅力在于可以真正實現(xiàn)動感和交互，因此，flash動畫是網(wǎng)頁設(shè)計中不可或缺的內(nèi)容。從瀏覽者的角度來看，flash動畫效果比圖文信息更具觀賞性，更能抓住人們的眼球，能大大提升網(wǎng)站的藝術(shù)效果，從而有利于展示產(chǎn)品和企業(yè)形象宣傳。本網(wǎng)站首頁的輪播效果采用flash動畫實現(xiàn)，如下圖所示：圖3-4首頁Flash動畫效果3.2其他網(wǎng)頁設(shè)計制作1.每日搭配頁面本頁面借鑒了蘑菇街搭配欄目下頁面的布局模式，在頁面中采用了服飾搭配效果圖文與單品圖文相結(jié)合的形式，讓用戶通過網(wǎng)站推薦的服飾搭配有目的的選擇商品，增加用戶的購買欲。瀏覽者通過瀏覽搭配圖文信息，根據(jù)需要選擇購買整套搭配服飾或單品。此外，在每款搭配商品圖文信息下方增加了【推薦指數(shù)】，向瀏覽者展示搭配服飾在大眾中的受歡迎程度，消費者可以根據(jù)這個指數(shù)來選擇時下最流行的穿著風(fēng)格。如下圖所示：圖3-5每日搭配2.搭配詳情頁面本詳情頁面借鑒了淘寶寶貝詳情頁面的布局模式，在頁面的產(chǎn)品展示位置展示搭配服飾的整體效果圖，在其右側(cè)，分為兩個信息部分，上方主要對該搭配服飾進行簡單介紹了風(fēng)格說明，以方便瀏覽者選擇。下方則采用縮略圖的方式分別將各單品進行展示，并通過【立即購買】鏈接到淘寶單品頁面，使得瀏覽者在線即時購買商品。如下圖所示：圖3-6搭配導(dǎo)購效果圖圖3-7淘寶詳情頁面效果圖網(wǎng)頁下部通過同款推薦，將同類型的單品推薦給瀏覽者，以方便消費者挑選出更適合自己風(fēng)格的服飾，緊跟時尚潮流，穿出屬于自己的風(fēng)格，自己的style。如下圖所示：圖3-8搭配導(dǎo)購3.單品詳情頁面本詳情頁面借鑒了天貓寶貝詳情頁面的布局模式，在頁面的產(chǎn)品展示位置展示商品的整體效果圖，在其右側(cè)，分為兩個信息部分，上方主要對該搭配服飾進行簡單介紹了風(fēng)格說明、價格促銷以及賣家信譽等信息，以方便瀏覽者選擇。下方則通過【去天貓購買】鏈接到天貓單品頁面，使得瀏覽者在線即時購買商品。如下圖所示：圖3-9單品導(dǎo)購頁面效果圖圖3-10天貓詳情頁面效果圖

第4章時尚淘導(dǎo)購網(wǎng)站推廣4.1搜索引擎推廣搜索引擎是常用的互聯(lián)網(wǎng)服務(wù)之一，基本功能是為用戶查詢信息提供方便。常見的搜索引擎推廣方法有：登錄分類目錄、搜索引擎優(yōu)化、關(guān)鍵詞廣告、關(guān)鍵詞競價排名、網(wǎng)頁內(nèi)容定位廣告等。其中關(guān)鍵詞廣告、關(guān)鍵詞競價排名和網(wǎng)頁內(nèi)容定位廣告一般需要支付高額費用，較適合資金雄厚的大型企業(yè)網(wǎng)站，對于中小型企業(yè)網(wǎng)站要視企業(yè)情況和營銷預(yù)算而定。搜索引擎優(yōu)化和登錄免費的分類目錄這些免費的搜索引擎推廣方法則更適合中小型企業(yè)的電子商務(wù)網(wǎng)站。本網(wǎng)站通過HTML代碼進行了簡單的網(wǎng)站關(guān)鍵詞與內(nèi)容描述的優(yōu)化，使網(wǎng)站更加容易被搜索引擎發(fā)現(xiàn)。圖4-1搜索引擎優(yōu)化4.2電子郵件推廣電子郵件推廣主要以發(fā)送電子郵件為網(wǎng)站推廣手段，常用的方法包括電子刊物、會員通訊、專業(yè)服務(wù)商的電子郵件廣告等。其中專業(yè)服務(wù)商的電子郵件廣告是通過第三方的用戶Email列表發(fā)送產(chǎn)品服務(wù)信息，是需要付費的。多數(shù)企業(yè)采用電子刊物和會員通訊等免費途徑來進行網(wǎng)站推廣。這種方法通過會員注冊信息、公開個人資料等方式獲得目標客戶的Email列表，然后定期按Email列表發(fā)送產(chǎn)品廣告和促銷信息，也可以在郵件簽名欄留下公司名稱、網(wǎng)址和產(chǎn)品信息等。本網(wǎng)站采用了郵件推廣方式，對于新客戶，明確的主題瞬間抓住客戶的眼球，圖片加文字的郵件正文使客戶能更快的熟悉網(wǎng)站從而產(chǎn)生信任度。對于老客戶，標題與正文都要能為客戶帶來利益，從而吸引客戶購買。圖4-2QQ郵件4.3IM及時通訊工具推廣即時通訊工具有QQ、旺旺、泡泡、MSN、飛信等，利用資料、個性簽名、建立網(wǎng)站用戶群進行本網(wǎng)站形象及特色的宣傳。例如：利用qq聊天工具，在節(jié)日或者是平常的日子里，給企業(yè)目標客戶發(fā)送祝福短消息；利用qq空間，發(fā)送精美的節(jié)日賀卡，以公司的名義表達對客戶的感激和祝福。將本人的個性簽名改為網(wǎng)站名稱，讓更多的客戶知道公司。通過qq涂鴉表情進行鏈接的嵌入，發(fā)送一些很搞怪、很吸引人的圖片，在小角落里將網(wǎng)站的網(wǎng)頁鏈接嵌入。利用qq群共享，上傳一些對客戶有幫助或者比較具有吸引力的資料或文件，以word文檔的形式發(fā)布，在文件中設(shè)置公司logo作為水印，這樣可以讓別人下載回去或者保存到他們自己的中轉(zhuǎn)站中給別人下載，起到了廣泛宣傳的作用。本網(wǎng)站采用了QQ個性簽名推廣方式，在個人資料上將個性簽名修改成網(wǎng)站名稱加網(wǎng)址，在與人聊天的過程當中，簽名會直接顯示在聊天窗口上，容易吸引眼球，是最簡單也最容易產(chǎn)生效果的推廣方式，適合本網(wǎng)站推廣，產(chǎn)生更多流量。圖4-3QQ簽名4.4SNS社區(qū)營銷推廣SNS營銷就是利用SNS網(wǎng)站的分享和共享功能，在六度空間理論的基礎(chǔ)上實現(xiàn)的一種營銷。通過病毒式傳播（口碑傳播）的手段，讓產(chǎn)品被更多的人知道?，F(xiàn)在流行的SNS網(wǎng)站有Facebook、開心網(wǎng)、人人網(wǎng)、微博等。通過注冊好友、加入相關(guān)的群組、每天更新日志、發(fā)起熱門投票、高樓下留下腳印、炒作值得分享的熱門話題等來進行營銷推廣。本網(wǎng)站采用了微博推廣方式，微博擁有大量的用戶群體，是目前最時尚的即時通訊工具。首先要將微博定位成一個網(wǎng)站官方微博，然后在上網(wǎng)高峰期內(nèi)，發(fā)布一條簡單的網(wǎng)站介紹加圖片或者網(wǎng)站活動的微博，與粉絲產(chǎn)生互動，拉近與客戶的距離，即時獲得反饋。圖4-4微博4.5其他營銷方法1.論壇推廣根據(jù)自己產(chǎn)品的特點，選擇合適的、人氣比較旺的、且與自己產(chǎn)品主題相符的論壇；其次，能否成功地傳達自己想要傳達的信息，關(guān)鍵在于論壇帖子的設(shè)計，可以利用頭像和簽名檔適當進行宣傳，也可以把博客中的文章轉(zhuǎn)載到論壇里發(fā)布，并插入自己網(wǎng)站的超鏈接；第三，帖子發(fā)出后，如果不及時地跟蹤維護的話，可能很快就沉下去了，尤其是人氣很旺的論壇，因此，要及時地頂帖，使帖子始終處于論壇的首頁，讓更多的人能看到這些信息。本網(wǎng)站采用了論壇推廣方式，論壇用戶群體明確，選擇一個適合本網(wǎng)站的論壇進行推廣，效果事半功倍。為本網(wǎng)站選擇了一個流行時尚吧，開始進行簽到回帖積累經(jīng)驗，然后開始發(fā)帖，每天對帖子進行更新，讓帖子置頂使更多人看到。圖4-5百度貼吧2.QQ群推廣加入到和網(wǎng)站相關(guān)用戶交流的qq群，先在群里面讓大家熟悉你，在平時聊天的時候自然加入你的鏈接，相當于讓朋友幫你宣傳一下你的網(wǎng)站，這樣也不會被踢出群，在網(wǎng)站上有一定的知識學(xué)習(xí)，也推廣了網(wǎng)站。本網(wǎng)站采用了QQ群推廣方式，全國大概有6億以上QQ號，人以類聚，物以群分。定位好營銷對象，根據(jù)關(guān)鍵詞添加QQ群，然后在群里聊天拉近關(guān)系，再慢慢發(fā)一些物美價廉的衣服圖片，讓人覺得你是不來發(fā)廣告的，只是推薦一些好的東西給大家。圖4-6QQ群

總結(jié)畢業(yè)設(shè)計是我們每個大學(xué)生必須經(jīng)歷的一段過程，也是我們畢業(yè)前的一段珍貴回憶。一開始都覺得畢業(yè)設(shè)計是一個很困難的任務(wù)，大家都難免有一點畏懼之情，但是經(jīng)過長時間的努力和積累，在老師的要求下不斷的修改，我們都按要求完成了畢業(yè)設(shè)計。在此要感謝我的指導(dǎo)老師歐陽紅巍老師，是在你的細心指導(dǎo)下，我才能夠順利的完成畢業(yè)設(shè)計。老師的意見總是很寶貴的，可以很好的指出我的不足以及需要怎樣修改完善。通過這次畢業(yè)設(shè)計，我對網(wǎng)上商城又有了進一步的了解。隨著科技的不斷發(fā)展和網(wǎng)絡(luò)的廣泛普及，網(wǎng)上購物已經(jīng)成為了時代的主流，各種網(wǎng)上交易商城建立，商品的多元化讓人們挑花了眼，導(dǎo)購網(wǎng)的出現(xiàn)就順應(yīng)了發(fā)展。為顧客推薦最好的商品，最好的搭配，免去了大量的尋找商品時間。這次畢業(yè)設(shè)計是對我實際能力的一次提升，相信對我未來的學(xué)習(xí)和工作有很大的幫助。畢業(yè)在即，在