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