業界知名的電子商務軟體開發商 Elasticpath 釋出了 5.1 版本，讓我們先睹為快，看看有那些值得借鑑。前臺 demo ：

一、 首頁

首頁截圖如下：

1. 排版組織

分為上中下三部分：

a) 頂部 Header 是 Logo 、常用功能、導航和搜尋欄；

b) 主體部分

c) 底部 Footer 是常用資訊、語言選擇等。

2. 詳細說明

a) 頂部 Header 。 SNAP it UP 圖示在實施時可以將客戶的 Logo 代替它。 minicart 是最精簡的那種，只顯示當前購物車的產品數量，系統負荷可以減到最小。搜尋欄，可以搜尋全部或者按產品一級目錄搜尋。對於非百貨式的電子商務足夠了。

b) 主體部分 Main 。中間三個廣告呈品字形排列，感覺比不上現在流行的選號切換的排版（普通版見 ，複雜版見 ）。廣告下面是商家的推薦產品，但是沒有欄目標題，這樣會讓顧客疑惑。

c) 底部 Footer ，特別之處是將語言選擇放在左下角，感覺還是放在右上邊比較好，因為當主體部分內容比較多時，要切換語言則需要將屏拉到底部。

3. 分析評價

a)

b) 主頁放置的內容不多，對於顯示速度很有幫助，經驗表明，如果一個電子商務網站的主頁裝載過慢，顧客將在等待中離去，這個過程往往只有十幾秒，即使說，主頁最好在 5 秒到 10 秒內顯示完畢。

c) 對於主題商店而言，首頁在一屏內顯示完是有必要的，對於第一次訪問的顧客，他能夠在一個螢幕上了解該網站的大致情況。而中間放置大大的廣告圖片，將產生很好的促銷效果，吸引顧客點選進入網站。

二、 目錄頁面。

點選 file cameras 目錄，截圖如下：

1. 排版組織

a) 一級目錄頁面頂部和底部和主頁一樣，應該是使用 include 或者裝飾器方式新增上去。主要看中間主體部分。

b) 中間劃分為 5 個部分。頂部為當前位置欄；中左為二級目錄；中右上為當前目錄的介紹；中右下為 Top Sellers （賣得最好）的產品推薦；底部為 Recently Viewed （最近歷史），注意最近歷史只針對產品，不包括目錄。

2. 詳細說明

a) 當前位置欄在電子商務網站中必不可少，就如同超市的導航一般，不要讓顧客迷失在產品的海洋中。

b) 只有二級目錄，利於排版，對於主題商店而言，二級足夠，太多會增加管理難度。

c) 產品目錄介紹。對於新推出的產品類別，可以增加目錄介紹，讓顧客有初步的瞭解，對於社會上已經熟知的產品類別則可以將目錄介紹去掉。 Elasticpath 是這樣處理的。

3. 分析評價

a) 整個主體頁面內容分為 5 塊，但是塊與塊之間只用空白來分隔，筆者覺得最好為每塊加上分隔的線條，這樣看上去更加清晰。

三、 進入子目錄

1. 排版組織

a) 由上到下劃分為 5 行。分別是你的位置、標題、特色產品、目錄及產品列表和最近瀏覽。

2. 詳細說明

a) 特色產品欄目安排得很好，一個產品目錄下可能有很多產品，對於目的性不是很強得顧客，要他一個一個產品檢視比較浪費時間，在特色產品欄將商家推薦的產品第一時間呈現給顧客，有利於吸引顧客點選。

b) 第 4 行分為兩列，目錄及產品列表。左邊提供一些常用的過濾方式（ Filter ），如低於 $100 的產品。這些 filter 相當好用，特別對於數碼產品而言，顧客往往對於某個品牌有忠誠度，這樣他便可以點選 Shop By Brand 下的某個品牌來檢視當前產品類別的該品牌產品了。

c) 產品列表對每個產品的排列比較清爽，圖片、標題、簡述、價格和評級。內容控制得比較好。

3. 分析評價

a) 進入 2 級目錄下產品目錄頁面後，一級導航目錄失去了焦點，這樣不好，任何時候都要讓顧客很容易的知道他當前在那個位置。