產品視覺升級很難？除了好看你還需要知道這些

「一張圖片的價值勝過千言萬語。」

我們往往能夠敏銳感知視覺傳達的信息，其中大腦所接收的信息中90%都是可視的。相比複雜的文字內容，一張簡單的圖片可以向用戶傳遞更多有價值的信息。圖片擁有跨越語言障礙的魅力~

這篇文章，我們將介紹許多有用的原則和最佳的呈現方式，讓視覺體驗設計真正提升產品的商業價值。

講個故事給你聽

每一張圖片都會講述一個故事。就像是寫作，最好在開始動筆前就知道想說什麼。正確的圖片可以激發用戶的興趣，但不是所有圖片都可以做到。其中一些僅僅會佔用頁面空間，甚至會混淆用戶的理解?? 任何一種設計中，最應避免的因素之一是傳遞給用戶錯誤的信息。

用戶對視覺圖片的感知往往比文字深。我們要確保文字內容和視覺圖片風格統一，並且與產品目標保持一致。

圖片與產品目標一致

多即是好的原則不適用於視覺設計中。不要單純為網頁設計找一些好看卻無用的圖片，用戶往往會忽略。相反，選擇那些能表明產品用途的圖片。用亮眼的視覺設計來抓住用戶的心。??

使用沒有失真的高質量圖片

這點太重要啦，確保你的圖片適用於所有平台的尺寸。不要忘記測試特定比例和不同設備的解析度。以原始比例顯示照片和圖片（tips:不要縮放至大於100%）要是產品中的圖片看起來偏斜、太小或太大，都會影響用戶體驗。

左：降級圖片，右：正確的解析度

如何為響應式網站和移動App最佳匹配不同設備的圖片解析度？我們都清楚，一張圖片無法適用於所有屏幕解析度和設備。而每張圖片的像素選擇實在是太多了，特別是當你有太多圖片時，要不停地裁減尺寸??

那麼，該如何自動生成最佳的圖片尺寸呢？特別棒的是，有很多在線工具可以管理多個文件不同尺寸的圖片，其中之一就是Cloudinary，使用高級演算法輕鬆地為每張上傳的圖片生成最佳匹配解析度。在逐個圖片基礎上分析找到適用的最佳屏幕尺寸，而不是一張張裁剪出所有可能的圖片解析度。

有沒有get到？

Cloudinary提供雲端服務，可以批量存儲、裁剪和調整圖像大小

除了圖片 我還想看看其他元素

如果用戶被好看的圖片吸引全部的注意力，會忽略其他很多有效的界面元素。逛完就走，跳出率100%…??

將注意力過度集中在視覺設計上，可能會嚴重干擾用戶與內容更好的交互。你可以看到在SoundCloud App上，主頁圖片幾乎吸引了用戶所有的注意，一不小心就會錯過那兩個重要的按鈕。

雖然在某些情況下（例如蘋果大大的主頁），以圖片為中心的設計是恰當的，但絕大多數App和網站要遵循更加平衡的方法——用戶界面中使用的圖片應支持產品本身，而不會掩蓋其他重要內容和功能。

插圖和照片都喜歡

可以同時運用插圖和攝影照片。

• 攝影可以很好地展示產品本質並表達內容。例如，我們需要展示那一朵真實的玫瑰，而不是其他任何一朵花。

對於某一特定的實體，用照片來表示。

插圖可以偷偷告訴你產品想表達的意思，攝影不可以~

插畫可以幫助理解近似的內容，即使沒有實體

抓住焦點

通過圖片表達的焦點可以很好地傳遞用戶信息，但是沒有主次往往會讓用戶一頭霧水，比如這麼多架飛機…

甚至當圖片的焦點是模糊的，icon的質量也會無法保證。

缺乏焦點會使圖片顯得毫無意義

不要讓用戶在圖片中找答案，通過有效聚焦的方式向用戶傳達清晰的概念才是正確的打開方式??

圖像中清晰的焦點能夠一目了然地傳遞理念

盡量減少使人分心的元素，專註於提供有價值的圖片內容。

將圖片融入到設計中

在設計中使用圖片元素時，問自己選擇的圖片是否與App或網站的風格保持一致。比如Squarespace的主頁，整體界面優雅簡潔，並大膽地運用大量白色和全屏圖像的空間布局設計來吸引用戶注意力，你感受到了嗎？??

改善產品的視覺界面設計

產品的視覺設計太重要了。用戶往往通過產品的圖片來決定買還是不買，就是這麼任性?? 無論哪一種產品，產品圖片是影響網站流量很重要的因素。比如電商網站，越美觀的產品圖片對用戶的吸引力越大，越會買買買，轉化率也會up up

圖片能夠給用戶以真實的代入感

使產品圖片足夠突出。抓住用戶的眼球，找到產品差異化的立足點，是不是很棒呢？

讓圖片說話。比如Gorilla Pod通過主頁圖片直觀地傳遞產品的性能。

在首頁顯示主圖片。不要讓用戶滾動下拉才能看到，跑了誰負責??主圖片應固定顯示在顯眼的位置，來確保優先順序。

為了使圖片儘可能有效展示，請最大化圖片比例，但同時要保留產品的細節信息。比如展示衣服等，用戶更關注細節，尤其是ladies…即使放大的圖片也要保證高解析度。

不要自動放大圖片比例，非讓用戶看到產品細節。

允許用戶根據自己的想法放大圖片（控制縮放的深度和比例），來留存用戶。

表達產品個性並激發用戶的情感共鳴

圖片在傳達產品特質的同時，也可以給到用戶一些驚喜有趣的體驗。如果用戶本身認為你的產品很不錯，增加一些「小心機」的圖片設計有助於搭建更深的情感聯繫。

圖片能夠喚起用戶的情感共鳴，比如幽默的圖片可以放鬆心情，很多用戶會喜歡。

大腦中的情緒會受照片、插畫、故事甚至是別人的影響。說到插畫，很多網站、移動App會巧妙地利用卡通插畫來表現一些功能，例如用於指令、教程和空狀態，顯得更加生動~

選擇醒目的圖片來捕捉注意力和表達產品的個性

實例：如何為網站界面選擇合適的圖片來表達你的目的？

網站界面本質上是產品的展示窗口，在大多數情況下，你只有一次機會給用戶留下深刻印象，請珍惜眼緣…??當進入網站界面時，你希望訪客只有一個動作：不要走！他們做出的任何反饋，都取決於他們能夠看到什麼，選擇圖片要慎重~

該怎麼做

你準備好了嗎？

??

1. 選擇與產品風格一致的圖片。

圖片能夠簡潔直觀地表達產品或服務的內容。但是單獨一張圖片不足以表達所有信息，與網頁中其他元素聯繫在一起時將會帶來視覺升級，強化想要展示給用戶的信息。

2. 在正確的位置上展示圖片

如果圖片表達更高優先順序的目標，在視覺表現上要更突出。相反，與次要信息相關的圖片視覺上要弱化。主圖片應顯示在顯眼的位置，並能使用戶一眼就看到。

3. 選擇醒目的圖片來吸引用戶的注意力

盡其所能選擇最具吸引力的圖片讓你的產品一眼難忘。正如Steven Snell說：「一張生動、醒目的圖片能持續留存在用戶心中。文字可能讀完就忘，但風格強烈的圖片會一直被記住。」

4. 表達強烈的情感傾向

視覺設計上能給人以情感說服力，強化你想傳遞給用戶的感知??我們都知道，有時候做決策，情感會大於理性。

以下是關於Intercom（與客戶協同溝通的工具性網站）的目標網頁示例。在經過非常複雜合理的設計後，用戶通過界面能很快了解這個產品是如何工作的，為什麼選擇intercom。

Intercom使用插圖來表現舊的溝通方式，非常生動。

結論

考慮圖片帶給產品設計的可用性是很重要的。在設計中的所有視覺傳遞都會為用戶留存印象。

引人注意的圖片具有獨特的魅力，可以激發和吸引受眾用戶參與，得到真正有價值的信息。多花一些時間在你的App、網站的視覺設計上，讓你的每一張圖片都能夠驚艷用戶的眼球??

文章來源 | Smashing Magzine

原標題 | More Than Just Pretty: How Imagery Drives User Experience

原作者 | Nick Babich

翻譯 | stacy

到Designup 用可靠設計師

微信公眾號：Designup第三市集