人是高度視覺化的生物，能夠即時處理大量的視覺信息，據(jù)統(tǒng)計我們所獲取的90%的信息都是視覺化的。單一圖像比起大塊的文本對于用戶而言更容易消化吸收。因此，在許多情況下，靜態(tài)的圖片能夠傳達出相當復雜多樣的想法，尤其是在進行大范圍展示的時候，它比文本的表現(xiàn)力要強的多。人的大腦對與圖像信息的處理速度要比識別文本要快得多。

長期以來，圖片都作為UI界面中最具有表現(xiàn)力的元素而存在，而最近幾年，插畫在UI中出現(xiàn)的比例越來越高，在許多地方都有替代圖片的趨勢。其實原因并不復雜，插畫比起圖片可控性更強，更容易發(fā)揮創(chuàng)意，營造氛圍，傳遞信息。從內(nèi)容到技術細節(jié)，插畫都在某種程度上超過現(xiàn)成的圖片。

在今天的文章當中，我們聊聊插畫在UI設計中的運用，探討一下它是怎么提升用戶體驗的。

插畫的特點

實際上，現(xiàn)在我們所說的插畫（illustration）的詞根 illustrate 原本的含義是“澄清，說明”。在現(xiàn)代平面設計中，插畫是頗為常用的展示性元素，是視覺傳達的重要工具。插畫在設計作品中，常常用來引導、啟發(fā)和呈現(xiàn)信息，更有針對性地、視覺化地同用戶進行交流。真正高效的插畫一定是有針對性的，易于識別的，并且能夠被不同的用戶輕松理解的。

想要讓插畫最大化地為用戶創(chuàng)造價值，你可以參考下面的四個范例：

1、首頁插畫

好的網(wǎng)頁設計設計對于潛在用戶的影響是巨大的。許多用戶在判斷一個企業(yè)、團隊或者品牌的優(yōu)劣的時候，他們的網(wǎng)站的優(yōu)劣是一個重要的判據(jù)。這也是為什么現(xiàn)如今網(wǎng)頁設計師們都在想盡一切辦法提升網(wǎng)頁的用戶體驗。這一點，網(wǎng)頁和現(xiàn)實世界是一樣的，好的第一印象往往源自于優(yōu)秀的視覺效果。吸引用戶，激發(fā)想象力，這樣才能和用戶構建起緊密的關聯(lián)。獨特而傳神的插畫的價值就在這里，尤其是當這些獨特的插畫呈現(xiàn)在打開率最高的網(wǎng)頁首頁上的時候。和品牌氣質(zhì)所匹配的插畫不僅能夠幫網(wǎng)站篩選用戶，而且能夠強化品牌屬性。

2、吉祥物

品牌所傳遞的感受、氣質(zhì)最好的落腳點就是品牌代言人和品牌吉祥物。吉祥物能夠讓虛擬的品牌調(diào)性更加真實，作為品牌的外化表現(xiàn)，吉祥物能夠讓品牌給人更加值得信賴的感覺，讓品牌更加富有吸引力。吉祥物的呈現(xiàn)形式很多，在網(wǎng)頁上，它通常是以插畫的形式出現(xiàn)的。吉祥物在UI界面中出現(xiàn)，能夠賦予界面交互以生命力，保持用戶持續(xù)的注意力，成為整個用戶體驗中無法忽略的重要元素，提升整體的參與度。

目前，電子郵件服務供應商 Mailchimp 可能是借助吉祥物來提升用戶體驗最成功的案例。Mailchimp 每個頁面上都有黑猩猩吉祥物 Freddie 扮演不同的角色，搞笑，甚至替代某個元素來強化互動，它的存在讓Mailchimp 的體驗和用戶黏度都有了不小的提升。

優(yōu)秀的吉祥物是積極用戶體驗的基礎。

3、新手教程和新用戶引導流程

插畫還有一個重要功能，就是提供視覺引導。插畫能夠將復雜的概念簡化為易于理解的視覺信息，圖片比文字的吶喊更加響亮，這也是為什么插畫會常常運用到新手教程和新用戶引導流程中來。

新手教程和新用戶引導流程常常會介紹應用或網(wǎng)頁的主要功能、優(yōu)點，插畫以圖形化的形式為用戶提供上下文環(huán)境，讓界面所要傳遞的信息更加明朗，幫助用戶明白如何執(zhí)行當前步驟，怎么進入下一步。當頁面或者APP采用極簡設計的時候，界面搭配一幅簡單的插畫來傳遞關鍵性的信息，不需要太多的文本就可以了。

富有吸引力的插畫和強互動性的功能讓剛剛進入新用戶引導流程的用戶對APP產(chǎn)生興趣，從中感到快樂的用戶會更加渴望使用APP。到了現(xiàn)在這個時間點，插畫和動效往往會搭配起來使用，達到最大化的效果。

使用插畫能將一個漫長無聊的教程變?yōu)橐欢斡腥さ穆贸獭Ｏ啾扔趶碗s的文本解釋，圖像、插畫和動效能讓用戶更輕松吸收和理解。即使你不會繪制復雜的插畫，簡單的漫畫也能夠達到類似的效果。

4、獎勵界面插畫

對于游戲我們這代人應該有所接觸，甚至非常熟悉。幾乎每個游戲在達成成就、闖過關卡之后，都會出現(xiàn)獎勵界面，“解鎖成就”這個詞就是由此而來的。解鎖成就為什么對于用戶這么重要呢？一方面，緊張的游戲過程帶來的成就感讓用戶感到快感，另一方面，解鎖成就的獎勵界面能夠給用戶一種屏幕背后有個真實的人在為他們慶賀。這是一種情感上的交互。

獎勵機制的核心在于，通過積極的情緒刺激來建立情感聯(lián)系。這種積極的情緒激勵嚴格意義上算是情感化設計的范疇，情感上的引導會讓用戶關注到他們想看的內(nèi)容，或者讓他們看的內(nèi)容，部分應用的缺陷甚至可以被用戶所忽略。

成就徽章是成就系統(tǒng)中最常見的元素，一系列設計精巧的徽章圖標加上游戲和用戶互動，能夠讓用戶逐步沉迷到這套體系當中。

精致的插畫出現(xiàn)在成功狀態(tài)的頁面當中，能夠讓你的用戶感覺到被重視。

結語

插畫增強用戶體驗是客觀存在的，它是提高UI吸引力的強大工具。雖然插畫的運用并沒有太多硬性的規(guī)定，但是務必記住一點：確保插畫的可用性。插畫最終是要應用到產(chǎn)品當中，成為產(chǎn)品和品牌的一部分。

【2017年的設計趨勢都在這里】

1. 《作為8年DRIBBBLE粉，和設計師聊聊未來的視覺趨勢》
2. 《PS教程！教你打造2017年最受歡迎的漸變幻彩風格》
3. 《趨勢搶先知！2017年設計師都在討論的服務設計到底是什么？》
4. 《2017年，這5個網(wǎng)頁設計風格可能會成為主流趨勢》

原文地址：webdesignerdepot
原文作者：NICK BABICH
優(yōu)設譯文：@陳子木

本文由優(yōu)設網(wǎng)原創(chuàng)翻譯，請尊重版權和譯者成果，轉摘請附上優(yōu)設鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內(nèi)人氣最高的設計網(wǎng)址導航，設計師必備：http://hao.uisdc.com