技術(shù)資訊
淺說相冊圖片詳情頁面中大圖的瀏覽方式
2009-02-01 15:15:00
對于相冊來說,大圖的瀏覽非常重要,因為對瀏覽者來說最重要的就是大圖看得爽不爽,因為做項目的需要,我比較了許多相冊的大圖瀏覽方式,現(xiàn)在一一評說,本文只代表我個人的觀點,歡迎大家拍磚呀!
Flickr
Flickr一直是專業(yè)攝影愛好者喜歡的相冊,它在照片詳情頁面提供了許多的尺寸供瀏覽者選擇,還體貼的提供了“大尺寸下載”的鏈接,讓瀏覽者能把心儀的照片下載到自己的硬盤。
在Flickr的所有尺寸中,除了“大圖下載”外,還有Flickr周到的正方形75×75像素圖片,因為現(xiàn)在許多聊天工具、博客、論壇的個人信息上都需要用到這種小尺寸的正方形照片,F(xiàn)lickr幫助大家裁切出這樣的正方形照片無疑為許多想在個人信息上上傳正方形圖片卻不懂得制作的用戶提供了方便,當(dāng)然,真正有多少用戶用到這個圖片,這個還是需要有實踐與數(shù)據(jù)來考證的,至于照片其它幾個規(guī)格的尺寸個人感覺作用不大。
在看圖片時,F(xiàn)lickr支持Cooliris插件,可以播放幻燈,有兩種方式可以進(jìn)入:(1)當(dāng)用戶把鼠標(biāo)放在圖片上幾秒后,圖片的左下角出現(xiàn)圖標(biāo),點擊圖標(biāo)彈出幻燈演示頁面;(2) 相冊右邊有一個“播放幻燈”的圖標(biāo),點擊后會彈出幻燈播放;
Cooliris黑色背景下全屏的展示圖片確實給了用戶一種很好的視覺感受,當(dāng)然這個插件也有一些其它的不足,但有總比沒有好;不過,F(xiàn)lickr“播放幻燈”的圖標(biāo)設(shè)計得難于識別,不知道是“播放幻燈”的意思,沒有多少人會把一個頁面的圖標(biāo)都mouSEOver一次的。
另外,F(xiàn)lickr沒有點擊圖片翻到下一頁的功能,這對許多習(xí)慣了這種翻頁方式的高級用戶來說顯得有些不方便。
Facebook的大圖瀏覽沒有原圖查看,也沒有不同尺寸的圖,用戶上傳的圖被縮放到了一個固定的尺寸,用戶可以點擊查看下一張圖片;facebook也象Flickr一樣支持Cooliris插件,可以播放幻燈,這種播放方式必須是用戶安裝了這個插件的情況下才能播放,且因為該插件的服務(wù)器在國外,遇到網(wǎng)速不夠快的用戶用這個插件看圖有點兒卡。
Google的相冊picasa
Google的相冊picasa保持了google設(shè)計的一慣的簡潔風(fēng)格,圖片的尺寸是我看過的相冊中最大的了,有912像素的寬和高,比其它網(wǎng)站相冊產(chǎn)品的圖片都要大,在顯示器越來越大的今天,這樣的大圖看起來真的很爽,除此之外,picasa的圖片右上角有一個放大的功能,點右上角的放大鏡,圖片會在一個固定的窗口內(nèi)放到一個很大的尺寸,用戶可以拖動大的圖片,查看自己關(guān)心的部份, picasa的這個功能比簡單的查看原圖要方便些;因為簡單的查看一張比較大的原圖時,瀏覽器窗口會出現(xiàn)橫豎兩個方向的滾動條,用戶用起來不方便。
另外,picasa也沒有點擊翻看下一張照片的功能,這個是許多用戶習(xí)慣了的一種看照片的方式;
網(wǎng)易相冊
對網(wǎng)易相冊我一直有一種說不出的親切感,熟悉并喜歡網(wǎng)易這種簡潔明了的風(fēng)格,網(wǎng)易相冊的大圖查看也是很簡單的。
網(wǎng)易相冊的大圖下加了一個陰影,在視覺上增加了許多的美感,但圖片不大,也沒有原圖查看或放大的功能,這個對想看精美大圖的攝影愛好者來說是一個遺憾,要看相冊的原圖,需要通過相冊右側(cè)的一個“下載此照片”的鏈接,這個鏈接并不容易被用戶關(guān)注到;
網(wǎng)易相冊的大圖瀏覽,當(dāng)在大圖上點鼠標(biāo)時,圖片會翻到“上一張”或“下一張”,以圖片豎直方向中心線為軸線,鼠標(biāo)點到圖片豎直中心線左面時變成向左的箭頭,點擊圖片出現(xiàn)“下一張”;鼠標(biāo)點到圖片豎直中心線右面時變成向右的箭頭,點擊圖片出現(xiàn)“上一張”,整個圖片切換的過程非常的流暢。
百度相冊
百度有許多產(chǎn)品都做得很好,但是說真的相冊做得挺一般的,百度相冊的大圖查看可能是因為屬于個人空間的一個欄目的原因,真的沒有什么亮點,首先,圖片的尺寸很小,點擊圖片出現(xiàn)圖片的原圖,感覺百度的相冊在設(shè)計上是比較粗糙的。
QQ相冊
QQ相冊圖片尺寸挺大的,頁面上也有類似于網(wǎng)易相冊的那種用鼠標(biāo)在照片上點擊往前或后翻的功能,也會以圖片豎直方向中心線為軸線,鼠標(biāo)變成向左或向右的箭頭,點擊照片出現(xiàn)“上一張”或“下一張”的分頁,就大圖瀏覽這一點來說,QQ相冊還是不錯的。
Yupoo相冊
Yupoo相冊的大圖瀏覽與Flickr差不多,圖片的尺寸不大,可以查看幾個規(guī)格尺寸的圖片;
個人認(rèn)為在設(shè)計產(chǎn)品時借鑒成功者的經(jīng)驗確實是一種很好的方法,但首先應(yīng)該能分得清哪些是成功的經(jīng)驗,哪些不是,一味的照搬,不分良莠,反而會對產(chǎn)品有負(fù)面的影響;
巴巴變
巴巴變無論從色彩還是產(chǎn)品的設(shè)計都太象Flickr了,可見一個成功的產(chǎn)品對行業(yè)內(nèi)其它產(chǎn)品的影響有多大,但巴巴變有一個不得不提的特色,它有專門針對網(wǎng)店店鋪設(shè)計的相冊,有許多有趣的功能,但就大圖查看來說與Flickr差不多;
走馬觀花的看了許多相冊產(chǎn)品,各自都有自己的特色,當(dāng)然也有許多共同之處,我總結(jié)了一下相冊大圖查看頁面設(shè)計時需要注意的幾點:
(1) 在本公司網(wǎng)站設(shè)計規(guī)范許可的寬度范圍內(nèi),圖片查看越大越好!
(2) 在圖片上加上點擊翻頁的功能,這是許多用戶已經(jīng)習(xí)慣了的看圖方式,也能方便的讓用戶查看本相冊的其它照片;
(3) 如果相冊是需要播放幻燈的,那么就選擇一種合適的方式,是在本頁內(nèi)播放還是彈出一全屏的頁面播放,或者是支持Cooliris插件,根據(jù)自己商業(yè)目標(biāo)和目標(biāo)用戶群來進(jìn)行選擇,也曾有設(shè)計師與我討論過是否可以用 flash來做幻燈的播放,在這點上我個人的建議是別輕易使用flash來查看需要展示精致細(xì)節(jié)的圖片,因為flash會自動的對圖片進(jìn)行壓縮,會損害到圖片的
質(zhì)量,另外,圖如果太大的話,會需要比較長的loadding時間;
(4) 盡可能的為用戶提供原圖,或放大的圖片,便于用戶查看更精致的細(xì)節(jié);
(5) 對其它的相冊產(chǎn)品可以借鑒,但不要抄襲,要借鑒其它產(chǎn)品的成功之處,而不是無論是否符合自己的產(chǎn)品特色和用戶需要都照搬過來,因為不是功能越多的產(chǎn)品就越好,而是越符合自己產(chǎn)品目標(biāo)用戶群需要的產(chǎn)品就越好;
原文:http://ued.taobao.com/blog/2009/01/23/album/
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-10-30 10:51:00] 簡說相冊的排序
- [2008-05-30 11:51:00] 相冊體驗15分鐘后.
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島高端網(wǎng)站設(shè)計公司哪家好 青島不錯的英文網(wǎng)站建設(shè)公司 建站常識 企業(yè)網(wǎng)站建設(shè) 官網(wǎng)建設(shè) 青島做網(wǎng)站多少錢 微信小程序 網(wǎng)頁設(shè)計 企業(yè)網(wǎng)站 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 中小型企業(yè)網(wǎng)站建設(shè) 用戶界面 網(wǎng)站SEO 青島輪胎網(wǎng)站設(shè)計公司 企業(yè)網(wǎng)站設(shè)計 青島網(wǎng)站制作 外貿(mào)網(wǎng)站設(shè)計 青島海洋投資集團(tuán) 微信營銷的優(yōu)勢 微官網(wǎng) 青島黃島、紅島網(wǎng)站建設(shè)公司 SEO優(yōu)化 網(wǎng)站開發(fā) 青島flash網(wǎng)站 新的元素 GOOGLE 網(wǎng)站建設(shè)的步驟有哪些 微網(wǎng)站 輪胎網(wǎng)站設(shè)計 網(wǎng)站建設(shè),手機網(wǎng)站