15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 如何在网页设计中使用插图?

如何在网页设计中使用插图?

时间:2023-07-03 14:24:01 | 来源:网站运营

时间:2023-07-03 14:24:01 来源:网站运营

如何在网页设计中使用插图?:

为什么要在网页设计中使用插图?

虽然把插图归入视觉上无趣的空间的背景可能很诱人,但它们在网页设计中可以起到更大和更多的作用。让我们来看看选择插图而不是其他类型的图像的一些原因和动机。

传达基调和风格

一般来说,视觉效果可以向用户传达很多关于品牌风格的信息。不过,通过静态照片或短视频剪辑可以传达多少信息存在一些限制。

使用插图,您可以比使用真实世界的图像更明显地展示您的风格和语气 - 有时以夸张的方式。以Sour Patch Kids的首页为例:

以独特的创作脱颖而出

即使您不是从头开始绘制自己的插图,与人物、风景和产品的照片或视频相比,它们也有一些感觉更有创意。通过插图也可以传达不同种类的创造力。

例如,使用平面、几何形状和线条的设计可能适用于科学、数学和技术领域的公司。这种逻辑和结构化的设计与艺术作品一样是一种创造力。

只要看看像Inky这样的插图机构的网站,您就会看到使用插图可以想出的各种不同的创作:

创造您的访客前所未见的数字世界

当您仅使用照片进行设计时,您无能为力。如果您的网站图像是为了补充您的内容,也就是说,如果你想通过视觉来讲述一个故事并创造一个属于你自己的世界,插图是必经之路。您的数字世界甚至不需要完全身临其境或超凡脱俗。插图可以描绘一个类似于我们的世界,只是数字化了。

Yoast的主页很好地平衡了两者:

将复杂的概念或冗长的故事带入生活

当需要向网站访问者解释一些复杂的事情时,插图也很有价值——比如一般的品牌概念、它的历史、过程中涉及的步骤、相关数据等等。这些都可以通过文本分解,但访问者通过视觉来消化信息会容易得多。

我们看到用于此的插图的一种方式是在解释动画或视频中。就像Relish主页上的这个:

如何在网页设计中使用插图:分步指南

在您开始在设计中使用插图之前,有一些事情要做:

第1步:弄清原因

你对你为什么选择使用插图而不是照片或基于排版的设计有清楚的认识吗?如果你不确定,或者你只是想采用一种新的趋势,再一次回顾上面的部分,并确保插图是有目的的。

第2步:找到你的风格

你可以在网络上使用不同类型的插图。我们已经在上面看到了几个例子,但这只是冰山一角。

在你进入下一节,探索不同类型的插图以及使用它们的方法之前,请确保你首先理清了你的品牌风格和个性。一旦你知道你要的是什么样的外观和语气,就会更容易将其与插图的风格搭配起来。

第3步:决定网站有多少内容需要插图

一个网站不需要被图像所覆盖--这适用于使用照片的设计,也适用于插图。这就是说,你应该弄清楚你实际需要多少插图。

例如,你是否想创造一个完全沉浸式的数字世界?如果是这样,你的大部分视觉效果将是插图。另一方面,如果你用插图来视觉上引导人们浏览网站,而不是作为讲故事或构建世界的元素,你可能想少用插图。

第4步:建立你的插图工具包

如果你打算设计一些真正定制的东西,你可能需要雇用一个插画师来帮助你完成这个作品。然而,有很多工具可以帮助你自己创建和添加插图到你的网站。

首先,你可以用Adobe Illustrator等软件设计插图:

您还可以选择从Shutterstock等网站获得库存矢量图的许可:

网页设计插图的4个很好的例子

接下来,我们将查看4个网页设计插图示例。我们将它们分为四种不同的类型,以帮助您找到您正在寻找的特定风格的灵感:

扁平化插图

扁平设计是指完全二维的网站界面。

它往往是引人注目的,但同时又是最小的,不显眼的。这意味着你可以使用平面插图作为内容的补充,但不要用过于强烈的视觉效果来压倒访问者。更重要的是,矢量插图总是看起来很清晰,而且是可扩展的,这对响应式设计来说是非常好的。

让我们来看一个例子:

半平面和三维插图

把界面设计成完全平面的问题之一是,它可能会给一些用户带来可用性问题。没有三维空间,就很难分辨出网站的哪些部分可以与之互动。

近年来,扁平化设计2.0已经被引入来处理这个问题。这种设计趋势并不像实际的三维网页设计那样是三维的。它更像是一种半平面设计。所以,大部分的用户界面都是扁平的。然而,通过使用阴影、高光、渐变和其他纹理,关键元素似乎存在于各个平面上。

这两种非平面设计技术都可以在插图中使用。这里有一个例子:

互动式插图

如果你想让一个网站感觉更有活力,3D插图当然是一种方法。根据你的插图技术水平或你的设计预算,你可能想更进一步,把你的插图做成动画。

手绘插图

如果您是一名插画师或想尝试为即将推出的网站创建自己的插画师,那么您可以采用多种途径:线条图。草图。漫画。以下示例将向您展示一些可能性:

更多优质内容持续更新中,极简慕枫-Global帮助更多创新型企业实现品牌全球化!

关键词:使用,插图,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭