相比于單個圖片，圖庫的展示無疑更加復雜，牽涉到的變量更多，所以實現起來也更加費神。打開一個漂亮精致的網站，然而其中的圖片和圖庫看起來怎么都和頁面不匹配，這樣的情況恐怕是最讓人抓狂的了。如何設計好響應式的圖片和圖庫，接下來就聊一些方法技巧，興許能給你提供一個明確而系統的思路。

　　1、避免使用圖片標題

　　使用圖片標題或者其他的附加文字會為你自己和用戶增加大量的問題。它在移動端界面上會強制顯現出來。在移動端有限的界面空間上，它可能會和圖片擠壓到一起，帶來混亂的用戶體驗。另外它可能會限制你的文字使用。你得想明白在桌面端顯示和在移動端顯示分別是什么樣，怎么才正常，太多的變量控制起來會相當麻煩。圖片各不相同，而文字總會莫名其妙地覆蓋到某些不該覆蓋到的地方。圖片和文字的對比度總會隨著不同的圖片而變化，這也是麻煩的地方之一。

　　2、避免使用大量肖像類圖片

　　如果你設計的圖片庫是類似網格布局的話，你可能會盡量挑選和橫向的圖片，或者方形的圖像。這樣的設計在兼容桌面端設計的同時，還可以讓用戶在小屏幕上更好地查看。人像類的圖片在手機上適合縱向屏幕上瀏覽，如果橫過來的話，圖片會顯得特別小，瀏覽會相當不方便。橫向是最佳的，如果不行的話，使用方形的圖片會是很好的兼容性方案。一個響應式的圖片庫的設計需要考慮多種因素，請務必照顧到用戶的不同瀏覽場景。

　　3、在移動端上支持手勢操作

　　在設計響應式圖片庫的時候，滑動操作等手勢操作賦予用戶更多的權力，讓體驗更加逼真。在移動設備上使用箭頭導航太過于乏味、老舊，手勢交互更加自然也更符合真實的交互體驗。

　　4、使用高素質的圖片

　　雖然這個道理不言自明，但是我再強調一次。現在，高素質、高分辨率的圖片比以往任何一個時代都顯得必需和重要，用戶不會花費時間去看一個圖片素質低下的網站，大家的屏幕都已經是視網膜屏幕了，低素質的圖片在這樣的屏幕上顯得更加無法直視。大家都在追求頂尖的視覺效果，那么高素質圖片無疑是必需品。

　　5、圖片和視頻混用要小心

　　如果網站中同時存在圖片和視頻類的多媒體，用戶和設計者應該都是能夠接受的，甚至許多用戶已經習慣了這樣的設計。但是要注意的是，即便是在同一個頁面中，也盡量不要讓圖片和視頻同時存在于同一個控件或者區塊中，也許這樣看起來很炫酷，也許一部分圖片和視頻能夠搭配起來，但是更多的視頻和圖片很難在尺寸上保持一致，導致總會有一部分圖片或者視頻會留下空白和間隙。最好的方案還是將兩者分開展示，避免了媒體屬性和尺寸上的差異與沖突，這幾乎適用于任何設計元素，而圖片和視頻尤甚。   

　　6、確保圖片顯示尺寸不要超過原始圖片的最大寬度

　　這一點很重要，盡管很基礎，但是依然需要強調一下。圖片盡量不要去填充超過本身尺寸的空間，這樣會讓圖片表現出象素化的失真效果。值得注意的是，很多情況下圖片在移動端完全填滿某個區塊沒問題，但是在桌面端的時候，最大也不能超過本身寬度。這似乎并不難?但是依然有許多響應式頁面，當你拉寬瀏覽器界面的時候，會有圖片超出本身尺寸來顯示。

　　7、圖片縮放

　　如果你的圖庫中的圖片要牽涉到圖片縮放，那么盡量讓圖片去縮小，而不是放大。甚至最好是為圖片設定精確的尺寸。通常，圖片縮放會使用百分比來控制它的大小變化，如果你個屬性被設定為按照百分比來縮放，那么其他的相關屬性最好設置為自動。比如將圖片寬度設定為50%，那么高度縮放應當設定為自動。對于絕大多數的網站而言，圖片展示的位置都很相近，大同小異。而設計師的任務，是要確保網站隨著屏幕和設備變化的時候，圖片的展示不會在頁面布局的伸縮變化過程中變得奇怪和失真。

　　8、避免使用圖片標題

　　使用圖片標題或者其他的附加文字會為你自己和用戶增加大量的問題。第一個問題是，它在移動端界面上會強制顯現出來。在移動端有限的界面空間上，它可能會和圖片擠壓到一起，帶來混亂的用戶體驗。另外一個問題是，它可能會限制你的文字使用。你得想明白它怎么斷句，占據多大空間，在桌面端顯示和在移動端顯示分別是什么樣，怎么才正常，太多的變量控制起來會相當麻煩。圖片各不相同，而文字總會莫名其妙地覆蓋到某些不該覆蓋到的地方。圖片和文字的對比度總會隨著不同的圖片而變化，這也是麻煩的地方之一。

　　藍彩seo結語：

　　小心駛得萬年船，當你開始為圖片庫進行響應式設計的時候，這些說大不大說小不小的問題逐漸開始顯現，總出其不意的影響整個設計和體驗。以用戶為重心，小心繞過這些坑，會讓你的網頁更優秀。