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