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

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

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

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

1.創(chuàng)建分離

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

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

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

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

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

2.互動的涂鴉

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

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

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

3.近乎真實的手繪字體

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

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

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

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

4.設(shè)計草圖

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

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

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

5.營造氣氛

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

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

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

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

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

一組手繪設(shè)計元素對于一個展示型的網(wǎng)站設(shè)計來說是一個很好的機會，因為它可以強調(diào)創(chuàng)造力。這些元素更側(cè)重于設(shè)計的過程，以及能夠很好的表達項目的思想以及它們將如何工作。

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

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

7.圖標(biāo)或Logo

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

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

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

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

8.作為動畫效果

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

用動畫將手繪元素帶進你的設(shè)計中。

在屏幕上繪制的圖像可以通過有趣的形式進行動態(tài)化。這么做有一個明顯的好處，那就是娛樂性，因為用戶可以更生活化的體驗元素和信息。這對網(wǎng)站所有者也有好處：增加了用戶在網(wǎng)站的停留時間和提升潛在的轉(zhuǎn)換率。

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

總結(jié)

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

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