01.  插畫是什么 

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

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

由于插畫的美觀程度和創新的靈活性，插圖在網站和移動應用設計中不斷發展壯大。這是增強界面可用性、提升情感和視覺吸引力的方法之一。那么，UI設計中的插圖可以具備哪些功能呢？

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

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

以下是為插畫在界面設計中如此受歡迎的十大原因，或許也會是你在下一個設計項目中考慮使用它們的原因。

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

 03.  為什么要在UI設計中使用插畫？

1.奠定了原創性和藝術和諧的堅實基礎

插畫為UI界面、印刷品或品牌產品增添了一點風格和創意力。在競爭激烈的世界里，脫穎而出至關重要。否則，人們甚至可能不會嘗試你的產品，更不用說了解它的好處了。

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

看看這幅關于UI動畫的隱喻插畫。畫面中智能手機所表示的是幕墻，就如木偶戲中使用的幕墻一樣，設計師們則像表演者，將帶有特定的動作表現出來。

2.快速傳遞必要的信息

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

以下是一些有用的事實：

● 正如心理學家所言，人們需要大約1/10秒的時間才能大致了解視覺場景或元素（對于文本項，速度確實是不可能的）。

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

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

● 圖像在長期記憶中有更好的表現，這意味著處理界面時用戶不需要處理和記住比實際更多的數據，因此交互速度更快。

● 如果來自不同國家的人使用應用程序或網站，則界面中的視覺效果可以使其更加通用。

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

以上提到的所有這些都為創建強大而快速的插畫視覺聯想提供了堅實的理由。

這是一家面向最高業務挑戰和目標的數字代理商的登陸頁面，該信息通過籃球運動員的鮮明形象迅速傳遞。

這些藝術品旨在用于市場營銷活動，社交網絡和網站上。經過一堆實驗，設計師提出了通用風格的圖形，并應用了柔和色彩和輕柔的筆觸。其中一幅插畫描繪了忙于園藝的人們，而第二幅插畫則通過景觀設計反映了公共空間的通風狀況。插畫立即與主題建立了寶貴的聯系。

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

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

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

這是金融服務網站的插圖，該網站可幫助養老金領取者有效地管理自己的資金并增加儲蓄。插畫立即傳遞消息，使其與標語和復制的副本保持一致。這樣，當布局中的所有元素和諧地協同工作時，網頁看起來就很吸引人。

4.插圖是創意故事的有力工具

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

這是我們最近為Florence項目設計的插圖集。這是一個在線市場，自雇護士可以在英國各地找到高薪工作。設計師創造了原創性的人物形象，用于展示故事、設置氛圍、傳遞信息或展示利益。

5.設定情感訴求

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

這就是你可以有效地使用插畫的原因。你放到插畫里的每一樣東西，線條、形狀、顏色、面部表情、曲線的動態，都會對點燃情感產生重大影響。通過研究用戶的行為和影響情感訴求的因素，設計師可以使插畫成為一個強大的工具，從交互的第一秒開始就將體驗與用戶的情感聯系起來。

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

6.為審美滿意度奠定了基礎，并且增加了項目的可取性

盡管“功能優先”這個主題引發了數百次的討論和爭論，但人類對美和快樂的渴望仍然存在。當然，實用性和可用性是任何界面的基礎。盡管如此，可取性是一種美學和可愛的外觀，它可以讓人們注意到你的產品，感受到使用它的樂趣，并希望再次使用它。插畫是達到這個目標的一種經過嚴格檢查的方法，因為它們可以為界面添加美感，或添加任何你想加到界面中的東西。

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

7.提高品牌知名度和認可度

與文本相比，圖像在長時記憶中更容易被記住。當圖像內容豐富，根據目標受眾的期望和一致性，設計風格一致的布局概念，影響會越來越大。這就是為什么插畫被廣泛應用于入職培訓的原因之一。

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

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

8.有助于制作動畫短片和交互元素

越來越多的網站和app在用戶界面上使用動圖。這不僅可以增加可用性，還可以增強UI的情感化和優雅性。這就是為什么我們經常看到動態logo，圖標甚至復雜的動效插畫。動態化給圖像想要表達的想法、信息以及情緒注入了更多的表現力。此外，既熱門又有效的趨勢之一是應用動畫視頻使插畫能獲得新的發展并能與用戶進行交流。

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

9.有趣的視覺隱喻的插畫使設計獨特而迷人

和藝術一樣，在設計中運用隱喻吸引用戶，是一種強有力的方式。插畫讓設計師根據特定的目標和用戶來設計獨特的隱喻。

這是一個約會app的落地頁的飛機稿，這個app主要是讓大家找到理想對象。插畫呈現的是明亮的視覺觸發，并將手機和人有效的結合在一起。

平面設計師面臨的一個重要挑戰是尋找原創風格，正是這種風格啟發了藝術作品的隱喻。在平面插畫的文章中，插畫設計師分享關于如何畫抓住金魚的實用技巧，并在命題插畫中采用相同的隱喻。

10.使交互更簡單、更快捷

原創圖形如icon和插畫對界面中導航的清晰性和直觀性有很大的提高。在用戶界面中，有許多案例，基本交互需要耗時幾秒鐘。這一方面很重要，這也是將所有內容都轉化為視覺圖標來標記內容分類的基本原因。然而，請記住：如果存在圖像被錯誤理解或不能被理解的風險，那么就需要提供額外的說明。

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

 04.  需要注意的事項 

當然，要滿足所有用戶或滿足每一個現有的認知方案都是不可能的，但在插畫設計中需要考慮這幾個方面：

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

● 產品使用的場景

● 全球或當地產品的傳播水平

● 圖像和隱喻的認知水平

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

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

本文由培訓無憂網長沙牛耳教育課程顧問老師整理發布，希望能夠對想參加長沙UI設計培訓的學生有所幫助。更多課程信息可關注培訓無憂網電腦IT培訓或添加老師微信：15033336050

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.dedgn.cn/news-id-11344.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050