四、            詳細(xì)頁(yè)面

 

1.         排版說(shuō)明

l         產(chǎn)品顯示分為三列，左邊為圖片列，中間為內(nèi)容列，右邊為Also Like（推薦）欄。

l         產(chǎn)品詳細(xì)由于內(nèi)容比較多，高度比較大，所以將最近瀏覽豎排放置左邊，即產(chǎn)品圖片下面。

l         中間列依次是產(chǎn)品標(biāo)題，編號(hào)，價(jià)格欄，可選配件欄，可選服務(wù)欄，Add to cart按鈕，Add to wishlist按鈕，產(chǎn)品投票，產(chǎn)品明細(xì)，產(chǎn)品特色（即產(chǎn)品屬性）、產(chǎn)品評(píng)價(jià)、產(chǎn)品投票和Also Buy等諸多的功能。

l         中間雖然功能很多，但是總體可以劃分為標(biāo)題價(jià)格、緊密促銷(xiāo)、功能按鈕、產(chǎn)品詳細(xì)內(nèi)容和附加功能等5項(xiàng)。

l         右部放置促銷(xiāo)推薦欄目，現(xiàn)在是Also Like欄目，可以進(jìn)行擴(kuò)展。

 

2.         詳細(xì)說(shuō)明

l         關(guān)于其可選配件、可選服務(wù)欄我稱之為緊密促銷(xiāo)欄。表示這些促銷(xiāo)是和當(dāng)前產(chǎn)品有密切關(guān)系的，這類(lèi)促銷(xiāo)的產(chǎn)品和主產(chǎn)品一般具有從屬關(guān)系，促銷(xiāo)達(dá)成的可能性比一般的促銷(xiāo)推薦要高很多。

l         可選配件欄（Optional Accessories）。每個(gè)配件都是獨(dú)立的產(chǎn)品。所以在配置當(dāng)前產(chǎn)品時(shí)會(huì)有一個(gè)增加可選配件功能，將多個(gè)產(chǎn)品關(guān)聯(lián)進(jìn)來(lái)，產(chǎn)生關(guān)聯(lián)購(gòu)買(mǎi)。

l         可選服務(wù)欄（Protect this item）。這欄比較特別，在這里服務(wù)不是做為一個(gè)獨(dú)立的產(chǎn)品，是否在后臺(tái)有一個(gè)專(zhuān)門(mén)的服務(wù)管理功能，然后產(chǎn)品可以和其進(jìn)行關(guān)聯(lián)。

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

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

l         產(chǎn)品特色欄（Features）。特點(diǎn)是對(duì)產(chǎn)品屬性進(jìn)行了分組。組名字體加重以示區(qū)分

l         選擇配件和服務(wù)，點(diǎn)擊Add to cart，頁(yè)面跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)面。

 

3.         分析評(píng)價(jià)

l         緊密促銷(xiāo)欄目設(shè)計(jì)創(chuàng)新，值得借鑒。

l         在產(chǎn)品特色欄的排版不好，信息量太多，依然采用一頁(yè)顯示，會(huì)導(dǎo)致頁(yè)面很長(zhǎng)，這種情況下建議采用Tab組織內(nèi)容。

l         產(chǎn)品圖片功能較差，重點(diǎn)沒(méi)有突出，縱觀整個(gè)詳細(xì)頁(yè)面，只有一張圖片。對(duì)于網(wǎng)上購(gòu)物而言，產(chǎn)品的多媒體功能一定是重點(diǎn)之一。

l         Product Detail功能太差了！沒(méi)有表現(xiàn)出可以插入圖片的可能。因?yàn)楹芏鄷r(shí)候，在詳細(xì)介紹一個(gè)產(chǎn)品的時(shí)候基本都會(huì)插入一些進(jìn)行圖文并茂的說(shuō)明。

l         產(chǎn)品詳細(xì)頁(yè)面的整體排版我還是欣賞的，內(nèi)容組織比較清爽，符合歐美商務(wù)風(fēng)格，重點(diǎn)基本突出了，右列放置促銷(xiāo)欄目也是比較好。

 

五、            購(gòu)物車(chē)頁(yè)面

 

 

1.         排版說(shuō)明

l         總體呈品字型排版。上部為購(gòu)物車(chē)主體內(nèi)容，用列表組織，顯示購(gòu)物車(chē)所有產(chǎn)品及價(jià)格、操作等。下左部是附加功能欄，右部是購(gòu)物車(chē)總計(jì)欄。

l         購(gòu)物車(chē)主內(nèi)容從左到右分別為功能、產(chǎn)品、價(jià)格、數(shù)量和合計(jì)欄。符合人的視覺(jué)順序，也是電子商務(wù)網(wǎng)站的購(gòu)物車(chē)常用的排版方式。

l         下左部提供了多種的附加功能，包括即時(shí)運(yùn)算運(yùn)費(fèi)、稅費(fèi)和Also Like。

l         下右部是總計(jì)，購(gòu)物車(chē)總價(jià)（包含產(chǎn)品、運(yùn)費(fèi)和稅費(fèi)等）。提供結(jié)賬按鈕和繼續(xù)購(gòu)物按鈕，其中繼續(xù)購(gòu)物按鈕做得很小及沒(méi)有做圖標(biāo)，和在詳細(xì)頁(yè)面的Add to wish list原理一樣，都是不能影響主按鈕（結(jié)賬按鈕）的瀏覽和點(diǎn)擊。

2.         詳細(xì)說(shuō)明

l         購(gòu)物車(chē)主內(nèi)容的功能欄有三個(gè)功能，edit、move to wishlist和remove，edit是跳回產(chǎn)品詳細(xì)頁(yè)面并根據(jù)當(dāng)前的選購(gòu)情況做了些調(diào)整，如Add to cart按鈕換成update item，已經(jīng)選購(gòu)過(guò)的附件將不會(huì)再出現(xiàn)在產(chǎn)品詳細(xì)頁(yè)面。

l         Move to wishlist，加入意愿清單。對(duì)于常見(jiàn)的購(gòu)物網(wǎng)站這個(gè)按鈕應(yīng)該是save for later（以后購(gòu)買(mǎi)）即是加入收藏夾。而ElasticPath則是將收藏夾功能去除，將其和意愿清單功能進(jìn)行合并，也無(wú)不可，對(duì)顧客而言簡(jiǎn)單了。

l         購(gòu)物車(chē)產(chǎn)品列表下面一欄是輸入促銷(xiāo)贈(zèng)券/優(yōu)惠券號(hào)碼欄。從這點(diǎn)看來(lái)，ElasticPath沒(méi)有實(shí)現(xiàn)類(lèi)似動(dòng)態(tài)促銷(xiāo)引擎的功能，即其所有產(chǎn)品價(jià)格在后臺(tái)已經(jīng)固定。通過(guò)向顧客發(fā)送促銷(xiāo)贈(zèng)券/優(yōu)惠券來(lái)實(shí)現(xiàn)進(jìn)一步的折扣。

l         在修改購(gòu)買(mǎi)數(shù)量或錄入促銷(xiāo)贈(zèng)券/優(yōu)惠券號(hào)碼后點(diǎn)擊re-calculate按鈕后將會(huì)重新計(jì)算。相當(dāng)一個(gè)更新按鈕，只是換一個(gè)稱呼而已。

l         左下面第一項(xiàng)是通過(guò)根據(jù)顧客所在區(qū)域和選擇的運(yùn)輸方式來(lái)確定運(yùn)費(fèi)和稅費(fèi)。

l         左下面第二項(xiàng)是提供和購(gòu)物車(chē)內(nèi)產(chǎn)品相關(guān)的Also Like 促銷(xiāo)推薦。

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

3.         分析評(píng)價(jià)

l         綜合ElasticPath的購(gòu)物車(chē)所有功能，它的一個(gè)主要目的是在購(gòu)物車(chē)頁(yè)面讓顧客可以計(jì)算該次購(gòu)物的所有費(fèi)用。在電子商務(wù)實(shí)踐中有一個(gè)專(zhuān)有名詞叫shopping cart abandonment（購(gòu)物車(chē)遺棄），這種情況發(fā)生的因素有很多，其中一個(gè)就是顧客對(duì)附加費(fèi)用的顧慮，顧客往往會(huì)顧慮到除產(chǎn)品價(jià)格本身外，網(wǎng)站還會(huì)收取那些及多少附加費(fèi)用。在購(gòu)物車(chē)頁(yè)面就讓顧客知道總共的費(fèi)用，對(duì)購(gòu)物車(chē)遺棄現(xiàn)象的解決很有幫助。

 

六、            結(jié)賬流程

 

1.         排版說(shuō)明

l         整個(gè)結(jié)賬流程都放置在一個(gè)頁(yè)面，大量使用了Ajax來(lái)實(shí)現(xiàn)。左邊是購(gòu)物車(chē)的詳細(xì)信息，右邊是結(jié)賬流程的各個(gè)步驟。

l         結(jié)賬流程分為四個(gè)步驟：登錄及完善顧客信息、輸入運(yùn)輸?shù)刂?、輸入發(fā)票地址和輸入方式。

l         使用百葉窗式的展現(xiàn)方式，在一個(gè)頁(yè)面呈現(xiàn)，無(wú)須跳轉(zhuǎn)。

2.         詳細(xì)說(shuō)明

l         左邊是購(gòu)物車(chē)詳細(xì)信息，包括Cart Items和計(jì)算公式方式的價(jià)格計(jì)算呈現(xiàn)。排版很清晰，一目了然。

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

l         輸入運(yùn)輸?shù)刂凡襟E。如果已經(jīng)輸入過(guò)，則會(huì)直接將以前輸入的地址讀取出來(lái)。根據(jù)運(yùn)輸?shù)刂?，提供若干有效的運(yùn)輸方式，對(duì)應(yīng)不同的運(yùn)輸費(fèi)用。

l         輸入發(fā)票步驟。同上。

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

3.         分析評(píng)價(jià)

ElasticPath5.1的一個(gè)新的特色功能是它的One Page Checkout（一頁(yè)結(jié)賬流程）。這和某些電子商務(wù)網(wǎng)站的一頁(yè)結(jié)賬有所不同，那些網(wǎng)站真的是一頁(yè)列出所有步驟，導(dǎo)致頁(yè)面很長(zhǎng)。

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

而一般的一頁(yè)結(jié)賬流程是一次性將所有步驟的信息全部堆在顧客面前，就如同這樣的場(chǎng)景：顧客興致沖沖的選購(gòu)了一堆商品去結(jié)賬時(shí)，商場(chǎng)收銀人員將一張很長(zhǎng)的表單遞給他并告知：您需要填寫(xiě)這么一系列的東西才能夠購(gòu)物，可以想象顧客這個(gè)時(shí)候?qū)⑹窃趺吹膾吲d。

    網(wǎng)站每次顯示給顧客的信息要恰如其分，不要一下子將所有信息都給顧客，這是不負(fù)責(zé)任的做法，是我們?cè)谠O(shè)計(jì)電子商務(wù)系統(tǒng)時(shí)需要避免的。

【轉(zhuǎn)載請(qǐng)注明出處！】

筆者對(duì)J2EE相關(guān)技術(shù)及電子商務(wù)方面有所研究，歡迎進(jìn)行交流。

QQ：16399476

MSN：yanchaomin@hotmail.com

=================================
顏超敏
專(zhuān)注電子商務(wù)、工作流企業(yè)級(jí)Java軟件系統(tǒng)研發(fā)；
個(gè)人博客：Craft6.cn 唯心六藝
=================================