最近幾年，插畫(huà)在UI中出現(xiàn)的比例越來(lái)越高，在許多地方都有替代圖片的趨勢(shì)。
人是高度視覺(jué)化的生物，能夠即時(shí)處理大量的視覺(jué)信息，據(jù)統(tǒng)計(jì)我們所獲取的90%的信息都是視覺(jué)化的。單一圖像比起大塊的文本對(duì)于用戶(hù)而言更容易消化吸收。因此，在許多情況下，靜態(tài)的圖片能夠傳達(dá)出相當(dāng)復(fù)雜多樣的想法，尤其是在進(jìn)行大范圍展示的時(shí)候，它比文本的表現(xiàn)力要強(qiáng)的多。人的大腦對(duì)與圖像信息的處理速度要比識(shí)別文本要快得多。
長(zhǎng)期以來(lái)，圖片都作為UI界面中最具有表現(xiàn)力的元素而存在，而最近幾年，插畫(huà)在UI中出現(xiàn)的比例越來(lái)越高，在許多地方都有替代圖片的趨勢(shì)。其實(shí)原因并不復(fù)雜，插畫(huà)比起圖片可控性更強(qiáng)，更容易發(fā)揮創(chuàng)意，營(yíng)造氛圍，傳遞信息。從內(nèi)容到技術(shù)細(xì)節(jié)，插畫(huà)都在某種程度上超過(guò)現(xiàn)成的圖片。
在今天的文章當(dāng)中，我們聊聊插畫(huà)在UI設(shè)計(jì)中的運(yùn)用，探討一下它是怎么提升用戶(hù)體驗(yàn)的。
插畫(huà)的特點(diǎn)
實(shí)際上，現(xiàn)在我們所說(shuō)的插畫(huà)（illustration）的詞根 illustrate 原本的含義是“澄清，說(shuō)明”。在現(xiàn)代平面設(shè)計(jì)中，插畫(huà)是頗為常用的展示性元素，是視覺(jué)傳達(dá)的重要工具。插畫(huà)在設(shè)計(jì)作品中，常常用來(lái)引導(dǎo)、啟發(fā)和呈現(xiàn)信息，更有針對(duì)性地、視覺(jué)化地同用戶(hù)進(jìn)行交流。真正高效的插畫(huà)一定是有針對(duì)性的，易于識(shí)別的，并且能夠被不同的用戶(hù)輕松理解的。
想要讓插畫(huà)最大化地為用戶(hù)創(chuàng)造價(jià)值，你可以參考下面的四個(gè)范例：
1、首頁(yè)插畫(huà)
好的網(wǎng)頁(yè)設(shè)計(jì)設(shè)計(jì)對(duì)于潛在用戶(hù)的影響是巨大的。許多用戶(hù)在判斷一個(gè)企業(yè)、團(tuán)隊(duì)或者品牌的優(yōu)劣的時(shí)候，他們的網(wǎng)站的優(yōu)劣是一個(gè)重要的判據(jù)。這也是為什么現(xiàn)如今網(wǎng)頁(yè)設(shè)計(jì)師們都在想盡一切辦法提升網(wǎng)頁(yè)的用戶(hù)體驗(yàn)。這一點(diǎn)，網(wǎng)頁(yè)和現(xiàn)實(shí)世界是一樣的，好的第一印象往往源自于優(yōu)秀的視覺(jué)效果。吸引用戶(hù)，激發(fā)想象力，這樣才能和用戶(hù)構(gòu)建起緊密的關(guān)聯(lián)。獨(dú)特而傳神的插畫(huà)的價(jià)值就在這里，尤其是當(dāng)這些獨(dú)特的插畫(huà)呈現(xiàn)在打開(kāi)率最高的網(wǎng)頁(yè)首頁(yè)上的時(shí)候。和品牌氣質(zhì)所匹配的插畫(huà)不僅能夠幫網(wǎng)站篩選用戶(hù)，而且能夠強(qiáng)化品牌屬性。
2、吉祥物
品牌所傳遞的感受、氣質(zhì)最好的落腳點(diǎn)就是品牌代言人和品牌吉祥物。吉祥物能夠讓虛擬的品牌調(diào)性更加真實(shí)，作為品牌的外化表現(xiàn)，吉祥物能夠讓品牌給人更加值得信賴(lài)的感覺(jué)，讓品牌更加富有吸引力。吉祥物的呈現(xiàn)形式很多，在網(wǎng)頁(yè)上，它通常是以插畫(huà)的形式出現(xiàn)的。吉祥物在UI界面中出現(xiàn)，能夠賦予界面交互以生命力，保持用戶(hù)持續(xù)的注意力，成為整個(gè)用戶(hù)體驗(yàn)中無(wú)法忽略的重要元素，提升整體的參與度。
目前，電子郵件服務(wù)供應(yīng)商 Mailchimp 可能是借助吉祥物來(lái)提升用戶(hù)體驗(yàn)最成功的案例。Mailchimp 每個(gè)頁(yè)面上都有黑猩猩吉祥物 Freddie 扮演不同的角色，搞笑，甚至替代某個(gè)元素來(lái)強(qiáng)化互動(dòng)，它的存在讓Mailchimp 的體驗(yàn)和用戶(hù)黏度都有了不小的提升。
優(yōu)秀的吉祥物是積極用戶(hù)體驗(yàn)的基礎(chǔ)。
3、新手教程和新用戶(hù)引導(dǎo)流程
插畫(huà)還有一個(gè)重要功能，就是提供視覺(jué)引導(dǎo)。插畫(huà)能夠?qū)?fù)雜的概念簡(jiǎn)化為易于理解的視覺(jué)信息，圖片比文字的吶喊更加響亮，這也是為什么插畫(huà)會(huì)常常運(yùn)用到新手教程和新用戶(hù)引導(dǎo)流程中來(lái)。
新手教程和新用戶(hù)引導(dǎo)流程常常會(huì)介紹應(yīng)用或網(wǎng)頁(yè)的主要功能、優(yōu)點(diǎn)，插畫(huà)以圖形化的形式為用戶(hù)提供上下文環(huán)境，讓界面所要傳遞的信息更加明朗，幫助用戶(hù)明白如何執(zhí)行當(dāng)前步驟，怎么進(jìn)入下一步。當(dāng)頁(yè)面或者APP采用極簡(jiǎn)設(shè)計(jì)的時(shí)候，界面搭配一幅簡(jiǎn)單的插畫(huà)來(lái)傳遞關(guān)鍵性的信息，不需要太多的文本就可以了。
富有吸引力的插畫(huà)和強(qiáng)互動(dòng)性的功能讓剛剛進(jìn)入新用戶(hù)引導(dǎo)流程的用戶(hù)對(duì)APP產(chǎn)生興趣，從中感到快樂(lè)的用戶(hù)會(huì)更加渴望使用APP。到了現(xiàn)在這個(gè)時(shí)間點(diǎn)，插畫(huà)和動(dòng)效往往會(huì)搭配起來(lái)使用，達(dá)到最大化的效果。
使用插畫(huà)能將一個(gè)漫長(zhǎng)無(wú)聊的教程變?yōu)橐欢斡腥さ穆贸?。相比于?fù)雜的文本解釋?zhuān)瑘D像、插畫(huà)和動(dòng)效能讓用戶(hù)更輕松吸收和理解。即使你不會(huì)繪制復(fù)雜的插畫(huà)，簡(jiǎn)單的漫畫(huà)也能夠達(dá)到類(lèi)似的效果。
4、獎(jiǎng)勵(lì)界面插畫(huà)
對(duì)于游戲我們這代人應(yīng)該有所接觸，甚至非常熟悉。幾乎每個(gè)游戲在達(dá)成成就、闖過(guò)關(guān)卡之后，都會(huì)出現(xiàn)獎(jiǎng)勵(lì)界面，“解鎖成就”這個(gè)詞就是由此而來(lái)的。解鎖成就為什么對(duì)于用戶(hù)這么重要呢？一方面，緊張的游戲過(guò)程帶來(lái)的成就感讓用戶(hù)感到快感，另一方面，解鎖成就的獎(jiǎng)勵(lì)界面能夠給用戶(hù)一種屏幕背后有個(gè)真實(shí)的人在為他們慶賀。這是一種情感上的交互。
獎(jiǎng)勵(lì)機(jī)制的核心在于，通過(guò)積極的情緒刺激來(lái)建立情感聯(lián)系。這種積極的情緒激勵(lì)嚴(yán)格意義上算是情感化設(shè)計(jì)的范疇，情感上的引導(dǎo)會(huì)讓用戶(hù)關(guān)注到他們想看的內(nèi)容，或者讓他們看的內(nèi)容，部分應(yīng)用的缺陷甚至可以被用戶(hù)所忽略。
成就徽章是成就系統(tǒng)中最常見(jiàn)的元素，一系列設(shè)計(jì)精巧的徽章圖標(biāo)加上游戲和用戶(hù)互動(dòng)，能夠讓用戶(hù)逐步沉迷到這套體系當(dāng)中。
精致的插畫(huà)出現(xiàn)在成功狀態(tài)的頁(yè)面當(dāng)中，能夠讓你的用戶(hù)感覺(jué)到被重視。
