Menu

淺說相冊圖片詳情頁面中大圖的瀏覽方式

對於相冊來說,大圖的瀏覽非常重要,因為對瀏覽者來說最重要的就是大圖看得爽不爽,因為做項目的需要,我比較了許多相冊的大圖瀏覽方式,現在一一評說,本文只代表我個人的觀點,歡迎大家拍磚呀!

Flickr

Flickr一直是專業攝影愛好者喜歡的相冊,它在照片詳情頁面提供了許多的尺寸供瀏覽者選擇,還體貼的提供了「大尺寸下載」的鏈接,讓瀏覽者能把心儀的照片下載到自己的硬盤。

 

在Flickr的所有尺寸中,除了「大圖下載」外,還有Flickr周到的正方形75×75像素圖片,因為現在許多聊天工 具、博客、論壇的個人信息上都需要用到這種小尺寸的正方形照片,Flickr幫助大家裁切出這樣的正方形照片無疑為許多想在個人信息上上傳正方形圖片卻不 懂得製作的用戶提供了方便,當然,真正有多少用戶用到這個圖片,這個還是需要有實踐與數據來考證的,至於照片其它幾個規格的尺寸個人感覺作用不大。

在看圖片時,Flickr支持Cooliris插件,可以播放幻燈,有兩種方式可以進入:(1)當用戶把鼠標放在圖片上幾秒後,圖片的左下角出現圖標 ,點擊圖標彈出幻燈演示頁面;(2) 相冊右邊有一個「播放幻燈」的圖標,點擊後會彈出幻燈播放;

Cooliris黑色背景下全屏的展示圖片確實給了用戶一種很好的視覺感受,當然這個插件也有一些其它的不足,但有總比沒有 好;不過,Flickr「播放幻燈」的圖標設計得難於識別,不知道是「播放幻燈」的意思,沒有多少人會把一個頁面的圖標都mouseover一次的。

另外,Flickr沒有點擊圖片翻到下一頁的功能,這對許多習慣了這種翻頁方式的高級用戶來說顯得有些不方便。

Facebook

Facebook的大圖瀏覽沒有原圖查看,也沒有不同尺寸的圖,用戶上傳的圖被縮放到了一個固定的尺寸,用戶可以點擊查看下 一張圖片;facebook也像Flickr一樣支持Cooliris插件,可以播放幻燈,這種播放方式必須是用戶安裝了這個插件的情況下才能播放,且因 為該插件的服務器在國外,遇到網速不夠快的用戶用這個插件看圖有點兒卡。

Google的相冊picasa

Google的相冊picasa保持了google設計的一慣的簡潔風格,圖片的尺寸是我看過的相冊中最大的了,有912像 素的寬和高,比其它網站相冊產品的圖片都要大,在顯示器越來越大的今天,這樣的大圖看起來真的很爽,除此之外,picasa的圖片右上角有一個放大的功 能,點右上角的放大鏡,圖片會在一個固定的窗口內放到一個很大的尺寸,用戶可以拖動大的圖片,查看自己關心的部份, picasa的這個功能比簡單的查看原圖要方便些;因為簡單的查看一張比較大的原圖時,瀏覽器窗口會出現橫豎兩個方向的滾動條,用戶用起來不方便。

另外,picasa也沒有點擊翻看下一張照片的功能,這個是許多用戶習慣了的一種看照片的方式;

網易相冊

對網易相冊我一直有一種說不出的親切感,熟悉並喜歡網易這種簡潔明了的風格,網易相冊的大圖查看也是很簡單的。

網易相冊的大圖下加了一個陰影,在視覺上增加了許多的美感,但圖片不大,也沒有原圖查看或放大的功能,這個對想看精美大圖的攝影愛好者來說是一個遺憾,要看相冊的原圖,需要通過相冊右側的一個「下載此照片」的鏈接,這個鏈接並不容易被用戶關注到;

網易相冊的大圖瀏覽,當在大圖上點鼠標時,圖片會翻到「上一張」或「下一張」,以圖片豎直方向中心線為軸線,鼠標點到圖片豎 直中心線左面時變成向左的箭頭,點擊圖片出現「下一張」;鼠標點到圖片豎直中心線右面時變成向右的箭頭,點擊圖片出現「上一張」,整個圖片切換的過程非常 的流暢。

百度相冊

百度有許多產品都做得很好,但是說真的相冊做得挺一般的,百度相冊的大圖查看可能是因為屬於個人空間的一個欄目的原因,真的沒有什麼亮點,首先,圖片的尺寸很小,點擊圖片出現圖片的原圖,感覺百度的相冊在設計上是比較粗糙的。

QQ相冊

QQ相冊圖片尺寸挺大的,頁面上也有類似於網易相冊的那種用鼠標在照片上點擊往前或後翻的功能,也會以圖片豎直方向中心線為軸線,鼠標變成向左或向右的箭頭,點擊照片出現「上一張」或「下一張」的分頁,就大圖瀏覽這一點來說,QQ相冊還是不錯的。

Yupoo相冊

Yupoo相冊的大圖瀏覽與Flickr差不多,圖片的尺寸不大,可以查看幾個規格尺寸的圖片;


個人認為在設計產品時借鑑成功者的經驗確實是一種很好的方法,但首先應該能分得清哪些是成功的經驗,哪些不是,一味的照搬,不分良莠,反而會對產品有負面的影響;

巴巴變

巴巴變無論從色彩還是產品的設計都太像Flickr了,可見一個成功的產品對行業內其它產品的影響有多大,但巴巴變有一個不得不提的特色,它有專門針對網店店舖設計的相冊,有許多有趣的功能,但就大圖查看來說與Flickr差不多;

走馬觀花的看了許多相冊產品,各自都有自己的特色,當然也有許多共同之處,我總結了一下相冊大圖查看頁面設計時需要注意的幾點:

(1) 在本公司網站設計規範許可的寬度範圍內,圖片查看越大越好!

(2) 在圖片上加上點擊翻頁的功能,這是許多用戶已經習慣了的看圖方式,也能方便的讓用戶查
看本相冊的其它照片;

(3) 如果相冊是需要播放幻燈的,那麼就選擇一種合適的方式,是在本頁內播放還是彈出一全
屏的頁面播放,或者是支持Cooliris插件,根據自己商業目標和目標用戶群來進行選擇,也曾
有設計師與我討論過是否可以用 flash來做幻燈的播放,在這點上我個人的建議是別輕易使用
flash來查看需要展示精緻細節的圖片,因為flash會自動的對圖片進行壓縮,會損害到圖片的
質量,另外,圖如果太大的話,會需要比較長的loadding時間;

(4) 儘可能的為用戶提供原圖,或放大的圖片,便於用戶查看更精緻的細節;

(5) 對其它的相冊產品可以借鑑,但不要抄襲,要借鑑其它產品的成功之處,而不是無論是
否符合自己的產品特色和用戶需要都照搬過來,因為不是功能越多的產品就越好,而是越符合
自己產品目標用戶群需要的產品就越好;