1.1 了解電子商務網站

在具體學習電子商務網頁設計與制作前，需要了解電子商務網站基礎知識，為以后的學習打好基礎。

1.1.1　網頁的基本構成元素

對于不同性質的網站而言，構成網頁的基本元素是不同的。下面介紹常見的網頁的基本構成元素。

1.網站Logo

網站Logo（見圖1-1）也稱為網站標志，它是一個站點的象征，也是判斷一個站點是否正規的條件之一。網站Logo應體現網站的特色、主題及其文化內涵和理念。成功的網站Logo有著獨特的形象標識，在網站的推廣和宣傳中達到事半功倍的效果。網站Logo一般位于網站左上角，訪問者一眼就能看到它。網站Logo通常有3種尺寸：88像素×31像素、120像素×60像素和120像素×90像素。

2.網站Banner

網站Banner（見圖1-2）又稱頁旗，常作為橫幅廣告，是互聯網廣告中最基本的廣告形式之一。網站Banner可以位于網頁頂部、中部或底部的任意位置，一般為橫向貫穿整個或者大半個頁面的廣告條。網站Banner可以使用GIF圖像文件、靜態圖像，也可以使用動態圖像。除普通GIF圖像文件外，采用動畫能賦予網站Banner更強的表現力和交互性。

網站Banner首先要美觀，如果這個小區域設計得非常令人愉悅，即使網頁沒有瀏覽者要看的內容，或者網頁呈現的是一些他們不感興趣的內容，他們也會被吸引。其次網站Banner還要與整個網頁協調，同時要突出、醒目，用色要同頁面的主色相搭配，如頁面主色是淺黃色，廣告條就可以用一些淺的其他顏色，切忌使用對比色。

3.導航欄

導航欄（見圖1-3）是網頁的重要組成元素，它的任務是幫助瀏覽者在站點內快速查找信息。好的導航欄應該能引導瀏覽者瀏覽網頁而不迷失方向。導航欄的形式多樣，可以是簡單的文字鏈接，也可以是設計精美的圖片或豐富多彩的按鈕，還可以是下拉菜單。

一般來說，網站的導航欄在各個頁面中出現的位置是比較固定的，而且風格也比較一致。導航欄的位置一般有4種：頁面左側、右側、頂部和底部。

當然并不是導航欄在頁面中出現得越多越好，要合理運用導航欄，達到頁面整體上協調一致的效果。

4.文本

網頁內容是網站的靈魂，網頁中的信息以文本為主。文本是網頁中最基本的、必不可少的元素。文字雖然不如圖片那樣易于吸引瀏覽者的注意，但能準確表達信息的內容和含義。

一個內容充實的網站必然會使用大量的文本。良好的文本格式可以創建出別具特色的網頁，激發瀏覽者的閱讀興趣。為了解決文本的問題，人們賦予了文本更多的屬性，如字體、字號、顏色等，通過設置不同的格式，突出顯示重要的內容。

此外，還可以在網頁中設置各種各樣的文字列表，來明確表達一系列項目。圖1-4所示為運用了大量文本的網頁。

5.圖片

圖片在網頁中具有提供信息、展示形象、裝飾網頁、表現風格的作用。圖片是文本的說明和解釋，在網頁中的適當位置放置一些圖片，不僅可以使文本清晰易讀，而且可以使網頁更加有吸引力。現在幾乎所有的網站都使用圖片來提高吸引力，有了圖片，網站才能吸引更多的瀏覽者。

可以在網頁中使用GIF、JPEG和PNG等多種圖像格式，其中使用最廣泛的是GIF和JPEG兩種格式。插入圖像以生動形象地展示信息的網頁如圖1-5所示。

6.視頻

在當今社會，視頻營銷已經成為企業宣傳和品牌推廣的重要手段，視頻可以幫助企業全方位地宣傳，它代替了傳統的圖文表達形式，能讓用戶非常直觀地了解企業的基本信息，多角度感受企業文化。

視頻以影音結合的方式，用最小的篇幅和最短的時間將商品的重要信息完美地呈現出來，通過增強視聽感受來激發買家的購買欲。

例如，一款藍牙耳機原本并不是買家的備選購買商品，但感染力很強的商品視頻（見圖1-6）激發了買家的購買欲，促使其購買該商品。

如果視頻制作精美、具有新意，能引起人們的注意，那么其傳播的速度、廣泛性與帶來的經濟收益是其他傳播信息的方式難以比擬的。

通過視頻來展示商品，可以真實地再現商品的外觀、使用方法和使用效果等，能夠多方位、多角度地展示商品的細節特征，比單純的圖片和文字說明更加令人信服。圖1-7所示為某網站的一則面包視頻，該視頻通過完整的面包制作流程和細節展示，使消費者更充分地了解商品材料和細節。

1.1.2　電子商務網站的概念

電子商務網站是指一個企業或機構在互聯網上建立的站點，是企業開展電子商務的基礎設備和信息平臺，是實施電子商務的公司與服務對象之間的交互界面，是電子商務系統運轉的承擔者和表現者。在軟硬件條件的支持下，電子商務網站由網頁、程序和后臺數據庫組成，具備相應的電子商務應用所需的功能，可以達到宣傳企業形象、發布和銷售商品、提供商業服務等目的。

電子商務網站為瀏覽者搭建起一個網絡平臺，瀏覽者和潛在客戶在這個平臺上可以進行整個交易/交流過程。電子商務網站業務更依賴于互聯網，是公開的信息倉庫。從廣義上來說，電子商務還包括企業內部的商務活動，如生產、管理、財務等，以及企業間的商務活動。

通過電子商務網站，可實現如下目標。

（1）使商家通過網絡將產品銷售到全世界，使消費者足不出戶便買到全世界的商品。

（2）實現在線銷售、在線購物、在線支付，使商家和企業及時跟蹤消費者的購物趨勢。

（3）商家和企業可以利用電子商務在網上推廣自己的獨特形象。

（4）商家和企業可以利用電子商務與合作伙伴保持密切的聯系，改善合作關系。

（5）商家可以為消費者提供及時的技術支持和技術服務，降低服務成本。

（6）促進商家和企業之間的信息交流，使雙方及時得到各種信息，保證決策的科學性和及時性。

1.1.3　電子商務網站的視覺營銷

視覺營銷顧名思義，就是在用戶的視覺感官上下功夫，以引起用戶的共鳴，讓用戶對產品產生深刻的認同感，從而達到營銷的目的。視覺營銷通過塑造有別于競爭對手的獨特的網站形象，吸引用戶瀏覽網站，增加頁面的訪問量和提高頁面的點擊率，最終實現商品的銷售或品牌文化的有效傳播。要想讓電子商務網站具有好的視覺營銷效果，需要遵守以下幾個原則。

1.突出行業特征

在進行電子商務網站視覺設計前，一定要了解商品的屬性及對應行業的特征，然后在此基礎上為電子商務網站選擇相應的色彩和圖片，如護膚品可以用綠色和粉紅色來表現。

2.網站讓人感覺美觀、舒適

電子商務網站應該給人以美觀、舒適的感覺，電子商務頁面結構布局應該符合人們的瀏覽習慣。因為大多數人都是按照從左至右、從上至下的順序瀏覽頁面的，所以在設計電子商務網站頁面布局時，把主推商品、導航欄和促銷信息等重要內容放在頁面左側更能引起消費者的注意。

3.突出主題

電子商務網站需要有明確的主題，表達一定的意圖和要求，并按照視覺心理規律和形式將主題主動傳遞給瀏覽者，使主題在適當的環境中被人們及時理解和接受，從而滿足其需求。這就要求視覺設計不但要單純、簡練、清晰和精確，而且在強調藝術性的同時，更應該注重通過獨特的風格和強烈的視覺沖擊力來突出設計主題，以引起用戶對網頁的注意，增進用戶對網頁內容的理解。

4.依據網站的視覺識別系統設計

根據網站的視覺識別系統來進行電子商務頁面設計，網站會具有較高的辨識度，消費者在瀏覽后，一般都可以留下深刻的印象。在設計電子商務頁面時，一定要不斷強化企業和商品的品牌元素，如企業標準顏色、企業標志等。

5.整體風格統一

網站的整體風格統一包括內容和形式的整體性。設計時強調網頁的整體性，可以使用戶更快捷、更準確、更全面地認識網站、掌握網站信息，并給人一種內部聯系緊密、外部和諧完整的美感。提升整體性也是體現網站獨特風格的重要手段。

電子商務網站視覺設計中容易出現設計風格不統一的錯誤，如網店形象和商品定位不統一、不同模塊的風格不統一、圖片的尺寸不統一、字體和顏色隨意使用等，這樣會讓頁面看起來雜亂無章。圖1-8所示為整體風格統一的電子商務網站。

6.提高易用性

提高易用性的核心是充分考慮消費者的瀏覽習慣，在設計頁面布局時需要從消費者的角度來思考，讓頁面易懂、易用。如果頁面布局（如功能按鈕的位置）與消費者的瀏覽習慣不符，那么消費者可能會感覺不適應，還可能會因為找不到需要的模塊或商品類別而離開。只有用戶認可的、令人感覺舒適的電子商務網站，才會創造更好的瀏覽軌跡，增加頁面停留時長、訪問深度，降低跳失率，提高轉化率。

1.1.4　電子商務網站的主要內容

電子商務網站是網站的一種，由于電子商務有其獨有的特點和功能需求，因此，不同功能的電子商務網站的主要內容不同，下面分別進行介紹。

（1）用于宣傳和推廣的電子商務網站主要包括：關于我們、公司快訊、公司產品、招商加盟、技術中心、銷售網絡、誠聘人才等內容。圖1-9所示為某個用于宣傳和推廣的電子商務網站。

（2）用于網上銷售的電子商務網站主要包括：商品分類、商品展示與報價、客戶注冊與登錄、客戶訂單、網上支付和客戶購物信息查詢等內容。圖1-10所示為某個用于網上銷售的電子商務網站。

（3）用于與客戶交流并為其提供服務的電子商務網站主要包括：客戶留言、網上論壇、郵件列表、售后服務和網上查詢等內容。圖1-11所示為某個用于與客戶交流并為其提供服務的電子商務網站的在線留言功能。