創(chuàng)作：Andrea De Santis
創(chuàng)作：Eiko Ojala
“地球日” ——《華盛頓郵報(bào)》雜志
訓(xùn)練大腦 ——《BBC Focus雜志》
語言和大腦——《科學(xué)》雜志
學(xué)生論文——《紐約時(shí)報(bào)星期日商業(yè)版塊》
中國市場(chǎng)營銷 ——《哈佛商業(yè)評(píng)論》
如何構(gòu)建完美的總統(tǒng)候選人 ——《紐約時(shí)報(bào)周日評(píng)論》
在不久的將來，貨運(yùn)行業(yè)將會(huì)發(fā)生怎樣的變化。——《連線》雜志氣候問題插圖。
太陽能產(chǎn)業(yè)在不久的將來會(huì)發(fā)生怎樣的變化——《連線》雜志氣候問題插圖。
"宅在家"提案——《紐約客》
為什么美國人死于絕望 ——《紐約客》
“在家工作” ——《管理》雜志
“工作，教學(xué)，玩耍，在家鍛煉。“ Eesti Express
中國市場(chǎng) ——《哈佛商業(yè)評(píng)論》
孤獨(dú)——奧普拉雜志
性別平等——《管理》雜志
創(chuàng)作：Tomasz Wozniakowski
Eleni Debo的概念插圖大部分是為國際出版市場(chǎng)委托制作的，并且因?qū)⒗L畫線條與立體主義和未來主義相呼應(yīng)而統(tǒng)一的風(fēng)格引人注目。
這是來自巴西圣保羅的概念畫家兼動(dòng)畫師Herbert Ando創(chuàng)作的令人毛骨悚然，可愛又古怪的角色插圖設(shè)計(jì)。
]]>
Gianmarco Magnani的插圖遵循了瑞士電影海報(bào)的風(fēng)格-注重細(xì)節(jié)和流暢的圖形設(shè)計(jì)。
作品主要來自不同項(xiàng)目的海報(bào)，涉及藝術(shù)品，藝術(shù)配飾，服裝和家居裝飾品等各種產(chǎn)品
]]>
什么是插圖？
基本上，插圖是對(duì)特定概念，文本或過程的視覺解釋。這是一個(gè)旨在支持、澄清甚至擴(kuò)展人們從其他信息來源獲得的想法的圖像，通常以文本的形式給出。這個(gè)詞本身就意味著“為某些事物投光”，因此它的主要目的是幫助用戶理解或想象更好的東西。
多年來，插圖已被整合到各種印刷品中，如書籍，雜志，報(bào)紙，海報(bào)，傳單，教育材料。后來，動(dòng)畫和視頻制作為插畫帶來了新的氣息。最近，新的技術(shù)和工具推動(dòng)了數(shù)字插畫時(shí)代的發(fā)展。
隨著網(wǎng)站和移動(dòng)應(yīng)用程序的不斷增長，插畫的需求和應(yīng)用也不斷飆升。由于其美觀性和創(chuàng)造性，插畫也是作為提高可用性、情感和視覺吸引力的界面之一。但是在UI設(shè)計(jì)中有哪些功能是可以通過插圖來說明的呢？
界面設(shè)計(jì)中使用插圖的方法
和其他界面元素一樣，插畫的功能性多于裝飾性，可以使信息或交互變得更清晰明了，也更加時(shí)尚。所以，何樂而不為？以下是我總結(jié)的可以使用插圖的地方：
•主頁橫幅
•主題圖片
•吉祥物和人物
•博客文章圖片
•引導(dǎo)流程和工具提示
•獎(jiǎng)勵(lì)和其他游戲化圖形
•通知和系統(tǒng)消息
•貼紙（特別適用于Messenger應(yīng)用程序）
•講故事
•信息圖表
•營銷材料和廣告橫幅
•內(nèi)容類別的可視標(biāo)記
•支持網(wǎng)站或應(yīng)用的社交網(wǎng)絡(luò)頁面。
以下是插圖在界面設(shè)計(jì)中深受歡迎的十大理由 – 也許你可以考慮在下一個(gè)設(shè)計(jì)項(xiàng)目中使用它們。
界面設(shè)計(jì)中使用插圖的十大理由
1. 自定義插圖為原創(chuàng)性和藝術(shù)和諧奠定了堅(jiān)實(shí)的基礎(chǔ)
圖形為界面、印刷品或品牌相關(guān)的東西增添了一絲風(fēng)格和創(chuàng)意。在競爭激烈的世界中，脫穎而出至關(guān)重要。否則，人們甚至可能不會(huì)嘗試你的產(chǎn)品，更不用說了解它的好處了。
順便說一下，這就是為什么許多公司將插圖用作博客文章、評(píng)論和登陸頁面的主頁橫幅的原因。在這種情況下，設(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ì)圖像的感知能力超過文字。這是一個(gè)無關(guān)好壞的事實(shí)，只是設(shè)計(jì)師可以利用這一點(diǎn)來增加網(wǎng)頁或移動(dòng)布局的視覺效果。一般來說，人們具有非常廣泛的能力來感知視覺標(biāo)記，識(shí)別和處理數(shù)據(jù)，甚至轉(zhuǎn)換為高級(jí)抽象的圖像。
事實(shí)例證：
•心理學(xué)家聲稱人們需要大約1/10秒來獲得視覺場(chǎng)景或元素的一般感知（文本項(xiàng)目的速度確實(shí)不可能）
•視覺效果能更快地傳遞到大腦。重要的信息通常被大腦固定為視覺圖像，即使它們是通過文本感知獲得的
•與背景和周圍元素相結(jié)合，圖像不易受到影響，而文本則高度依賴于可讀性
•圖像有助于保留長期記憶。這意味著處理界面的用戶不需要處理和記住比實(shí)際需要更多的數(shù)據(jù)，因此交互變得更快
•當(dāng)來自不同國家/地區(qū)的人使用應(yīng)用或網(wǎng)站時(shí)，界面中的視覺效果可以使其更加通用
•圖片突出了具有文本識(shí)別自然問題的用戶的感知極限，例如閱讀障礙或非閱讀學(xué)齡前兒童。
所有上述內(nèi)容構(gòu)成了與插圖建立強(qiáng)大而快速視覺聯(lián)想的堅(jiān)實(shí)理由：字符、顏色、構(gòu)圖、可識(shí)別的細(xì)節(jié)將快速通知用戶并支持文本形式中給出的消息。
這是一個(gè)數(shù)字代理商的登陸頁面，通過一個(gè)由籃球運(yùn)動(dòng)員代表的主頁橫幅形象迅速傳遞其準(zhǔn)備迎接最高的商業(yè)挑戰(zhàn)和目標(biāo)的信息。
還有一個(gè)例子是為LunnScape創(chuàng)建的主題插圖。LunnScape是一家專門從事景觀設(shè)計(jì)和植物護(hù)理的公司。這些藝術(shù)品旨在用于營銷活動(dòng)，社交網(wǎng)絡(luò)和網(wǎng)站。經(jīng)過一系列的實(shí)驗(yàn)，設(shè)計(jì)師想出了柔和色彩和筆觸輕盈的圖形。其中一個(gè)插圖的特點(diǎn)是人們忙于園藝，而第二個(gè)插圖反映了公共空間的風(fēng)景與景觀設(shè)計(jì)。你看，通過這樣的設(shè)計(jì)，插圖立即與景觀主題建立了寶貴的聯(lián)系。
3.圖形為Web或移動(dòng)界面中應(yīng)用的副本提供有效支持
正如之前提到的，在許多情況下，圖片可以作為一種比復(fù)制更通用的通信工具。但是，也有一些陷阱需要仔細(xì)考慮。感知的速度并不是我們唯一需要的東西：人們可以超快地感知插圖，但如果他們傳輸?shù)男畔⒉磺逦蛘呖梢员浑p重閱讀，速度將無法帶來積極的用戶體驗(yàn)。
快速捕獲導(dǎo)致錯(cuò)誤理解的圖形不能被定義為識(shí)別，它只是被快速注意到。識(shí)別不僅意味著速度，還意味著應(yīng)該給你用戶指示正確的動(dòng)作或傳達(dá)正確的視覺元素信息。因此，請(qǐng)立即清除視覺隱喻以免造成誤解或錯(cuò)誤關(guān)聯(lián)。
這里是一個(gè)金融服務(wù)網(wǎng)站的例證，幫助養(yǎng)老金領(lǐng)取者有效地管理他們的錢并增加他們的儲(chǔ)蓄。藝術(shù)作品會(huì)立即傳送信息，使其與標(biāo)語保持一致。 這樣，當(dāng)布局中的所有元素協(xié)同工作時(shí)，網(wǎng)頁看起來就很吸引人。
4. 插圖是一個(gè)很好的創(chuàng)造性故事的檢驗(yàn)工具
簡而言之，講故事是將不同信息塊合并為一個(gè)故事的方法，使它們更讓人印象審核，并在各部分之間建立牢固的聯(lián)系。 這種方法在營銷和用戶體驗(yàn)設(shè)計(jì)方面表現(xiàn)得非常有效。
這是為我們最近的佛羅倫薩項(xiàng)目設(shè)計(jì)的插圖集。它是一個(gè)可以讓自由護(hù)士在線尋找工作的平臺(tái)。設(shè)計(jì)師創(chuàng)造了原始角色，展示故事，設(shè)置氛圍，發(fā)送信息或以與平臺(tái)的情緒、語氣和聲音相對(duì)應(yīng)的方式呈現(xiàn)優(yōu)勢(shì)。
5. 插圖在設(shè)定情感訴求方面具有重要的力量
毫無疑問，我們都是情感動(dòng)物。談到情感設(shè)計(jì)，AarronWalter說：“許多網(wǎng)站和應(yīng)用程序正在創(chuàng)造更好的體驗(yàn)。他們重新劃分需求的層次結(jié)構(gòu)，包括一個(gè)帶有快樂和愉悅色彩的新頂層。如果界面可以幫助你完成一項(xiàng)關(guān)鍵任務(wù)并讓你感到非常愉悅，那是不是很棒？是的，的確是這樣！這將是你向朋友推薦的一種體驗(yàn); 這將是一個(gè)值得傳播的想法。”
這就是你可以利用插圖實(shí)現(xiàn)的一些有效的事情。你投入其中的一切 – 線條、形狀、顏色、面部表情、曲線動(dòng)態(tài) – 都會(huì)對(duì)點(diǎn)燃情緒產(chǎn)生重大影響。通過研究用戶行為和影響情感吸引力的因素，設(shè)計(jì)師可以將插圖作為一種強(qiáng)大的工具，將經(jīng)驗(yàn)與用戶情感從最初的互動(dòng)相互連接。
Kiddy的這個(gè)登錄頁面的設(shè)計(jì)概念讓保姆雇傭變得非常簡單。可愛正面的元素在充滿趣味性的插圖中扮演關(guān)鍵角色，為用戶傳遞信息和情緒。在用戶開始閱讀服務(wù)之前創(chuàng)造所需的氛圍，并為所有頁面提供獨(dú)特的外觀。
6. 定制圖形設(shè)計(jì)為美學(xué)滿意度奠定了基礎(chǔ)，從而增加了項(xiàng)目的可取性
通過數(shù)百次關(guān)于“功能優(yōu)先”主題的討論和論證，人們對(duì)美麗和喜悅的自然渴望依然存在。當(dāng)然，實(shí)用性和可用性是任何界面的基礎(chǔ)。可取性是通過美觀可愛的外觀讓人們注意到你的產(chǎn)品，感受使用它的樂趣，并希望再次使用它。插圖則是一種經(jīng)過精心檢查的方式來實(shí)現(xiàn)這一目標(biāo)，因?yàn)樗鼈兛梢蕴砑用栏校L(fēng)格，優(yōu)雅或任何您想要添加到界面中的內(nèi)容。
這是一個(gè)網(wǎng)頁設(shè)計(jì)概念，為旅客提供簡單明亮的預(yù)訂服務(wù)。它在頁面左側(cè)使用大幅的3D插圖，而右側(cè)部分則突出搜索住宿的形式。
7. 插圖令人難忘且引人入勝。因此它們?cè)谔岣咂放浦群涂勺R(shí)別性方面有不錯(cuò)的表現(xiàn)
與文本相比，圖像在長期記憶中具有更好的粘性。當(dāng)圖像提供信息時(shí)，影響將會(huì)增長，與目標(biāo)受眾的期望一致的設(shè)計(jì)、布局使得有插圖的UI設(shè)計(jì)可以非常有效的增加網(wǎng)站或移動(dòng)應(yīng)用程序的品牌性。這就是插圖被廣泛用于引導(dǎo)流程的原因之一。
這些是Perfect Recipes應(yīng)用程序的流程引導(dǎo)圖。在交互開始時(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)雅
越來越多的網(wǎng)站和應(yīng)用程序在用戶界面中應(yīng)用動(dòng)畫。通過這種方式，不僅可以增強(qiáng)可用性，還可以增強(qiáng)情感吸引力和UI外觀的優(yōu)雅。這也是為什么我們經(jīng)常看到動(dòng)畫徽標(biāo)，圖標(biāo)甚至復(fù)雜的動(dòng)畫插圖。動(dòng)畫能為創(chuàng)意、消息和情緒帶來更多表現(xiàn)力。更重要的是，應(yīng)用動(dòng)畫視頻也是熱門且有效的趨勢(shì)之，插圖可以獲得更高水平的開發(fā)和與用戶的溝通。
這是Whizzly動(dòng)畫徽標(biāo)的示例。Whizzly是年輕人展示人才和分享創(chuàng)意項(xiàng)目的社交網(wǎng)絡(luò)。應(yīng)用于徽標(biāo)及其動(dòng)畫版本的藝術(shù)手段使其看起來令人愉悅，令人難忘和情緒化。
9. 基于有趣視覺隱喻的插圖使設(shè)計(jì)獨(dú)特且引人入勝
與藝術(shù)一樣，在設(shè)計(jì)中，隱喻是吸引用戶并使他們考慮所提供的想法的有效方式。插圖使設(shè)計(jì)師能夠處理與特定目標(biāo)和用戶相對(duì)應(yīng)的獨(dú)特隱喻。
這是一個(gè)約會(huì)應(yīng)用程序的登陸頁面的概念，讓人們找到他們完美的一對(duì)。插圖展示了主題制作明亮的視覺觸發(fā)器，并有效地結(jié)合了人們聯(lián)合設(shè)備的形象。
平面設(shè)計(jì)師面臨的一個(gè)關(guān)鍵挑戰(zhàn)是尋找原始風(fēng)格 – 而這正是激發(fā)這件藝術(shù)品隱喻的原因。在平面插圖的文章中，平面設(shè)計(jì)師分享了如何抓住這條金魚的實(shí)用技巧，并在標(biāo)題插圖中應(yīng)用了相同的比喻。
10. 人們快速注意并解碼圖像，因此明智地使用插圖可以使交互更簡單，更快捷
圖標(biāo)和插圖等自定義圖形可以成為界面清晰直觀導(dǎo)航的重大改進(jìn)。在許多情況下，用戶界面中的基本交互通常會(huì)花費(fèi)幾秒鐘，這點(diǎn)非常重要，并且這也是將具有視覺標(biāo)記的的內(nèi)容轉(zhuǎn)換為圖形的基本原因。但是，請(qǐng)記住：如果圖像可能被錯(cuò)誤地解碼或根本沒有解碼，他們則需要額外的復(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)知能力并影響視覺數(shù)據(jù)感知的質(zhì)量。對(duì)于設(shè)計(jì)師來說，重要的是要記住：僅僅讓用戶看到布局的元素是不夠的，讓他們認(rèn)識(shí)到這些圖形的意義并快速理解它們所傳遞的信息是至關(guān)重要的。
原文地址：Mockplus
作者：Grace
]]>
設(shè)計(jì)：molistudio ™
