在移動(dòng)設(shè)備遍地開(kāi)花的今天，響應(yīng)式網(wǎng)站設(shè)計(jì)可謂是風(fēng)生水起，越來(lái)越多的人更傾向于使用響應(yīng)式網(wǎng)站設(shè)計(jì)。而提到響應(yīng)式網(wǎng)站設(shè)計(jì)，很多人都關(guān)心網(wǎng)站上的圖片怎么選擇、如何放置，這個(gè)問(wèn)題已經(jīng)爭(zhēng)論了很久，大家也基本達(dá)成了共識(shí)，大家感興趣的話可以看看。但是，除了使用單張圖片，我們還經(jīng)常在響應(yīng)式網(wǎng)站中展示多張圖片，使用圖庫(kù)或幻燈片式的輪播圖，多張圖片比單張照片更加復(fù)雜，這也意味著在網(wǎng)站應(yīng)用上我們有更多的點(diǎn)需要去注意。這是小飛今天準(zhǔn)備討論的話題，在響應(yīng)式網(wǎng)站上使用圖片輪播我們有哪些方面要注意呢？
響應(yīng)式網(wǎng)站設(shè)計(jì)最顯著的一個(gè)特征就是它可以適用于多種不同的設(shè)備，在設(shè)置輪播圖或圖庫(kù)時(shí)我們首先的需要考慮就是它怎樣可以同時(shí)在電腦、手機(jī)、pad等設(shè)備上給用戶提供良好的瀏覽體驗(yàn)，事實(shí)上下面很多條建議都是圍繞這一點(diǎn)展開(kāi)的，一起來(lái)看看小飛整理關(guān)于在響應(yīng)式網(wǎng)站中更好使用圖庫(kù)或輪播圖的9個(gè)建議吧。
1.設(shè)置"隱藏式"導(dǎo)航菜單
在響應(yīng)式網(wǎng)站中使用圖庫(kù)或多張圖片輪播時(shí)，我們應(yīng)該將傳統(tǒng)的導(dǎo)航菜單欄設(shè)置成可隱藏的，這是因?yàn)樵趥鹘y(tǒng)的電腦網(wǎng)站中，一個(gè)清晰可見(jiàn)的導(dǎo)航菜單欄是必不可少的，而對(duì)于手機(jī)、pad等移動(dòng)設(shè)備時(shí)，它又最好不要呈現(xiàn)出來(lái)。所以給導(dǎo)航菜單欄設(shè)置一個(gè)按鈕是最好的選擇，用戶需要導(dǎo)航引導(dǎo)時(shí)只需點(diǎn)擊一下就出來(lái)了，不需要時(shí)它可以自動(dòng)隱藏，這樣能讓用戶操作起來(lái)更方便，瀏覽體驗(yàn)更順暢。另外，"隱藏式"導(dǎo)航菜單可以避免訪客們注意力的分散，這是因?yàn)榕c網(wǎng)站的內(nèi)容或背景圖片相比，設(shè)計(jì)巧妙的導(dǎo)航菜單在一定程度會(huì)吸引用戶的注意力，將"導(dǎo)航菜單"隱藏起來(lái)，網(wǎng)站主頁(yè)面更加簡(jiǎn)潔，用戶也更能全神貫注的關(guān)注網(wǎng)站的重心。
2.避免使用太多人像照
當(dāng)我們?cè)诰W(wǎng)站上使用網(wǎng)格畫廊或多張圖片輪播時(shí)，盡量選擇橫向或正方形的圖片。這種類型的照片不僅可以適應(yīng)傳統(tǒng)的電腦網(wǎng)站，還能夠讓訪客們?cè)谛∑聊簧蠟g覽圖片時(shí)更舒適。而人像照片因?yàn)楸容^適合縱向?yàn)g覽，雖然在手機(jī)上看起來(lái)效果還可以，但如果放在電腦上橫向來(lái)看就顯得太小了。所以，盡量避免使用人像照片，記住橫向的圖片是最佳的選擇，實(shí)在沒(méi)有的話，正方形的也是可以的。
3.在移動(dòng)端上支持手勢(shì)操作
在觸屏設(shè)備上，人們更加喜歡使用手勢(shì)操作。當(dāng)訪客們自己動(dòng)手滑動(dòng)照片的時(shí)候，他們會(huì)更受鼓舞，因?yàn)檫@種體驗(yàn)是與他們密切相關(guān)的，是更真實(shí)的。千萬(wàn)不要在移動(dòng)設(shè)備上使用箭頭等導(dǎo)航元素，那實(shí)在是太無(wú)趣了。相反，支持訪客們用自己的手指往上、下、左、右滑動(dòng)圖片，這種方式不是更加自然嗎？
4.在移動(dòng)端避免使用Lightbox
Lightbox是一種流行的圖片瀏覽效果，它可以實(shí)現(xiàn)很多功能，比如自動(dòng)根據(jù)窗口大小縮放圖片，幻燈片播放、內(nèi)容預(yù)加載、漸變色等。假如我們需要在網(wǎng)站上使用產(chǎn)品細(xì)節(jié)的照片（數(shù)量很多），這時(shí)Lightbox就可以大展身手了。但是，這種效果其實(shí)更加適合傳統(tǒng)的電腦網(wǎng)站，在手機(jī)等屏幕比較小的網(wǎng)站上使用可能帶來(lái)糟糕的用戶體驗(yàn)，比如當(dāng)Lightbox尺寸與網(wǎng)站的整體尺寸不匹配時(shí)，用戶可能會(huì)找不到退出界面，或者照片不能好好的展示。小飛在這說(shuō)的也只是避免使用，如果您有把握設(shè)計(jì)好lightbox，也是可以嘗試一下的。
5.導(dǎo)航菜單不要太突出
當(dāng)我們想要使用幻燈片式的圖片輪播時(shí)，導(dǎo)航菜單就派上用場(chǎng)了。給圖片設(shè)置導(dǎo)航可以讓訪客們根據(jù)自己的節(jié)奏瀏覽圖片，點(diǎn)擊進(jìn)入--獲得信息--退出離開(kāi)，總不能讓訪客們?yōu)榱丝茨骋粡垐D片等一個(gè)來(lái)回的輪播吧。不過(guò)我們?cè)陧憫?yīng)式網(wǎng)站中使用導(dǎo)航元素時(shí)，有幾點(diǎn)需要注意：導(dǎo)航小圓點(diǎn)不要放在礙事的地方，不能遮住任何文本或鏈接；不要在網(wǎng)站中使用復(fù)雜的導(dǎo)航元素，這會(huì)分散用戶的注意力，而且會(huì)讓網(wǎng)頁(yè)布局看上去很混亂。所以記得給輪播的圖片設(shè)置一些可以點(diǎn)擊跳轉(zhuǎn)的導(dǎo)航圓點(diǎn)，再加上前進(jìn)、后退鍵，這就夠用了。記住，簡(jiǎn)潔才是王道，少即是多。
6.不要將圖片和視頻混在一起
通常情況下，一個(gè)網(wǎng)站同時(shí)存在不同的多媒體形式（比如圖片和視頻）用戶是可以接受的。但盡量將圖片和視頻放在不同的區(qū)域里，這是因?yàn)榧偃缥覀儗D片和視頻混在一起，用戶也許正在公共場(chǎng)合瀏覽網(wǎng)站圖片，一不小心點(diǎn)到視頻播放，突如其來(lái)的聲音只會(huì)讓人覺(jué)得尷尬（沒(méi)人會(huì)喜歡這種形式的驚喜）。所以，將圖片和視頻分開(kāi)放，這樣用戶在瀏覽的時(shí)候就知道自己面對(duì)的是什么，如果他們想要播放視頻，至少可以提前帶上耳機(jī)。另一方面，很少情況下視頻和圖片的尺寸能夠保持一致，大部分時(shí)候，圖片和視頻的中間總是會(huì)有一些留白或者間隙，這種留白和間隙看起來(lái)并不美觀。
7.圖片顯示尺寸不超過(guò)原始尺寸的最大寬度
這一點(diǎn)真的很重要，當(dāng)我們將圖片填充超過(guò)原始尺寸的空間時(shí)，由于像素問(wèn)題，圖片就會(huì)失真。這會(huì)影響用戶的瀏覽體驗(yàn)，而且如果剛好是產(chǎn)品圖片失真，給訪客們?cè)斐梢曈X(jué)上的誤差，訪客們的購(gòu)買欲會(huì)下降，網(wǎng)站的轉(zhuǎn)化率也就會(huì)降低。一般情況下，對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，圖片完全填充超過(guò)原始尺寸空間不會(huì)有什么問(wèn)題，但是對(duì)于傳統(tǒng)的網(wǎng)站，我們還是需要設(shè)定圖片的寬度，最好不要超過(guò)圖片的原始尺寸。
8.圖片縮放（縮小圖片）
如果我們?cè)谳啿D或圖庫(kù)中需要用到圖片縮放，盡量縮小圖片，還不是放大圖片，我們甚至還可以設(shè)定好圖片的確切尺寸。設(shè)定圖片的確切尺寸一般是通過(guò)控制某個(gè)屬性的百分比的形式實(shí)現(xiàn)的，如果圖片的一個(gè)屬性設(shè)置了百分比，另一個(gè)屬性最好設(shè)置成自動(dòng)，這樣圖片才能更靈活，更好的適應(yīng)不同的瀏覽器。比如，如果我們想要一張圖片覆蓋瀏覽器寬度的50%，我們可以將圖片的寬度設(shè)置為50%，將圖片的高度設(shè)置成自動(dòng)的。
9.避免使用圖片題注
盡管添加的標(biāo)題或其他形式的文本說(shuō)明能夠讓圖片信息更加豐富，但在響應(yīng)式網(wǎng)站上使用這些文本會(huì)給我們和用戶帶來(lái)很多麻煩。第一個(gè)問(wèn)題就是圖片的文本很難在移動(dòng)設(shè)備有良好的呈現(xiàn)。由于智能手機(jī)等移動(dòng)設(shè)備的屏幕比較小，在圖片上加上文本會(huì)讓網(wǎng)站看起來(lái)密密麻麻，凌亂不堪。還有一個(gè)問(wèn)題是使用圖片文本需要我們?cè)诰W(wǎng)站設(shè)計(jì)時(shí)考慮很多元素：文本怎么斷句？占多大空間？幾段文字怎么和圖片更好的搭配？而且， 如果文本是覆蓋在圖片上的，還要注意一下它具體放置在哪，因?yàn)樵谖谋绢伾蛨D片顏色相近的情況下，訪客們可能在辨認(rèn)文本方面有困難，所以要注意文本和圖片顏色的差異，不過(guò)圖庫(kù)或輪播圖中有很多圖片，每一張圖片又是不一樣的，具體實(shí)施起來(lái)對(duì)我們來(lái)說(shuō)可能比較耗時(shí)。
看了這么多建議，你有沒(méi)有什么想法？記住：作為站長(zhǎng)，我們需要從用戶的角度出發(fā)，避免以上這些錯(cuò)誤會(huì)讓訪客更喜歡我們的網(wǎng)站。準(zhǔn)備好了嗎？來(lái)做一個(gè)響應(yīng)式網(wǎng)站吧！起飛頁(yè)自助建站平臺(tái)可以給您提供眾多精美的幻燈片模板，它采用真正的響應(yīng)式技術(shù)，一次編輯，即可在所有設(shè)備上使用，通過(guò)它建站不僅速度快，還有助于搜索引擎優(yōu)化，讓你分分鐘做出一個(gè)高大上的幻燈片，趕緊行動(dòng)起來(lái)吧！
此內(nèi)容來(lái)自網(wǎng)絡(luò)，如涉及版權(quán)，請(qǐng)與我們聯(lián)系刪除。
