電子商務(wù)網(wǎng)站設(shè)計(jì)探析

閆洪濤

摘 要：電子商務(wù)網(wǎng)站設(shè)計(jì)是電子商務(wù)專業(yè)學(xué)生的主要課程。學(xué)生應(yīng)從網(wǎng)站整體規(guī)劃、網(wǎng)站技術(shù)要求、首頁模塊劃分等方面對(duì)電子商務(wù)網(wǎng)站進(jìn)行設(shè)計(jì)，從而掌握網(wǎng)站設(shè)計(jì)技能，更好地應(yīng)用于未來的工作中。

關(guān)鍵詞：電子商務(wù)；網(wǎng)頁；規(guī)劃；色彩 ；設(shè)計(jì)

中圖分類號(hào)：G712；TP393.02 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1008-3561（2018）27-0089-01

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

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

1.網(wǎng)站布局規(guī)劃

在規(guī)劃設(shè)計(jì)一個(gè)網(wǎng)頁的時(shí)候，首先要考慮它的功能，然后才是這個(gè)網(wǎng)頁的結(jié)構(gòu)和色彩搭配。這些設(shè)計(jì)成型的網(wǎng)頁要符合該網(wǎng)站主題，也要符合人們普遍的審美觀點(diǎn)，更要符合特定行業(yè)的規(guī)范。電商網(wǎng)站由自己的行業(yè)性質(zhì)所決定，故一般天貓電子商務(wù)網(wǎng)站要至少有三種頁面：首頁、分類頁和詳情頁。下面來介紹各自頁面的功能。（1）首頁的功能：天貓網(wǎng)站的首頁介紹一部分本網(wǎng)站熱賣的商品，通過首頁鏈接到本網(wǎng)站的各個(gè)分頁上。電子商務(wù)網(wǎng)站首頁一般只有一個(gè)。（2）分類頁的功能：分類頁中將每個(gè)板塊的內(nèi)容具體化、深入化、詳細(xì)化的同時(shí)，能讓消費(fèi)者深入了解商品的價(jià)格，并且有一定的比較性。一般分類頁有很多，可以包括各種產(chǎn)品分類、活動(dòng)分類、優(yōu)惠分類等，天貓網(wǎng)站可以借著雙11網(wǎng)上購(gòu)物節(jié)，做一個(gè)簡(jiǎn)單的分類，“雙11會(huì)場(chǎng)”。（3）詳情頁的功能：通過分類頁將該網(wǎng)站的各個(gè)相同產(chǎn)品的信息使其更加條理化，更加詳細(xì)、方便地展現(xiàn)給消費(fèi)者。電子商務(wù)網(wǎng)站的產(chǎn)品詳情頁有很多個(gè)，其中每個(gè)詳情頁以大量圖片進(jìn)行布局以增加美感。

2.網(wǎng)站配色分析

色彩在網(wǎng)頁設(shè)計(jì)中起到了很大的作用，一個(gè)優(yōu)秀的網(wǎng)頁作品，它的色彩搭配和諧自然，觀賞起來讓人興趣盎然。想要做到這一點(diǎn)，就要熟練掌握網(wǎng)頁的主色調(diào)、輔色調(diào)、點(diǎn)睛色以及背景色的色彩搭配，而要完成這一點(diǎn)不是一蹴而就的事情，需要長(zhǎng)期去觀察優(yōu)秀的成功作品，去吸收它們的精華，總結(jié)其中的規(guī)律，才會(huì)慢慢熟練運(yùn)用。在選擇網(wǎng)頁色彩時(shí)，除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出精美的網(wǎng)頁。第一，用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。第二，用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。第三，用一個(gè)色系。簡(jiǎn)單來說就是用一個(gè)感覺的色彩，如暖色調(diào)的紫、紅、橙，冷色調(diào)的綠、藍(lán)、紫，中性色調(diào)有黑、白、灰三種顏色。色彩要根據(jù)主題來確定，不同的主題選用不同的色彩。例如，用藍(lán)色體現(xiàn)科技型網(wǎng)站的專業(yè)，用粉紅色體現(xiàn)女性的柔情等?？梢宰丶t色為主色調(diào)，淡黃色為輔色調(diào)，黑色為點(diǎn)睛色。其中棕紅色給人喜慶鮮艷的視覺效果，更給人很大視覺沖擊，使之更吸引人；淡黃色給人高雅的感覺，同時(shí)可以和棕紅色一同使用；點(diǎn)睛色正好是logo的顏色，可以更好地突出主題標(biāo)識(shí)。

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

一般效果要求：要適合在主流分辨率（1280px×960px）下正常顯示，主頁面寬度至少1200像素以上，高度不限；要有搜索欄；導(dǎo)航欄除了文字可以加其他網(wǎng)頁元素；Banner通欄最好有動(dòng)態(tài)效果；版權(quán)信息模塊不得缺少。

一般版面設(shè)計(jì)要求：注意制作規(guī)范，包括網(wǎng)站文件，頁面代碼等；版面色彩協(xié)調(diào)，排版布局合理；網(wǎng)頁中的部分文字及圖片不要有空鏈接；動(dòng)態(tài)效果分別用了JavaScript和Flash技術(shù)；網(wǎng)頁布局以div+css技術(shù)為主，以表格為設(shè)計(jì)為輔。

三、首頁模塊劃分

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

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

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

五、結(jié)語

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

參考文獻(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）.