2020年网页界面设计中的图标icon定制新趋势和热点

时间：2023-09-26 22:24:02 | 来源：网站运营

时间：2023-09-26 22:24:02 来源：网站运营

2020年网页界面设计中的图标icon定制新趋势和热点：在您的网站设计作品集中，图标可能是最重要的设计例子之一。今天我们就来聊一下网站设计中的图标设计，看看这些具有启发性的例子，希望能对您在网站设计中能有所帮助。





图标元素几乎随处可见，但有时是事后才想到的。事实并非如此。出色的图标设计可以与众不同，并为项目增加技巧和才华。




让我们一起来看看2020年网站设计中的那些图标设计的新趋势和热点。




手绘图标













手绘图标不仅是一种时尚的风格，而且它们还为设计项目创造了一种更加亲密、真实的感觉。这些图标的样式千变万化，从简单的形状和线条到全彩图标。




手绘风格最好的部分是您不需要自己画，有很多可用的手绘图标集，所以您可以找到合适的风格，即使您没有感觉过于艺术。




带有深度的图标













在图标设计中创造深度有些棘手，但更多的设计师正在使用这种趋势与超大的图标集。使用阴影和几何体来创建正确的形状组合，并添加一个几乎是三维的效果。




这些风格是相当有趣的，有时使用的趋势线索来来去去，如长阴影。




这些图标倾向于更复杂的一面，最适合在图标相当大或与其他元素结合使用。




具有悬浮状态的图标













说到网站设计中的图标，最流行的技术之一是将一组图标配对，以创建悬浮状态或动画。这可能包括使用一个带颜色填充的图标或者在图标周围创建一个按钮。




如果您计划对图标使用某种悬停状态，那么在图标设计阶段考虑这一点是很重要的。并不是所有的图标或图标集都针对这种技术进行了优化，寻找一个完整的图标集的变化，使创建悬停状态更容易。




这里不要弄得太复杂，一个精心设计的图标可能会在悬停状态下丢失。这对简单的图标对最有效。




简化的图标













甚至以前具有复杂图标样式的网站和设计也正在转向更加简化和简化的图标。




它们的优点是每个图标都描绘了一个可识别的东西，但表示并不总是100%的字面意思。图标设计者可以随意使用形状或线条来创建图标形状，这些形状是图标所代表的项目的最简单的版本。




线条图标与颜色形状













线条图标总是一个受欢迎的选择，这要归功于它的多用途风格，与几乎任何其他设计元素看起来都很好。这一趋势通过在线条图标后面的圆形或方形的流行颜色增加了一点视觉趣味。




颜色形状可能会填充线条图标设计的一部分，但更多时候它只是漂浮在背景中。这个小小的视觉趣味可以把一个图标组合在一起，强调一个品牌的颜色，或者只是让一个老网站的线条图标焕然一新。




图标设计中棘手的部分是颜色形状元素的位置和大小，如果它太大或颜色太鲜艳，它会从图标上消失。如果形状太小，您就有可能让它看起来像一个错误。




虽然没有完美的大小，但大多数使用这种趋势的图标都将颜色形状保持在整个图标大小的四分之一左右。




抽象的图标形状













不确定什么图标代表您的内容？一个抽象的图标形状可能就是答案。




越来越多的设计师开始为网站设计抽象风格的图标。这种风格，以及总体趋势，的好处是抽象风格创造了一种奇思妙想的感觉，与一些更大的总体设计趋势相匹配。




使用抽象图形的关键是确保您没有错误地复制一些东西，而且图标真的是抽象的。（不要尝试创建与徽标相似的图标，例如，它们可能看起来像错误。）对于真正匹配的东西，使用相同的调色板的图标和品牌材料。




原色













原色调色板是一种大胆、明亮、吸引人的小设计元素的选择。




这个图标设计趋势使用红色、蓝色、绿色和黄色（以及紫色和橙色）来创建一组基本的颜色规则。让这种风格奏效的是对颜色的关注，以吸引人们对屏幕上的小元素的注意。三原色也将从所有的“材料”亮色中脱颖而出，已经主导调色板。




使用渐变（或模拟渐变，如上面的例子）来软化设计，使调色板看起来不太简单。使用原色的时候不要太过火。它们可能会让人不知所措。考虑柔和的主色调或单色方案。




带有背景图标的图标













一些流行图标有自己的图标。




对于图标的更精细的使用，我们在这里不采用小图标，图标可以被堆叠和分层来创造更多的艺术元素。




这种趋势经常使用颜色和阴影来区分主要焦点图标和背景图标。主图标通常是全彩色或填充图标。背景图标几乎总是线条风格，可能有浅色调色板。




您可以使用许多预先制作的图标工具包以不同的方式混合和匹配图标来创建这种效果。使用类似主题的图标来创造深度和视觉兴趣，并坚持使用少数元素来避免场景过于繁忙。不要害怕使用和重复使用元素，在背景和前景中使用相同的图标（交替线和填充）。




两色图标













另一个图标设计趋势，建立在流行的线图标风格是创建双色元素。




双色图标可以建立在您现有的调色板或品牌的颜色上，或者结合几乎任何其他颜色对。当使用图标趋势进行设计时，寻找能从您计划使用的背景中脱颖而出的颜色对。




当涉及到设计时，为大多数图标选择一个基本颜色。使用辅助颜色来强调图标的元素。（设计的70%到80%使用原色，其余部分使用副色。）




这在图标设计中创建了一个重点，将有助于把眼睛吸引到设计元素，以及周围的内容。




图标“速记”













如果您浏览任何一个应用程序商店，您会看到很多常见的标记，邮件应用程序的信封，生产力应用程序的检查，安全应用程序的锁。




这个图标提供了一个快速的可视信息，告诉用户这个应用程序在做什么。同样的简写几乎适用于所有的图标设计。当设计师们尝试用他们自己风格的图标时，他们倾向于使用图标来表达特定的含义。




这是一件好事。一个图标应该容易看到和理解一眼。图标应该帮助用户知道他们应该做什么，以及他们应该如何与设计交互。这种常见的图标速记法是如何做到这一点的一个很好的演变。




色泽鲜艳













亮色的选择在设计的各个方面都很重要，这与图标没有区别。一个明亮的颜色是一个诱人的方式来吸引眼球的图标。




在图标设计趋势中，颜色有几种不同的使用方式：

作为带有白色或黑色线条样式图标的背景

对于具有更逼真的外观的全彩色图标元素

适用于具有更平整，渐变或超亮设计的图标元素




明亮家族中流行的颜色包括黄色、蓝色、绿色和紫色。这些颜色往往是光明的一面，为一组图标设计三到五种颜色的调色板是很流行的。




不知道从哪里开始？材料面板显示的颜色是一个很大的部分，如果颜色图标的设计趋势。




图标标识













注意有多少商标上有图标，一旦您开始思考这个问题，在logo设计中看不到所有的小图标将是很困难的。




商标中的图标的好处在于它与品牌名称配合得很好，而且经过一段时间，品牌资产可以独立存在。想想上面的例子，Spotify。尽管音乐提供商的存在时间并不长（在品牌范围内），但这三条线构成的圆圈是高度可识别的。




图标工作的颜色和没有，一个强大的图标的关键，可以独立或与字母。这种通用性使得我们很容易理解为什么图标是logo设计中的流行元素。




圈













圆形是最和谐的形状之一，说到图标设计，它们相当受欢迎。从包含在球体中的图标到对象中的圆圈，使用圆圈创建一个设计标记可以为用户建立正确的感觉。




圆圈在图标设计中的部分影响可能会与谷歌在材料设计方面提出的一些指导原则相联系，所有这些圆形按钮都非常适合在手机上轻敲，同样的理念也适用于图标设计。（只要想想图标是可触摸或可点击元素的频率就知道了。）




关于这个图标趋势的一个小技巧是在所有使用其他形状的地方网格化圆圈。应用程序的图标往往是方形的；社交媒体的个人资料是圆形的（和正方形的）。




在创建圆形图标时，请确保图标设计的内容在小尺寸时易于理解，因为您必须经常缩小它以适应其他位置。




线条风格图标设计













线条风格的图标似乎是永远不会过时的趋势。




部分原因是这种图标风格可以在任何背景类型的任何地方工作。由于这种通用性，许多流行的可下载图标包通常包括线条风格的设计。




在上面的例子中很容易看出这一点，每个图标都很容易看到和理解在实际任何大小。




简单元素和表示













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




结果是一个相当巧妙的设计，使用户看起来。




在上面使用食物图标的例子中，每个图标都使用图标中相同的圆圈线。这可以是图标本身的整体形状，也可以是图标设计的一部分。这个形状将项目中的每个图标彼此连接起来。




带有渐变的图标













渐变色趋势已经成为2019年的主导主题之一，也是图标设计的一个因素。从简单的线条线条的渐变（如上面的例子）到全渐变着色到渐变背景上的白色图标，这种配色方案很流行。




这可能就是在图标中使用渐变的吸引力所在（总体而言），有很多不同的方式来使用这一趋势。您可以添加一个渐变，但仍然没有一个项目看起来像其他的东西。




注重简单的着色













图标设计师对颜色也采取了相反的方法，坚持使用简单的，更有限的，更基本的调色板来处理这些小的设计元素。




使用有限的调色板是个好主意。在这么小的设计中，过多的色彩和细节会很快淹没空间，对眼睛造成压力。




您不希望用户不得不去思考图标是什么或者颜色意味着什么。限制细节的数量-包括精心着色-可以使每个单独的图标更容易看到和理解。这对于最小尺寸使用的图标来说是最重要的。




所有应用程序风格







图标如此受欢迎的原因之一是我们已经开始为几乎所有的东西设计图标了。从应用程序图标到favicon或桌面图标的应用程序风格的图标，这种风格几乎无处不在。




应用程序风格的图标有自己独特的风格。这包括：

方形

圆边

彩色背景（通常是一种颜色）

图标内的简单形状

图标和背景颜色之间的对比强烈

没有文字或文字




厚而均匀的笔触













不仅线条风格的图标很流行，而且粗线条笔画的图标尤其流行。




这些图标通常是为单色应用程序设计的，通常在彩色或照片背景上以白色或黑色使用。




粗的、均匀的笔画的图标最常单独使用，比如购物车图标或联系人图标。它们并不经常用于图标集合中。




平面图标仍然很受欢迎













虽然平面设计的硬焦点已经消失，图标设计仍然是相当平坦（或至少几乎平坦）。




这可能是由于超级简单的性质的平面设计和想法，这一外观可以集成其他风格相当容易。




甚至看看这里的图标设计示例和趋势，您会发现很多都是扁平的。（例如，线条风格的图标几乎都是平面的。）




Emoji图标













表情符号几乎已经成为了他们自己的语言，一种越来越被普遍接受的更视觉化的交流方式。




图标设计也呈现出一种表情符号风格。这些图标是可识别的，因为一个人或生物的头部形状的焦点。（上面这些受《星球大战》启发的表情符号是如何享受图标设计乐趣的好例子。）




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




如何设计更好的图标













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




在2019年，简单的规则仍然适用于图标设计。把这些指导方针和上面的一些趋势想法结合起来，创造出您会喜欢的东西：

从网格开始

用几何构造

创造独特的形状

给图标留出足够的空间

坚持您的品牌色彩

使用一致的草皮

设计为您所需的最小尺寸

不要装饰




图标设计准则




跟上潮流的一个好方法是看一下图形标准和样式指南，每一次苹果或谷歌改变他们的方法，其他公司也会改变。部分原因是他们不得不这么做，部分原因是新的风格往往反映了图标设计的时代和趋势。




您可以在此处找到指南：

苹果应用程序图标

Android应用程式图示

材料设计产品图标

材料设计系统图标




结论




图标是一个有用的设计工具，从应用程序图标到网站设计标记，从图标到可以用于logo或整个设计项目的凹痕，图标都是一个永久存在的标记。




方法图标设计在相同的方式，您会几乎任何其他项目，但真正考虑简单和大小。图标是用来快速查看的，通常很小。这对设计有很大的影响。