版式界面設(shè)計中，考慮到用戶體驗及渲染氣場等問題，我們總會適當(dāng)?shù)牟迦胍恍┲T如插畫的圖像圖片。圖片的引用在界面設(shè)計中是否很講究，不是漂亮好看就可以了嗎？

創(chuàng)新互聯(lián)公司成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、成都app開發(fā)、手機網(wǎng)站制作設(shè)計、微信網(wǎng)站制作、軟件開發(fā)、成都服務(wù)器托管等實行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)公司可以獲得的服務(wù)效果。

常言道：“一圖勝千言?！比祟愂歉叨纫曈X動物，我們幾乎能立馬處理視覺信息。我們所接收到的以及大腦所轉(zhuǎn)換的信息中90%來自于視覺。圖片是抓住用戶注意力和區(qū)分產(chǎn)品的有效手段。單張圖片能比一個精心制作的文本塊傳達更多。此外，圖片能跨越語言障礙而文本卻不能。

用戶體驗要素設(shè)計跟圖片圖像有什么關(guān)聯(lián)

-

用戶體驗設(shè)計中的五要素，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。其中，表現(xiàn)層是用戶真真切切地可以感受到的產(chǎn)品外在。這是離用戶最近的。在這一層，可以通過設(shè)計產(chǎn)品的配色方案、排版、對比、風(fēng)格統(tǒng)一，充分研究和使用用戶的感知方式（嗅覺、味覺、觸覺、視覺、聽覺等），將產(chǎn)品的風(fēng)格完整呈獻給用戶。

圖片不僅僅是裝飾。它能創(chuàng)造用戶體驗也能打破用戶體驗。

下面將會通過實戰(zhàn)案例的圖文講解，如何運用設(shè)計原則與技巧將圖片圖像融入到版式界面設(shè)計中去。

只用相關(guān)的圖片

-

每張圖片都有一個故事。正如寫作一樣，在開始寫作之前你最好知道要講述什么。引人注目的圖像具有獨特的能力能激勵和吸引用戶，但不是所有的圖片都能改善用戶體驗。一些圖片僅僅只會占用空間，更有甚者，會令用戶困惑。任何設(shè)計中最危險的元素之一是圖片傳達了錯誤的信息。

和主題無關(guān)的圖片常會引起困惑

-

用戶對視覺圖片的反應(yīng)比文本快，因此請確保您的內(nèi)容與支持的視覺圖片匹配。您應(yīng)該選擇和產(chǎn)品目標(biāo)有很強關(guān)系的圖片，并且確保和內(nèi)容相關(guān)。

圖片不應(yīng)該創(chuàng)造視覺噪音

-

“更多即更好”的原則不適用于圖片。網(wǎng)站或者應(yīng)用的目的不應(yīng)該是展示圖片，相反的，您選擇的圖片要展示產(chǎn)品的目的。在設(shè)計中使用有限數(shù)量的視覺效果——那些能真正抓住用戶注意力的視覺效果。

使用無失真高品質(zhì)的圖片

-

確保圖片的尺寸能在所有平臺里展示。圖片不應(yīng)出現(xiàn)像素化，因此請務(wù)必針對特定比率和設(shè)備測試適當(dāng)?shù)姆直媛食叽?。以原始長寬比呈現(xiàn)照片和圖形，不要將圖片縮放超過100%。您不會想您產(chǎn)品中的圖片看起來歪斜，太大或者太小。

左側(cè)：降級圖片。右側(cè)：正確的分辨率

響應(yīng)式網(wǎng)站或者手機應(yīng)用經(jīng)常掙扎著選用合適的圖片分辨率以匹配各種用戶設(shè)備。顯然，僅用一種圖片適配所有分辨率的屏幕和設(shè)備是不夠的。然而，像素級的圖片又太多，每次都剪裁圖片工作量太大，特別是你有特別多圖片的時候。

因此，我們該如何自動選擇最優(yōu)的響應(yīng)式圖片尺寸？有望的是，有在線工具能管理整個文件夾的圖像的多個尺寸。Cloudinary就是能生成交互式響應(yīng)式圖片斷點的工具。這個工具使用了高級算法能為每張上傳的圖片生成最匹配的斷點；在逐個圖像的基礎(chǔ)上分析圖片以找到最佳斷點，而不是生成所有可能分辨率的圖片。

*Cloudinary是一項用來批量剪裁，調(diào)整圖片大小的云服務(wù) *

圖像聚焦設(shè)計不適用每個頁面

-

用美觀的圖片得到用戶的注意力確實有價值，但是會使其他元素更難看見或者更難使用。

在設(shè)計中將過多的注意力放在圖片上可能會造成視覺過度，嚴(yán)重干擾用戶從內(nèi)容中分心。你能從SoundCloud這個app中看到這個效果：圖片吸引了所有的注意力你幾乎無法注意到這兩個按鈕。

在SoundCloud的首頁中，屏幕按鈕被圖像遮蔽

以圖像為中心的設(shè)計在有些情況下是合適的（例如：蘋果首頁），絕大多數(shù)的網(wǎng)站和apps應(yīng)該遵循一個平衡的方法——在界面中使用的圖片應(yīng)該支持產(chǎn)品，而不是掩蓋其他重要內(nèi)容或者遮蔽功能。

使用多個介質(zhì)

-

插圖和攝影圖像能用在相同的產(chǎn)品中。

- 攝影是展示特定實體和故事的理想選擇。例如：如果我們需要顯示不只是花，而是特定的玫瑰：

用攝影表征某個特定的實體

- 插圖表示概念和隱喻是有效的，攝影圖片則會比較疏遠(yuǎn)

當(dāng)不需要總的特異性時，插圖能傳達近似的概念以幫助理解

有一個焦點

-

圖像是傳達信息的視覺溝通工具。清晰的焦點能一目了然地傳達概念，而缺乏焦點使得圖像無意義。

當(dāng)焦點被遮擋時，圖像的圖標(biāo)質(zhì)量會喪失：

否：焦點缺失使得圖片無意義。

不要讓用戶尋找圖像的意義，確保以令人難忘的方式傳達清晰的概念。

是：清晰的焦點一目了然地傳達概念

減少在圖片中的分心物，聚焦于有意義的元素。

顯示真實的人

-

人類是使用戶參與的非常有效的方式。當(dāng)我們看見其它人的臉時，它讓我們覺得我們實際上是與他們有連接，而不僅僅是使用產(chǎn)品。可是，很多企業(yè)網(wǎng)站都因過度使用不誠實的攝像去制造所謂的信任而臭名昭著。

否：不真實的圖像給用戶帶來了淺淺的虛偽感

可用性測試表明純裝飾照片很少能為設(shè)計增加價值，經(jīng)常損害用戶體驗而不是增強用戶體驗。用戶通常會忽略這樣的圖片，甚至?xí)钣脩舾械骄趩省?/p>

一個簡單的經(jīng)驗法則是使用匹配你的網(wǎng)站或者app特性的高品質(zhì)人像圖片。圖片應(yīng)該真實的表現(xiàn)你的產(chǎn)品，公司或者文化。

顯示真實的地球人圖片，確保他們匹配你產(chǎn)品的特性。

小貼士

-

- 避免使用人群戰(zhàn)術(shù)，相反的，使用有單個主題的圖像。

- 爭取代表真實故事的圖片。拍攝人們做有趣事情的圖像。如果你有產(chǎn)品，考慮拍人們正和你的產(chǎn)品發(fā)生交互的圖像。

將圖像和設(shè)計混合

-

當(dāng)在你的設(shè)計中使用圖像時，問問自己你所采用的圖像是否符合你的網(wǎng)站或者app的美學(xué)標(biāo)準(zhǔn)。Squarespace的主頁是關(guān)注圖像的一個很好的例子。它優(yōu)雅，干凈，使用大量的留白和巨大的全屏圖像創(chuàng)造了一個大膽的設(shè)計以抓住了人們的注意力。

選擇適合我們創(chuàng)造的體驗主題的圖片很重要

改進你的電子商務(wù)設(shè)計

-

產(chǎn)品圖片銷售該項目。用戶經(jīng)常依靠產(chǎn)品圖片來評估產(chǎn)品及其功能。不論你的產(chǎn)品是手機還是玩具，產(chǎn)品攝影圖是任何電子商務(wù)網(wǎng)站最重要的元素。最終，你的產(chǎn)品對訪客越有吸引力，他們從你那購買產(chǎn)品就越感到自信，你的轉(zhuǎn)化率就會越高。

圖像應(yīng)該用于獲得產(chǎn)品的感受。

使產(chǎn)品圖像美觀一個好的圖像為你做所有的辛勤工作：它抓住用戶的注意力，使你的產(chǎn)品具有區(qū)分度。然而，良好的產(chǎn)品攝影需要努力?？梢钥紤]閱讀這篇文章 “Improve Your E-Commerce Design With Brilliant Product Photos” 學(xué)習(xí)如何拍出高品質(zhì)的產(chǎn)品攝影圖。

讓產(chǎn)品賣它們自己。 考慮如下Gorilla Pod 的例子：照片證明了產(chǎn)品的優(yōu)點。

在首屏上顯示主圖像。不要讓用戶滾動屏幕才能看見產(chǎn)品的主圖像。主要的產(chǎn)品圖像應(yīng)錨定在顯著位置，以便交易你的優(yōu)先的產(chǎn)品。

為了使圖像更有效率，你要使圖片盡量的大。那么，當(dāng)你已經(jīng)最大化了你的圖像的大小，您需要集成放大產(chǎn)品的特定細(xì)節(jié)的能力。這對于服裝等產(chǎn)品尤其重要，用戶對這些產(chǎn)品的細(xì)節(jié)更關(guān)注。放大的圖像還需要保持高質(zhì)量。

否：放大視圖強制用戶查看特定部位

是：允許用戶根據(jù)自己的喜好放大控制權(quán)（縮放的深度和區(qū)域都由用戶控制）。

傳達個性和觸發(fā)用戶情感

-

圖像可以傳達產(chǎn)品或服務(wù)的本質(zhì)，但它也可以傳達驚喜和喜悅。和傳達信息的能力一樣，圖像也有使人愉悅的能力。如果您的產(chǎn)品已經(jīng)有令人滿意的客戶體驗，為您的產(chǎn)品增添愉悅有助于創(chuàng)建與用戶的情感聯(lián)系。情感強大的圖像是確保用戶繼續(xù)深入了解您的體驗的一個因素。

圖像能夠喚起觀眾的情緒反應(yīng)。一個幽默可以減輕負(fù)擔(dān)，你的用戶可能會喜歡它

情感大腦受照片和插圖，特別是人的照片和插圖以及故事的影響。談到插圖，甚至那些不會至始至終整合繪制風(fēng)格的網(wǎng)站和app也可以用卡通插圖達到這些目的。例如，插圖可用于指令，教程和空白狀態(tài)。

選擇醒目的圖像，捕捉注意力和表達個人相關(guān)性

現(xiàn)實生活場景：如何為著陸頁選擇圖像

-

著陸頁本質(zhì)上是您的商店櫥窗，在大多數(shù)情況下，你只有一個機會給用戶留下深刻的印象。談到著陸頁時，您希望訪問者在您的網(wǎng)頁上只完成一個任務(wù)：轉(zhuǎn)化。優(yōu)良的著陸頁具建立在穩(wěn)固的用戶體驗之上，圖像在建立這種體驗中起重要作用。當(dāng)用戶來到您的網(wǎng)頁時，他們會有一些反應(yīng)：無論是積極還是消極，在很大程度上，都是由他們所看到的決定。

遵循如下建議“顯示，不要告訴”。以及：

1.選擇適合您信息的圖像。

選擇可以簡單解釋產(chǎn)品或服務(wù)概念的圖片很重要。這并不意味著圖像需要說明一切——單獨看到的圖像可能甚至看起來意義不明，但當(dāng)它連接到頁面上的一切時邏輯上應(yīng)該合適。它應(yīng)該在視覺上強化您嘗試提供給訪客的消息。

2.在正確的位置展示圖像

如果圖像支持高優(yōu)先級目標(biāo)，它應(yīng)該有更多的視覺強調(diào)。相反，與次要目標(biāo)相關(guān)的圖像應(yīng)該具有較少的強調(diào)。最重要的圖像應(yīng)該錨定在顯著的位置（例如：在首屏上）和顯著的焦點上。

3.選擇能捕捉注意的醒目視覺

專注于選擇您可以找到的最引人注目的圖像。正如Steven Snell 所提及的 “一個生動，醒目的形象將持續(xù)在用戶的心中。文本可能被讀取和遺忘，但強烈的圖像將被記住?！?/p>

4.使用情感強大的圖像

您的圖像應(yīng)該有情感的說服力 - 有情感的影響并強化你想創(chuàng)造的感覺。畢竟，當(dāng)涉及決策時，情緒經(jīng)常會覆蓋邏輯。

以下是Intercom的登錄頁面示例，這項服務(wù)可讓您更有效地與客戶溝通。登陸頁需要一個相當(dāng)復(fù)雜的想法，并使其易于理解產(chǎn)品如何工作，以及為什么它可能是有益的。

Intercom使用插圖來比較舊的工作方式，而不是一個簡單的方法。

小結(jié)

-

我們在做視覺傳達設(shè)計時，采用合適的圖片圖像至關(guān)重要。首先我們要考慮圖片的可用性，必須要比文字還要直觀的表達主題。其次要選擇令人信服的圖片插圖，既要能吸引受眾群體，還要具備獨特的啟發(fā)能力。用戶體驗的設(shè)計工作從來都是不容易的，但是只要花時間研究，在版面界面設(shè)計中巧妙的運用好圖片，會瞬間增強用戶體驗感，完美解決了用戶體驗要素中的表現(xiàn)層。我想，還是值得的。