網(wǎng)店美工設(shè)計要素及典型案例分析

PAGE電子商務(wù)專業(yè)畢業(yè)設(shè)計題目：網(wǎng)店美工設(shè)計要素及典型案例分析產(chǎn)品設(shè)計工藝設(shè)計方案設(shè)計√類型：學(xué)生姓名：學(xué)號：學(xué)院：商學(xué)院專業(yè)：電子商務(wù)班級：學(xué)校指導(dǎo)教師：企業(yè)指導(dǎo)教師：2016年5月3日摘要Internet為我國的電子商務(wù)帶來無窮的信息，更是我們交流和學(xué)習(xí)方式的變遷重要原因。在網(wǎng)絡(luò)化的今天,依托互聯(lián)網(wǎng)，淘寶購物方面顯得非常方便。網(wǎng)絡(luò)淘寶發(fā)達，使保健食品的信息不斷得到更新，保健食品類目的也逐漸完善和規(guī)范，在實習(xí)期間我工作是做肌肉科技天貓店鋪的美工，主要負責(zé)網(wǎng)頁的美化及資料的搜索和店鋪圖片管理。我所在的網(wǎng)店美工工作內(nèi)容主要包含首頁的圖片制作和網(wǎng)店框架的搭建，這需要對色彩尤其是色彩的搭配必須要有獨的見解和良好的排版水平。設(shè)計過程中用到了photoshop、dreamwever等技術(shù)。下面我將就我設(shè)計的過程所采用的技術(shù)、思路等方面詳細的介紹我所管理店鋪的設(shè)計。關(guān)鍵詞：互聯(lián)網(wǎng)頁面設(shè)計保健品行業(yè)店鋪裝修

目錄TOC\t"一級標(biāo)題,1,關(guān)鍵詞,1,參考文獻,1,摘要,1,緒論,1,致謝,1,二級標(biāo)題,2,三級標(biāo)題,3"\h摘要 2關(guān)鍵詞 2一、企業(yè)概況 5（一）總公司簡介 5（二）肌肉科技東青官方專賣店簡介 5二、淘寶美工概述 7（一）美工簡介 7（二）美工素質(zhì)以及能力要求 71、首頁設(shè)計 82、圖片處理 83、協(xié)助運營做好日常推廣、活動推廣活動頁面設(shè)計 8三、店鋪裝修 8（一）店鋪設(shè)計過程 81、首頁設(shè)計 82、店招導(dǎo)航設(shè)計 103、寶貝詳情頁設(shè)計 11（二）活動頁面設(shè)計 121、年貨活動頁 122、元宵活動頁設(shè)計 133、三八節(jié)活動頁設(shè)計 144、周年慶活動頁設(shè)計 165、直通車及其他小圖設(shè)計 18四、淘寶美工實習(xí)總結(jié) 20（一）美工實習(xí)內(nèi)容 20（二）美工實習(xí)感悟 21結(jié)束語 21參考文獻 23致謝 24緒論（前言）湖南西子電商是湖南電商領(lǐng)域發(fā)展速度、最具競爭力的電商企業(yè)，主營業(yè)務(wù)涉及食品保健品、化妝品等領(lǐng)域，擁有多個淘寶商城、拍拍、京東、當(dāng)當(dāng)?shù)入娚藤徫锲脚_。目前公司主要通過國內(nèi)的主流電商平臺銷售產(chǎn)品，發(fā)展勢頭迅猛。公司發(fā)展迅速，目前總?cè)藬?shù)達到100多人，分為總經(jīng)辦，天貓部，渠道部，客服部，倉庫部，人事部，行政部，財務(wù)部這幾個部門。主要從事的行業(yè)是保健品行業(yè)，化妝品行業(yè)。目前做得比較成功的品牌有：康比特，肌肉科技，美瑞克斯，韓后。我目前所負責(zé)的是肌肉科技東青專賣店的店鋪裝修。

一、企業(yè)概況（一）總公司簡介湖南西子電商是湖南電商領(lǐng)域發(fā)展速度、最具競爭力的電商企業(yè)，主營業(yè)務(wù)涉及食品保健品、化妝品等領(lǐng)域，擁有多個淘寶商城、拍拍、京東、當(dāng)當(dāng)?shù)入娚藤徫锲脚_。目前公司主要通過國內(nèi)的主流電商平臺銷售產(chǎn)品，發(fā)展勢頭迅猛。公司發(fā)展迅速，目前總?cè)藬?shù)達到100多人，分為總經(jīng)辦，天貓部，渠道部，客服部，倉庫部，人事部，行政部，財務(wù)部這幾個部門。主要從事的行業(yè)是保健品行業(yè)，化妝品行業(yè)。目前做得比較成功的品牌有：康比特，肌肉科技，美瑞克斯，韓后。我目前所負責(zé)的是肌肉科技東青專賣店的店鋪裝修。（二）肌肉科技東青官方專賣店簡介肌肉科技產(chǎn)品無處不在，在美國任何一本健身雜志，每一場健美比賽，所有營養(yǎng)品專賣店，肌肉科技的標(biāo)志都會矗立眼前。肌肉科技的追隨者以幾何速度每天增長。肌肉科技超級明星團隊代表全球健美的輝煌，肌肉科技的競爭對手們也只能每天努力奮斗著甘居亞軍，這就是肌肉科技文化。不斷增長，這是一群很大的消費群體，同時也是中高端消費的一群，相對來說，利潤空間是比較大的。肌肉科技東青專賣店是肌肉科技官方授權(quán)的一個旗下專賣店，主要專注經(jīng)營肌肉科技所有產(chǎn)品。肌肉科技（Muscletech）全球運動補劑的神話。全球最知名品牌之一，肌肉科技明星團隊包括了喬卡特，菲爾·希斯，德克斯特·杰克遜等超級明星。肌肉科技品牌于2009年正式登陸中國市場，由中國知名的運動營養(yǎng)品代理公司北京盈奧科健貿(mào)易有限公司獨家代理，在中國市場已經(jīng)擁有上千家經(jīng)銷商。2013年10月，北京盈奧科健貿(mào)易有限公司邀請肌肉科技品牌代言人3屆奧林匹亞冠軍菲爾·希斯先生成功訪問中國，肌肉科技品牌在中國已成為銷量最高的進口運動營養(yǎng)品牌。旺億的直接貨源是北京盈奧科健貿(mào)易有限公司，這就保證了正品。在保健品行業(yè)，相對有幾個產(chǎn)品的品牌比較有影響力，美國的健樂多，美瑞克斯，以及中國的康比特，其主要功效是增肌增重，增肌減脂。對于這些對手，肌肉科技在很多方面都與他們存在著競爭。主要競爭對手有健樂多以及美瑞克斯。健樂多屬于湯臣倍健股份有限公司2000年01月25日注冊的一個商標(biāo)，健樂多以“don’tquit，傾力每一刻”為理念，紅黑兩色的品牌主色調(diào)代表堅持和專注，所以店鋪大多數(shù)裝修風(fēng)格都是以紅色和黑色作為主要色調(diào)。多是運動風(fēng)格，其中健樂多產(chǎn)品包括增肌、減脂、能量補充等系列，公司的品牌文化優(yōu)秀。如圖一：健樂多首頁部分截圖。圖SEQ圖\*ARABIC1：健樂多首頁美瑞克斯產(chǎn)品全部來自紐約長島，生產(chǎn)過程完全符合美國GMP標(biāo)準(zhǔn)，并通過美國藥曲標(biāo)準(zhǔn)（USP）審核。其中鐵桿粉絲有牟叢：國家級運動健將、知名的全國健身小姐、形體小姐、體育模特，2012亞洲健美錦標(biāo)賽女子形體165以上組別冠軍。這些同時也是美瑞克斯的產(chǎn)品代言人。美瑞克斯（MET-RX）的品質(zhì)和技術(shù)受到多個世界頂級運動員的認可，包括2005、2006連續(xù)兩年獲得阿諾德經(jīng)典賽冠軍的職業(yè)健美運動員德克斯塔杰克遜，五屆世界大力士冠軍賽冠軍的世界頂級大力士馬瑞斯。2006年美瑞克斯(MET-RX)正式登陸中國，由NBTY的在華子公司諾天源(中國)貿(mào)易有限公司總經(jīng)銷。因此，美瑞克斯為主營產(chǎn)品在保健市場上占有很大的優(yōu)勢。也是肌肉科技的主要競爭力，美瑞克斯的首頁主打的是品牌宣傳，所以店鋪裝修是主要宣傳品牌為主如圖二：美瑞克斯首頁部分截圖。圖2：美瑞克首頁二、淘寶美工概述（一）美工簡介網(wǎng)店美工是精通美學(xué)，PHOTOSHOP，F(xiàn)LASH，DREAMWEAVER等網(wǎng)店制作軟件的網(wǎng)絡(luò)人員，必須具有良好的創(chuàng)意和一定程度的審美觀和一定的策劃知識。負責(zé)整個網(wǎng)店的前臺設(shè)計，界面設(shè)計、規(guī)劃整個網(wǎng)頁的布局。目前使用ps進行界面效果圖的設(shè)計，AI輔助設(shè)計LOGO、以及網(wǎng)標(biāo)。目前淘寶上比較主流的美工工作內(nèi)容包括：店鋪裝修工作、產(chǎn)品頁面設(shè)計工作、店鋪關(guān)聯(lián)工作和活動圖片設(shè)計工作。美工對電子商務(wù)行業(yè)的十分重要，是關(guān)乎一個電商企業(yè)成敗的重要因素，店鋪運營中經(jīng)常談及點擊率與轉(zhuǎn)化率，這兩個數(shù)據(jù)都與美工所制作的店鋪圖片有非常重要的關(guān)系。一個好的淘寶店鋪他給人的第一映像十分重要，淘寶上店鋪繁多，你只有展示出屬于自己的特點才能夠讓更多的顧客對你駐足，選取商品，從而增加交易。所以想法創(chuàng)造出屬于自己的店鋪特色是一個美工成功的第一步。（二）美工素質(zhì)以及能力要求網(wǎng)絡(luò)美工具備如下素質(zhì)：扎實的美術(shù)功底、豐富的想象力和良好的創(chuàng)造力，網(wǎng)頁設(shè)計/平面設(shè)計/廣告設(shè)計工作經(jīng)驗，美術(shù)類/平面設(shè)計/廣告及相關(guān)專業(yè)，較好的文字功底。可見，不僅要求會相關(guān)的繪圖軟件，還要求懂一定的網(wǎng)頁設(shè)計語言和有一定的文字功底。如何提升店鋪的轉(zhuǎn)化率，是每個淘寶店鋪所必須考慮的問題。如何更好的體現(xiàn)出產(chǎn)品的賣點，如何突出產(chǎn)品的獨特性，此時考驗的就是僅僅是美工的圖片處理能力了，此時更需要的是如何整體配合突出要表達的主題。文案負責(zé)文字以及寶貝描述，通過美工的深刻理解以及成功轉(zhuǎn)化，出來的圖片一定與隨意制作的圖片效果有天壤之別。一般網(wǎng)店美工需要有一下幾點的能力1、首頁設(shè)計（1）頁面頂部設(shè)計感強（2）導(dǎo)航欄分類明確，讓客戶第一時間可以找到自己想要的（3）寶貝排放，寶貝排布清晰有序，讓人感覺版面清楚。（4）主題海報設(shè)計，渲染頁面氣氛，讓人對店鋪映像深刻。2、圖片處理（1）根據(jù)需要對產(chǎn)品的拍攝原圖進行美化（2）適量添加文字描述，但不要過多插入廣告，導(dǎo)致顧客厭煩。3、協(xié)助運營做好日常推廣、活動推廣活動頁面設(shè)計（1）標(biāo)題設(shè)計明確，契合活動主題。（2）頁面美觀，符合大眾審美，對顧客產(chǎn)生吸引。（3）制作合適的海報，使人對活動有直觀認識。三、店鋪裝修（一）店鋪設(shè)計過程當(dāng)運營給文案需要作圖的時候在做一個店鋪的首頁之前，需要先和運營溝通了解運營想做出來的是什么樣子，主要配色是什么，做出來的風(fēng)格大致是什么，然后心中有了大概的思想和頁面的輪廓，就需要準(zhǔn)備素材，去找靈感，可以借鑒，但不可以復(fù)制。商城首頁是展示店鋪寶貝、活動的地方，也是營造品牌風(fēng)格的第一窗口。首頁設(shè)計要注意和焦點圖設(shè)計風(fēng)格的統(tǒng)一，色彩搭配需要應(yīng)季，重點一定要突出。在虛擬交易中視覺營銷是關(guān)鍵。創(chuàng)意會帶來更多的流量，美觀的圖片讓人產(chǎn)生點擊的欲望，不過最不能忽略的是傳達。因此這些很考驗美工的美感和設(shè)計能力。要設(shè)計出運營心中所想的樣子和符合大眾消費的感官。1、首頁設(shè)計首先，要布局劃分籌備工作，可以將首頁劃分為店招，海報，產(chǎn)品寶貝，頁尾整個首頁可分為主體部分和背景，主體部分的寬度根據(jù)店鋪性質(zhì)的不同而有著差異。接下來是全屏店招制作，全屏海報制作，寶貝的切片和頁尾的制作，基本就可以完成一個自定義的首頁，創(chuàng)意會帶來更多的流量，美觀的圖片讓人產(chǎn)生點擊的欲望，不過最不能忽略的是傳達。商城首頁是展示店鋪寶貝、活動的地方，也是營造品牌風(fēng)格的第一窗口。按照店鋪的總體風(fēng)格定義配色，我們店鋪是主要黑色黃色紅色三種顏色混合交叉搭配，因為保健品是主打高大的形象。根據(jù)這些就可以去找素材以及靈感，一般我們喜歡在花瓣網(wǎng)，千圖網(wǎng)，以及500PX等一些圖片網(wǎng)找素材。有大致輪廓之后就開始構(gòu)圖。如圖3：店鋪首頁圖3：店鋪首頁2、店招導(dǎo)航設(shè)計整個網(wǎng)店只有一個店招，它在每個頁面上都會顯示，所以店招是店鋪中最重要的一部分。店招要體現(xiàn)兩點：品牌定位和產(chǎn)品定位。要讓顧客無論是在首頁還是在其他頁面通過店招都能看出店鋪的品牌和產(chǎn)品,加深顧客的印象。店鋪店招如圖4：店鋪店招圖4：東青店招我們店鋪的主要風(fēng)格顏色是黑色，所以店招也是黑色。店招主要放了店鋪的店標(biāo)，由于我們店鋪是主推高性能圍度增肌粉七磅，所以店招上也是七磅，這樣讓顧客進店第一感覺就是看到我們主推的產(chǎn)品。這樣便有利于消費者快速關(guān)注到店內(nèi)的熱銷產(chǎn)品。而生意參謀的數(shù)據(jù)證明，店招的點擊率往往要大于海報和產(chǎn)品布局那一塊的點擊，也更容易提高轉(zhuǎn)化率。3、寶貝詳情頁設(shè)計我們公司的產(chǎn)品都是贏奧總公司的專門規(guī)定的寶貝以及詳情，所以一般公司沒有允許是不可以擅自修改寶貝的詳情頁，但是我也有做過一些關(guān)于店鋪主打的寶貝的詳情，好的詳情會讓店鋪的轉(zhuǎn)化率大大提升，這里最重要的就是好的文案。文案不在乎寫作有多么好，重要的是那么幾個來自心里有共鳴的字眼:“說到心坎里去的話，中心突出：當(dāng)顧客很有耐心的看完了這個詳情頁都得不到自己想了解的東西，那么其后果是直接讓他思維煩躁——秒關(guān)，所以做詳情頁之前需要做一次策劃。好的結(jié)尾很重要，目前來看多數(shù)人喜歡用一些購物注意事項或者快遞說明什么的來結(jié)尾，我只能說，不管顧客前面感覺如何好都會給這些東西一個影響了，我們可以想象下，當(dāng)你沉醉在一個美好的狀態(tài)中，突然來個這么無趣的東西，你是不是覺得很郁悶？關(guān)于這個結(jié)尾我參照各大應(yīng)對產(chǎn)品官網(wǎng)的產(chǎn)品介紹，加上二級頁面（購物事項）的鏈接結(jié)尾，再者突出店鋪文化或者店鋪理念，主要風(fēng)格是參照細胞肌能海外旗艦店的詳情。在做詳情之前先和運營溝通，但是做出來卻沒有讓運營很滿意，然后彼此還激烈討論了很久，最后慢慢修改成想要的樣子。如圖5：詳情的部分截圖。圖5：寶貝詳情（二）活動頁面設(shè)計1、年貨活動頁年貨頁，顧名思義，也就是一年的年底對消費者回饋的一個活動頁面。年貨節(jié)也叫掃貨節(jié)，相當(dāng)于超市清倉掃貨一樣。因此，年貨節(jié)的促銷力度可以媲美雙十一雙十二。首先，要布局劃分籌備工作，整個首頁可分為主體部分和背景，主體部分的寬度根據(jù)店鋪性質(zhì)的不同而有著差異，接下來是全屏店招制作，全屏海報制作，海報的制作是很重要的一部首先海報一定得體現(xiàn)促銷性，海報在某種方面很大的提高了店鋪的檔次，粗制濫造的海報會極大的降低一個店鋪的檔次。一般年貨活動會經(jīng)常使用年貨節(jié)，打年貨、屯年貨等一些促銷詞，所以這次我是以年貨節(jié)為主要詞做頁面包括價格也是年貨價吸引顧客。如圖6：年貨海報圖6：年貨海報2、元宵活動頁設(shè)計元宵節(jié)的頁面是在年假回來之后開始做的，總的來說沒有之前做的那么困難了。由于我們店鋪由總公司規(guī)定所以美工姐姐叫我?guī)涂当忍刈鲆粋€，頁面還是算做的多了，所以這次做起來比較得心應(yīng)手，了解了年貨以及一般活動都是用紅色來渲染活動的氣氛，這次也不例外也是選用紅色和金色搭配。如圖7：元宵節(jié)頁面的截圖圖7：元宵節(jié)頁面3、三八節(jié)活動頁設(shè)計因為很多活動都是紅色作為主要色調(diào)，覺得會有點重復(fù)，所以三八女王節(jié)的時候就用黑色主打，紅色作為配色做首頁,由于我們店的模特都是特定的，在某些方面也是加重了我們的設(shè)計難度，但是運用多了之后就會懂得更好的展現(xiàn)模特的力量，以及怎么樣才能帶給人想購買的感覺。如圖八：女王節(jié)頁面圖8：三八女王節(jié)頁面4、周年慶活動頁設(shè)計肌肉科技一般店鋪是很少做活動，所以對于我們來說，周年慶是比較重要的，然后這次活動頁面和運營溝通后畫出了大致的樣子，但是有很多地方和運營想的不一樣，實在不知道運營在想什么，所以就有點崩潰，說實話，改的不想再改了，但是彼此都心情氣和之后再慢慢磨合，最后改成下面這版。如圖9：周年慶頁面圖9：周年慶頁面5、直通車及其他小圖設(shè)計還有一些小活動頁面，其中有天貓品牌專輯頁等等活動，這些對圖片的要求不是很嚴格，基本上只要改下產(chǎn)品圖就好。以下是一些頁面的截圖。分別是美瑞克斯的手機端的海報及直通車截圖。如圖：圖10：活動截圖直通車都是在淘寶付費展現(xiàn)，所以點擊率很轉(zhuǎn)化率是衡量直通車做的好壞的依據(jù)，其中直通車上的關(guān)鍵詞以及直通車圖的質(zhì)感都是點擊率的關(guān)鍵，直通車的圖片視覺化最重要的部分是商品的首圖，它是了解消費者這個商品的開始，也是推廣商品的唯一“入口”所以對設(shè)計有相對高的要求，根據(jù)要投放的消費群體，同時分析他們的喜好來確定設(shè)計風(fēng)格以及顏色，分析他們的消費能力來確定使用什么樣的促銷方式是他們最容易接受的，以及分析他們的生活習(xí)慣，方便調(diào)整投放時間和戰(zhàn)略，與對手拉開差異，增加投放效率。如圖11：高性能七磅主圖高性能七磅主圖圖11：高性能七磅主圖四、淘寶美工實習(xí)總結(jié)（一）美工實習(xí)內(nèi)容1、主要負責(zé)：根據(jù)店鋪風(fēng)格日常海報的制作，商品詳情的制作，店鋪活動的一些圖片處理及商品信息的更新。2、關(guān)于海報：剛進公司有美工姐姐帶我，在這段時間也教會了我很多，知道了做海報要考慮很多因素：店鋪風(fēng)格、色調(diào)搭配、圖案搭配、字的排版、字體的設(shè)置講究，這些都很重要，不過也不是一朝一夕就能培養(yǎng)的出來的，但可以從模仿中鍛煉，她有一句說的很對：現(xiàn)在我們剛出社會，設(shè)計風(fēng)格還不夠成熟，如果只要自己的想法是做不好東西的，那種東西一看就沒什么質(zhì)量。如何借鑒運用別人的創(chuàng)意也是一門藝術(shù)。對于如何吸引顧客的眼球，表達商品的重要信息，在海報的體現(xiàn)上也是要不斷的學(xué)習(xí)和認識。3、上架商品：這段時間他也教了我如何上架商品，很多時候還是有問題，但是能百度的一般我都會先百度。其實呢，這些操作不一定什么都要問別人，百度什么的都挺好用的，所以能自己解決的就先自己試著去解決。4、關(guān)于軟件使用的熟練度：制圖軟件的熟悉對于圖片處理的速度和圖片效果是有很大的相關(guān)的。在處理圖片時，我們經(jīng)常遇到圖片的一些問題，比如模特背景顏色會影響模特身上衣服的顏色及模特的膚色，有時模特哪里受傷了也是要處理掉，還有整體膚色不能太黑，要在原有的圖片上調(diào)整好，還有對衣服顏色真是感的處理也要調(diào)好等，這些都要你對軟件的熟悉與熟練的運用。軟件的熟悉與熟練的運用也體現(xiàn)在5、關(guān)于店鋪風(fēng)格：雖然我對店鋪風(fēng)格的定位還是不太清楚，現(xiàn)在我也是跟著另一個美工的風(fēng)格走，這是所有圖片處理的總風(fēng)格，所以自己也要清楚并配合好。（二）美工實習(xí)感悟（1）實踐出真知，在不斷實踐中找出自己的不足，不斷突破總結(jié)，這樣在下次遇到同樣問題的時候就能高效的解決（2）好的團隊是不斷進步的源泉和動力，多和大家交流溝通，聽別人建議多學(xué)習(xí)（3）多看優(yōu)秀的網(wǎng)頁設(shè)計，學(xué)著先模仿后創(chuàng)新，把別人的東西轉(zhuǎn)化為自己的最后還要比別人的做的更好。（4）永遠不要讓自己在該學(xué)習(xí)時間處于悠閑的狀態(tài)，一旦你享受悠閑，你將停止不前，所以能學(xué)習(xí)的時候就盡快學(xué)習(xí)充足自己，不管