在移動(dòng)設(shè)備激增的今天，響應(yīng)式網(wǎng)站設(shè)計(jì)正在蓬勃發(fā)展，越來(lái)越多的人傾向于使用響應(yīng)式網(wǎng)站設(shè)計(jì)。當(dāng)談到響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí)，許多人都關(guān)心如何選擇和放置網(wǎng)站上的圖片。這個(gè)問(wèn)題爭(zhēng)論了很久，大家也基本達(dá)成了共識(shí)。有興趣的可以看看。然而，除了使用單幅圖片之外，我們經(jīng)常在響應(yīng)式網(wǎng)站中顯示多幅圖片，使用圖庫(kù)或幻燈片輪播。多張圖片比單張照片更復(fù)雜，這也意味著我們?cè)诰W(wǎng)站應(yīng)用中需要注意的點(diǎn)更多。這是小編今天要和大家討論的話題。在響應(yīng)式網(wǎng)站上使用圖片輪播需要注意什么？
    響應(yīng)式網(wǎng)站設(shè)計(jì)最顯著的特點(diǎn)之一是它可以應(yīng)用于各種不同的設(shè)備。在設(shè)置carousel或gallery時(shí)，我們首先需要考慮的是它如何能夠同時(shí)在電腦、手機(jī)、pad等設(shè)備上為用戶提供良好的瀏覽體驗(yàn)。其實(shí)下面很多建議都是圍繞這一點(diǎn)。讓我們來(lái)看看小編關(guān)于如何在響應(yīng)式網(wǎng)站中更好地使用gallery或carousel的九條建議。
    1.設(shè)置“隱藏”導(dǎo)航菜單。
    在響應(yīng)式網(wǎng)站中使用圖庫(kù)或多圖輪播時(shí)，要將傳統(tǒng)的導(dǎo)航菜單欄設(shè)置為隱藏。這是因?yàn)樵趥鹘y(tǒng)的電腦網(wǎng)站中，一個(gè)清晰可見(jiàn)的導(dǎo)航菜單欄是必不可少的，對(duì)于手機(jī)、pad等移動(dòng)設(shè)備，最好不要顯示。所以在導(dǎo)航菜單欄上設(shè)置一個(gè)按鈕是最好的選擇。當(dāng)用戶需要導(dǎo)航和指引時(shí)，只需要點(diǎn)擊它就出來(lái)了。當(dāng)他們不需要時(shí)，它可以自動(dòng)隱藏，這將使用戶更容易操作，使瀏覽體驗(yàn)更流暢。此外，“隱藏”的導(dǎo)航菜單可以避免訪問(wèn)者的注意力分散，因?yàn)榕c網(wǎng)站的內(nèi)容或背景圖片相比，設(shè)計(jì)巧妙的導(dǎo)航菜單會(huì)在一定程度上吸引用戶的注意力。通過(guò)隱藏“導(dǎo)航菜單”，網(wǎng)站的主頁(yè)面更加簡(jiǎn)潔，用戶可以更加專注于網(wǎng)站的重心。
    2.避免使用過(guò)多的照片。
    當(dāng)我們?cè)诰W(wǎng)站上使用網(wǎng)格圖庫(kù)或多圖片輪播時(shí)，盡量選擇水平或方形圖片。這種照片既能適應(yīng)傳統(tǒng)的電腦網(wǎng)站，又能讓訪問(wèn)者在小屏幕上瀏覽圖片時(shí)更加舒適。人像照片適合垂直瀏覽。雖然它們?cè)谑謾C(jī)上看起來(lái)不錯(cuò)，但在電腦上橫向觀看時(shí)，它們太小了。所以盡量避免使用人像照片，切記橫版照片是最好的選擇。如果沒(méi)有，正方形圖片也可以。
    3.支持移動(dòng)終端上的手勢(shì)操作。
    在觸摸屏設(shè)備上，人們更喜歡使用手勢(shì)。游客自己滑動(dòng)照片會(huì)更受鼓舞，因?yàn)檫@種體驗(yàn)與他們息息相關(guān)，更真實(shí)。千萬(wàn)不要在移動(dòng)設(shè)備上使用箭頭之類的導(dǎo)航元素，真的很無(wú)聊。反之，支持游客用手指上下左右滑動(dòng)圖片不是更自然嗎？
    4.避免在移動(dòng)端使用Lightbox。
    Lightbox是一個(gè)流行的圖片瀏覽效果，可以實(shí)現(xiàn)很多功能，比如根據(jù)窗口大小自動(dòng)縮放圖片，幻燈片放映，內(nèi)容預(yù)加載，漸變等等。如果我們需要在網(wǎng)站上使用大量產(chǎn)品細(xì)節(jié)的照片，那么Lightbox就可以大顯身手了。不過(guò)這種效果其實(shí)更適合傳統(tǒng)的電腦網(wǎng)站。在手機(jī)等屏幕較小的網(wǎng)站上使用，可能會(huì)帶來(lái)不好的用戶體驗(yàn)。例如，當(dāng)Lightbox的大小與網(wǎng)站的整體大小不匹配時(shí)，用戶可能找不到退出界面，或者照片可能無(wú)法很好地顯示。小菲在這里說(shuō)的只是為了避免使用。如果你確定要設(shè)計(jì)lightbox，也可以嘗試一下。
    5.導(dǎo)航菜單不應(yīng)該太突出
    當(dāng)我們想使用幻燈片圖片傳送帶時(shí)，導(dǎo)航菜單就很方便了。為圖片設(shè)置導(dǎo)航，讓游客可以按照自己的節(jié)奏瀏覽圖片，點(diǎn)擊進(jìn)入-獲取信息-退出離開(kāi)，游客不能等著一個(gè)旋轉(zhuǎn)木馬才能看到某張圖片。但是，當(dāng)我們?cè)陧憫?yīng)式網(wǎng)站中使用導(dǎo)航元素時(shí)，需要注意幾點(diǎn):導(dǎo)航點(diǎn)不要擋道，不能覆蓋任何文字或鏈接；不要在網(wǎng)站中使用復(fù)雜的導(dǎo)航元素，這會(huì)分散用戶的注意力，使頁(yè)面布局看起來(lái)混亂。所以記得給可以點(diǎn)擊跳轉(zhuǎn)的輪播圖片設(shè)置一些導(dǎo)航點(diǎn)，加上前進(jìn)后退鍵，就夠了。
    6.不要把圖片和視頻混在一起。
    通常，一個(gè)網(wǎng)站同時(shí)擁有不同多媒體形式(如圖片和視頻)的用戶是可以接受的。但是盡量把圖片和視頻放在不同的區(qū)域。這是因?yàn)槿绻覀儗D片和視頻混合在一起，用戶可能會(huì)在公共場(chǎng)合瀏覽網(wǎng)站圖片，不小心點(diǎn)擊了視頻進(jìn)行播放。突如其來(lái)的聲音只會(huì)讓人覺(jué)得尷尬。所以，把圖片和視頻分開(kāi)，讓用戶在瀏覽的時(shí)候知道自己面對(duì)的是什么。另一方面，在極少數(shù)情況下，視頻和圖片的大小可以保持一致。很多時(shí)候，圖片和視頻之間總會(huì)有一些空白或者縫隙，看起來(lái)不美觀。

    7.圖片的顯示尺寸不得超過(guò)原始尺寸的最大寬度。

    這真的很重要。當(dāng)我們?cè)诖笥谠汲叽绲目臻g中填充圖片時(shí)，圖片會(huì)因像素問(wèn)題而失真。這會(huì)影響用戶的瀏覽體驗(yàn)，如果恰好產(chǎn)品圖片失真，給訪問(wèn)者造成視覺(jué)上的誤差，訪問(wèn)者的購(gòu)買欲望就會(huì)降低，網(wǎng)站的轉(zhuǎn)化率也會(huì)降低。一般來(lái)說(shuō)，對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，圖片完全填滿超出原尺寸的空間是不會(huì)有問(wèn)題的，但是對(duì)于傳統(tǒng)網(wǎng)站來(lái)說(shuō)，我們還是需要設(shè)置圖片的寬度，最好不要超過(guò)圖片的原尺寸。

    8.圖像縮放(縮小圖像) 。
    如果我們需要在carousel或gallery中使用圖像縮放，我們甚至可以設(shè)置圖像的確切大小來(lái)最小化圖像，而不是放大圖像。設(shè)置圖片的確切大小一般是通過(guò)控制某個(gè)屬性的百分比來(lái)實(shí)現(xiàn)的。如果圖片的一個(gè)屬性設(shè)置了百分比，最好將另一個(gè)屬性設(shè)置為自動(dòng)，這樣圖片可以更加靈活，更好的適應(yīng)不同的瀏覽器。例如，如果我們希望圖片覆蓋瀏覽器寬度的50%，我們可以將圖片的寬度設(shè)置為50%，將圖片的高度設(shè)置為自動(dòng)。
    9.避免使用圖片標(biāo)題。
    雖然添加字幕或其他形式的文字描述可以豐富圖片的信息，但在響應(yīng)式網(wǎng)站上使用這些文字會(huì)給我們和用戶帶來(lái)很多麻煩。第一個(gè)問(wèn)題是圖片的文字很難在移動(dòng)設(shè)備上很好的呈現(xiàn)。由于智能手機(jī)等移動(dòng)設(shè)備的屏幕相對(duì)較小，在圖片中添加文本會(huì)使網(wǎng)站看起來(lái)密集而雜亂。另一個(gè)問(wèn)題是，使用圖片文字需要我們?cè)诰W(wǎng)站設(shè)計(jì)中考慮很多元素:如何在文字中斷句？需要多大的空間？幾個(gè)段落怎么配圖比較好？而且，如果文字疊加在圖片上，要注意放在哪里，因?yàn)槲淖值念伾蛨D片相似時(shí)，訪問(wèn)者可能很難識(shí)別文字，所以要注意文字和圖片顏色的區(qū)別。但是圖庫(kù)或者轉(zhuǎn)盤里的圖片比較多，每張圖片都不一樣，我們具體實(shí)現(xiàn)起來(lái)可能比較費(fèi)時(shí)間。
    看了這么多建議，你有什么想法嗎？記住:作為站長(zhǎng)，我們需要從用戶的角度出發(fā)。避免這些錯(cuò)誤會(huì)讓訪問(wèn)者更喜歡我們的網(wǎng)站。你準(zhǔn)備好了嗎？讓我們做一個(gè)響應(yīng)式的網(wǎng)站吧！起飛自助網(wǎng)站平臺(tái)可以給你提供很多漂亮的幻燈片模板。它采用真正的響應(yīng)技術(shù)，一旦編輯就可以在所有設(shè)備上使用。不僅建站快，對(duì)搜索引擎優(yōu)化也有幫助，讓你分分鐘做一個(gè)高大上的幻燈片。讓我們行動(dòng)起來(lái)！