多數(shù)時(shí)候，我們希望網(wǎng)頁中的設(shè)計(jì)元素足夠精準(zhǔn)，像素完美。但是有的時(shí)候，我們想通過一些有趣、個(gè)性化的設(shè)計(jì)元素，讓頁面看起來更有意思。而手繪的插畫和圖標(biāo)常常是在這個(gè)需求之下被引入到整個(gè)設(shè)計(jì)中來的。手繪的圖標(biāo)元素能夠賦予網(wǎng)頁以個(gè)性，增強(qiáng)整體設(shè)計(jì)的吸引力，可以更輕松地營造氛圍，傳遞情緒。
手繪圖標(biāo)設(shè)計(jì)近年來的使用頻率越來越高，說是趨勢也不為過。那么，手繪圖標(biāo)在網(wǎng)頁設(shè)計(jì)中，通常是扮演什么樣的角色，又是如何被使用的呢？今天的文章，我們來聊聊這個(gè)話題。
手繪元素有一個(gè)很有意思的特點(diǎn)，它幾乎可以和任何設(shè)計(jì)元素有效地搭配起來。可以和圖片、視頻組合使用，可以為留白增加視覺焦點(diǎn)，甚至可以在文本附近出現(xiàn)。很多時(shí)候，你不敢在整個(gè)設(shè)計(jì)中使用手繪元素是擔(dān)心它會打破設(shè)計(jì)的整體感，但是當(dāng)你開始嘗試就會發(fā)現(xiàn)它在很多時(shí)候還是很有用的。
手繪圖標(biāo)本身擁有不錯(cuò)的融入感，很多設(shè)計(jì)師會利用它的這種融入感，將它插入到網(wǎng)頁當(dāng)中，作為分隔不同區(qū)塊的間隔元素來使用。作為分隔符，手繪圖標(biāo)不會顯得過于突兀，讓分割區(qū)塊的留白也不至于單調(diào)，讓用戶明白內(nèi)容區(qū)塊的邊界的同時(shí)，也保持了整個(gè)頁面設(shè)計(jì)的節(jié)奏感。
手繪元素用好了同樣可以帶來有趣的交互體驗(yàn)。無論是將它之作為加載動畫，還是作為整個(gè)頁面交互的一部分，手繪圖標(biāo)或者手繪涂鴉都可以引起用戶的興趣。
Real Estate Stained Glass 這個(gè)網(wǎng)站就做的相當(dāng)?shù)牡轿唬麄儾粌H僅使用了手繪圖標(biāo)，將整個(gè)網(wǎng)站做成了手繪動畫，而用戶可以隨著動畫和音樂，給頁面中不同的區(qū)塊上色，整個(gè)過程無比的流暢，你所填充的色彩會實(shí)時(shí)地出現(xiàn)在頁面當(dāng)中，整個(gè)沉浸式的體驗(yàn)相當(dāng)棒。
很多地方手繪元素并不一定真的是手繪出來的。比如手繪風(fēng)格的字體有很多，它們當(dāng)然都不是真正手繪出來的。手繪風(fēng)格的字體很受歡迎，也非常適合用來展示。
手繪字體常常能夠個(gè)人以輕盈而又富有人性的的感覺，挑選手寫字體的時(shí)候，要注意它的美感和可讀性之間的平衡。
Tradewinds Hotel 就挑選了一款簡約又輕靈的手寫字體，它的尺寸夠大，清晰、可讀性良好，在網(wǎng)頁中用作展示之用。
在網(wǎng)頁當(dāng)中，絕大多數(shù)的元素都是功能性的，而用來點(diǎn)綴的元素不少都是出于純粹的視覺設(shè)計(jì)的目的而存在的。
在 Mother’s Brewing 這個(gè)網(wǎng)頁當(dāng)中，首頁上巨大的手繪的心型圖標(biāo)明顯就是為了這樣的目的而存在的。設(shè)計(jì)師在其他有的頁面上也采用了類似的手繪圖標(biāo)來裝飾頁面，強(qiáng)化視覺，填補(bǔ)空間。
手繪風(fēng)格的設(shè)計(jì)元素常常會給人有趣的感覺，在很多設(shè)計(jì)項(xiàng)目中，這些手繪元素能夠營造氛圍，調(diào)整訪客的情緒。
Signs for Science 這個(gè)網(wǎng)站中，手繪的圖標(biāo)和小插畫，配合著網(wǎng)站中瑪卡龍系的配色和圓潤的字體，營造出充滿童趣的氛圍，用戶在這種氛圍下心情通常不會太差。
在設(shè)計(jì)師的作品集當(dāng)中，手繪元素常常是用來呈現(xiàn)創(chuàng)意的有效手段。一方面，有趣的手繪元素出人意表，另一方面，設(shè)計(jì)師還能通過手繪來呈現(xiàn)設(shè)計(jì)的過程，展示設(shè)計(jì)思維。
The Feebles 這個(gè)網(wǎng)站當(dāng)中，設(shè)計(jì)不僅借用手繪來展示他的設(shè)計(jì)過程，而且網(wǎng)站本身還采用了許多手繪元素，比如左上角的LOGO。
手繪圖標(biāo)和LOGO 可能是最受歡迎的手繪元素了。手繪風(fēng)格的圖標(biāo)和LOGO 常常會顯得更加有個(gè)性，不對稱、不規(guī)則的細(xì)節(jié)是它們最有代表性的特點(diǎn)，而這些細(xì)節(jié)也讓它們顯得非常迷人。
Higher Ground 中的圖標(biāo)并不能算是嚴(yán)格意義上的手繪的LOGO，但是其中的襯線字體搭配著波浪紋的裝飾，呈現(xiàn)出手繪LOGO的特點(diǎn)。
在這個(gè)動效大行其道的時(shí)代，即使料到手繪元素最后也很難繞過動效啊。動態(tài)的手繪元素，無疑擁有更強(qiáng)的娛樂性，能夠增強(qiáng)網(wǎng)站的轉(zhuǎn)化率，讓用戶停留的時(shí)間更長。
Long Story Short 就在網(wǎng)頁設(shè)計(jì)上沿用了這樣的思路。不止是網(wǎng)站本身的手繪LOGO 采用了動態(tài)效果，而且借用快速的視頻剪輯，將他們其他的品牌設(shè)計(jì)項(xiàng)目快速地展現(xiàn)出來。
手繪設(shè)計(jì)元素的用途還有很多，它們可以讓設(shè)計(jì)變得更加賞心悅目，個(gè)性十足。從排版設(shè)計(jì)到動態(tài)效果，它們的存在讓設(shè)計(jì)更加富于人性。雖然手繪元素不一定適用于每個(gè)項(xiàng)目，但是掌握它，依然可以在多數(shù)設(shè)計(jì)項(xiàng)目中使用。
丨夸米科技丨
咨詢直線：186-2370-8562 官方網(wǎng)站：www.iraundi.cn
重慶市渝北區(qū)金開大道西段106號創(chuàng)新科技園區(qū)3座4樓
鄭州市中原區(qū)電廠西路西三環(huán)交叉口大學(xué)科技園東區(qū)15E
400-966-3016
