使用戶感到而不是思考的圖像技巧

圖片的力量：在網頁設計中巧妙運用圖片引發情感共鳴

我們都聽過“一張圖片勝過千言萬語”這句話。在網頁設計中，圖片的重要性甚至超過文字內容本身。雖然精準的文字能清晰地表達想法，但圖片卻能繞過大腦的高級分析區域，直接觸達我們的情感層面。

你的網站會遇到三種類型的訪客：

• 仔細閱讀者: 逐字逐句閱讀所有內容的人。
• 瀏覽掃描者: 快速瀏覽內容，尋找感興趣部分的人。
• 總結閱讀者: 只閱讀開頭幾句和總結段落的人。

記住，同一個用戶可能在同一個瀏覽會話中扮演這三種角色中的任何一種。大多數讀者屬於“瀏覽掃描者”類別，這使得在視覺內容中做出情感衝擊的選擇更加重要。無論你遇到哪種類型的讀者，都必須記住一點：你面對的是人，而人受情感觸發因素的影響。

電影技巧的借鑒

我發現解釋和說明示例和技巧最簡單的方法是使用常見的關聯。在本文中，我將藉鑑電影領域的一些技巧。

大多數人都看過自己感同身受的電影。我們為之歡笑或哭泣，為英雄歡呼，為角色的安全擔憂。每部電影都巧妙地結合了圖像和聲音，來操控我們的感受。而我們可能非常喜歡這種感覺。

除了娛樂我們和創作出具有強大故事情節的視覺傑作外，導演的目標是引發某種形式的情感反應——如果你哪怕只是一瞬間有所反應，那麼他們就完成了自己的工作。

你應該以同樣的方式來選擇網站的圖片。引發情感，抓住你的受眾。

邏輯無法主導一切

讓我們來看一張笑臉的照片，以及生動的肢體語言。你的三歲侄女很可能告訴你，笑臉的人很開心。

雖然我們的大腦可以解釋為什麼這張圖片傳達了快樂，但這並不是引發觀眾情感的過程的一部分。我們對圖像的“直覺”反應往往先於邏輯思維，而我們的邏輯大腦隨後才負責解釋我們的推理。

在下面兩張圖片中，左邊的圖片在科學上可能更有助於理解青蛙究竟是什麼。但我們更有可能與右邊的圖片產生互動。

兩張准確的青蛙圖片——但哪一張更吸引你？

這就是為什麼作為設計師，我們應該始終優先考慮“情感勝於邏輯”。它更具衝擊力，並且能更好地讓訪客“產生共鳴”。

為此，我們可以採用一些微妙的技巧來調整畫面、操控色彩和焦點，從而塑造情感信息，就像我們創作文字內容一樣。

關鍵技巧：構圖和光線

雖然有很多方法可以產生和喚起情感，但最簡單快捷的方法是恰當的構圖和光線。這兩種方法有助於營造氛圍。

想想電影中那些令人印象深刻的時刻，那些真正讓你有所感受的時刻。這些都是攝影師辛勤工作的成果。

下面我將展示構圖和光線選擇如何激發網站所需的情感。請注意，每個圖像都經過了非常快速的5分鐘編輯以作為示例。

構圖

構圖無論是在拍電影還是拍照片中都是一個重要的方面。合適的角度和鏡頭距離正是那些能為觀眾創造“哇”效果的小小改變。

讓我們看看下面的兩個例子，看看好的裁剪或更緊湊的構圖如何改變圖像的整體情緒。

示例1

來源：https://www.php.cn/link/a1f69f6000f7a8b5883b7134fcf8d558}}

乍一看，這張圖片質量不錯，並且捕捉到了情感。但仔細一看，如果你想把它放在你的網站上，比如作為頁眉/滑塊，這張圖片相當中性。

是的，人們看起來很開心，但那是因為邏輯告訴你“微笑意味著快樂”。當要激發情感時，集體照是很棘手的。

如果這張圖片用於慈善組織的網站，並配以“更美好的生活，更好的關愛”的文字和捐贈按鈕，你希望激勵人們真正捐款，為受助者創造更美好的生活。

對特定面部進行更緊湊的拍攝可以輕鬆地影響這一點。

在這裡，我關注的是人群中那些真正快樂的面孔。通過創造焦點，我幫助隔離了那些快樂的情緒。與原圖相比，你更有可能微笑並考慮捐款，而不是被原圖所提示。

示例2

來源：https://www.php.cn/link/6346db6a68f632318af0c2a474b9eb34}}

即使你的照片中只有一人，也可以使用構圖來產生情感影響。記住，人類喜歡看其他人。我們天生就有閱讀面部表情的能力，我們從雲彩、樹皮到汽車引擎蓋，都能在一切事物中看到面孔。

就像之前一樣，我們有一張笑臉，但我們可以讓它比現在更有影響力。

假設這張圖片用於一個想要推廣女性積極健康生活的網站。雖然這張照片沒有什麼問題，但我們可以通過更多地關注女性的面部來增強它。

通過比她的實際活動更強調她的臉，我們可以激發從“哦，她看起來很開心”到“哇，那可能是我在保持健康的同時享受快樂”的思維過程。更不用說我們有直接的眼神接觸，這始終是你在網站圖片中使用的有用技巧。

現在將其與精心設計的號召性用語 (CTA) 配合使用，該用語可能會提示你“了解更多”，則情感暗示更有可能發生。

光線

光線在圖像內外都是極其重要的資產。我們人類每天都使用光線，不僅是為了看，而且作為視覺刺激物。房地產經紀人故意打開他們展示的房屋的窗戶，以營造輕鬆愉快的氛圍。餐館會操縱光線的數量和類型，以增強用餐體驗。

當然，電影也這樣做。藍色燈光可以用來激發陰沉的情緒和色調，而暖色燈光可以描繪輕鬆的氛圍或高能量。

讓我們來看看我們的燈光示例。

示例1

雖然我們上面的圖片似乎是一個感性的鏡頭，但我們可以提高效果。根據周圍的文字內容，這張圖片的語境很容易被看作是沉思的，甚至是中性的。通過僅僅操縱這張照片的光線，我們可以營造出稍微更莊嚴的感覺。這總是需要微妙的。

通過使陰影變暗並添加冷色調，我們比原圖建立了更明確的情感。

如前所述，你可以通過改變燈光來產生感覺。這意味著你可以像產生悲傷的感覺一樣輕鬆地產生愛的感覺。

示例2

我們這裡的圖片有一些你會自動判斷為積極的方面。我們有這個豐富多彩的背景，以及一對情侶在最前面和中心接吻。

如果你想將這張圖片用於情侶網站，那麼需要對燈光進行一些調整，以營造更“輕鬆”和“充滿愛意”的感覺。

通過用光線打開我們的圖像，我們得到的東西不僅更明亮，而且給你一種天真無邪、無憂無慮的感覺，而不是原照片中更強烈的陰影和飽和的色彩。

構圖和光線結合使用

既然你已經看到了構圖和光線如何單獨發揮作用，那麼讓我們看看將這兩種技巧結合起來會產生怎樣的效果。

之前

來源：https://www.php.cn/link/ea3e4ebf79464bc783e063d7182bc3fd}}

之後

快速提示

• 避免使用集體照。如果必須，請創建拉焦或搖鏡頭以產生對特定區域的興趣。
• 圖像中使用的對比度應與網站背景成比例，以免造成脫節。
• 如果你的圖片看起來屬於“中性區域”，嘗試調整裁剪。
• 盡量選擇顯示人類或動物的圖片。這將有助於激發積極的情感和興趣，而不是物體。
• 當選擇物體拍攝時，一定要創造有趣的角度。
• 選擇一張驚豔的圖片，而不是五張不錯的圖片。
• 如果你的圖片在文章中，請確保它後面有文字或標題，以激勵讀者繼續滾動。
• 在裁剪/構圖圖片時，你可能需要應用模糊效果來創建焦點。

結論

正如你所看到的，只要稍微調整一下，你就可以很容易地激發情感，無論你使用的是哪種類型的圖片。通過對訪客希望感受的方式進行一些考慮，你可以通過簡單的心裡觸發器而不是邏輯刺激器很容易地引導他們走向那個方向。

希望這篇文章能激勵你嘗試自己進行構圖和光線的測試。

(此處應添加FAQ部分，內容與原文FAQ部分類似，但語言表達需進行調整和潤色，避免重複，並保持簡潔明了。)

以上是使用戶感到而不是思考的圖像技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！