雄安響應式設計無疑是當前網頁設計領域當中，不可(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)交互控件、無法退出、尺寸不合适等等。