如何在網(wǎng)頁設(shè)計中使用插圖？

時間：2023-07-03 14:24:01 | 來源：網(wǎng)站運營

時間：2023-07-03 14:24:01 來源：網(wǎng)站運營

如何在網(wǎng)頁設(shè)計中使用插圖？：

為什么要在網(wǎng)頁設(shè)計中使用插圖？

雖然把插圖歸入視覺上無趣的空間的背景可能很誘人，但它們在網(wǎng)頁設(shè)計中可以起到更大和更多的作用。讓我們來看看選擇插圖而不是其他類型的圖像的一些原因和動機。

傳達基調(diào)和風(fēng)格

一般來說，視覺效果可以向用戶傳達很多關(guān)于品牌風(fēng)格的信息。不過，通過靜態(tài)照片或短視頻剪輯可以傳達多少信息存在一些限制。

使用插圖，您可以比使用真實世界的圖像更明顯地展示您的風(fēng)格和語氣 - 有時以夸張的方式。以Sour Patch Kids的首頁為例：

以獨特的創(chuàng)作脫穎而出

即使您不是從頭開始繪制自己的插圖，與人物、風(fēng)景和產(chǎn)品的照片或視頻相比，它們也有一些感覺更有創(chuàng)意。通過插圖也可以傳達不同種類的創(chuàng)造力。

例如，使用平面、幾何形狀和線條的設(shè)計可能適用于科學(xué)、數(shù)學(xué)和技術(shù)領(lǐng)域的公司。這種邏輯和結(jié)構(gòu)化的設(shè)計與藝術(shù)作品一樣是一種創(chuàng)造力。

只要看看像Inky這樣的插圖機構(gòu)的網(wǎng)站，您就會看到使用插圖可以想出的各種不同的創(chuàng)作：

創(chuàng)造您的訪客前所未見的數(shù)字世界

當(dāng)您僅使用照片進行設(shè)計時，您無能為力。如果您的網(wǎng)站圖像是為了補充您的內(nèi)容，也就是說，如果你想通過視覺來講述一個故事并創(chuàng)造一個屬于你自己的世界，插圖是必經(jīng)之路。您的數(shù)字世界甚至不需要完全身臨其境或超凡脫俗。插圖可以描繪一個類似于我們的世界，只是數(shù)字化了。

Yoast的主頁很好地平衡了兩者：

將復(fù)雜的概念或冗長的故事帶入生活

當(dāng)需要向網(wǎng)站訪問者解釋一些復(fù)雜的事情時，插圖也很有價值——比如一般的品牌概念、它的歷史、過程中涉及的步驟、相關(guān)數(shù)據(jù)等等。這些都可以通過文本分解，但訪問者通過視覺來消化信息會容易得多。

我們看到用于此的插圖的一種方式是在解釋動畫或視頻中。就像Relish主頁上的這個：

如何在網(wǎng)頁設(shè)計中使用插圖：分步指南

在您開始在設(shè)計中使用插圖之前，有一些事情要做：

第1步：弄清原因

你對你為什么選擇使用插圖而不是照片或基于排版的設(shè)計有清楚的認識嗎？如果你不確定，或者你只是想采用一種新的趨勢，再一次回顧上面的部分，并確保插圖是有目的的。

第2步：找到你的風(fēng)格

你可以在網(wǎng)絡(luò)上使用不同類型的插圖。我們已經(jīng)在上面看到了幾個例子，但這只是冰山一角。

在你進入下一節(jié)，探索不同類型的插圖以及使用它們的方法之前，請確保你首先理清了你的品牌風(fēng)格和個性。一旦你知道你要的是什么樣的外觀和語氣，就會更容易將其與插圖的風(fēng)格搭配起來。

第3步：決定網(wǎng)站有多少內(nèi)容需要插圖

一個網(wǎng)站不需要被圖像所覆蓋--這適用于使用照片的設(shè)計，也適用于插圖。這就是說，你應(yīng)該弄清楚你實際需要多少插圖。

例如，你是否想創(chuàng)造一個完全沉浸式的數(shù)字世界？如果是這樣，你的大部分視覺效果將是插圖。另一方面，如果你用插圖來視覺上引導(dǎo)人們?yōu)g覽網(wǎng)站，而不是作為講故事或構(gòu)建世界的元素，你可能想少用插圖。

第4步：建立你的插圖工具包

如果你打算設(shè)計一些真正定制的東西，你可能需要雇用一個插畫師來幫助你完成這個作品。然而，有很多工具可以幫助你自己創(chuàng)建和添加插圖到你的網(wǎng)站。

首先，你可以用Adobe Illustrator等軟件設(shè)計插圖:

您還可以選擇從Shutterstock等網(wǎng)站獲得庫存矢量圖的許可：

網(wǎng)頁設(shè)計插圖的4個很好的例子

接下來，我們將查看4個網(wǎng)頁設(shè)計插圖示例。我們將它們分為四種不同的類型，以幫助您找到您正在尋找的特定風(fēng)格的靈感：

扁平化插圖

扁平設(shè)計是指完全二維的網(wǎng)站界面。

它往往是引人注目的，但同時又是最小的，不顯眼的。這意味著你可以使用平面插圖作為內(nèi)容的補充，但不要用過于強烈的視覺效果來壓倒訪問者。更重要的是，矢量插圖總是看起來很清晰，而且是可擴展的，這對響應(yīng)式設(shè)計來說是非常好的。

讓我們來看一個例子：

半平面和三維插圖

把界面設(shè)計成完全平面的問題之一是，它可能會給一些用戶帶來可用性問題。沒有三維空間，就很難分辨出網(wǎng)站的哪些部分可以與之互動。

近年來，扁平化設(shè)計2.0已經(jīng)被引入來處理這個問題。這種設(shè)計趨勢并不像實際的三維網(wǎng)頁設(shè)計那樣是三維的。它更像是一種半平面設(shè)計。所以，大部分的用戶界面都是扁平的。然而，通過使用陰影、高光、漸變和其他紋理，關(guān)鍵元素似乎存在于各個平面上。

這兩種非平面設(shè)計技術(shù)都可以在插圖中使用。這里有一個例子：

互動式插圖

如果你想讓一個網(wǎng)站感覺更有活力，3D插圖當(dāng)然是一種方法。根據(jù)你的插圖技術(shù)水平或你的設(shè)計預(yù)算，你可能想更進一步，把你的插圖做成動畫。

手繪插圖

如果您是一名插畫師或想嘗試為即將推出的網(wǎng)站創(chuàng)建自己的插畫師，那么您可以采用多種途徑：線條圖。草圖。漫畫。以下示例將向您展示一些可能性：

更多優(yōu)質(zhì)內(nèi)容持續(xù)更新中，極簡慕楓-Global，幫助更多創(chuàng)新型企業(yè)實現(xiàn)品牌全球化！