一張好看的圖片往往能輕而易舉地抓住我們，引起我們的共鳴。因此，若想設計出一個有吸引力的網站，圖片將會成為影響用戶對網站第一印象的關鍵元素，甚至有助於快速地將我們的目的信息傳遞給用戶，從而贏得用戶的信任。

不過，如果你的網站使用了錯誤的照片，那就有可能會誤導用戶，降低網站的用戶體驗。

那麼，網頁設計該如何正確使用圖片呢?

在為網站選擇圖片的過程中，我們需要注意它的各種屬性，包括：內容，顏色，版式，層次結構，信息體系結構等，同時你所選擇圖片應該儘可能獲得用戶的關注，並對網站的可用性和用戶體驗有一定的幫助。

比如：

① 使用大圖時需注意

大部分用戶會根據以往的經驗和預期，先從左上角開始瀏覽屏幕，因此如果你的頁面需要使用大圖片吸引用戶的注意，可按照他們一貫的閱讀方式設計網站。

② 圖片也是內容之一

圖片不僅是用來「裝飾」網頁，更多情況下它也算是網頁的內容之一，因此在選擇圖片的時候，應該考慮圖片是否能為用戶提供有價值的信息;用戶看到圖片時的反應時的反應是如何的;圖片對用戶當前的任務起到怎樣的幫助......

③ 選擇一張完美的照片

當你已經確定好所使用的圖片後，你還需要評估該圖片的質量、尺寸、組成和曝光，比如：在確保圖片的質量時，選擇合適的位置並有效裁剪圖片，這樣能更容易吸引用戶的注意力;另外，圖片還要隱含網頁主題，才能將頁面信息準確地傳遞給用戶。

上述操作完成後，圖片已經通過基本測試，接下來我們就這張圖片，探討它的使用目的：

○ 圖片對網站有用嗎?

儘管圖片作為佔位符，給網頁帶來「錦上添花」的作用;但是有助於我們更好地理解或引導我們學習的圖片，才是我們應該考慮的。

Woodster網站利用照片來解釋它家的產品是用來提升Mac的性能，圖片同時展示了USB接口，清晰地表達出產品的使用方式。

Grovemade網站使用一張全屏背景圖片展示它家的產品集合，通過圖片我們不僅可以看出他們生產的產品是高端木質辦公用品，同時也很快被它們營造的氛圍所感染。

○ 圖片對用戶有效嗎?

所謂有效的圖片，除了具備向用戶傳遞信息的作用外，還應該能刺激用戶產生某種行為。

POCO People網站設計得非常有趣，當用戶使用鼠標點到某個文字區域時，圖中相應的物品就會發光。這種有趣的互動方式能夠觸發用戶去思考及留意網站到底是做什麼的。

Colossal採用一張大照片用於展示他們的工作內容及工作細節;而照片中最有趣的地方是左邊路過的行人，他們正在很興奮地見證這個美麗壁畫的完成過程，使整張照片變得更有吸引力，同時還能更有效地向用戶傳遞信息。

○ 圖片能帶動用戶情緒嗎?

如果想使用圖片和用戶進行交流以便傳達目的信息，那麼這張圖片應該富有感情色彩並能帶動用戶的情緒。

Breath網站的主圖非常寧靜，圖中那個女子閉着雙眼，很享受地輕輕呼吸，加上旁邊的標語及CTA按鈕中，輕而易舉地帶動用戶的情緒，讓人感到特別輕鬆舒適。

Save the Children網站使用一張孩子特寫照片，完全匹配該網站的標語和主題。另外，孩子的視線恰好能引導用戶留意到「DONATE NOW」的按鈕，讓人情不自禁地總想為這些孩子做點什麼。

儘管我們已經知道在網站設計中如何選擇和使用照片，最後我們通過一些例子，看看選擇圖片的誤區有哪些，避免出現濫用情況。

◆ 不適用無關圖片

網站為了能向用戶表達自己能提供專業的設計，所以用了Tailored-made(量體裁衣)的引申義，雖然這個比喻不錯，但是卻錯用了「彩色線軸」的圖片，反而讓人會誤解為這是一家裁縫鋪。

◆ 少使用模糊圖片

雖然這是一張用來裝飾的佔位圖，但是圖片沒有任何關於該網站信息之餘還非常模糊，讓用戶難以理解這個網站到底是做什麼。因此，選擇圖片時，如非必要，儘可能避免使用模糊的背景圖片，除非你能hold住。

◆ 選擇錯誤圖片

當用戶看到這張圖片時，第一反應會認為這是一個咖啡店網站，但看到圖片上的標語，便會感到非常疑惑，「咖啡店為什麼能幫助我的在線業務取得成功」;「到底這個網站是做什麼的」......

雖然文中的例子大多使用大圖，但圖片的使用方式有很多種，只要使用得當，同樣能起到吸引用戶的作用，最大程度提升網站的商業價值。