一. 概述

在網(wǎng)店系統(tǒng)的產(chǎn)品詳細(xì)頁面中，展示產(chǎn)品細(xì)節(jié)涉及多張產(chǎn)品圖片和相關(guān)的媒體文件、pdf、doc等，可供顧客瀏覽產(chǎn)品細(xì)節(jié)、進(jìn)行試讀、試聽、試看等，從各個(gè)角度來介紹產(chǎn)品，這些內(nèi)容越豐富越有利顧客了解產(chǎn)品，?也越有利顧客做出購買決定。

但產(chǎn)品詳細(xì)頁面本身就有很多信息，包括產(chǎn)品名稱、價(jià)格、描述、規(guī)格參數(shù)、評論等，如果還加上這么多圖片和媒體文件，那么該頁面將會顯得非常臃腫，導(dǎo)致排版困難，讀取速度變慢等問題。

現(xiàn)在通用的解決方式是設(shè)計(jì)一個(gè)專門的產(chǎn)品圖片櫥窗頁面（Product Photo Gallery）。

該頁面的入口一般是直接點(diǎn)擊產(chǎn)品詳細(xì)頁面的產(chǎn)品大圖然后彈出層或者彈出新頁面。該頁面?zhèn)冗吜谐霎?dāng)前產(chǎn)品所有的產(chǎn)品圖片的縮略圖，點(diǎn)擊縮略圖時(shí)，中間區(qū)域顯示對應(yīng)的大圖，有些還提供放大功能，供顧客查看關(guān)注的細(xì)節(jié)。

產(chǎn)品圖片櫥窗的實(shí)現(xiàn)方式目前常見的是兩種：

• Flash圖片櫥窗
• Javascript圖片櫥窗

下面將就這兩種方式做詳細(xì)說明.

二. Flash 圖片櫥窗

典型的例子是淘寶，實(shí)現(xiàn)方式是設(shè)計(jì)一個(gè)Flash程序，讀取指定目錄下的指定文件（若干個(gè)），但是淘寶做得并不好，感覺會導(dǎo)致圖片失真，所以絕大部分店主都是在詳細(xì)頁面中插入圖片的方式顯示給顧客。

Flash方式的好處是不容易被復(fù)制或者做盜鏈，有利于保護(hù)圖片，而且如果做得好，效果也很漂亮，淘寶在這點(diǎn)上做得太過粗糙了，往往會掩蓋了Flash櫥窗的優(yōu)點(diǎn)。

這里有很多優(yōu)秀的Flash Galley，可做參考：

http://flash-gallery.com/

下面是該網(wǎng)站中兩個(gè)例子的截圖：

但Flash櫥窗比較不好的一點(diǎn)是不利于SEO，而且如果要實(shí)現(xiàn)更多的和服務(wù)器端的互動(dòng)操作，需要對Flash的編程語言ActionScript較為熟悉才行。這對于習(xí)慣于javascript的開發(fā)人員就得學(xué)習(xí)一種新的技術(shù)了。

三. ?Javascript圖片櫥窗

Javascript實(shí)現(xiàn)產(chǎn)品圖片櫥窗是常見的處理方式，有利于SEO優(yōu)化，而且通過JS+Html+CSS可以實(shí)現(xiàn)更多復(fù)雜的效果和互動(dòng)功能。至于防止盜鏈，筆者覺得通過在圖片上做水印才是徹底的解決方式。

Javascript Galley的最佳參考例子是Amazon了，讀者甚至可以將Amazon的產(chǎn)品圖片櫥窗的實(shí)現(xiàn)代碼下載下來參考借鑒。

Amazon的產(chǎn)品圖片櫥窗的設(shè)計(jì)包含多種方式：

• 普通型：列出縮略圖和當(dāng)前的大圖的普通形式。
• 規(guī)格關(guān)聯(lián)型：每一個(gè)獨(dú)立的規(guī)格（如顏色、尺寸）都關(guān)聯(lián)該規(guī)格的產(chǎn)品圖片，通過點(diǎn)擊規(guī)格進(jìn)行切換。
• 圖書試讀型：專門針對圖書閱讀，并提供關(guān)聯(lián)推薦和其它若干功能的.

前面兩種是大多數(shù)產(chǎn)品公用的，而第三種則是專門針對圖書類產(chǎn)品。筆者猜測Amazon的產(chǎn)品圖片櫥窗模板是可以指向到產(chǎn)品目錄級別的。其中第一種和第二種是寫在一個(gè)模板內(nèi)，然后通過判斷產(chǎn)品是否支持規(guī)格來做不同的顯示，該模板為通過模板，比如叫GlobalGallery.jsp。第三種則是獨(dú)立的櫥窗模板，在Books Category中關(guān)聯(lián)調(diào)用，比如叫BooksGallery.jsp。

3.1設(shè)計(jì)說明

• 普通型櫥窗截圖

點(diǎn)擊一個(gè)普通的無規(guī)格的產(chǎn)品的產(chǎn)品大圖即會彈出上面的截圖。

普通型櫥窗的設(shè)計(jì)相當(dāng)?shù)暮唵危譃樯现邢氯糠?，上面是大圖顯示的主體部分，中間是功能欄，有放大、縮小和恢復(fù)正常三個(gè)。下面是多個(gè)圖片的縮略圖。

• 規(guī)格關(guān)聯(lián)型

點(diǎn)擊一個(gè)帶有規(guī)格的產(chǎn)品的產(chǎn)品大圖即會彈出。???????????????????????? ?????? http://www.amazon.com/KitchenAid-KSM150PSWH-Artisan-5-Quart-Mixer/dp/B00005UP2K/ref=sr_1_3?ie=UTF8&s=kitchen&qid=1276958964&sr=1-3

從上圖的設(shè)計(jì)上可以看出，這是在普通型的基礎(chǔ)上增加了右側(cè)的規(guī)格列表框構(gòu)成的。

點(diǎn)擊任一個(gè)規(guī)格，左下側(cè)的縮略圖列表將會變成該規(guī)格相應(yīng)的圖片，比如選擇黑色，那么將會顯示黑色規(guī)格的所有圖片。

這個(gè)擴(kuò)展的設(shè)計(jì)很棒，建議在網(wǎng)店系統(tǒng)中實(shí)現(xiàn)。

• 圖書試讀型

點(diǎn)擊一個(gè)圖書產(chǎn)品的產(chǎn)品圖片彈出的層（注意是層而不是新的頁面）。該類櫥窗比上面兩種都要復(fù)雜得多：

左側(cè)是該產(chǎn)品概述欄，有加入購物車按鈕，下面是Book sections導(dǎo)航，并提供Search inside this book功能（只有當(dāng)前的圖書有電子版才能實(shí)現(xiàn)吧）。

右側(cè)是瀏覽歷史和Also Bought形式的產(chǎn)品推薦。

中間是該圖書的當(dāng)前頁面（可以從第一頁看到最后一頁），并提供放大縮小功能。

頂部右側(cè)還提供了一些小功能，如Feedback、Help、Expanded View（將該層展開，占滿瀏覽器屏幕）和Close。

這個(gè)櫥窗頁面的設(shè)計(jì)較為復(fù)雜，是專門針對圖書類商品設(shè)計(jì)。

對于圖書類產(chǎn)品，顧客在試讀的過程中往往會做出購買決定，而且圖書類產(chǎn)品基本不會涉及產(chǎn)品規(guī)格，所以在該頁面整合了Add to Cart按鈕和Also Buy關(guān)聯(lián)推薦，這點(diǎn)和其它產(chǎn)品有所不同了。

總結(jié)

• Flash雖然效果很漂亮，但是國內(nèi)使用Flash做產(chǎn)品櫥窗做得好的暫時(shí)沒有發(fā)現(xiàn)，我提供的參考例子只是一些樣例，并沒有實(shí)際的整合到網(wǎng)店系統(tǒng)中的優(yōu)秀案例，而且因?yàn)樗鼘EO不友好，加上需要開發(fā)人員掌握一門新的技術(shù)，所以并不推薦使用。
• 采用Javascript + Html + CSS可以實(shí)現(xiàn)更為復(fù)雜的功能和展示方式（炫目的效果并不是首要的，友好的功能才是最重要的），這是實(shí)現(xiàn)產(chǎn)品圖片櫥窗模板的最佳選擇。
• 應(yīng)該支持規(guī)格的個(gè)性圖片櫥窗展示，有利于顧客查看指定規(guī)格的產(chǎn)品圖片，而不是大雜燴的混在一起。
• 支持多套櫥窗模板，如Amazon.com這樣，還可以考慮進(jìn)一步的擴(kuò)展，比如將Dvd影片類產(chǎn)品的試看功能、Mp3類產(chǎn)品的試聽功能都整合到櫥窗模板中，針對不同的產(chǎn)品目錄、產(chǎn)品類型而作相應(yīng)調(diào)用。

來源：http://blog.ebizer.org/picture-window-design/