導(dǎo)語(yǔ)：電子商務(wù)網(wǎng)站設(shè)計(jì)解析一文來(lái)源于網(wǎng)友上傳，不代表本站觀點(diǎn)，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

隨著網(wǎng)絡(luò)的普及，網(wǎng)上購(gòu)物越來(lái)越被人們喜歡，其中天貓店是目前社會(huì)上影響較大的網(wǎng)上購(gòu)物網(wǎng)站。本文結(jié)合平常瀏覽網(wǎng)頁(yè)和實(shí)際經(jīng)驗(yàn)，選擇天貓首頁(yè)作為切入點(diǎn)，并結(jié)合目前流行過(guò)的雙11網(wǎng)上購(gòu)物節(jié)，來(lái)闡述網(wǎng)頁(yè)設(shè)計(jì)的思路。

一、網(wǎng)站整體規(guī)劃

1.網(wǎng)站布局規(guī)劃。在規(guī)劃設(shè)計(jì)一個(gè)網(wǎng)頁(yè)的時(shí)候，首先要考慮它的功能，然后才是這個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)和色彩搭配。這些設(shè)計(jì)成型的網(wǎng)頁(yè)要符合該網(wǎng)站主題，也要符合人們普遍的審美觀點(diǎn)，更要符合特定行業(yè)的規(guī)范。電商網(wǎng)站由自己的行業(yè)性質(zhì)所決定，故一般天貓電子商務(wù)網(wǎng)站要至少有三種頁(yè)面：首頁(yè)、分類頁(yè)和詳情頁(yè)。下面來(lái)介紹各自頁(yè)面的功能。（1）首頁(yè)的功能：天貓網(wǎng)站的首頁(yè)介紹一部分本網(wǎng)站熱賣的商品，通過(guò)首頁(yè)鏈接到本網(wǎng)站的各個(gè)分頁(yè)上。電子商務(wù)網(wǎng)站首頁(yè)一般只有一個(gè)。（2）分類頁(yè)的功能：分類頁(yè)中將每個(gè)板塊的內(nèi)容具體化、深入化、詳細(xì)化的同時(shí)，能讓消費(fèi)者深入了解商品的價(jià)格，并且有一定的比較性。一般分類頁(yè)有很多，可以包括各種產(chǎn)品分類、活動(dòng)分類、優(yōu)惠分類等，天貓網(wǎng)站可以借著雙11網(wǎng)上購(gòu)物節(jié)，做一個(gè)簡(jiǎn)單的分類，“雙11會(huì)場(chǎng)”。（3）詳情頁(yè)的功能：通過(guò)分類頁(yè)將該網(wǎng)站的各個(gè)相同產(chǎn)品的信息使其更加條理化，更加詳細(xì)、方便地展現(xiàn)給消費(fèi)者。電子商務(wù)網(wǎng)站的產(chǎn)品詳情頁(yè)有很多個(gè)，其中每個(gè)詳情頁(yè)以大量圖片進(jìn)行布局以增加美感。2.網(wǎng)站配色分析。色彩在網(wǎng)頁(yè)設(shè)計(jì)中起到了很大的作用，一個(gè)優(yōu)秀的網(wǎng)頁(yè)作品，它的色彩搭配和諧自然，觀賞起來(lái)讓人興趣盎然。想要做到這一點(diǎn)，就要熟練掌握網(wǎng)頁(yè)的主色調(diào)、輔色調(diào)、點(diǎn)睛色以及背景色的色彩搭配，而要完成這一點(diǎn)不是一蹴而就的事情，需要長(zhǎng)期去觀察優(yōu)秀的成功作品，去吸收它們的精華，總結(jié)其中的規(guī)律，才會(huì)慢慢熟練運(yùn)用。在選擇網(wǎng)頁(yè)色彩時(shí)，除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出精美的網(wǎng)頁(yè)。第一，用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。第二，用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。第三，用一個(gè)色系。簡(jiǎn)單來(lái)說(shuō)就是用一個(gè)感覺(jué)的色彩，如暖色調(diào)的紫、紅、橙，冷色調(diào)的綠、藍(lán)、紫，中性色調(diào)有黑、白、灰三種顏色。色彩要根據(jù)主題來(lái)確定，不同的主題選用不同的色彩。例如，用藍(lán)色體現(xiàn)科技型網(wǎng)站的專業(yè)，用粉紅色體現(xiàn)女性的柔情等。可以棕紅色為主色調(diào)，淡黃色為輔色調(diào)，黑色為點(diǎn)睛色。其中棕紅色給人喜慶鮮艷的視覺(jué)效果，更給人很大視覺(jué)沖擊，使之更吸引人；淡黃色給人高雅的感覺(jué)，同時(shí)可以和棕紅色一同使用；點(diǎn)睛色正好是logo的顏色，可以更好地突出主題標(biāo)識(shí)。

二、網(wǎng)站技術(shù)要求

一般效果要求：要適合在主流分辨率（1280px×960px）下正常顯示，主頁(yè)面寬度至少1200像素以上，高度不限；要有搜索欄；導(dǎo)航欄除了文字可以加其他網(wǎng)頁(yè)元素；Banner通欄最好有動(dòng)態(tài)效果；版權(quán)信息模塊不得缺少。一般版面設(shè)計(jì)要求：注意制作規(guī)范，包括網(wǎng)站文件，頁(yè)面代碼等；版面色彩協(xié)調(diào)，排版布局合理；網(wǎng)頁(yè)中的部分文字及圖片不要有空鏈接；動(dòng)態(tài)效果分別用了JavaScript和Flash技術(shù)；網(wǎng)頁(yè)布局以div+css技術(shù)為主，以表格為設(shè)計(jì)為輔。

三、首頁(yè)模塊劃分

電子商務(wù)網(wǎng)站首頁(yè)是一個(gè)網(wǎng)站的重點(diǎn)，關(guān)鍵部分，所以首頁(yè)劃分功能的全部實(shí)現(xiàn)是本網(wǎng)站的重要部分。第一，“網(wǎng)站頭部”模塊：（公司LOGO，標(biāo)題宣傳海報(bào)）。第二，“導(dǎo)航條”模塊：首頁(yè)、雙11會(huì)場(chǎng)、冬季新款、休閑男鞋、商務(wù)男鞋。第三，“Banner”模塊：以宣傳公司形象為主題，編寫廣告語(yǔ)。第四，“產(chǎn)品分類”模塊：優(yōu)惠禮券、雙11廣告、瘋狂搶不停、熱賣產(chǎn)品等。第五，“版權(quán)信息”模塊。

四、網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)分析

表格布局雖然簡(jiǎn)單，但是表格的訪問(wèn)速度和搜索引擎比較慢，最重要的是不同瀏覽器會(huì)對(duì)表格的解析效果有所差距，所以本網(wǎng)頁(yè)使用了div+css布局，這也是目前所有網(wǎng)頁(yè)排版和表現(xiàn)中最好的技術(shù)手段。網(wǎng)頁(yè)設(shè)計(jì)中最難設(shè)計(jì)的就是主頁(yè)的版面、布局的設(shè)計(jì)以及色彩的搭配是否合理。在首頁(yè)的banner動(dòng)態(tài)效果中，可采用JavaScript技術(shù)，在詳情頁(yè)的焦點(diǎn)圖片可采用Flash技術(shù)，這樣使頁(yè)面有動(dòng)態(tài)效果，令客戶有過(guò)目不忘的感覺(jué)。

五、結(jié)語(yǔ)

在電子商務(wù)網(wǎng)站設(shè)計(jì)過(guò)程中，目前采用比較流行的程序，先用Photoshop設(shè)計(jì)效果圖，然后切割圖片，最后采用div+css技術(shù)實(shí)現(xiàn)靜態(tài)效果，JavaScript和Flash技術(shù)實(shí)現(xiàn)動(dòng)態(tài)效果。另外，在設(shè)計(jì)過(guò)程中盡可能將藝術(shù)美感與技術(shù)有效結(jié)合，這樣電子商務(wù)網(wǎng)站將會(huì)給客戶取得較好的視覺(jué)效果。

參考文獻(xiàn)：

[1]胡蓉,宋文官.電子商務(wù)網(wǎng)站規(guī)劃與管理教學(xué)實(shí)驗(yàn)方案設(shè)計(jì)[J].現(xiàn)代教育技術(shù),2009(12).

[2]陳巍.電子商務(wù)網(wǎng)站設(shè)計(jì)課程建設(shè)初探[J].揚(yáng)州職業(yè)大學(xué)學(xué)報(bào),2008(03).

[3]袁傳懷,殷彬,陶安.電子商務(wù)網(wǎng)站建設(shè)教學(xué)網(wǎng)絡(luò)的實(shí)踐和思考[J].電子商務(wù),2013(05).

作者:閆洪濤 單位:河南工業(yè)技師學(xué)院