人是視覺(jué)動(dòng)物，人腦加工或接受的信息中幾乎90%都是視覺(jué)類(lèi)的。這也是為什么大家常說(shuō)一圖頂千言。在很多情況下，相對(duì)于復(fù)雜的文本，圖片在傳遞信息上更為迅速和簡(jiǎn)單。網(wǎng)站中設(shè)計(jì)師經(jīng)常使用圖片來(lái)擴(kuò)大網(wǎng)站的表現(xiàn)力，創(chuàng)造出色的UI界面，拉近與訪(fǎng)客之間的互動(dòng)。不過(guò)近來(lái)越來(lái)越多的設(shè)計(jì)師開(kāi)始傾向于使用插圖，這是因?yàn)椴鍒D在所有的圖片之中是最有表現(xiàn)意味的。在網(wǎng)站中使用插圖可以使枯燥的文本更加有趣，可以讓UI界面更有畫(huà)面感，激發(fā)訪(fǎng)客的興趣。與此同時(shí)，網(wǎng)站信息內(nèi)容的闡述與傳遞也更加直觀(guān)、生動(dòng)，有利于提升用戶(hù)體驗(yàn)。因此，在今天這篇文章中，小飛將向大家介紹一下什么是插圖以及如何應(yīng)用插圖做好UI界面設(shè)計(jì)。快來(lái)一起看看吧!
插圖
插圖其實(shí)是插畫(huà)的俗稱(chēng)，原指我們平時(shí)看的報(bào)紙、雜志、報(bào)刊的文字中所添加的圖畫(huà)，現(xiàn)已成為現(xiàn)代設(shè)計(jì)中的一種重要的視覺(jué)傳達(dá)方式，廣泛的應(yīng)用于多個(gè)領(lǐng)域之中，如商業(yè)活動(dòng)、網(wǎng)站設(shè)計(jì)、文化事業(yè)等。插圖用英語(yǔ)來(lái)說(shuō)是illustration，這其實(shí)是由拉丁文illustraio演變而來(lái)，意指照亮，也就是說(shuō)插圖可以使文字更加明確清晰。除此以外，它還能夠增加文字的趣味性，讓文字給用戶(hù)留下更生動(dòng)的印象，增強(qiáng)藝術(shù)的感染力。在網(wǎng)頁(yè)設(shè)計(jì)之中，插圖正成為一個(gè)功能性的元素。它作為設(shè)計(jì)師與用戶(hù)交流溝通的工具，正通過(guò)視覺(jué)元素有效率地闡述、傳遞信息。如果說(shuō)文字可以告知訪(fǎng)客某種信息，那么插圖就能將這些信息展示給訪(fǎng)客看。不過(guò)如果想要充分發(fā)揮插圖的功能，我們?cè)谑褂脮r(shí)還必須遵循兩個(gè)準(zhǔn)則：一是插圖要易于辨認(rèn);二是插圖可以為不同語(yǔ)境、不同文化的訪(fǎng)客所解讀，不出現(xiàn)歧義等現(xiàn)象。
下面是小飛總結(jié)的網(wǎng)站中插圖的不同使用情境，并分析了一些完成度比較高的栗子，希望大家可以借鑒并有所收獲。
在主頁(yè)上使用插圖
優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)常常需要給訪(fǎng)客或者說(shuō)潛在用戶(hù)留下深刻的印象，這是因?yàn)槿藗兛偸腔诰W(wǎng)站的質(zhì)量來(lái)評(píng)判一個(gè)公司的好壞。這聽(tīng)上去可能有點(diǎn)殘酷，但事實(shí)就是如此。主頁(yè)是一個(gè)網(wǎng)站的門(mén)面，決定著訪(fǎng)客對(duì)網(wǎng)站的第一印象，而第一印象往往是是視覺(jué)上的，因此不少用戶(hù)在主頁(yè)上使用插圖。在網(wǎng)站的主頁(yè)使用插圖能夠給整個(gè)網(wǎng)站帶來(lái)更多的藝術(shù)美感、讓主頁(yè)更加生動(dòng)活潑。這些主頁(yè)插圖還能夠激發(fā)用戶(hù)的想象力，在用戶(hù)和網(wǎng)站之間建立一定的聯(lián)系。除此以外，獨(dú)一無(wú)二的插圖還可以將你的網(wǎng)站與一眾競(jìng)爭(zhēng)對(duì)手區(qū)別開(kāi)來(lái)，形成更強(qiáng)的品牌號(hào)召力。
Intercom就是一個(gè)栗子。在它的首頁(yè)，如果僅靠"Communicating with customers shouldn't be this hard"和"With Intercom it's simple，personal， and fun for everyone"這兩句話(huà)無(wú)法形成強(qiáng)烈的對(duì)比，難以激起訪(fǎng)客的興趣。因此，Intercom使用了插圖，模擬"你"和用戶(hù)的溝通方式，老方法和新方法之間的優(yōu)劣一目了然，直觀(guān)的展示了自己產(chǎn)品的優(yōu)勢(shì)所在。這種貼心的講解更有利于吸引訪(fǎng)客，將訪(fǎng)客轉(zhuǎn)化成用戶(hù)。
在不同頁(yè)面上使用插圖如吉祥物
吉祥物是插圖的一種，它常作為商品標(biāo)志和企業(yè)形象的代表。在網(wǎng)站中使用吉祥物可以帶來(lái)很多好處。吉祥物以其強(qiáng)大的親和力和趣味性能夠很快贏(yíng)得訪(fǎng)客們的信任，建立訪(fǎng)客與網(wǎng)站之間的情感紐帶;可以讓交互過(guò)程更生動(dòng)，更能維持用戶(hù)的注意力。而且，對(duì)于訪(fǎng)客來(lái)說(shuō)這種圖形元素絕對(duì)是鮮活的，是能夠給他們贏(yíng)下深刻印象的。
使用吉祥物提升用戶(hù)體驗(yàn)最出名的一個(gè)網(wǎng)站就是Mailchimp，前面小飛在談出色的404頁(yè)面設(shè)計(jì)和CTA按鈕中也有提到這個(gè)網(wǎng)站。Mailchimp是一家提供電子郵箱營(yíng)銷(xiāo)服務(wù)的網(wǎng)站，它的吉祥物一只叫做Freddie的可愛(ài)猩猩。一方面，F(xiàn)reddie身背郵差包，肩負(fù)傳統(tǒng)郵遞員的重責(zé)，突出了網(wǎng)站的主題，與品牌形象相吻合。另一方面，F(xiàn)reddie這個(gè)吉祥物可大可小，能出現(xiàn)在網(wǎng)站的不同頁(yè)面上，充分發(fā)揮各種作用，比如引導(dǎo)訪(fǎng)客前往某個(gè)區(qū)塊或是僅僅娛樂(lè)訪(fǎng)客，讓用戶(hù)體驗(yàn)更加愉悅。
在教程上使用插圖
插圖很大的一個(gè)特征就是在于讓枯燥的文字富有生機(jī)，用簡(jiǎn)單的圖片解釋復(fù)雜的概念。這一點(diǎn)對(duì)于網(wǎng)站中的一些教程或是指導(dǎo)手冊(cè)來(lái)說(shuō)簡(jiǎn)直就是福音。網(wǎng)站中的教程和指導(dǎo)手冊(cè)通常都是長(zhǎng)篇大論、乏味無(wú)趣的，而增加插圖可以極大的化解這個(gè)問(wèn)題，提供給訪(fǎng)客更多的視覺(jué)信息，減輕閱讀負(fù)擔(dān)，讓他們更有了解詳情的欲望，這樣的用戶(hù)界面看起來(lái)也會(huì)更加賞心悅目。如果你并沒(méi)有合適的插圖可以用來(lái)講解教程，動(dòng)畫(huà)效果也是比較好的選擇。
下圖就是一個(gè)APP的用戶(hù)界面。當(dāng)用戶(hù)登入時(shí)，這會(huì)出現(xiàn)一些關(guān)于軟件安全信息的指導(dǎo)，好讓用戶(hù)對(duì)軟件更加信任。你可以看見(jiàn)這些信息并不是純文本的，而是與插圖相結(jié)合的。這些關(guān)于"信用卡、盾牌、賬單"的插圖讓信息更加直觀(guān)易懂，更能吸引訪(fǎng)客停駐瀏覽。這個(gè)App的用戶(hù)界面還使用了卡片式設(shè)計(jì)，整體設(shè)計(jì)布局很是整潔大方。從這我們也可以看出，當(dāng)插圖和極小的用戶(hù)界面(如手機(jī)界面)結(jié)合起來(lái)優(yōu)勢(shì)更加明顯，插圖既能傳遞一定的視覺(jué)信息，又不會(huì)侵占其他元素發(fā)揮的空間。
在獎(jiǎng)勵(lì)界面使用插圖
獎(jiǎng)勵(lì)界面可能在游戲軟件中最為常見(jiàn)，幾乎所有的游戲都設(shè)有一定的關(guān)卡，當(dāng)你通過(guò)一定數(shù)量的關(guān)卡，就能夠獲得某種成就或獎(jiǎng)項(xiàng)。而不少設(shè)計(jì)師就在獎(jiǎng)勵(lì)頁(yè)面使用一些插圖，注重引起用戶(hù)情感上的互動(dòng)。比如下圖中Foursquare在獎(jiǎng)勵(lì)頁(yè)面使用了一個(gè)市長(zhǎng)勛章。這能給用戶(hù)很大的鼓勵(lì)，同時(shí)營(yíng)造一種感覺(jué)，讓他們覺(jué)得手機(jī)屏幕的那一端并不是機(jī)器，而是活生生的人。另外，這種插圖可以帶來(lái)積極情緒，當(dāng)訪(fǎng)客受到這種情緒的影響時(shí)，常常會(huì)忽略網(wǎng)站上的一些缺點(diǎn)。
在網(wǎng)站中我們同樣可以使用插圖鼓勵(lì)用戶(hù)。比如，當(dāng)用戶(hù)完成注冊(cè)登錄時(shí)，可以獲得一份禮包或者是其他獎(jiǎng)勵(lì)等等，幫助營(yíng)造用戶(hù)的積極情緒，或是在用戶(hù)完成購(gòu)買(mǎi)后贈(zèng)送積分或抽獎(jiǎng)環(huán)節(jié)，不少商城網(wǎng)站早已在使用這一技巧了。
從上述的栗子中，我們可以看出，插圖是提升用戶(hù)體驗(yàn)，讓用戶(hù)界面更具吸引力一項(xiàng)強(qiáng)有力的工具。盡管在網(wǎng)站中使用插圖還沒(méi)有形成一套完整的規(guī)則體系，但有一點(diǎn)是毋庸置疑的：插圖一定要價(jià)值。網(wǎng)站中各種元素的使用都應(yīng)該服務(wù)于一定的目的，插圖也是如此。只有這樣，插圖才能發(fā)揮自己在網(wǎng)站中的益處，給公司產(chǎn)品或品牌賦予深刻的認(rèn)識(shí)?？煸谧约旱木W(wǎng)站中使用插圖吧!快來(lái)起飛頁(yè)自助建站平臺(tái)（）做一個(gè)網(wǎng)站吧!
