電子商務網站設計探析

閆洪濤

摘 要：電子商務網站設計是電子商務專業學生的主要課程。學生應從網站整體規劃、網站技術要求、首頁模塊劃分等方面對電子商務網站進行設計，從而掌握網站設計技能，更好地應用于未來的工作中。

關鍵詞：電子商務；網頁；規劃；色彩 ；設計

中圖分類號：G712；TP393.02 文獻標志碼：A 文章編號：1008-3561（2018）27-0089-01

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

一、網站整體規劃

1.網站布局規劃

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

2.網站配色分析

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

二、網站技術要求

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

一般版面設計要求：注意制作規范，包括網站文件，頁面代碼等；版面色彩協調，排版布局合理；網頁中的部分文字及圖片不要有空鏈接；動態效果分別用了JavaScript和Flash技術；網頁布局以div+css技術為主，以表格為設計為輔。

三、首頁模塊劃分

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

四、網頁設計的重點分析

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

五、結語

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

參考文獻：

[1]胡蓉，宋文官.電子商務網站規劃與管理教學實驗方案設計[J].現代教育技術，2009（12）.

[2]陳巍.電子商務網站設計課程建設初探[J].揚州職業大學學報，2008（03）.

[3]袁傳懷，殷彬，陶安.電子商務網站建設教學網絡的實踐和思考[J].電子商務，2013（05）.