5個實用配圖技巧，為產(chǎn)品帶來優(yōu)質(zhì)體驗

2 評論 8413 瀏覽 31 收藏 8 分鐘

圖片不僅僅是裝飾，更是強大的設(shè)計工具，可以幫你進行視覺傳達，讓你的產(chǎn)品脫穎而出。

俗話說一圖勝千言，在這個讀圖遠勝過讀文字的時代，圖片的視覺化屬性更值得挖掘。用戶只需要幾秒鐘就能快速對APP和網(wǎng)站進行評估，而優(yōu)秀的設(shè)計師也清楚如何借助視覺呈現(xiàn)復雜的故事。在這其中，圖片起到了極其重要的作用，是視覺表達的關(guān)鍵組成部分。

然而在為APP和網(wǎng)頁進行設(shè)計的過程中，視覺內(nèi)容的選取并不是一件輕松的任務(wù)。今天所探討的配圖最佳實踐將會告訴你如何選取配圖，將它們成功地融入到設(shè)計當中。

1、使用和上下文相關(guān)的配圖

·如果你所選取的圖片和你的網(wǎng)站/APP 的主旨、核心內(nèi)容不匹配，用戶更多會為之分心：

1-vZ7Fb2Q_4b_kd2k3ITK62g

和網(wǎng)站內(nèi)容沒有明確關(guān)聯(lián)性的圖片，只是純粹的浪費空間。

在最壞的情況下，這種配圖甚至會給用戶以錯誤的印象，甚至讓用戶感到震驚：

1-lcgiNx579OVTGkBV7X5CXw

小貼士：使用與品牌關(guān)系密切的圖片確保視覺的可預(yù)測性。

2、有明確的視覺焦點

在選取圖片的時候，應(yīng)當注意選取有明確視覺焦點的，盡量避免讓用戶去找焦點，這樣才能給用戶傳達足夠清晰的概念和信息。

1-bAZCmkK-N4oLhMLAq8V4NQ

  • 左圖：當視覺焦點被遮擋的時候，圖像最具有標志性的部分就沒了。
  • 右圖：清晰的視覺焦點讓用戶更輕松理解設(shè)計師要傳達的概念。

嘗試在你的設(shè)計當中使用數(shù)量有限的視覺焦點來吸引用戶注意力，太多了就不存在焦點了。

1-WKlFKWfy_dxesoAt1I0hig

蘋果公司的首頁通常使用巨大的產(chǎn)品圖來作為配圖，盡量為用戶提供最有用最有效的信息。

小貼士：盡量降低用戶分心的機率，專注于最有意義最有效的元素。

3、呈現(xiàn)真實的人物形象

人物形象是提升用戶參與感的一種元素。真實的人物形象更能夠傳遞情緒和感情，和用戶產(chǎn)生到情感聯(lián)系，而不僅僅是推銷產(chǎn)品。

然而，許多網(wǎng)站僅僅只是使用純裝飾性的照片，它們很少能夠提升設(shè)計的價值，甚至會影響到用戶體驗。這些照片甚至會成為視覺噪音，所導致的結(jié)果就是，用戶常常會忽視它們甚至會因為這種體驗而感到沮喪。使用帶有真實人物形象的圖片的時候，應(yīng)該盡量使用品質(zhì)足夠高的，并且挑選和網(wǎng)站、APP能夠匹配的照片。

1--HLatjqR9Pgy7REuW3sOtg

  • 左圖：純粹的裝飾性的照片；
  • 右圖：經(jīng)過定制的圖片能夠展示出客服團隊的形象。

小貼士：

  • 盡量避免使用群像，照片應(yīng)該盡量傳遞出單一、直接的主題。
  • 盡量使用代表真實故事的圖片。拍攝讓你覺得有趣的人的故事和照片。如果涉及到具體產(chǎn)品，可以考慮使用圖片呈現(xiàn)用戶和你的產(chǎn)品交互的細節(jié)。
  • 如果想使用比圖片更加個性化的展現(xiàn)方式，請使用插畫。插畫更能激發(fā)用戶的想象力，更能激發(fā)用戶產(chǎn)品之間的情感。

1-Dgzq1AJK4_xPKxf_axHO-w

４、避免使用低素質(zhì)圖片

高分辨率的圖片大勢所趨，不論是手機還是電腦，屏幕分辨率正在不斷提升，如果圖片本身的素質(zhì)過低，在如今的屏幕上還能看到像素，那個體驗就太過于尷尬了。

1-kXI6XKO43Gzb71B63rGQGA

  • 左圖：低像素的圖片；
  • 右圖：正常分辨率的圖片。

小貼士：針對特定的設(shè)備和特定的分辨率來定制圖片的分辨率，確保圖片的尺寸能夠兼容不同的屏幕，跨平臺。

５、表達個性

APP通常是為了特定功能而生的，但是APP僅僅保證可用性是不夠的。APP應(yīng)當能夠有趣而人性化，為用戶帶來樂趣，用人性化和情感化的設(shè)計吸引用戶。為APP添加令人愉悅的細節(jié)，不僅僅是讓它更加富有人情味，還應(yīng)當讓它更加獨特而有意思。優(yōu)秀的APP通常不僅僅是好用，而且充滿個性。

1-5HP7uKwxYixIO97y5zf-KQ

圖片是傳達個性、吸引用戶的強大工具。

小貼士：

（1）使用圖片和插畫來進行說明，制作教程，完善UI里的空狀態(tài)。即使是風格并不突出的APP，也同樣可以借助卡通插畫來達成這些目的。

1-vx02_01FsCK88yEUXu0a_g

（2）考慮在你的APP當中使用更富有創(chuàng)意、抓人眼球的效果。

1-UDiFuf3TTC5lOAeZyy6BbA

結(jié)語

從可用性的角度來思考圖片的使用，看起來有點奇怪，但是這些案例和最佳實踐很好的證明了圖片的可用性是多么重要，是多么需要技巧。

圖片不僅僅是裝飾，更是強大的設(shè)計工具，可以幫你進行視覺傳達，讓你的產(chǎn)品脫穎而出。

 

原文作者：Nick Babich

原文地址：uxplanet

譯者：@陳子木

譯文地址：http://www.uisdc.com/best-practices-for-imagery

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Aine
人人都是產(chǎn)品經(jīng)理內(nèi)容運營團隊
686篇作品 11705914總閱讀量
07-073670 瀏覽
改善SaaS企業(yè)的收入，是客戶成功存在的唯一理由
08-034208 瀏覽
抖音走進本地生活深水區(qū)！
05-253096 瀏覽
Axure教程—動態(tài)單散點圖（中繼器）
09-083419 瀏覽
?邁向數(shù)字化產(chǎn)品經(jīng)理的10個工具：如何搞定B端系統(tǒng)的復雜流程設(shè)計？
04-172355 瀏覽
CMMI 1.3級認證下，包含了哪些管理體系？
評論
評論請登錄

  1. 找個配圖想破頭。

    來自北京 回復

  2. 關(guān)鍵上哪找圖片呢

    回復