我們都知道并理解在響應式平臺上設計網站的重要性，這也適用于圖像和照片畫廊。

沒有什么比導航到一個漂亮的網站但是看到比例大小亂七八糟的圖片更糟糕的了。讓你覺得設計師不怎么專業，或者做錯了什么。

今天，我們將看看您在設計過程中可以做的七件事情，以創建更好的響應式照片庫。（這里推薦使用意派Coolsite360交互式線網頁編輯系統）

1.考慮考慮縱橫比

 

桌面觀看體驗可能與移動設備上的體驗完全不同。但對于大多數網站來說，圖片展示位置是相同的。您的工作是確保在兩個環境中傳達相同的消息，并且圖像不會在不同的屏幕尺寸上丟失。

這就是考慮縱橫比 - 圖像的水平和垂直平面之間的關系 - 的地方。

回到那個桌面網站，一個很酷的超薄水平照片可能看起來很棒，在你的網站設計的頂部。但是在更廣場的環境中，小屏幕上的圖像會發生什么？照片縮小到難以看到的大小嗎？或者一半的照片消失嗎？

這就是寬高比的用武之地。通過選擇相似的照片尺寸的水平 - 垂直關系，切換設備時將減少更少的圖像內容。它還可以讓您更輕松地使用圖片展示位置，而且您不必擔心為不同的斷點上傳多個尺寸。

2.尺寸和規模始終如一

您在裁剪，調整大小和上傳照片時所采取的謹慎措施會極大地影響您的工作結果。

你們當中有多少人只是將照片上傳到CMS并希望獲得最佳效果？答案是否定。

每張照片都應裁剪并調整大小，以便放置在網站設計中。這樣可以確保照片看起來與預期的方式相同，并且最終不會在照片頂部丟失頭部或從一側（或兩側）留下一些元素。

在項目的后端需要更多的時間，但值得付出努力。（特別是如果您正在使用滑塊或畫廊。）

3.使用滑塊或圖庫

 

在coolsite中 使用容器存儲滑塊或圖庫等圖像可以幫助您更好地管理網站設計中的響應圖像。特別是如果您使用的是眾所周知的第三方工具，那么大部分繁重工作都是為了確保這些元素按預期工作而完成的。

即使使用滑塊或圖庫元素，以前的兩個提示仍然非常重要; 寬高比和尺寸和縮放概念仍然適用。

不確定使用哪個選項？如果您有一些可以在更大尺寸下工作的優質圖像，請選擇滑塊。它是網頁頂部或“英雄”部分的流行選項。如果您有大量可以渲染的圖像而沒有可讀性問題，請選擇圖庫。這適用于有大量圖像展示的投資組合或網站。

4.盡可能遠離字幕

字幕可以是一個很好的工具，可以為圖像中的信息增加價值，但實際上可以阻礙網站的工作方式。如果可以的話，請避開它??們，或者提出一種不是傳統字幕形式的替代解決方案。

大型文本塊（如字幕）可以在大屏幕上精美呈現，但在較小的環境中存在重大問題。由此產生的影響可能會造成不和諧，并可能導致用戶放棄您的網站。（對于大多數網站來說，流量來自移動設備，這可能是災難性的。）

5.混合視頻和圖像時要小心

 

讓我們明確一點：在您的網站上擁有視頻和圖像元素是完全可以接受的。這可能是你應該做的事情。

但是，不要將視頻和圖像混合在設計的相同元素中，例如將視頻和圖像元素放在同一個滑塊中。有時候，你會很幸運，它會像魅力一樣起作用。其他時候，你會在某些看起來很奇怪的設備上留下空白框。

最好的選擇是在設計中為每種不同類型的元素提供自己的空間。這幾乎適用于任何設計元素，尤其是圖像和視頻。

6.削減不必要的元素

滑塊和畫廊最大的問題之一是設計師經常在容器內放入太多垃圾。有導航箭頭，導航按鈕，文本，號召性用語和列表繼續。

通常，用戶了解如何與滑塊進行交互。除非您正在做一些完全不相干的事情，否則您不需要兩層導航來向用戶顯示該做什么。單排按鈕或箭頭很多（如果你需要的話）。

僅包含用戶需要與之交互的元素。如果圖片庫或滑塊的目的是讓用戶點擊/點按號召性用語，那么這應該是照片上唯一的選項。把事情簡單化。不要提供太多選擇。它實際上可以幫助您提高轉化率。

7.僅使用高質量圖像

 

這幾乎是不言而喻的，但它仍然經常發生。如果您沒有高品質圖像，則根本不要使用圖像。高質量，高分辨率的圖像比以往任何時候都更重要。用戶不會浪費時間查看帶有像素化或圖像質量差的網站（如果質量低于標準，他們可能不會信任你）。

大量用戶正在使用具有高分辨率屏幕的設備來查看您的網站設計; 他們期待一流的視覺效果。你需要交付。

一些圖像格式正在改變以滿足這些高分辨率需求，同時提供更多壓縮圖像。注意經常用CSS 和自動保存功能養成良好的保存習慣可以節省大量的時間。

結論

我們都希望創建用戶認為需要與之交互的網站。強圖像是該等式的關鍵部分。同樣重要的是讓它們無論設備如何都能很好地渲染。

當您處于網站設計項目的線框圖階段時，規劃可在各種設備尺寸上工作的圖像空間。您可能會發現有一些給予和接受，特別是在圖像形狀方面，但從長遠來看，盡早做出這些決定并創建這種一致性將從長遠來看有利于您的網站設計。

意派Coolsite360交互式線網頁編輯系統

“創意不該受技術束縛，交互可以變得簡單有趣”