說(shuō)插畫(huà)已經(jīng)徹底接管了網(wǎng)頁(yè)設(shè)計(jì)似乎有點(diǎn)過(guò)，但是技術(shù)發(fā)展和用戶需求使得網(wǎng)頁(yè)插畫(huà)在世界范圍內(nèi)流行起來(lái)，一點(diǎn)都不為過(guò)。從全屏式頁(yè)面當(dāng)中的首頁(yè)Banner圖到視差滾動(dòng)式頁(yè)面中的微妙動(dòng)畫(huà)，你會(huì)發(fā)現(xiàn)插畫(huà)在這些設(shè)計(jì)作品中大放異彩。

插畫(huà)在網(wǎng)頁(yè)中是一種有趣而又多用途的優(yōu)化元素，手繪插畫(huà)、網(wǎng)頁(yè)元素、手繪字體，在技術(shù)成熟的今天，所有的這些東西都可以用合適的手繪插畫(huà)來(lái)替換，制造出獨(dú)一無(wú)二的視覺(jué)體驗(yàn)。

插畫(huà)是設(shè)計(jì)趨勢(shì)

不過(guò)設(shè)計(jì)師們選擇插畫(huà)還有許多其他的原因，這也造就了如今的趨勢(shì)：

·插畫(huà)能讓用戶更好地融入到你所設(shè)定的氛圍當(dāng)中，因?yàn)樗麄儾粫?huì)注意到其他的東西

·插畫(huà)可以實(shí)現(xiàn)許多稀奇古怪的元素，并且它們只能靠插畫(huà)或者手繪來(lái)實(shí)現(xiàn)

·插畫(huà)可以更輕松地將現(xiàn)實(shí)和想象融合到一起

·更容易定制，也更容易加入藝術(shù)的元素

·插畫(huà)配色豐富多彩，也可以更加輕松地將流行而明亮的色調(diào)融入其中

·即使你并不是一名職業(yè)的插畫(huà)師，也可以借助插畫(huà)工具和素材包來(lái)制作插畫(huà)

·插畫(huà)可以融入許多不同的風(fēng)格，營(yíng)造多種氛圍

頁(yè)頭插畫(huà)

網(wǎng)頁(yè)頁(yè)頭的Banner圖是插畫(huà)最常出現(xiàn)的地方。在作品展示、產(chǎn)品類的網(wǎng)站中，漂亮的插畫(huà)用得非常合情合理。

在網(wǎng)頁(yè)頁(yè)頭中使用插畫(huà)的時(shí)候，藝術(shù)元素?fù)碛懈�大的發(fā)揮空間，可以兼容更多復(fù)雜多樣的設(shè)計(jì)元素和內(nèi)容。精致的細(xì)節(jié)，好玩的交互，還有充滿質(zhì)感的留白都常見(jiàn)于此處的插畫(huà)。網(wǎng)頁(yè)頁(yè)頭的插畫(huà)能讓用戶充滿發(fā)現(xiàn)的樂(lè)趣。

復(fù)雜的插畫(huà)設(shè)計(jì)有一些值得注意的設(shè)計(jì)技巧：

·插畫(huà)最好具有一定的藝術(shù)性，用戶不會(huì)將時(shí)間耗費(fèi)在普通而沒(méi)亮點(diǎn)的設(shè)計(jì)作品上，請(qǐng)精心制作

·雖然有的插畫(huà)可能會(huì)比較復(fù)雜，但是傳遞的信息應(yīng)該是簡(jiǎn)單的。你應(yīng)該明確插畫(huà)所傳遞的信息，并且讓所有的元素為之服務(wù)

·專業(yè)。你能在草稿紙上涂鴉并不意味著你能立刻開(kāi)始做網(wǎng)頁(yè)插畫(huà)，成為一個(gè)專業(yè)的插畫(huà)師需要足夠好的審美和足夠?qū)�業(yè)的繪畫(huà)技巧。

添加簡(jiǎn)單的動(dòng)效

靜態(tài)的插畫(huà)設(shè)計(jì)需要注意的點(diǎn)有很多，而網(wǎng)頁(yè)插畫(huà)則更加復(fù)雜，因?yàn)樗�現(xiàn)在已經(jīng)是動(dòng)態(tài)的了。當(dāng)插畫(huà)和動(dòng)效結(jié)合起來(lái)的時(shí)候，會(huì)更容易引導(dǎo)用戶，引發(fā)用戶點(diǎn)擊和互動(dòng)的欲望。

正如同 Hugo 網(wǎng)頁(yè)中文本的微妙運(yùn)動(dòng)，就是非常吸引人眼球的設(shè)計(jì)。這些微動(dòng)畫(huà)可以幫助用戶了解哪些地方可以操作，如何訪問(wèn)下一個(gè)部分或者頁(yè)面。對(duì)于整體性比較強(qiáng)、內(nèi)容比較多的頁(yè)面而言，這種設(shè)計(jì)尤為有效。

這些令人驚喜的小細(xì)節(jié)，會(huì)讓訪客流連忘返。懸停動(dòng)效就是一個(gè)很好的設(shè)計(jì)手法，它讓用戶樂(lè)于在頁(yè)面中尋找可供交互的空間，在導(dǎo)航中體會(huì)樂(lè)趣。

插畫(huà)圖標(biāo)和插畫(huà)UI元素

如果種種跡象表明你的網(wǎng)頁(yè)無(wú)法使用大范圍的插畫(huà)來(lái)作為裝飾，那么可以考慮將插畫(huà)風(fēng)的圖標(biāo)和UI元素融入到頁(yè)面當(dāng)中。這種方式同樣可以讓你頁(yè)面顯得生動(dòng)有趣。

插畫(huà)元素能將奇思妙想融入到單調(diào)嚴(yán)肅的網(wǎng)站中，讓它顯得更加生動(dòng)有趣。插畫(huà)式的線性圖標(biāo)是最容易實(shí)現(xiàn)的插畫(huà)之一，簡(jiǎn)約而多樣的設(shè)計(jì)幾乎可以和所有的設(shè)計(jì)風(fēng)格兼容起來(lái)，可以搭配圖片，也可以配合多種多樣的配色方案，最重要的是，這種統(tǒng)一的圖標(biāo)設(shè)計(jì)能作為頁(yè)面視覺(jué)設(shè)計(jì)一致性設(shè)計(jì)的重要脈絡(luò)。

如果你想再深入一點(diǎn)，不妨讓各種UI元素插畫(huà)化。Iqor 的網(wǎng)頁(yè)中，大尺寸的圖片設(shè)計(jì)讓頁(yè)面平添了幾分趣味。網(wǎng)頁(yè)中大的插畫(huà)和設(shè)計(jì)元素都使用了三種典型的流行色，并且在不同的頁(yè)面中保持著一致性。

手繪字體

另外一個(gè)重要的設(shè)計(jì)趨勢(shì)是融入了插畫(huà)的定制化排版設(shè)計(jì)。插畫(huà)式的LOGO、正文內(nèi)容、手繪字體和藝術(shù)插畫(huà)都可以充分的融合到一起。

值得一提的是，手繪字體設(shè)計(jì)最值得注意的是節(jié)制。通常你需要將一部分文字內(nèi)容進(jìn)行重繪，并控制在一個(gè)區(qū)塊當(dāng)中，設(shè)計(jì)“過(guò)度”的字體最容易出現(xiàn)的問(wèn)題是影響字體的可讀性。所以，在這個(gè)設(shè)計(jì)過(guò)程中，務(wù)必確保文字在漂亮的同時(shí)，能夠被用戶輕松閱讀，易于理解，傳遞出清晰的信息。

Day of the Dead 和 Stand Up to Cancer 兩個(gè)頁(yè)面在這方面做的相當(dāng)不錯(cuò)，它們傳遞出簡(jiǎn)單的信息，字體設(shè)計(jì)上也足夠美觀。Day of the Dead 使用了無(wú)襯線體和漂亮的插畫(huà)來(lái)搭配手繪字體，雖然多，但是非常有條理。Stand Up to Cancer 則統(tǒng)一地采用了水彩畫(huà)的風(fēng)格，手繪字體則是基于標(biāo)準(zhǔn)化的字體來(lái)設(shè)計(jì)，可讀性更強(qiáng)。

結(jié)語(yǔ)

對(duì)于許多設(shè)計(jì)師而言，剛剛開(kāi)始將插畫(huà)加入到網(wǎng)頁(yè)中之時(shí)，似乎并不是那么輕松，但是充分借助現(xiàn)有的設(shè)計(jì)工具、UI Kit和素材，可以適當(dāng)?shù)亟档瓦@個(gè)門檻。

如果你想獨(dú)自完成帶有許多插畫(huà)的網(wǎng)頁(yè)項(xiàng)目，相對(duì)系統(tǒng)化的學(xué)習(xí)和相當(dāng)?shù)膶徝擂固帐欠浅Ｓ斜匾�的，花費(fèi)時(shí)間來(lái)醞釀作品是一件很正常的事情。