UI插畫設計如何提高用戶體驗

人是高度視覺化的生物，可以即時處理大量的視覺信息，據統計咱們所獲取的90%的信息都是視覺化的。單一圖像比起大塊的文本對於用戶而言更容易消化吸取。所以，在許多狀況下，靜態的圖片可以傳達出至關複雜多樣的想法，尤爲是在進行大範圍展現的時候，它比文本的表現力要強的多。人的大腦對與圖像信息的處理速度要比識別文本要快得多。

長期以來，圖片都做爲UI界面中最具備表現力的元素而存在，而最近幾年，插畫在UI中出現的比例愈來愈高，在許多地方都有替代圖片的趨勢。其實緣由並不複雜，插畫比起圖片可控性更強，更容易發揮創意，營造氛圍，傳遞信息。從內容到技術細節，插畫都在某種程度上超過現成的圖片。

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

插畫的特色

實際上，如今咱們所說的插畫(illustration)的詞根 illustrate 本來的含義是「澄清，說明」。在現代平面設計中，插畫是頗爲經常使用的展現性元素，是視覺傳達的重要工具。插畫在設計做品中，經常用來引導、啓發和呈現信息，更有針對性地、視覺化地同用戶進行交流。真正高效的插畫必定是有針對性的，易於識別的，而且可以被不一樣的用戶輕鬆理解的。

想要讓插畫最大化地爲用戶創造價值，你能夠參考下面的四個範例：

一、首頁插畫

好的網頁設計設計對於潛在用戶的影響是巨大的。許多用戶在判斷一個企業、團隊或者品牌的優劣的時候，他們的網站的優劣是一個重要的判據。這也是爲何現現在網頁設計師們都在想盡一切辦法提高網頁的用戶體驗。這一點，網頁和現實世界是同樣的，好的第一印象每每源自於優秀的視覺效果。吸引用戶，激發想象力，這樣才能和用戶構建起緊密的關聯。獨特而傳神的插畫的價值就在這裏，尤爲是當這些獨特的插畫呈如今打開率最高的網頁首頁上的時候。和品牌氣質所匹配的插畫不只可以幫網站篩選用戶，並且可以強化品牌屬性。

二、吉祥物

品牌所傳遞的感覺、氣質最好的落腳點就是品牌代言人和品牌吉祥物。吉祥物可以讓虛擬的品牌調性更加真實，做爲品牌的外化表現，吉祥物可以讓品牌給人更加值得信賴的感受，讓品牌更加富有吸引力。吉祥物的呈現形式不少，在網頁上，它一般是以插畫的形式出現的。吉祥物在UI界面中出現，可以賦予界面交互以生命力，保持用戶持續的注意力，成爲整個用戶體驗中沒法忽略的重要元素，提高總體的參與度。

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

優秀的吉祥物是積極用戶體驗的基礎。

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

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

新手教程和新用戶引導流程經常會介紹應用或網頁的主要功能、優勢，插畫以圖形化的形式爲用戶提供上下文環境，讓界面所要傳遞的信息更加明朗，幫助用戶明白如何執行當前步驟，怎麼進入下一步。當頁面或者APP採用極簡設計的時候，界面搭配一幅簡單的插畫來傳遞關鍵性的信息，不須要太多的文本就能夠了。

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

使用插畫能將一個漫長無聊的教程變爲一段有趣的旅程。相比於複雜的文本解釋，圖像、插畫和動效能讓用戶更輕鬆吸取和理解。即便你不會繪製複雜的插畫，簡單的漫畫也可以達到相似的效果。

四、獎勵界面插畫

對於遊戲咱們這代人應該有所接觸，甚至很是熟悉。幾乎每一個遊戲在達成成就、闖過關卡以後，都會出現獎勵界面，「解鎖成就」這個詞就是由此而來的。解鎖成就爲何對於用戶這麼重要呢?一方面，緊張的遊戲過程帶來的成就感讓用戶感到快感，另外一方面，解鎖成就的獎勵界面可以給用戶一種屏幕背後有個真實的人在爲他們慶賀。這是一種情感上的交互。

獎勵機制的核心在於，經過積極的情緒刺激來創建情感聯繫。這種積極的情緒激勵嚴格意義上算是情感化設計的範疇，情感上的引導會讓用戶關注到他們想看的內容，或者讓他們看的內容，部分應用的缺陷甚至能夠被用戶所忽略。

成就徽章是成就係統中最多見的元素，一系列設計精巧的徽章圖標加上游戲和用戶互動，可以讓用戶逐步沉迷到這套體系當中。

精緻的插畫出如今成功狀態的頁面當中，可以讓你的用戶感受到被重視。

結語

插畫加強用戶體驗是客觀存在的，它是提升UI吸引力的強大工具。雖然插畫的運用並無太多硬性的規定，可是務必記住一點：確保插畫的可用性。插畫最終是要應用到產品當中，成爲產品和品牌的一部分。

文章來源：http://www.haitaoit.com/news-list-5-0-1.html