網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法發(fā)布者：本站     時(shí)間：2021-12-16 10:12:09

盡管在日常的設(shè)計(jì)工作中，網(wǎng)頁設(shè)計(jì)師們經(jīng)常更關(guān)注于擁有近乎完美像素的設(shè)計(jì)元素，但有時(shí)候，它們并不適合所有類型的設(shè)計(jì)，有時(shí)你或許想要更多，有點(diǎn)偏向真實(shí)的元素。

手工繪制的圖標(biāo)或元素可能正是你要尋找的適合的、正確的設(shè)計(jì)元素，可以幫助為你的項(xiàng)目增添一些特別的視覺元素。大多數(shù)設(shè)計(jì)師不會瘋狂地使用看似手繪的元素(這是正確的)，但在你的網(wǎng)站設(shè)計(jì)中使用一些看似手繪的元素會增加用戶的個(gè)人感受。

這在網(wǎng)頁設(shè)計(jì)中也很流行。從草繪風(fēng)格的圖標(biāo)，到具有同等可用性和藝術(shù)性的完整的手繪元素，這是一個(gè)正在流行的設(shè)計(jì)選項(xiàng)。今天，我們將來探討一下以下8種方法來使用這一趨勢。

1.創(chuàng)建分離

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

手繪設(shè)計(jì)元素可以和幾乎任何類型的視覺表現(xiàn)形式混合搭配，它們可以與照片或視頻一起工作，獨(dú)立應(yīng)用于空白的空間中，或者在文本元素附近。不要因?yàn)槟銚?dān)心它可能不適合于整體的設(shè)計(jì)模式而消除使用這種類型的元素的想法。

嘗試一下，誰真的知道呢?

Digital Visitor在其網(wǎng)站設(shè)計(jì)中使用這些元素來創(chuàng)建元素和內(nèi)容之間的分隔。盡管主頁上的元素只是簡單的點(diǎn)和線的組合，但手繪的元素永遠(yuǎn)可以給頁面增添一絲活力與個(gè)性。

每個(gè)元素的放置都是為了確保用戶能夠查看正確的內(nèi)容。在上面的例子中，元素位于屏幕的中心，用于創(chuàng)建兩個(gè)內(nèi)容區(qū)域之間的分隔。在設(shè)計(jì)中，類似的元素被用在小文本框上，以展示公司的實(shí)際業(yè)務(wù)。

2.互動(dòng)的涂鴉

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

手繪元素同樣可以在設(shè)計(jì)中進(jìn)行有趣的互動(dòng)。從加載動(dòng)畫(這篇文章中的許多網(wǎng)站示例使用這種風(fēng)格)到一個(gè)完全交互式的體驗(yàn)，這種設(shè)計(jì)技巧足夠有趣，可以激起用戶的興趣。

Real Estate Stained Glass是一個(gè)使用該技巧的形象的例子，它結(jié)合了網(wǎng)站設(shè)計(jì)的趨勢和創(chuàng)意元素，允許用戶按照自己的想法給屏幕上的手繪元素著色。通過手繪，你可以很自然的把這兩者聯(lián)系在一起，元素可以很精確和無縫的產(chǎn)生效果。

3.近乎真實(shí)的手繪字體

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

有時(shí)，效果最好的手繪元素實(shí)際上并不是被寫出來的，通過模仿筆跡或印刷樣式從而創(chuàng)造出矢量的手繪元素尤其受歡迎，這種類型更多的使用于以顯示為目的的項(xiàng)目中。

這種類型的元素具有更輕、更人性化的感覺，用戶可以很容易的產(chǎn)生關(guān)聯(lián)感(關(guān)鍵是要確保字母是高度可讀的)。

Tradewinds Hotel的網(wǎng)站設(shè)計(jì)在這一方面做得很好，它使用了一個(gè)簡單的、草書式的字體，足夠大，足夠清晰，可以一眼就能讀懂。一個(gè)簡單的無襯線樣式，它可以幫助增加字體的重點(diǎn)，同時(shí)也使用戶易于理解。

4.設(shè)計(jì)草圖

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

有些手繪元素純粹只是為了視覺目的。它們的存在是為了創(chuàng)造一種可能難以在其他方面建立起來的設(shè)計(jì)流程或感覺。這些草圖類型在設(shè)計(jì)的小地方使用時(shí)可以特別有趣。

Mother’s Brewing在其網(wǎng)頁設(shè)計(jì)上使用的恰到好處。它的主頁上有個(gè)大心臟——很明顯。但是，幾乎所有其他頁面上都有一些很小的元素，有些很明顯，有些會比較隱蔽。每個(gè)按鈕都有手繪的感覺和緞帶元素的設(shè)計(jì)，元素出現(xiàn)在背景或覆蓋在可滑動(dòng)的圖層上，填補(bǔ)了設(shè)計(jì)中的比較呆板的空間。整體效果很巧妙，視覺上也很有趣。

5.營造氣氛

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

手工繪制的設(shè)計(jì)元素通?？梢誀I造一種更輕松、更有趣的基調(diào)。它們可以將這種氛圍帶給幾乎任何類型的設(shè)計(jì)項(xiàng)目。使用的手繪元素越多，項(xiàng)目給人的感覺可能會月輕松(但是，我們并不建議使用過多，度很重要)。

Signs for Science是一個(gè)很好的例子，它展示了如何用手繪的元素來設(shè)計(jì)一個(gè)有趣的，幾乎專門為兒童準(zhǔn)備的設(shè)計(jì)美學(xué)(配色當(dāng)然也是重點(diǎn)之一)。通過使用手繪元素，整個(gè)頁面的設(shè)計(jì)都充滿一個(gè)特定的情緒，富含創(chuàng)造性的，輕松的，鼓勵(lì)用戶與之交互。

6.展示創(chuàng)造力

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

一組手繪設(shè)計(jì)元素對于一個(gè)展示型的網(wǎng)站設(shè)計(jì)來說是一個(gè)很好的機(jī)會，因?yàn)樗梢詮?qiáng)調(diào)創(chuàng)造力。這些元素更側(cè)重于設(shè)計(jì)的過程，以及能夠很好的表達(dá)項(xiàng)目的思想以及它們將如何工作。

另外，這是一種有趣的方式來鍛煉你的創(chuàng)造力和思維。

在上面的例子中，The Feebles在其網(wǎng)頁設(shè)計(jì)中使用手繪的元素來表示主形象，并與左上角的手繪標(biāo)志相結(jié)合(如果你不仔細(xì)看的話，你可能會錯(cuò)過它)。

7.圖標(biāo)或Logo

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

因?yàn)檫@是手繪元素最流行的用途之一，所以我們沒有把它放在列表的頂端(主要是為了幫助你思考其他可執(zhí)行的想法，然后再去做一些更常見的事情)。

手繪元素可以是一個(gè)圖標(biāo)或Logo，從彎彎曲曲到不太圓的形狀，不完美會增加個(gè)性和魅力，而完美的元素風(fēng)格很難做到這一點(diǎn)。

Higher Ground使用方形的字體，將字母與圖標(biāo)的圖標(biāo)分開。極簡的風(fēng)格展示出來醒目和有效，而手繪元素賦予它一些個(gè)性，這是僅僅一條直線所不能表達(dá)的。

8.作為動(dòng)畫效果

網(wǎng)頁設(shè)計(jì)中手工繪制的圖標(biāo)和元素的方法,PS教程,

用動(dòng)畫將手繪元素帶進(jìn)你的設(shè)計(jì)中。

在屏幕上繪制的圖像可以通過有趣的形式進(jìn)行動(dòng)態(tài)化。這么做有一個(gè)明顯的好處，那就是娛樂性，因?yàn)橛脩艨梢愿罨捏w驗(yàn)元素和信息。這對網(wǎng)站所有者也有好處：增加了用戶在網(wǎng)站的停留時(shí)間和提升潛在的轉(zhuǎn)換率。

Long Story Shor在主頁上就使用了這個(gè)概念。首先，他們選擇手繪印刷風(fēng)格的繪制標(biāo)志，然后將其動(dòng)畫化。這個(gè)動(dòng)畫的效果很柔和順暢，并在過程中包含多個(gè)手繪。整個(gè)循環(huán)只持續(xù)幾秒鐘。

總結(jié)

即使你對手繪還不太熟悉，在設(shè)計(jì)項(xiàng)目中模擬手繪元素也可以增加用戶的個(gè)人感受。從印刷設(shè)計(jì)到游戲到加載動(dòng)畫，這些元素可以展示創(chuàng)造力和個(gè)性。

雖然手工繪制的元素并不適用于每個(gè)項(xiàng)目，但下次你如果需要在設(shè)計(jì)中添加一些可以放松心情或添加一些可以幫助留住用戶的元素的話，你可以考慮一下。保持想法簡單，并將其貫穿到整個(gè)設(shè)計(jì)的主題中這就是這些元素的意義所在。