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

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

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

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

1.創(chuàng )建分離

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

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

嘗試一下，誰(shuí)真的知道呢?

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

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

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

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

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

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

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

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

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

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

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

4.設計草圖

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

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

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

5.營(yíng)造氣氛

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

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

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

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

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

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

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

在上面的例子中，The Feebles在其網(wǎng)頁(yè)設計中使用手繪的元素來(lái)表示主形象，并與左上角的手繪標志相結合(如果你不仔細看的話(huà)，你可能會(huì )錯過(guò)它)。

7.圖標或Logo

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

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

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

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

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

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

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

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

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

總結

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

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