四、            詳細頁面

 

1.         排版說明

l         產品顯示分為三列，左邊為圖片列，中間為內容列，右邊為Also Like（推薦）欄。

l         產品詳細由于內容比較多，高度比較大，所以將最近瀏覽豎排放置左邊，即產品圖片下面。

l         中間列依次是產品標題，編號，價格欄，可選配件欄，可選服務欄，Add to cart按鈕，Add to wishlist按鈕，產品投票，產品明細，產品特色（即產品屬性）、產品評價、產品投票和Also Buy等諸多的功能。

l         中間雖然功能很多，但是總體可以劃分為標題價格、緊密促銷、功能按鈕、產品詳細內容和附加功能等5項。

l         右部放置促銷推薦欄目，現在是Also Like欄目，可以進行擴展。

 

2.         詳細說明

l         關于其可選配件、可選服務欄我稱之為緊密促銷欄。表示這些促銷是和當前產品有密切關系的，這類促銷的產品和主產品一般具有從屬關系，促銷達成的可能性比一般的促銷推薦要高很多。

l         可選配件欄（Optional Accessories）。每個配件都是獨立的產品。所以在配置當前產品時會有一個增加可選配件功能，將多個產品關聯進來，產生關聯購買。

l         可選服務欄（Protect this item）。這欄比較特別，在這里服務不是做為一個獨立的產品，是否在后臺有一個專門的服務管理功能，然后產品可以和其進行關聯。

l         Add to Cart是最重要的按鈕，所以使用圖標，并且比較大！這點很重要，在本頁面即使有其它按鈕，都不能影響到Add to cart的視覺感受。所以最好是其它按鈕全部使用鏈接。

l         Add to wishlist不能影響到Add to cart按鈕，所以使用鏈接和小字體。

l         產品特色欄（Features）。特點是對產品屬性進行了分組。組名字體加重以示區分

l         選擇配件和服務，點擊Add to cart，頁面跳轉到購物車頁面。

 

3.         分析評價

l         緊密促銷欄目設計創新，值得借鑒。

l         在產品特色欄的排版不好，信息量太多，依然采用一頁顯示，會導致頁面很長，這種情況下建議采用Tab組織內容。

l         產品圖片功能較差，重點沒有突出，縱觀整個詳細頁面，只有一張圖片。對于網上購物而言，產品的多媒體功能一定是重點之一。

l         Product Detail功能太差了！沒有表現出可以插入圖片的可能。因為很多時候，在詳細介紹一個產品的時候基本都會插入一些進行圖文并茂的說明。

l         產品詳細頁面的整體排版我還是欣賞的，內容組織比較清爽，符合歐美商務風格，重點基本突出了，右列放置促銷欄目也是比較好。

 

五、            購物車頁面

 

 

1.         排版說明

l         總體呈品字型排版。上部為購物車主體內容，用列表組織，顯示購物車所有產品及價格、操作等。下左部是附加功能欄，右部是購物車總計欄。

l         購物車主內容從左到右分別為功能、產品、價格、數量和合計欄。符合人的視覺順序，也是電子商務網站的購物車常用的排版方式。

l         下左部提供了多種的附加功能，包括即時運算運費、稅費和Also Like。

l         下右部是總計，購物車總價（包含產品、運費和稅費等）。提供結賬按鈕和繼續購物按鈕，其中繼續購物按鈕做得很小及沒有做圖標，和在詳細頁面的Add to wish list原理一樣，都是不能影響主按鈕（結賬按鈕）的瀏覽和點擊。

2.         詳細說明

l         購物車主內容的功能欄有三個功能，edit、move to wishlist和remove，edit是跳回產品詳細頁面并根據當前的選購情況做了些調整，如Add to cart按鈕換成update item，已經選購過的附件將不會再出現在產品詳細頁面。

l         Move to wishlist，加入意愿清單。對于常見的購物網站這個按鈕應該是save for later（以后購買）即是加入收藏夾。而ElasticPath則是將收藏夾功能去除，將其和意愿清單功能進行合并，也無不可，對顧客而言簡單了。

l         購物車產品列表下面一欄是輸入促銷贈券/優惠券號碼欄。從這點看來，ElasticPath沒有實現類似動態促銷引擎的功能，即其所有產品價格在后臺已經固定。通過向顧客發送促銷贈券/優惠券來實現進一步的折扣。

l         在修改購買數量或錄入促銷贈券/優惠券號碼后點擊re-calculate按鈕后將會重新計算。相當一個更新按鈕，只是換一個稱呼而已。

l         左下面第一項是通過根據顧客所在區域和選擇的運輸方式來確定運費和稅費。

l         左下面第二項是提供和購物車內產品相關的Also Like 促銷推薦。

l         右部為總體價格計算和功能按鈕欄。主要在元素排版上，要讓顧客對總價格的組成一目了然，并突出總價即可。

3.         分析評價

l         綜合ElasticPath的購物車所有功能，它的一個主要目的是在購物車頁面讓顧客可以計算該次購物的所有費用。在電子商務實踐中有一個專有名詞叫shopping cart abandonment（購物車遺棄），這種情況發生的因素有很多，其中一個就是顧客對附加費用的顧慮，顧客往往會顧慮到除產品價格本身外，網站還會收取那些及多少附加費用。在購物車頁面就讓顧客知道總共的費用，對購物車遺棄現象的解決很有幫助。

 

六、            結賬流程

 

1.         排版說明

l         整個結賬流程都放置在一個頁面，大量使用了Ajax來實現。左邊是購物車的詳細信息，右邊是結賬流程的各個步驟。

l         結賬流程分為四個步驟：登錄及完善顧客信息、輸入運輸地址、輸入發票地址和輸入方式。

l         使用百葉窗式的展現方式，在一個頁面呈現，無須跳轉。

2.         詳細說明

l         左邊是購物車詳細信息，包括Cart Items和計算公式方式的價格計算呈現。排版很清晰，一目了然。

l         登錄及完善顧客信息步驟。對于已注冊用戶可以直接登錄，對于新用戶也可以直接在該步驟完成，而無須跳到登錄/注冊頁面。很是方便。

l         輸入運輸地址步驟。如果已經輸入過，則會直接將以前輸入的地址讀取出來。根據運輸地址，提供若干有效的運輸方式，對應不同的運輸費用。

l         輸入發票步驟。同上。

l         輸入支付信息步驟。Demo系統只支持信用卡支付方式。全部輸入完成，點擊Confirm Order即可完成訂單的提交。

3.         分析評價

ElasticPath5.1的一個新的特色功能是它的One Page Checkout（一頁結賬流程）。這和某些電子商務網站的一頁結賬有所不同，那些網站真的是一頁列出所有步驟，導致頁面很長。

對于這兩種一頁結賬流程的優劣，我個人認為ElasticPath5.1組織得比較好，理由有兩個方面：1、采用了Ajax技術，將所有結賬步驟放在一頁組織而又不顯得凌亂，給予用戶很好的購物體驗；2、體現出一種引導/導購的設計思路，引導顧客一步一步的完成整個購物流程，讓其不需要進行多余的思考。

而一般的一頁結賬流程是一次性將所有步驟的信息全部堆在顧客面前，就如同這樣的場景：顧客興致沖沖的選購了一堆商品去結賬時，商場收銀人員將一張很長的表單遞給他并告知：您需要填寫這么一系列的東西才能夠購物，可以想象顧客這個時候將是怎么的掃興。

    網站每次顯示給顧客的信息要恰如其分，不要一下子將所有信息都給顧客，這是不負責任的做法，是我們在設計電子商務系統時需要避免的。

【轉載請注明出處！】

筆者對J2EE相關技術及電子商務方面有所研究，歡迎進行交流。

QQ：16399476

MSN：yanchaomin@hotmail.com

=================================
顏超敏
專注電子商務、工作流企業級Java軟件系統研發；
個人博客：Craft6.cn 唯心六藝
=================================