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

　　1、避免使用圖片標(biāo)題

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

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

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

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

　　在設(shè)計(jì)響應(yīng)式圖片庫的時(shí)候，滑動(dòng)操作等手勢(shì)操作賦予用戶更多的權(quán)力，讓體驗(yàn)更加逼真。在移動(dòng)設(shè)備上使用箭頭導(dǎo)航太過于乏味、老舊，手勢(shì)交互更加自然也更符合真實(shí)的交互體驗(yàn)。

　　4、使用高素質(zhì)的圖片

　　雖然這個(gè)道理不言自明，但是我再強(qiáng)調(diào)一次?，F(xiàn)在，高素質(zhì)、高分辨率的圖片比以往任何一個(gè)時(shí)代都顯得必需和重要，用戶不會(huì)花費(fèi)時(shí)間去看一個(gè)圖片素質(zhì)低下的網(wǎng)站，大家的屏幕都已經(jīng)是視網(wǎng)膜屏幕了，低素質(zhì)的圖片在這樣的屏幕上顯得更加無法直視。大家都在追求頂尖的視覺效果，那么高素質(zhì)圖片無疑是必需品。

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

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

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

　　這一點(diǎn)很重要，盡管很基礎(chǔ)，但是依然需要強(qiáng)調(diào)一下。圖片盡量不要去填充超過本身尺寸的空間，這樣會(huì)讓圖片表現(xiàn)出象素化的失真效果。值得注意的是，很多情況下圖片在移動(dòng)端完全填滿某個(gè)區(qū)塊沒問題，但是在桌面端的時(shí)候，最大也不能超過本身寬度。這似乎并不難?但是依然有許多響應(yīng)式頁面，當(dāng)你拉寬瀏覽器界面的時(shí)候，會(huì)有圖片超出本身尺寸來顯示。

　　7、圖片縮放

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

　　8、避免使用圖片標(biāo)題

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

　　藍(lán)彩seo結(jié)語：

　　小心駛得萬年船，當(dāng)你開始為圖片庫進(jìn)行響應(yīng)式設(shè)計(jì)的時(shí)候，這些說大不大說小不小的問題逐漸開始顯現(xiàn)，總出其不意的影響整個(gè)設(shè)計(jì)和體驗(yàn)。以用戶為重心，小心繞過這些坑，會(huì)讓你的網(wǎng)頁更優(yōu)秀。