響應式設計 無疑是當前 網頁(yè)設計 領域當中(zhōng)，不可(kě)忽略的必要組成部分(fēn)。而響應式網頁(yè)中(zhōng)的圖片顯示又(yòu)是老生常談的問題，許多(duō)争論集中(zhōng)在響應式網站的圖片應當怎麽展示。繼續延伸開來，那麽響應式網站中(zhōng)的圖片庫應當如何設計呢(ne)？

相比于單個圖片，圖庫的展示無疑更加複雜，牽涉到的變量更多(duō)，所以實現起來也更加麻煩費神。接下來，我們來看看如果要設計響應式的圖片庫，有(yǒu)哪些值得注意的基本規則和技(jì )巧。

1、輪播幻燈片：盡量隐藏導航

在桌面端上導航的存在可(kě)能(néng)沒什麽，但是在移動端上查看的時候，導航還是盡量隐藏起來，需要的時候再顯現。而諸如左右切換的按鈕和标明浏覽位置的圓點，最好是在光标移動上去之後再顯示，這樣的設計不僅可(kě)以避免用(yòng)戶分(fēn)心，而且能(néng)避免内容和導航元素之間的沖突，降低整體(tǐ)設計的混亂感。

2、避免使用(yòng)大量肖像類圖片

如果你設計的圖片庫是類似網格布局的話，你可(kě)能(néng)會盡量挑選和橫向的圖片，或者方形的圖像。這樣的設計在兼容桌面端設計的同時，還可(kě)以讓用(yòng)戶在小(xiǎo)屏幕上更好地查看。人像類的圖片在手機上适合縱向屏幕上浏覽，如果橫過來的話，圖片會顯得特别小(xiǎo)，浏覽會相當不方便。橫向是最佳的，如果不行的話，使用(yòng)方形的圖片會是很(hěn)好的兼容性方案。一個響應式的圖片庫的設計需要考慮多(duō)種因素，請務(wù)必牢記用(yòng)戶的不同浏覽場景。

3、在移動端上支持手勢操作(zuò)

觸摸屏上使用(yòng)收拾操作(zuò)幾乎是用(yòng)戶的本能(néng)了。所以，在設計 響應式圖片 庫的時候，滑動操作(zuò)等手勢操作(zuò)賦予用(yòng)戶更多(duō)的權力，讓體(tǐ)驗更加逼真。在移動設備上使用(yòng)箭頭導航太過于乏味、老舊，手勢交互更加自然也更符合真實的交互體(tǐ)驗。

4、在移動端上禁用(yòng)lightbox效果

Lightbox效果大概是桌面端網頁(yè)上最常見的圖片浏覽模式，圖片以彈出框的形式呈現出來，能(néng)随着屏幕尺寸和鼠标操作(zuò)來縮放。在産(chǎn)品展示的頁(yè)面當中(zhōng)，這種圖片浏覽模式的使用(yòng)尤其廣泛和頻繁，但是在移動端上的時候，它可(kě)能(néng)會引起大量的用(yòng)戶體(tǐ)驗上的問題：蓋住其他(tā)的交互控件、無法退出、尺寸不合适等等。

5、讓導航元素低調不招搖

如果你使用(yòng)幻燈片的形式來展現大量圖片組成的圖片庫的時候，導航就顯得尤為(wèi)重要了。用(yòng)戶肯定不想在等待加載中(zhōng)耗費太多(duō)的時間，他(tā)們依然會按照自己的速度點擊，翻頁(yè)，進入，退出，保持，等等。所以，當你要使用(yòng)導航元素的時候，一定要設計在讓他(tā)們覺得不礙事的地方。不要讓導航的小(xiǎo)圓點蓋在文(wén)本或者鏈接上，并且避免複雜的控制方式，這樣會分(fēn)散用(yòng)戶注意力，并讓整個頁(yè)面的設計都趨于複雜。可(kě)點擊跳轉的導航小(xiǎo)圓點能(néng)讓用(yòng)戶快速跳轉到他(tā)們想要去的地方，提升效率，降低無謂的消耗。當然，不要弄的太複雜！平衡最重要！

6、不要讓圖片和視頻混淆

通常情況下，不同類型的媒體(tǐ)混到一起沒啥問題，但是用(yòng)戶肯定不想翻看圖片的時候，突然發現下一張圖片變成了視頻，突如其來的聲音和額外的流量消耗絕對是他(tā)們不願意碰到的事情！将視頻和圖片分(fēn)割開來，讓他(tā)們知道接下來的會是什麽東西，不要讓意外發生。