【網(wǎng)頁設(shè)計范文】淺析電子商務(wù)的網(wǎng)站設(shè)計

時間：2022-07-26 09:39:01 | 來源：網(wǎng)站運營

時間：2022-07-26 09:39:01 來源：網(wǎng)站運營

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

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

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

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

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

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

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

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

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

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

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

三、首頁模塊劃分

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

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

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

五、結(jié)語

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

參考文獻

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

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

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