熟悉 WEB 网站人物形象设计技巧可以帮助我们在网页设计中更巧妙地使用插图插画。无论是平面设计还是将生活中的物体绘制成图,都可以激发我们的创造性思维,在 web 设计中找到自己的路。

在网页设计中使用插图,也有一定的趋势。例如,现在流行的卡通英雄人物,在很多网站的 Banner 上都能看到。

原因很简单:卡通被大家接受并喜欢。从小,我们就习惯了从动画电影中学习。他们带给我们新的东西,满足我们的好奇心,并解释复杂的事情。因此,对于那些需展示的非技术型网站来说,放上可爱的卡通图值得一试。

最好的角色设计技巧

卡通人物能够帮助你向首重传达信息,并增强用户体验,使你的网站成为一个令人愉快的地方。有多种方法可以利用。

下面,我找了些例子,总结七个Web角色形象设计技巧,希望能帮助你在网页设计找到更好的插画图片灵感。

1、使用生活中熟悉的角色

正如我之前提到的,不管你的网站是展示型还是技术型网站,或者仅仅只是一个 web 应用程序,人们在浏览你的网站时可能会感到困惑。

为了解决这个问题,使用日常生活中的人物角色。在一个“冰冷”的数字环境中,让人能触摸到生活中熟悉温暖的内容。以GITHUB为例。

虽是一个专业技术网站,章鱼和猫是我们非常熟悉的动物,两者奇迹般地组合,章鱼猫形象设计为网站增添了一份亲近感。让人觉得编程、代码不是生硬枯燥的,也可以可爱温暖惹人爱。

使用生活中熟悉的角色-GitHub
使用生活中熟悉的角色-GitHub

查看网站设计:https://github.com/marketplace

2、“残酷地”把事情说清楚

有时候,网站应该更诚实,即使实事可能残酷,也要“残酷地”说清楚——网站设计:清楚。

有时候我们喜欢欣赏复杂的东西;有时候,我们也喜欢显而易见的内容。所见即所得,与网站浏览者建立良好关系,是网站设计首要规则。网站形象设计也要考虑这个规则。

Absurd Design 荒谬设计,网站亦如其名。尽管这个名字很明显,但还是很难猜出它的真正含义。什么样荒谬的设计?为了回答这个问题并激发用户的兴趣,网站使用了一张具有代表性的艺术图,加以说明。

“残酷地”把事情说清楚-Absurd Design
“残酷地”把事情说清楚-Absurd Design

查看网站设计:https://absurd.design/

3、使用有趣的动物吉祥物

相反,如果你的业务是不言自明的,不需要任何介绍,如何让它从众多网站中脱颖而出?设计一个有趣的动物吉祥物,把一个平庸的网站变成一个愉快的项目。

Oboosho 网站提供清洁服务。是不是就觉得网站够无聊,不是吗?这次到不一定,至少,这个可爱的河马角色看着你的时候不会。看着它,是不是有一种心情愉快的感觉。事实上,某种魅力吸引着你。要不,多看看。

使用有趣的动物吉祥物-Oboosho
使用有趣的动物吉祥物-Oboosho

查看网站设计:https://oboosho.com/

4、使用动画/动图角色

动画角色受大家喜欢。动画也不需要很大,一个小的动画片段或者 GIF 动图可以很容易地做到这一点。它进一步支撑你的品牌信息,还能起到给用户提示的作用,留住用户。

以 UDESK 网站设计为例,网站用了动图来表现智能客服场景,以一种动图的形式将业务告知访客,激发人们往下看的欲望。

使用动画/动图角色-UDESK
使用动画/动图角色-UDESK

查看网站设计:https://www.udesk.cn/

5、唤起访客的共鸣

除非你正在建立一个关注饥荒或自然灾害等公益性网站,否则在赢得用户的战斗中,有趣的因素必不可少。

给人们一些思考的内容,并提醒他们,唤起某种共鸣。一个不错的实例——Alber Graphics。

Alber Graphics 是一家设计机构。然而,他们的网站有一个很有意思的设计,以《爱丽丝梦游仙境》为灵感来源,该网站成功地创建了一个独特的内容,在这个网站上,信息通过诙谐的插图巧妙地展现。一个聪明整洁的网站设计解决方案,非常实用。

唤起访客的共鸣-Alber Graphics
唤起访客的共鸣-Alber Graphics

查看网站设计:http://www.albergraphics.com/

6、使用超级英雄激/动漫人物发用户信心

每一个人都有一个梦想:成为卡通里的英雄——拯救世界,做所有不可思议的事情。即使我们现在长大了,我们都知道童年的美好记忆还在的。我们可以用它来做更多的创意。

卡通动漫人物,尤其是大家熟知的,可以在潜意识里激发人们的自信(给自己一个购买/使用的借口)。可以通过使用带有一些英雄特性的手绘/图片来触发这种效果(当然注意别侵权)。

举个例子,某拉面品牌,是不是有一种不管好不好吃,反正想来一碗的冲动。

使用超级英雄激/动漫人物发用户信心-Nissin
使用超级英雄激/动漫人物发用户信心-Nissin

此处没有网站链接。看看就行,眼看就618了,管住手。

7、尝试不同的风格

说明手法是能够完美地与各种主流设计相结合的方法之一。根据你的网站的目的和主题,可以使用不同类型的插图——尤其是现在,多样性展现/交互被大家都喜欢的时候。

ZoCo Design 的官网,用一种神秘的生物,用于 banner 处,以一种独特的方式脱颖而出,令人难忘。

尝试不同的风格-ZoCo Design
尝试不同的风格-ZoCo Design

查看网站设计:https://zocodesign.com/

此外,Design Critique 使用手绘插图来表达设计师对创意和艺术的热爱,脱颖而出依旧毫不费力。

尝试不同的风格-Design Critique
尝试不同的风格-Design Critique

查看网站设计:https://designcritique.io/

 

推荐阅读:

Can’t Unsee——专为UI设计师打造的设计实力测试网页小游戏

Codepen 精品前端CSS/HTML动画特效推荐

尴尬让你成为一位更好的设计师