響應式網頁圖片庫設計的(de)幾個(gè)注意事項

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

7、确保圖片顯示尺寸不要超過原始圖片的(de)最大(dà)寬度

 

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