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

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

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

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

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

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

3、在移動端上(shàng)支持手勢操作

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

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

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

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

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

6、不要讓圖片和(hé)視頻混淆

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