在過(guò)去幾年當(dāng)中,插畫(huà)開(kāi)始以一種堅(jiān)挺的姿勢(shì),站在設(shè)計(jì)趨勢(shì)的最前列。不止是原本身處各個(gè)領(lǐng)域的畫(huà)手和插畫(huà)師開(kāi)始越來(lái)越受追捧,而且連網(wǎng)頁(yè)、UI和動(dòng)效設(shè)計(jì)師都紛紛學(xué)習(xí)插畫(huà)設(shè)計(jì)。當(dāng)然,更顯著的變化,是插畫(huà)在網(wǎng)頁(yè)和UI中的使用越來(lái)越多,越來(lái)越頻繁,甚至越來(lái)越多樣。
多年來(lái),插畫(huà)被廣泛地運(yùn)用在雜志、圖書(shū)、報(bào)紙、海報(bào)、傳單等不同的傳統(tǒng)載體之上,新的工具和技術(shù)使得它更加輕松地植根于數(shù)字化媒體當(dāng)中。
作為設(shè)計(jì)中,最具有表現(xiàn)力的元素,一張插畫(huà)所傳遞的信息比文字更多更豐富。在UI和網(wǎng)頁(yè)中,使用插畫(huà)來(lái)輔助傳達(dá)信息,無(wú)疑更加直接到位。而插畫(huà)的可定制性之強(qiáng),猶在圖片之上。
插畫(huà)在UI界面中的運(yùn)用,可以說(shuō)相當(dāng)廣泛了,它更清晰,更時(shí)尚,也可以更加精準(zhǔn),甚至更有表現(xiàn)力,那么,它可以運(yùn)用到哪些地方呢?
●頁(yè)面主題圖
●網(wǎng)頁(yè)首圖和Banner
●吉祥物和形象插畫(huà)
●博客文章配圖
●新用戶(hù)引導(dǎo)教程
●工具提示
●獎(jiǎng)勵(lì)頁(yè)面和成就頁(yè)面
●游戲化設(shè)計(jì)的頁(yè)面
●通知和系統(tǒng)消息
●聊天表情
●講故事的輔助配圖
●信息圖
●營(yíng)銷(xiāo)和廣告圖
●圖標(biāo)和裝飾性?xún)?nèi)容
●社交媒體頁(yè)面
●支持性?xún)?nèi)容的頁(yè)面
插畫(huà)的適用范圍之廣,這些總結(jié)出來(lái)的使用場(chǎng)景,并不是全部。插畫(huà)本身的屬性很有意思,它連接了設(shè)計(jì),作為內(nèi)容呈現(xiàn),還帶著明顯的藝術(shù)化的屬性。今天的文章,我們總結(jié)一下如何合理的在UI設(shè)計(jì)中使用插畫(huà)。
一、人性化處理
用戶(hù)對(duì)于傳統(tǒng)互聯(lián)網(wǎng)產(chǎn)品一大吐槽就是過(guò)于“機(jī)械感”,對(duì)此設(shè)計(jì)師們對(duì)產(chǎn)品進(jìn)行了人性化處理。拿谷歌日歷舉例,一般的日歷類(lèi)應(yīng)用界面可以做的很簡(jiǎn)單,直接給用戶(hù)展示一個(gè)“日歷”就行了,用戶(hù)同樣可以看懂。但是谷歌日歷很聰明的使用了插畫(huà),而且每一個(gè)月份都會(huì)更換,這可以很好的拉近用戶(hù)與產(chǎn)品之間的距離。
二、高效的信息傳達(dá)
此外用戶(hù)對(duì)于具象元素(插畫(huà),icon,圖像或攝影圖等)的感知能力遠(yuǎn)比文字要強(qiáng)得多。根據(jù)尼爾森的一項(xiàng)統(tǒng)計(jì)顯示,用戶(hù)平均只讀每頁(yè)文本內(nèi)容的28%。這意味著,面對(duì)大段文字,用戶(hù)很少去讀,他們更多的是“掃描”。
所以同樣的一個(gè)日程安排,使用了插畫(huà)了以后,用戶(hù)可以在極短時(shí)間內(nèi)明白,這個(gè)是和同事的咖啡約會(huì),那個(gè)是要去牙醫(yī)那里看病。
三、增加產(chǎn)品趣味性
Know Lupus是一個(gè)旨在向人們科普狼瘡這種疾病的網(wǎng)站。我們都知道醫(yī)學(xué)知識(shí)都是比較晦澀難懂的,所以學(xué)習(xí)過(guò)程比較枯燥。為了改變這個(gè)窘境,設(shè)計(jì)師們將學(xué)習(xí)過(guò)程做成了一個(gè)卡片問(wèn)答游戲。寓教于樂(lè),并且引入了插畫(huà)和動(dòng)效,使整個(gè)學(xué)習(xí)過(guò)程充滿(mǎn)了趣味性。
四、插畫(huà)or圖像
插畫(huà)比圖像應(yīng)用更廣泛的一個(gè)原因是插畫(huà)在UI設(shè)計(jì)中更具有實(shí)際意義。因?yàn)闊o(wú)論是插畫(huà)還是圖像都是為了讓用戶(hù)更好的的接受頁(yè)面中內(nèi)容,而現(xiàn)在頁(yè)面中的內(nèi)容正在變的越來(lái)越抽象,圖像很難直接來(lái)表現(xiàn)。
Dropbox Carousel是一個(gè)為Dropbox用戶(hù)管理照片和視頻的app。即使這款app管理的主要都是攝影圖,但是設(shè)計(jì)師在進(jìn)行UI設(shè)計(jì)的時(shí)候還是摒棄了攝影圖。因?yàn)樗麄冋J(rèn)為,用戶(hù)看到一張照片,只要主角不是本人,他們就很難產(chǎn)生關(guān)聯(lián)感。比如圖中的那個(gè)過(guò)生日?qǐng)鼍?,這里采用插畫(huà)會(huì)給我們一種很溫馨的感覺(jué)。如果是真人出鏡這種感覺(jué)就會(huì)減弱,因?yàn)槟莻€(gè)人不是我啊。相比于圖片,用戶(hù)對(duì)于插畫(huà)更具有代入感。
五、值得思考的問(wèn)題
當(dāng)然,插畫(huà)的設(shè)計(jì)不是沒(méi)有門(mén)檻的,在設(shè)計(jì)的時(shí)候,要求也是比較高的。在使用和設(shè)計(jì)插畫(huà)的時(shí)候,需要考慮以下的幾個(gè)方面:
●目標(biāo)受眾(身體能力,年齡,文化背景,教育水平等)
●產(chǎn)品的使用環(huán)境
●產(chǎn)品和內(nèi)容的在全球范圍內(nèi)和當(dāng)?shù)氐膫鞑ニ?/p>
●所選圖形的隱喻以及是否容易被識(shí)別
●插畫(huà)是否會(huì)讓人分心
六、總結(jié)
插畫(huà)是改善用戶(hù)體驗(yàn)一個(gè)強(qiáng)大又重要的工具,它能使界面既美觀又高效。設(shè)計(jì)中如何運(yùn)用插畫(huà)并沒(méi)有硬性規(guī)定也沒(méi)有速成法則,最重要的是要牢記一件事:發(fā)揮插畫(huà)的作用。因?yàn)樽罱K任何插畫(huà)的目的都是使人更深層次的理解你的產(chǎn)品或品牌。