相比于(yú)單個(gè)圖片，圖庫的(de)展示無疑更加複雜，牽涉到(dào)的(de)變量更多，所以(yǐ)實現起來(lái)也(yě)更加麻煩費神。接下來(lái)，蘇州謝謝網絡傳媒有限公司和(hé / huò)大(dà)家一(yī / yì ／yí)起看看如果要(yào / yāo)設計響應式的(de)圖片庫，有哪些值得注意的(de)基本規則和(hé / huò)技巧。

1、輪播幻燈片盡量隐藏導航
       在(zài)桌面端上(shàng)導航的(de)存在(zài)可能沒什麽，但是(shì)在(zài)移動端上(shàng)查看的(de)時(shí)候，導航還是(shì)盡量隐藏起來(lái)，需要(yào / yāo)的(de)時(shí)候再顯現。而(ér)諸如左右切換的(de)按鈕和(hé / huò)标明浏覽位置的(de)圓點，最好是(shì)在(zài)光标移動上(shàng)去之(zhī)後再顯示，這(zhè)樣的(de)設計不(bù)僅可以(yǐ)避免用戶分心，而(ér)且能避免内容和(hé / huò)導航元素之(zhī)間的(de)沖突，降低整體設計的(de)混亂感。

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

3、移動端須支持手勢操作
       觸摸屏上(shàng)使用手勢操作幾乎是(shì)用戶的(de)本能了(le／liǎo)。所以(yǐ)，在(zài)設計響應式圖片庫的(de)時(shí)候，滑動操作等手勢操作賦予用戶更多的(de)權力，讓體驗更加逼真。在(zài)移動設備上(shàng)使用箭頭導航太過于(yú)乏味、老舊，手勢交互更加自然也(yě)更符合真實的(de)交互體驗。

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

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

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

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

8、圖片縮放時(shí)盡量讓圖片縮小，而(ér)不(bù)是(shì)放大(dà)
       如果你的(de)圖庫中的(de)圖片要(yào / yāo)牽涉到(dào)圖片縮放，那麽盡量讓圖片去縮小，而(ér)不(bù)是(shì)放大(dà)。甚至最好是(shì)爲(wéi / wèi)圖片設定精确的(de)尺寸。通常，圖片縮放會使用百分比來(lái)控制它的(de)大(dà)小變化，如果你個(gè)屬性被設定爲(wéi / wèi)按照百分比來(lái)縮放，那麽其他(tā)的(de)相關屬性最好設置爲(wéi / wèi)自動。比如将圖片寬度設定爲(wéi / wèi)50%，那麽高度縮放應當設定爲(wéi / wèi)自動。

9、避免使用圖片标題
       使用圖片标題或者其他(tā)的(de)附加文字會爲(wéi / wèi)你自己和(hé / huò)用戶增加大(dà)量的(de)問題。第一(yī / yì ／yí)個(gè)問題是(shì)，它在(zài)移動端界面上(shàng)會強制顯現出(chū)來(lái)。在(zài)移動端有限的(de)界面空間上(shàng)，它可能會和(hé / huò)圖片擠壓到(dào)一(yī / yì ／yí)起，帶來(lái)混亂的(de)用戶體驗。另外一(yī / yì ／yí)個(gè)問題是(shì)，它可能會限制你的(de)文字使用。你得想明白它怎麽斷句，占據多大(dà)空間，在(zài)桌面端顯示和(hé / huò)在(zài)移動端顯示分别是(shì)什麽樣，怎麽才正常，太多的(de)變量控制起來(lái)會相當麻煩。圖片各不(bù)相同，而(ér)文字總會莫名其妙地(dì / de)覆蓋到(dào)某些不(bù)該覆蓋到(dào)的(de)地(dì / de)方。圖片和(hé / huò)文字的(de)對比度總會随着不(bù)同的(de)圖片而(ér)變化，這(zhè)也(yě)是(shì)麻煩的(de)地(dì / de)方之(zhī)一(yī / yì ／yí)。

結語
       小心無大(dà)錯，今天說(shuō)的(de)規則并不(bù)複雜，但是(shì)當你開始爲(wéi / wèi)圖片庫進行響應式設計的(de)時(shí)候，這(zhè)些雞零狗碎的(de)問題開始顯現，在(zài)意想不(bù)到(dào)的(de)地(dì / de)方影響整個(gè)設計和(hé / huò)體驗。以(yǐ)用戶爲(wéi / wèi)重心，小心繞過這(zhè)些坑，會讓你的(de)響應式網頁更優秀，也(yě)更快搞定。