01.  插畫是什么 

大致來說，插畫是對(duì)某一特定概念、文本或過程的視覺解釋。它是一種圖像，旨在輔助、闡明，甚至擴(kuò)展人們從文本中獲得的想法。“illustration”一詞本身就意味著“將光照在某物上”，因此其主要目的是幫助觀者更好地理解或想象事物。

多年來，插圖已被融入到各種印刷品中，例如書籍、雜志、報(bào)紙、海報(bào)等等。后來，插畫領(lǐng)域又因動(dòng)畫片和視頻制作煥然一新。直到最近，新技術(shù)和工具也推動(dòng)了數(shù)字插畫創(chuàng)作發(fā)展。

由于插畫的美觀程度和創(chuàng)新的靈活性，插圖在網(wǎng)站和移動(dòng)應(yīng)用設(shè)計(jì)中不斷發(fā)展壯大。這是增強(qiáng)界面可用性、提升情感和視覺吸引力的方法之一。那么，UI設(shè)計(jì)中的插圖可以具備哪些功能呢？

 02.  如何在用戶界面中使用插畫？

與界面其它任何部分一樣，插畫也是一種功能性元素，而非只是裝飾。它讓信息與交互更容易、更清晰、更時(shí)尚，為什么不呢？

以下是為插畫在界面設(shè)計(jì)中如此受歡迎的十大原因，或許也會(huì)是你在下一個(gè)設(shè)計(jì)項(xiàng)目中考慮使用它們的原因。

可以看出來，插畫作為目前UI設(shè)計(jì)中一個(gè)受歡迎的重要元素，能夠使設(shè)計(jì)更出彩，這里也分享給大家一些我收藏的插畫素材包，包括插畫課、扁平插畫、banner插畫等等，需要的話可以添加叮當(dāng)貓回復(fù)“插畫合集”領(lǐng)取，已有叮當(dāng)貓的無需重復(fù)添加。

 03.  為什么要在UI設(shè)計(jì)中使用插畫？

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

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

對(duì)了，這也是很多公司在其博客文章、評(píng)論以及登陸頁面中使用插畫作為主要形象的原因。在這種情況下，設(shè)計(jì)師可以根據(jù)目標(biāo)受眾的喜好對(duì)藝術(shù)作品進(jìn)行微調(diào)。這樣就可以找到有趣的隱喻、配色方案、人物和環(huán)境，從而對(duì)特定的讀者或觀看群體產(chǎn)生吸引力。

看看這幅關(guān)于UI動(dòng)畫的隱喻插畫。畫面中智能手機(jī)所表示的是幕墻，就如木偶戲中使用的幕墻一樣，設(shè)計(jì)師們則像表演者，將帶有特定的動(dòng)作表現(xiàn)出來。

2.快速傳遞必要的信息

絕大多數(shù)人感知圖像的速度要比文字快，這不是好事也不是壞事，這只是設(shè)計(jì)師可以用來提高視覺效果的事實(shí)。通常，人們具有極其廣泛的視覺感知能力，能夠識(shí)別和處理甚至轉(zhuǎn)換為高度抽象的圖像。

以下是一些有用的事實(shí)：

● 正如心理學(xué)家所言，人們需要大約1/10秒的時(shí)間才能大致了解視覺場(chǎng)景或元素（對(duì)于文本項(xiàng)，速度確實(shí)是不可能的）。

● 視覺以更快的速度傳輸?shù)酱竽X，重要的信息通常以視覺圖像的形式被大腦固定，即使它們是通過文本感知獲得的。

● 圖像與背景和周圍元素的結(jié)合不太容易受到破壞，而文本在很大程度上取決于可讀性。

● 圖像在長(zhǎng)期記憶中有更好的表現(xiàn)，這意味著處理界面時(shí)用戶不需要處理和記住比實(shí)際更多的數(shù)據(jù)，因此交互速度更快。

● 如果來自不同國(guó)家的人使用應(yīng)用程序或網(wǎng)站，則界面中的視覺效果可以使其更加通用。

● 對(duì)于那些在文本識(shí)別方面有自然問題的用戶，例如，閱讀障礙或不識(shí)字的學(xué)齡前兒童，圖片推高了他們的感知極限。

以上提到的所有這些都為創(chuàng)建強(qiáng)大而快速的插畫視覺聯(lián)想提供了堅(jiān)實(shí)的理由。

這是一家面向最高業(yè)務(wù)挑戰(zhàn)和目標(biāo)的數(shù)字代理商的登陸頁面，該信息通過籃球運(yùn)動(dòng)員的鮮明形象迅速傳遞。

這些藝術(shù)品旨在用于市場(chǎng)營(yíng)銷活動(dòng)，社交網(wǎng)絡(luò)和網(wǎng)站上。經(jīng)過一堆實(shí)驗(yàn)，設(shè)計(jì)師提出了通用風(fēng)格的圖形，并應(yīng)用了柔和色彩和輕柔的筆觸。其中一幅插畫描繪了忙于園藝的人們，而第二幅插畫則通過景觀設(shè)計(jì)反映了公共空間的通風(fēng)狀況。插畫立即與主題建立了寶貴的聯(lián)系。

3.為頁面副本提供了有效的支持

如前所述，在許多情況下，圖片是一種比復(fù)制更為通用的通信工具。但是，也有一些陷阱需要仔細(xì)考慮。感知的速度并不是我們唯一需要的：人們可以超快地感知插圖，但是如果他們傳送的消息不清楚或可以被重復(fù)閱讀，那么速度將不會(huì)帶來積極的用戶體驗(yàn)。

快速捕獲導(dǎo)致錯(cuò)誤理解的圖形不能被定義為識(shí)別，而只是快速注意到。識(shí)別不僅意味著速度，而且還意味著視覺元素應(yīng)帶給用戶的正確動(dòng)作或信息。

這是金融服務(wù)網(wǎng)站的插圖，該網(wǎng)站可幫助養(yǎng)老金領(lǐng)取者有效地管理自己的資金并增加儲(chǔ)蓄。插畫立即傳遞消息，使其與標(biāo)語和復(fù)制的副本保持一致。這樣，當(dāng)布局中的所有元素和諧地協(xié)同工作時(shí)，網(wǎng)頁看起來就很吸引人。

4.插圖是創(chuàng)意故事的有力工具

簡(jiǎn)而言之，講故事是將不同信息塊組合到一個(gè)故事中的方法，使它們更容易記憶，并在各個(gè)部分之間建立牢固的聯(lián)系。這種方法在營(yíng)銷和用戶體驗(yàn)設(shè)計(jì)上都顯示出了很高的效率。

這是我們最近為Florence項(xiàng)目設(shè)計(jì)的插圖集。這是一個(gè)在線市場(chǎng)，自雇護(hù)士可以在英國(guó)各地找到高薪工作。設(shè)計(jì)師創(chuàng)造了原創(chuàng)性的人物形象，用于展示故事、設(shè)置氛圍、傳遞信息或展示利益。

5.設(shè)定情感訴求

毫無疑問，我們都是感性的生物。談到情感設(shè)計(jì)的時(shí)候，Aarron Walter說：“許多網(wǎng)站和應(yīng)用程序正在創(chuàng)造一種更好的體驗(yàn)。他們正在重新劃分需求層次，包括一個(gè)可以帶來快樂、樂趣、喜悅的新層次。如果一個(gè)界面可以幫助你完成一個(gè)重要的任務(wù)，并且讓你笑容滿面，你會(huì)怎么做？那確實(shí)很有力量！這將是一個(gè)值得推薦給朋友的經(jīng)歷，一個(gè)值得傳播的想法。”

這就是你可以有效地使用插畫的原因。你放到插畫里的每一樣?xùn)|西，線條、形狀、顏色、面部表情、曲線的動(dòng)態(tài)，都會(huì)對(duì)點(diǎn)燃情感產(chǎn)生重大影響。通過研究用戶的行為和影響情感訴求的因素，設(shè)計(jì)師可以使插畫成為一個(gè)強(qiáng)大的工具，從交互的第一秒開始就將體驗(yàn)與用戶的情感聯(lián)系起來。

這個(gè)設(shè)計(jì)理念為Kiddy提供了一個(gè)登陸頁面，這個(gè)平臺(tái)使得雇傭保姆變得小菜一碟。是不是很可愛？并且可愛和積極的感覺只由幾個(gè)因素支持，其中定制插畫與有趣的字符發(fā)揮著關(guān)鍵作用。它們傳遞信息和情緒，在用戶開始閱讀服務(wù)之前創(chuàng)造必要的氛圍，并給所有頁面一個(gè)獨(dú)特的外觀。

6.為審美滿意度奠定了基礎(chǔ)，并且增加了項(xiàng)目的可取性

盡管“功能優(yōu)先”這個(gè)主題引發(fā)了數(shù)百次的討論和爭(zhēng)論，但人類對(duì)美和快樂的渴望仍然存在。當(dāng)然，實(shí)用性和可用性是任何界面的基礎(chǔ)。盡管如此，可取性是一種美學(xué)和可愛的外觀，它可以讓人們注意到你的產(chǎn)品，感受到使用它的樂趣，并希望再次使用它。插畫是達(dá)到這個(gè)目標(biāo)的一種經(jīng)過嚴(yán)格檢查的方法，因?yàn)樗鼈兛梢詾榻缑嫣砑用栏校�或添加任何你想加到界面中的東西。

上圖是一個(gè)簡(jiǎn)單明了的旅行者預(yù)訂服務(wù)的網(wǎng)頁設(shè)計(jì)概念。它使用了3D插畫，這是一個(gè)大的主題圖像，協(xié)調(diào)地采取了頁面的左部分，而右部分的特點(diǎn)是表單填寫的內(nèi)容，以便首次搜索住宿。這些藝術(shù)作品不僅設(shè)置了主題，而且使界面更加吸引人和美觀。

7.提高品牌知名度和認(rèn)可度

與文本相比，圖像在長(zhǎng)時(shí)記憶中更容易被記住。當(dāng)圖像內(nèi)容豐富，根據(jù)目標(biāo)受眾的期望和一致性，設(shè)計(jì)風(fēng)格一致的布局概念，影響會(huì)越來越大。這就是為什么插畫被廣泛應(yīng)用于入職培訓(xùn)的原因之一。

這些都是Perfect Recipes應(yīng)用程序的啟動(dòng)頁插畫。在互動(dòng)的開始，用戶會(huì)設(shè)定他們想要達(dá)到的目標(biāo)，比如減肥或增肥，保持健康的飲食等等。此外，用戶也有可能會(huì)標(biāo)記他們不喜歡的食材，這樣應(yīng)用程序就不會(huì)顯示包含這些食材的食譜。這些插畫是用來形象化那些明亮、原始的可視化目標(biāo)。

上圖是另外一個(gè)應(yīng)用程序開屏的例子-Toonie，一個(gè)可愛和有趣的報(bào)警器。有趣的角色和插畫成為了這個(gè)應(yīng)用程序游戲化的關(guān)鍵元素。原始的吉祥物集成到用戶界面，成為溝通和交互的核心元素，在不同的狀態(tài)下，它向用戶傳遞不同的信息，使交互變得更加友好和人性化。

8.有助于制作動(dòng)畫短片和交互元素

越來越多的網(wǎng)站和app在用戶界面上使用動(dòng)圖。這不僅可以增加可用性，還可以增強(qiáng)UI的情感化和優(yōu)雅性。這就是為什么我們經(jīng)常看到動(dòng)態(tài)logo，圖標(biāo)甚至復(fù)雜的動(dòng)效插畫。動(dòng)態(tài)化給圖像想要表達(dá)的想法、信息以及情緒注入了更多的表現(xiàn)力。此外，既熱門又有效的趨勢(shì)之一是應(yīng)用動(dòng)畫視頻使插畫能獲得新的發(fā)展并能與用戶進(jìn)行交流。

這個(gè)例子是Whizzly的動(dòng)畫logo，Whizzly是一個(gè)年輕人用來展示才藝以及分享創(chuàng)意項(xiàng)目的社交網(wǎng)站。Logo圖案和logo的動(dòng)畫版本所采用的藝術(shù)手段讓其看起來賞心悅目，令人難忘，情感豐富。

9.有趣的視覺隱喻的插畫使設(shè)計(jì)獨(dú)特而迷人

和藝術(shù)一樣，在設(shè)計(jì)中運(yùn)用隱喻吸引用戶，是一種強(qiáng)有力的方式。插畫讓設(shè)計(jì)師根據(jù)特定的目標(biāo)和用戶來設(shè)計(jì)獨(dú)特的隱喻。

這是一個(gè)約會(huì)app的落地頁的飛機(jī)稿，這個(gè)app主要是讓大家找到理想對(duì)象。插畫呈現(xiàn)的是明亮的視覺觸發(fā)，并將手機(jī)和人有效的結(jié)合在一起。

平面設(shè)計(jì)師面臨的一個(gè)重要挑戰(zhàn)是尋找原創(chuàng)風(fēng)格，正是這種風(fēng)格啟發(fā)了藝術(shù)作品的隱喻。在平面插畫的文章中，插畫設(shè)計(jì)師分享關(guān)于如何畫抓住金魚的實(shí)用技巧，并在命題插畫中采用相同的隱喻。

10.使交互更簡(jiǎn)單、更快捷

原創(chuàng)圖形如icon和插畫對(duì)界面中導(dǎo)航的清晰性和直觀性有很大的提高。在用戶界面中，有許多案例，基本交互需要耗時(shí)幾秒鐘。這一方面很重要，這也是將所有內(nèi)容都轉(zhuǎn)化為視覺圖標(biāo)來標(biāo)記內(nèi)容分類的基本原因。然而，請(qǐng)記住：如果存在圖像被錯(cuò)誤理解或不能被理解的風(fēng)險(xiǎn)，那么就需要提供額外的說明。

這是手機(jī)圖像編輯軟件Guteen的原始icon，配有文字說明的優(yōu)美插畫幫助用戶更快捷更方便的處理內(nèi)容。

 04.  需要注意的事項(xiàng) 

當(dāng)然，要滿足所有用戶或滿足每一個(gè)現(xiàn)有的認(rèn)知方案都是不可能的，但在插畫設(shè)計(jì)中需要考慮這幾個(gè)方面：

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

● 產(chǎn)品使用的場(chǎng)景

● 全球或當(dāng)?shù)禺a(chǎn)品的傳播水平

● 圖像和隱喻的認(rèn)知水平

● 圖像造成的分散或集中注意力的程度

所有這些提到的點(diǎn)都涉及到人的認(rèn)知能力，并影響著視覺數(shù)據(jù)感知的質(zhì)量。對(duì)于設(shè)計(jì)師而言要銘記：僅僅讓用戶看到布局中的元素是不足夠的，讓用戶認(rèn)識(shí)到它們的意思并迅速理解才是至關(guān)重要的。

本文由培訓(xùn)無憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)電腦IT培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.hebeijilong.cn/news-id-11344.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050