過(guò)去的幾年中，用戶界面中加入插圖一直是最受歡迎也最穩(wěn)固的設(shè)計(jì)趨勢(shì)之一。今天，摹客的小伙伴將帶領(lǐng)大家一起討論設(shè)計(jì)師在網(wǎng)頁(yè)或移動(dòng)APP的UI設(shè)計(jì)，尤其是核心視覺(jué)元素中使用插圖的原因。

什么是插圖？

基本上，插圖是對(duì)特定概念，文本或過(guò)程的視覺(jué)解釋。這是一個(gè)旨在支持、澄清甚至擴(kuò)展人們從其他信息來(lái)源獲得的想法的圖像，通常以文本的形式給出。這個(gè)詞本身就意味著“為某些事物投光”，因此它的主要目的是幫助用戶理解或想象更好的東西。

多年來(lái)，插圖已被整合到各種印刷品中，如書籍，雜志，報(bào)紙，海報(bào)，傳單，教育材料。后來(lái)，動(dòng)畫和視頻制作為插畫帶來(lái)了新的氣息。最近，新的技術(shù)和工具推動(dòng)了數(shù)字插畫時(shí)代的發(fā)展。

隨著網(wǎng)站和移動(dòng)應(yīng)用程序的不斷增長(zhǎng)，插畫的需求和應(yīng)用也不斷飆升。由于其美觀性和創(chuàng)造性，插畫也是作為提高可用性、情感和視覺(jué)吸引力的界面之一。但是在UI設(shè)計(jì)中有哪些功能是可以通過(guò)插圖來(lái)說(shuō)明的呢？

界面設(shè)計(jì)中使用插圖的方法

和其他界面元素一樣，插畫的功能性多于裝飾性，可以使信息或交互變得更清晰明了，也更加時(shí)尚。所以，何樂(lè)而不為？以下是我總結(jié)的可以使用插圖的地方：

•主頁(yè)橫幅

•主題圖片

•吉祥物和人物

•博客文章圖片

•引導(dǎo)流程和工具提示

•獎(jiǎng)勵(lì)和其他游戲化圖形

•通知和系統(tǒng)消息

•貼紙（特別適用于Messenger應(yīng)用程序）

•講故事

•信息圖表

•營(yíng)銷材料和廣告橫幅

•內(nèi)容類別的可視標(biāo)記

•支持網(wǎng)站或應(yīng)用的社交網(wǎng)絡(luò)頁(yè)面。

以下是插圖在界面設(shè)計(jì)中深受歡迎的十大理由 – 也許你可以考慮在下一個(gè)設(shè)計(jì)項(xiàng)目中使用它們。

界面設(shè)計(jì)中使用插圖的十大理由

1. 自定義插圖為原創(chuàng)性和藝術(shù)和諧奠定了堅(jiān)實(shí)的基礎(chǔ)

圖形為界面、印刷品或品牌相關(guān)的東西增添了一絲風(fēng)格和創(chuàng)意。在競(jìng)爭(zhēng)激烈的世界中，脫穎而出至關(guān)重要。否則，人們甚至可能不會(huì)嘗試你的產(chǎn)品，更不用說(shuō)了解它的好處了。

順便說(shuō)一下，這就是為什么許多公司將插圖用作博客文章、評(píng)論和登陸頁(yè)面的主頁(yè)橫幅的原因。在這種情況下，設(shè)計(jì)師可以根據(jù)目標(biāo)受眾偏好對(duì)作品進(jìn)行微調(diào)，并將其與特定項(xiàng)目或主題背后的業(yè)務(wù)目標(biāo)或想法進(jìn)行平衡。這樣可以找到充滿趣味的隱喻、配色方案、角色和環(huán)境，從而有效地吸引特定的讀者群或觀眾。

看看這副關(guān)于UI動(dòng)畫的文章的隱喻標(biāo)題插圖。智能手機(jī)扮演幕墻或屏幕的角色，就像在木偶劇院中使用的那種，設(shè)計(jì)師充當(dāng)演員，每個(gè)演員都展示了特定的動(dòng)作表現(xiàn)模型。

2. 插圖充當(dāng)可視觸發(fā)器，可快速傳輸必要的消息

絕大多數(shù)人對(duì)圖像的感知能力超過(guò)文字。這是一個(gè)無(wú)關(guān)好壞的事實(shí)，只是設(shè)計(jì)師可以利用這一點(diǎn)來(lái)增加網(wǎng)頁(yè)或移動(dòng)布局的視覺(jué)效果。一般來(lái)說(shuō)，人們具有非常廣泛的能力來(lái)感知視覺(jué)標(biāo)記，識(shí)別和處理數(shù)據(jù)，甚至轉(zhuǎn)換為高級(jí)抽象的圖像。

事實(shí)例證：

•心理學(xué)家聲稱人們需要大約1/10秒來(lái)獲得視覺(jué)場(chǎng)景或元素的一般感知（文本項(xiàng)目的速度確實(shí)不可能）

•視覺(jué)效果能更快地傳遞到大腦。重要的信息通常被大腦固定為視覺(jué)圖像，即使它們是通過(guò)文本感知獲得的

•與背景和周圍元素相結(jié)合，圖像不易受到影響，而文本則高度依賴于可讀性

•圖像有助于保留長(zhǎng)期記憶。這意味著處理界面的用戶不需要處理和記住比實(shí)際需要更多的數(shù)據(jù)，因此交互變得更快

•當(dāng)來(lái)自不同國(guó)家/地區(qū)的人使用應(yīng)用或網(wǎng)站時(shí)，界面中的視覺(jué)效果可以使其更加通用

•圖片突出了具有文本識(shí)別自然問(wèn)題的用戶的感知極限，例如閱讀障礙或非閱讀學(xué)齡前兒童。

所有上述內(nèi)容構(gòu)成了與插圖建立強(qiáng)大而快速視覺(jué)聯(lián)想的堅(jiān)實(shí)理由：字符、顏色、構(gòu)圖、可識(shí)別的細(xì)節(jié)將快速通知用戶并支持文本形式中給出的消息。

這是一個(gè)數(shù)字代理商的登陸頁(yè)面，通過(guò)一個(gè)由籃球運(yùn)動(dòng)員代表的主頁(yè)橫幅形象迅速傳遞其準(zhǔn)備迎接最高的商業(yè)挑戰(zhàn)和目標(biāo)的信息。

還有一個(gè)例子是為L(zhǎng)unnScape創(chuàng)建的主題插圖。LunnScape是一家專門從事景觀設(shè)計(jì)和植物護(hù)理的公司。這些藝術(shù)品旨在用于營(yíng)銷活動(dòng)，社交網(wǎng)絡(luò)和網(wǎng)站。經(jīng)過(guò)一系列的實(shí)驗(yàn)，設(shè)計(jì)師想出了柔和色彩和筆觸輕盈的圖形。其中一個(gè)插圖的特點(diǎn)是人們忙于園藝，而第二個(gè)插圖反映了公共空間的風(fēng)景與景觀設(shè)計(jì)。你看，通過(guò)這樣的設(shè)計(jì)，插圖立即與景觀主題建立了寶貴的聯(lián)系。

3.圖形為Web或移動(dòng)界面中應(yīng)用的副本提供有效支持

正如之前提到的，在許多情況下，圖片可以作為一種比復(fù)制更通用的通信工具。但是，也有一些陷阱需要仔細(xì)考慮。感知的速度并不是我們唯一需要的東西：人們可以超快地感知插圖，但如果他們傳輸?shù)男畔⒉磺逦蛘呖梢员浑p重閱讀，速度將無(wú)法帶來(lái)積極的用戶體驗(yàn)。

快速捕獲導(dǎo)致錯(cuò)誤理解的圖形不能被定義為識(shí)別，它只是被快速注意到。識(shí)別不僅意味著速度，還意味著應(yīng)該給你用戶指示正確的動(dòng)作或傳達(dá)正確的視覺(jué)元素信息。因此，請(qǐng)立即清除視覺(jué)隱喻以免造成誤解或錯(cuò)誤關(guān)聯(lián)。

這里是一個(gè)金融服務(wù)網(wǎng)站的例證，幫助養(yǎng)老金領(lǐng)取者有效地管理他們的錢并增加他們的儲(chǔ)蓄。藝術(shù)作品會(huì)立即傳送信息，使其與標(biāo)語(yǔ)保持一致。 這樣，當(dāng)布局中的所有元素協(xié)同工作時(shí)，網(wǎng)頁(yè)看起來(lái)就很吸引人。

4. 插圖是一個(gè)很好的創(chuàng)造性故事的檢驗(yàn)工具

簡(jiǎn)而言之，講故事是將不同信息塊合并為一個(gè)故事的方法，使它們更讓人印象審核，并在各部分之間建立牢固的聯(lián)系。 這種方法在營(yíng)銷和用戶體驗(yàn)設(shè)計(jì)方面表現(xiàn)得非常有效。

這是為我們最近的佛羅倫薩項(xiàng)目設(shè)計(jì)的插圖集。它是一個(gè)可以讓自由護(hù)士在線尋找工作的平臺(tái)。設(shè)計(jì)師創(chuàng)造了原始角色，展示故事，設(shè)置氛圍，發(fā)送信息或以與平臺(tái)的情緒、語(yǔ)氣和聲音相對(duì)應(yīng)的方式呈現(xiàn)優(yōu)勢(shì)。

5. 插圖在設(shè)定情感訴求方面具有重要的力量

毫無(wú)疑問(wèn)，我們都是情感動(dòng)物。談到情感設(shè)計(jì)，AarronWalter說(shuō)：“許多網(wǎng)站和應(yīng)用程序正在創(chuàng)造更好的體驗(yàn)。他們重新劃分需求的層次結(jié)構(gòu)，包括一個(gè)帶有快樂(lè)和愉悅色彩的新頂層。如果界面可以幫助你完成一項(xiàng)關(guān)鍵任務(wù)并讓你感到非常愉悅，那是不是很棒？是的，的確是這樣！這將是你向朋友推薦的一種體驗(yàn); 這將是一個(gè)值得傳播的想法。”

這就是你可以利用插圖實(shí)現(xiàn)的一些有效的事情。你投入其中的一切 – 線條、形狀、顏色、面部表情、曲線動(dòng)態(tài) – 都會(huì)對(duì)點(diǎn)燃情緒產(chǎn)生重大影響。通過(guò)研究用戶行為和影響情感吸引力的因素，設(shè)計(jì)師可以將插圖作為一種強(qiáng)大的工具，將經(jīng)驗(yàn)與用戶情感從最初的互動(dòng)相互連接。

Kiddy的這個(gè)登錄頁(yè)面的設(shè)計(jì)概念讓保姆雇傭變得非常簡(jiǎn)單。可愛(ài)正面的元素在充滿趣味性的插圖中扮演關(guān)鍵角色，為用戶傳遞信息和情緒。在用戶開(kāi)始閱讀服務(wù)之前創(chuàng)造所需的氛圍，并為所有頁(yè)面提供獨(dú)特的外觀。

6. 定制圖形設(shè)計(jì)為美學(xué)滿意度奠定了基礎(chǔ)，從而增加了項(xiàng)目的可取性

通過(guò)數(shù)百次關(guān)于“功能優(yōu)先”主題的討論和論證，人們對(duì)美麗和喜悅的自然渴望依然存在。當(dāng)然，實(shí)用性和可用性是任何界面的基礎(chǔ)。可取性是通過(guò)美觀可愛(ài)的外觀讓人們注意到你的產(chǎn)品，感受使用它的樂(lè)趣，并希望再次使用它。插圖則是一種經(jīng)過(guò)精心檢查的方式來(lái)實(shí)現(xiàn)這一目標(biāo)，因?yàn)樗鼈兛梢蕴砑用栏?，風(fēng)格，優(yōu)雅或任何您想要添加到界面中的內(nèi)容。

這是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)概念，為旅客提供簡(jiǎn)單明亮的預(yù)訂服務(wù)。它在頁(yè)面左側(cè)使用大幅的3D插圖，而右側(cè)部分則突出搜索住宿的形式。

7. 插圖令人難忘且引人入勝。因此它們?cè)谔岣咂放浦群涂勺R(shí)別性方面有不錯(cuò)的表現(xiàn)

與文本相比，圖像在長(zhǎng)期記憶中具有更好的粘性。當(dāng)圖像提供信息時(shí)，影響將會(huì)增長(zhǎng)，與目標(biāo)受眾的期望一致的設(shè)計(jì)、布局使得有插圖的UI設(shè)計(jì)可以非常有效的增加網(wǎng)站或移動(dòng)應(yīng)用程序的品牌性。這就是插圖被廣泛用于引導(dǎo)流程的原因之一。

這些是Perfect Recipes應(yīng)用程序的流程引導(dǎo)圖。在交互開(kāi)始時(shí)，用戶設(shè)定他們想要實(shí)現(xiàn)的目標(biāo)，例如減輕或增加體重，保持健康的飲食等。此外，用戶可能會(huì)標(biāo)記他們不喜歡的成分，以便應(yīng)用程序不會(huì)顯示包含它們的食譜。插圖以明亮和原始的方式可視化目標(biāo)。

這是另一個(gè)使用流程引導(dǎo)的例子。有趣的人物和插圖成為app游戲化的關(guān)鍵元素。集成到UI中的原始吉祥物成為通信和交互的核心元素，在不同的狀態(tài)下，它向用戶傳遞不同的消息，使交互更加用戶友好和擬人化。

8. 數(shù)字插圖可有效創(chuàng)建動(dòng)畫短片和互動(dòng)元素，使交互生動(dòng)優(yōu)雅

越來(lái)越多的網(wǎng)站和應(yīng)用程序在用戶界面中應(yīng)用動(dòng)畫。通過(guò)這種方式，不僅可以增強(qiáng)可用性，還可以增強(qiáng)情感吸引力和UI外觀的優(yōu)雅。這也是為什么我們經(jīng)常看到動(dòng)畫徽標(biāo)，圖標(biāo)甚至復(fù)雜的動(dòng)畫插圖。動(dòng)畫能為創(chuàng)意、消息和情緒帶來(lái)更多表現(xiàn)力。更重要的是，應(yīng)用動(dòng)畫視頻也是熱門且有效的趨勢(shì)之，插圖可以獲得更高水平的開(kāi)發(fā)和與用戶的溝通。

這是Whizzly動(dòng)畫徽標(biāo)的示例。Whizzly是年輕人展示人才和分享創(chuàng)意項(xiàng)目的社交網(wǎng)絡(luò)。應(yīng)用于徽標(biāo)及其動(dòng)畫版本的藝術(shù)手段使其看起來(lái)令人愉悅，令人難忘和情緒化。

9. 基于有趣視覺(jué)隱喻的插圖使設(shè)計(jì)獨(dú)特且引人入勝

與藝術(shù)一樣，在設(shè)計(jì)中，隱喻是吸引用戶并使他們考慮所提供的想法的有效方式。插圖使設(shè)計(jì)師能夠處理與特定目標(biāo)和用戶相對(duì)應(yīng)的獨(dú)特隱喻。

這是一個(gè)約會(huì)應(yīng)用程序的登陸頁(yè)面的概念，讓人們找到他們完美的一對(duì)。插圖展示了主題制作明亮的視覺(jué)觸發(fā)器，并有效地結(jié)合了人們聯(lián)合設(shè)備的形象。

平面設(shè)計(jì)師面臨的一個(gè)關(guān)鍵挑戰(zhàn)是尋找原始風(fēng)格 – 而這正是激發(fā)這件藝術(shù)品隱喻的原因。在平面插圖的文章中，平面設(shè)計(jì)師分享了如何抓住這條金魚的實(shí)用技巧，并在標(biāo)題插圖中應(yīng)用了相同的比喻。

10. 人們快速注意并解碼圖像，因此明智地使用插圖可以使交互更簡(jiǎn)單，更快捷

圖標(biāo)和插圖等自定義圖形可以成為界面清晰直觀導(dǎo)航的重大改進(jìn)。在許多情況下，用戶界面中的基本交互通常會(huì)花費(fèi)幾秒鐘，這點(diǎn)非常重要，并且這也是將具有視覺(jué)標(biāo)記的的內(nèi)容轉(zhuǎn)換為圖形的基本原因。但是，請(qǐng)記?。喝绻麍D像可能被錯(cuò)誤地解碼或根本沒(méi)有解碼，他們則需要額外的復(fù)制內(nèi)容支持。而用戶測(cè)試將有助于找出哪些元素絕對(duì)清晰，哪些元素需要用文本解釋。

以下是為移動(dòng)照片編輯器創(chuàng)建的原始圖標(biāo)Cuteen：支持文本提示的優(yōu)雅插圖可幫助用戶快速輕松地處理內(nèi)容。

要考慮的要點(diǎn)

當(dāng)然，現(xiàn)有的認(rèn)知方案不可能滿足用戶的任何要求，但在圖形設(shè)計(jì)方面有一些必須考慮的要點(diǎn)：

•目標(biāo)受眾（身體能力，年齡，文化背景，總體發(fā)展和教育水平）

•典型的產(chǎn)品使用環(huán)境

•全球或本地產(chǎn)品差價(jià)水平

•所選圖形和隱喻的識(shí)別水平

•圖形提供的分心/集中程度

所有提到的要點(diǎn)都涉及人類認(rèn)知能力并影響視覺(jué)數(shù)據(jù)感知的質(zhì)量。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，重要的是要記住：僅僅讓用戶看到布局的元素是不夠的，讓他們認(rèn)識(shí)到這些圖形的意義并快速理解它們所傳遞的信息是至關(guān)重要的。

原文地址：Mockplus

作者：Grace