任務二 電子商務網站結構設計

任務概述

對于電子商務網站而言，網站流量的多少在很大程度上取決于網站的結構設計。合理的網站結構設計有利于企業商務訴求的表達。不同類型的電子商務網站，其頁面設計在內容呈現、版面處理等方面也會有所不同，這其中的結構設計非常有講究。本任務將學習如何設計電子商務網站結構。

任務實施

一、網站的物理結構

網站的物理結構指的是網站目錄及包含文件所存儲的真實位置表現出來的結構。物理結構一般包含兩種不同的表現形式：扁平式結構和樹形結構。

1. 扁平式結構

網站將所有網頁都存放在網站根目錄下，這種結構就是扁平式結構，如圖1-5所示。

扁平式結構的優點是結構層次短、蜘蛛效率高、URL短，對搜索引擎而言最為理想，因為搜索引擎在抓取網頁時，在第一層就可以抓取到內頁，有利于搜索引擎的收錄與排名；缺點是URL語義不明顯，隨著數據量的增加會使網站變得難以組織，內部鏈接不好做，權重傳遞難以集中，查找和維護起來非常麻煩。因此，扁平式結構一般適用于只有少量頁面的微型、小型站點。

2. 樹形結構

網站的樹形結構是指數據元素之間存在著“一對多”的樹形關系的數據結構。簡單來說，樹形結構就是該目錄下還分別有幾個分類文件夾，頁面放在這幾個分類文件夾中。當然，分類文件夾中同時也可以有子分類文件夾，如圖1-6所示。

樹形結構的優點是結構清楚、URL語義明確、識別度高、搜索引擎處理內部鏈接的權值傳遞比較容易、后期管理比較方便；缺點是深層次將導致收錄速度下降，而且過密的結構也會導致網站混亂、鏈接復雜、蜘蛛效率下降。所以，做好樹形結構的欄目組織和鏈接優化至關重要。這種結構適合內容類別多、內容量大的網站。

二、網站的邏輯結構

網站的邏輯結構也稱作鏈接結構，主要是指由網頁內部鏈接所形成的邏輯結構。

在網站的邏輯結構中，通常采用“鏈接深度”來描述頁面之間的邏輯關系。鏈接深度是指從源頁面到達目標頁面所經過的路徑數量。例如，某網站的網頁A中，存在一個指向目標頁面B的鏈接，則從頁面A到頁面B的鏈接深度就是1。

與物理結構類似，網站的邏輯結構同樣可以分為扁平式和樹形兩種。扁平式邏輯結構的網站，實際上就是網站中任意兩個頁面之間都可以相互鏈接，也就是說網站中任意一個頁面都包含其他所有頁面的鏈接，網頁之間的鏈接深度都是1，很少有單純采用扁平式邏輯結構作為整站結構的網站。樹形邏輯結構是指使用分類、頻道等頁面，對同類屬性的頁面進行鏈接地址組織的網站結構。在樹形邏輯結構網站中，鏈接深度大多大于1。

三、網站的構成

網站是一個整體，網頁是一個個體，一個網站是由很多網頁構建而成的。一般來說，網站都至少有兩種頁面，即首頁和內頁。

網站首頁是一個網站的入口網頁，作用是引導用戶瀏覽網站其他部分的內容，其重要性不言而喻。

首先，首頁的基本職能是為訪問網站的用戶提供導航的作用。首頁中可以有網站的簡介、業務的分類等，也可以根據網站的類型進行更深層次的劃分。通常網站會將最想展示的內容放置在首頁中，以達到在第一時間直觀地向用戶展示的目的。

其次，首頁有體現和突出網站主題的作用。根據網站的不同類型，要設置好網站的主題。例如，服務型企業會在首頁展示自己的服務體系及相關內容，而生產型企業一般都會將自己的主打產品放置在首頁中。

相較于首頁的結構設置，內頁的結構布局沒有首頁那么重要，但也有著重要的作用。無論哪種類型的網站，其中的內容都起著重要的作用。根據用戶需求的不同，內頁會有風格各異的設置，但都要遵循一點，那就是內容制勝。內頁具體的結構設置需要根據實際情況具體分析，但必須要明確內容的關鍵性。

四、網頁的空間結構

一個優秀的網頁，除了素材和顏色的搭配之外，布局井井有條也是至關重要的。網頁設計中的空間結構就是網頁中各種構成要素（如文字、照片、圖像、圖表和菜單等）在網頁瀏覽器中的位置分布。傳統的經典網頁可以分為頂部、主體、底部三個部分，各部分又分別可以細分。

1. 網頁頂部

無論對電子商務網站而言，還是從用戶體驗而言，頂部都是網站最重要的位置。搜索引擎的抓取規則是從網頁的頂部往下，從左往右，因此在進行網頁設計時要重視網頁的左上角位置。

一般在這個位置放的是網站Logo，網頁的頭部留上一行字的位置，以添加網站的關鍵字。在Logo中添加ALT標簽（網站上圖片的文字提示），不但可以提高網站的關鍵字密度，而且對網站的排名也很有好處。此外，登錄條、頁面橫幅廣告、菜單欄等內容都可以放在頂部。蘇寧易購網站首頁的頂部設計如圖1-7所示。

2. 網頁主體

網頁主體是網頁的內容部分，網站的中間位置也就是網站的重點位置，因為大多數企業信息、產品介紹、業務流程等一系列想要對用戶表達的內容都在這個區域。

一般可以把網頁主體分為2～3個豎列，包括側欄、欄目等。在構架網站時，可以選擇一個新聞版塊放置在網站中間的左上角，這樣方便搜索引擎收錄網站，而且對網站的權重提升會起到關鍵性的作用。圖片信息也要添加ALT標簽，但不要全是關鍵字，合理地控制關鍵字的密度也是網站排名中很重要的一點。

小米網站首頁的主體設計如圖1-8所示。

3. 網頁底部

網頁底部大多用于放置友情鏈接、網站版權信息、使用協議等，也可以放一些導航鏈接。友情鏈接版塊對網站的權重和排名都是很有利的，所以這一塊盡量保留。在版權信息中可以添加一些關鍵字并且加粗、加鏈接，這對關鍵字的排名提升也會起到一定的作用。

淘寶網站首頁的底部設計如圖1-9所示。

五、網頁的布局結構

創建網頁結構實際上就是對網頁內容的布局進行規劃。網頁布局結構的創建是頁面優化的重要環節之一，會直接影響頁面的用戶體驗及相關性，還在一定程度上影響網站的整體結構及頁面被收錄的數量。

網頁常見的布局結構有“國”字形結構布局、“廠”字形結構布局、“回”字形結構布局、框架型結構布局和自由式結構布局等。

1. “國”字形結構布局

“國”字形結構也稱為“同”字形結構，這種結構布局是電子商務網站中最常見的一種布局類型，即最上面是網站的標題及橫幅廣告條，接下來是網站的主要內容，左右分列一些內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等，如圖1-10所示。

這種布局的優點是頁面結構清晰，主次分明，是適合初學者使用的布局方法；缺點是因為過于規矩而顯得呆板，如果在細節、色彩上安排不得當，很容易讓人產生視覺疲勞。

2. “廠”字形結構布局

這種結構布局與“國”字形結構布局其實只是形式上的區別，它去掉了“國”字形結構布局中最右側的部分，給主內容區釋放了更多的空間。這種布局上面是標題及橫幅廣告，接下來左側是一窄列信息或鏈接等，右側是很寬的內容區，下面也是一些網站的輔助信息，如圖1-11所示。

3. “回”字形結構布局

“回”字形結構布局是“國”字形結構布局的一種變形，即在“國”字形結構布局的下方增加了一個橫向通欄。這種結構的優點是將網頁中不被重視的頁腳利用起來，增加了主體內容，充分利用了頁面的有限空間，如圖1-12所示。但是，這種結構往往會使頁面充斥著各種內容，可能會給人造成過于繁雜的感覺。

4. 框架型結構布局

常見的框架型結構布局主要分為左右框架型、上下框架型和綜合框架型。左右框架型是一種左右分別為兩頁的框架結構，一般左側是導航鏈接，有時最上面會有一個小的標題或標志，右側是內容。上下框架型與左右框架型類似，區別僅僅在于它是一種上下分為兩頁的框架。綜合框架型結合以上兩種結構，是相對復雜的一種框架結構，較為常見的是類似于“拐角”的結構布局。

由于兼容性和美觀等因素，這種布局目前專業設計人員采用的已經不多，不過在一些大型論壇上還是比較受青睞的，有些企業網站也有應用。

5. 自由式結構布局

自由式結構布局的隨意性特別大，它改變了傳統的以圖文為主的表現形式，將圖片、Flash動畫或視頻作為主體內容，導航欄、文字說明等都放在不太顯眼的位置、通常化妝品類、時裝類、科技類等網站會采用這種結構。精美的平面設計、富有創意的Flash動畫、精彩的視頻讓表達的信息更豐富，如圖1-13所示。但是，這種結構文字過少，難以讓瀏覽者長時間關注，有時可能因為導航欄不太明顯而給用戶操作造成不便。