为了账号安全,请及时绑定邮箱和手机立即绑定

网页世纪:2018年的 网页图标设计趋势

标签:
Html/CSS

图标可能是您投资组合中最重要且被低估的设计示例之一。这里是2018年的图标设计,以及鼓舞人心的图标和设计工作的一些很好的例子。

图标元素几乎无处不在,但有时候会产生一种事后的想法。情况应该不是这样。一个伟大的图标设计可以是独特的,并为项目添加技巧和天赋。

让我们来看看2018年的新图标和图标设计的热点!

线条样式图标设计

webp

线条样式图标似乎是永不变老的趋势。

部分原因是这种图标样式几乎可以在任何背景类型的任何地方工作。由于这种多功能性,许多流行的可下载图标包通常包括线型设计。

在上面的例子中很容易看到这一点。几乎任何尺寸的每个图标都易于查看和理解。

简单的元素和表示

webp

与2018年的大多数其他设计趋势一样,简约也是图标设计的一部分。简单的形状和地理结合起来,为图标创建了几乎过于简单的表示。

结果是一个非常巧妙的设计,使用户看起来。

在上面使用食物图标的示例中,每个图标使用图标中圆圈的共同线程。这可以是图标本身的整体形状或图标设计的一部分。此形状将项目中的每个图标相互连接。

带渐变的图标

webp

渐变色趋势已成为2018年的主要主题之一,也是图标设计的一个因素。从线条笔划中的简单渐变(例如上面的示例)到渐变背景上的全渐变着色到白色图标,这种配色方案很受欢迎。

这可能是在图标(和整体)中使用渐变的吸引力 - 有很多不同的方式来使用趋势。您可以添加渐变,但仍然没有看起来像其他东西的项目。

专注于简单着色

webp

图标设计师正在采用与颜色相反的方法,并坚持使用这些小型设计元素的简单,更有限,更基本的调色板。

使用有限的调色板是一个好主意。由于设计太小,太多的颜色或细节会迅速压倒空间并对眼睛造成压力。

您不希望用户必须考虑图标是什么或颜色的含义。限制细节的数量 - 包括精心设计的着色 - 可以使每个单独的图标更容易看到和理解。这对于将以最小尺寸使用的图标最为重要。

一切App风格

webp

图标越来越受欢迎的原因之一是我们已经为几乎所有东西设计了它们。从应用程序图标到用于图标或桌面图标的应用程序样式图标,这种风格几乎无处不在。

应用程式风格的图标几乎都有自己独特的风格。这包括:

方形的形状

圆角边缘

彩色背景(通常是一种颜色)

图标内部的简单形状

图标和背景颜色之间有很多对比

没有文字或字母

厚实,均匀的笔触

webp

线条样式图标不仅很受欢迎,而且粗线条图标特别受欢迎。

这些图标通常用于单色应用,通常在彩色或照片背景上使用白色或黑色。

具有厚实,均匀笔划的图标最常用于自己,例如购物车图标或联系人图标。它们通常不用于图标集合中。

平面图标保持流行

webp

虽然对平面设计的大部分关注已经消失,但图标设计仍然相当平坦(或者至少几乎是平坦的)。

这可能是由于平面设计的超简单特性以及这种外观可以相当容易地与许多其他样式集成的想法。

即使看一下这里展示的一些图标设计示例和趋势,你会发现其中很多都是扁平的。(例如,线型图标几乎总是平的。)

表情符号图标

webp

Emojis几乎已成为他们自己的语言 - 一种更直观的通信形式,并且一直被普遍接受。

图标设计也具有表情符号风格。由于专注于人或动物的头部形状,因此这些图标是可识别的。(上面的星球大战启发的表情符号图标是如何通过图标设计获得乐趣的一个很好的例子。)

这种图标样式可以很好地用于联系页面或在设计中表示人物或角色。

如何设计更好的图标

制作一个好的图标或一组图标不仅仅是跳到图标设计的一些最新趋势。由于图标尺寸小,注重细节和精度是设计过程的重要部分。

对于2018年的图标设计,简单的规则仍然适用。将这些指导方针与上面的一些趋势结合起来,创造出你会喜欢的东西:

从网格开始

用几何构建

创造一个独特的形状

给图标充足的空间

坚持你的品牌颜色

使用一致的divots

设计您需要的最小尺寸

不要装饰

图标设计指南

webp

通过查看图形标准和样式指南来了解“内在”的好方法。每当Apple或Google改变他们的方法时,其他所有人都会如此。部分是因为他们必须和部分因为新风格往往反映了图标设计的时代和趋势。



作者:意派Coolsite360
链接:https://www.jianshu.com/p/e038cbb73e51


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消