與單個圖像相比，圖庫無疑更為復(fù)雜，涉及的變數(shù)也較多，因此麻煩也更多。那么鞍山響應(yīng)式網(wǎng)站設(shè)計中的圖片庫該如何設(shè)計呢？接下來，讓我們來看一下設(shè)計響應(yīng)式圖片庫時應(yīng)該注意的一些基本規(guī)則和技術(shù)。

      嘗試隱藏導(dǎo)航

      桌面上可能沒有什么可導(dǎo)航的，但是當(dāng)你查看移動終端時，盡可能的導(dǎo)航或隱藏，當(dāng)你需要的時候顯示出來。如左右切換按鈕和指示點的位置瀏覽，最好是在光標(biāo)移動顯示，這樣的設(shè)計不僅可以避免分散用戶的注意力，而且可以避免內(nèi)容和導(dǎo)航元素之間的沖突，減少混亂感的總體設(shè)計。

      避免使用大量肖像畫

      如果設(shè)計一個類似于網(wǎng)格布局的圖片庫，您可能會嘗試選擇和交叉圖片或正方形圖像。這種設(shè)計與桌面設(shè)計兼容，同時允許用戶在小屏幕上更好地查看。手機上的圖片類型的肖像適合垂直屏幕瀏覽，如果交叉，圖片會特別小，瀏覽會相當(dāng)不方便。水平是最好的，如果不是，使用正方形圖像將是兼容性的好解決方案。響應(yīng)式圖片庫的設(shè)計考慮到許多因素。一定要記住用戶的不同瀏覽場景。

      支持移動終端上的手勢

      在觸摸屏上使用清潔操作幾乎是用戶的本能。因此，在設(shè)計響應(yīng)圖片庫時，像滑動操作這樣的手勢給了用戶更多的力量，使體驗更加真實。在移動設(shè)備上使用箭頭導(dǎo)航太枯燥和陳舊，手勢交互更自然，更現(xiàn)實。

      禁用移動終端的lightbox效果

      燈箱的效果可能是最常見的圖片瀏覽桌面網(wǎng)頁模式。圖片顯示在彈出框中，縮放屏幕大小和鼠標(biāo)操作。在產(chǎn)品展示頁面中，這種圖片瀏覽方式特別廣泛和頻繁，但在移動終端中，可能會引起很多問題：封面上的用戶體驗和其他交互控件不能退出錯誤的大小等。

      不要炫耀低調(diào)的導(dǎo)航元素

      如果使用幻燈片來顯示大量圖片庫，導(dǎo)航尤為重要。用戶當(dāng)然不想花太多的時間來等待負載。他們?nèi)匀话醋约旱乃俣劝础⒎D(zhuǎn)、進入、退出、保存等等。因此，當(dāng)您想使用導(dǎo)航元素時，必須設(shè)計使它們感覺到的方式。不要讓小的導(dǎo)航點覆蓋文本或鏈接，避免復(fù)雜的控件分散用戶的注意力，并使整個頁面的設(shè)計復(fù)雜化。點擊跳轉(zhuǎn)導(dǎo)航小點，讓用戶快速跳轉(zhuǎn)到他們想去的地方，提高效率，減少不必要的消費。當(dāng)然，不要太復(fù)雜！平衡是最重要的！

      不要把圖片和視頻混在一起。

      通常，不同類型的媒體混在一起沒有問題，但是當(dāng)用戶不想看圖片時，突然發(fā)現(xiàn)一張圖片變成了視頻，突然的聲音和額外的流量消耗肯定是他們不愿意觸摸的東西！把錄像和圖片分開，讓他們知道接下來會發(fā)生什么，不要讓事故發(fā)生，確保圖像顯示大小不大于原始圖片的最大寬度。這是很重要的，雖然很基礎(chǔ)，但仍然需要強調(diào)。盡量不要填充超過空間的大小，這樣圖像會顯示像素失真的效果。值得注意的是，在許多情況下，圖片完全填充在一個塊的移動端，沒有問題，但在桌面方面，最大不能超過它自己的寬度。它看起來并不難，但是仍然有很多響應(yīng)頁面，當(dāng)你有一個寬的瀏覽器界面時，就會出現(xiàn)超出其大小的圖片。

      圖片縮放

      如果你的圖庫中的圖像需要放大，那么盡量縮小圖像，而不是放大圖像。最好為圖片設(shè)置精確的尺寸。一般來說，圖片大小調(diào)整使用百分比來控制它的大小變化。如果您的屬性設(shè)置為縮放，則其他相關(guān)屬性最好設(shè)置為自動設(shè)置。例如，如果圖片的寬度設(shè)置為50%，那么高度刻度應(yīng)該設(shè)置為自動。