插画将用户带入叙事中,讲述一个故事,而图标则有更多的功能目的。它们代表内容而不是补充内容。一般来说,插画使用隐喻和叙事来描绘大型主题概念。而图标则简单得多,更适合描绘非常具体的概念。把插画看作是段落,把图标看作是要点。

我分享的一些图标相当详细,可以作为插画处理,所以我让你决定它们属于哪一类。

当然有几十种风格,然而在本文中,我将谈谈我最喜欢的那些风格。

1. 线性图标

通常,黑色的轮廓,1到3个像素,图标的某些部分是彩色的。

这些图标让网站看起来很有品位,几乎适合任何风格。从更大的图标。

ui图标设计的心得(9种吸引人的UI图标样式)(1)

audt.to网站的图标

到更小、更简单:

ui图标设计的心得(9种吸引人的UI图标样式)(2)

paymentx.io的图标

或者更细致更有品位:

ui图标设计的心得(9种吸引人的UI图标样式)(3)

想法

让一个再简单不过的图标成为热门的方法之一就是给它做个动画:

ui图标设计的心得(9种吸引人的UI图标样式)(4)

从Lordicon这个动画互动图标库中获得一些灵感:

ui图标设计的心得(9种吸引人的UI图标样式)(5)

要避免什么

让我们来看看这套图标,看看哪些地方可以做得更好:

ui图标设计的心得(9种吸引人的UI图标样式)(6)

kencko.com的图标

1.使用相同的视角。

2.检查细节。不要让一些图标极简,而其他的图标超级详细。

3.牢记图标的权重。有些对象在视觉上比其他对象占据更多空间。

2. "线条 色块 “图标

看看这些明亮而友好的插画:

ui图标设计的心得(9种吸引人的UI图标样式)(7)

Packlane的图标

添加色块可以是一个简单的方法来刷新极简主义和标准图标。

ui图标设计的心得(9种吸引人的UI图标样式)(8)

Habx的图标

3. 等距插画

等距插画可能需要花费很多时间,但结果往往是非常值得的。

模仿现实或创造一个不真实的魔幻世界,都可以用等距插画来实现。

ui图标设计的心得(9种吸引人的UI图标样式)(9)

在这种情况下,还有很多公司正在创建遵循相同样式的等轴测图,从而带来整体的用户体验:

ui图标设计的心得(9种吸引人的UI图标样式)(10)

4. 抽象的极简主义插画

仅仅是几个线条和圆圈,如果没有后续文字,几乎无法理解图标的含义。

同时,我们也很难错过这幅插画--它实在是太大胆了,太抢眼了且好端端的不规则。

ui图标设计的心得(9种吸引人的UI图标样式)(11)

5. 3D图标

作为一种相当不寻常的方式来表示一些想法,3D图标在创作中并不复杂。通常情况下,这些图标在明亮的色块上看起来很神奇。

ui图标设计的心得(9种吸引人的UI图标样式)(12)

Wealthsimple的图标

丰富的价格计划设计与一些惊人的3D图标。

ui图标设计的心得(9种吸引人的UI图标样式)(13)

要避免什么

1.尽量不要写实,而是要增加你的个人风格,股票图标很少能唤起人们的信任或兴趣。

ui图标设计的心得(9种吸引人的UI图标样式)(14)

2.不要混合使用轴侧和三维透视图标。

ui图标设计的心得(9种吸引人的UI图标样式)(15)

3.请记住,详细的图标应该足够大,以便于识别它们。

ui图标设计的心得(9种吸引人的UI图标样式)(16)

6. 极简主义插画

相当容易找到或创建,他们将适用于任何网站或应用程序。

ui图标设计的心得(9种吸引人的UI图标样式)(17)

ui图标设计的心得(9种吸引人的UI图标样式)(18)

想法

尝试重新思考标准图标,并创建极简版的图标。

要避免什么

过于通用的图形模板,没有人可以涉及到。

7. 图文并茂

这可能是最广泛使用的风格。听起来可能是一种沉闷的风格,然而一些公司证明它可以相当时尚。

ui图标设计的心得(9种吸引人的UI图标样式)(19)

最大的挑战是设计的图标不仅要支持你的想法,而且要以愉快和独特的外观为产品增加价值。

想法

部分动画图标。

ui图标设计的心得(9种吸引人的UI图标样式)(20)

8. 补充内容的图标

有时候,文字附带的图标有点出乎意料。

如果你的大多数用户发现很容易将图标与描述联系起来,而且图标对他们来说似乎很有价值,那么你就走上了正轨。让图标变得有趣或有感情,会提升整体体验。

然而有时很难将图标与描述联系起来,或者对图标的认知与它所描述的点的主旨不同。

ui图标设计的心得(9种吸引人的UI图标样式)(21)

不要让人不知道你想用这个图标来表达什么。图标要绝对清晰,不给人留下歧义。

9. 自定义绘制的图标

这种类型的图标可能并不适合每家企业,但一些产品品牌可能会觉得它们很有用。

绘制这样的图标需要一定的技巧。然而,你可以尝试Photoshop或Illustrator的插件,将图像转化为草图,并节省一些时间。

ui图标设计的心得(9种吸引人的UI图标样式)(22)

“弯曲 "图标。

ui图标设计的心得(9种吸引人的UI图标样式)(23)

把毛笔的风格改成手绘粉笔,会有很大的不同。

~此文转载,如有侵权,请联系删除

,