導語：電子商務網(wǎng)站設計解析一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

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

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

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

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

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

三、首頁模塊劃分

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

四、網(wǎng)頁設計的重點分析

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

五、結語

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

參考文獻：

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

[2]陳巍.電子商務網(wǎng)站設計課程建設初探[J].揚州職業(yè)大學學報,2008(03).

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

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