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

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

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

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

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

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

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

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

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

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

5、讓導航元素低(dī)調不(bù)招搖

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

6、不(bù)要(yào)讓圖片和(hé)視(shì)頻(pín)混淆

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