网站设计中的那些图标设计

在您的网站设计作品集中,图标可能是最重要的设计例子之一。今天我们就来聊一下网站设计中的图标设计,看看这些具有启发性的例子,希望能对您在网站设计中能有所帮助。

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

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

手绘图标

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

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

带有深度的图标

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

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

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

具有悬浮状态的图标

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

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

简化的图标

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

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

线条图标与颜色形状

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

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

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

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

抽象的图标形状

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

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

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

原色

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

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

带有背景图标的图标

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

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

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

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

两色图标

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

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

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

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

图标“速记”

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

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

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

色泽鲜艳

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

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

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

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

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

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

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

图标标识

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

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

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

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

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

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

线条风格图标设计

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

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

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

简单元素和表示

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

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

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

带有渐变的图标

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

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

注重简单的着色

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

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

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

所有应用程序风格

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

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

方形

圆边

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

图标内的简单形状

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

没有文字或文字

厚而均匀的笔触

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

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

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

平面图标仍然很受欢迎

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

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

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

Emoji图标

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

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

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

如何设计更好的图标

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

从网格开始

用几何构造

创造独特的形状

给图标留出足够的空间

坚持您的品牌色彩

使用一致的草皮

设计为您所需的最小尺寸

不要装饰

图标设计准则

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

您可以在此处找到指南:

苹果应用程序图标

Android应用程式图示

材料设计产品图标

材料设计系统图标

结论

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

THE END
1.IconFont图标第二步:加入通用css代码(引入一次就行): .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 第三步:挑选相应图标并获取类名,应用于页面:<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg> http://sysaq.neu.edu.cn/sfw_safety/res/cms/style/iconfont/demo_symbol.html
2.ico图标是什么意思?ico图标怎么生成?如何在线制作ico图标?ico图标是什么意思?ico图标怎么生成?如何在线制作ico图标? 本文介绍了favicon.ico图标的作用,如何使用在线工具生成和指定尺寸的图标,以及如何将其安装在网站上以提升识别度。 摘要由CSDN通过智能技术生成 我们在浏览器浏览网页时或收藏某网页时,经常看到有些网页标题前面有一个图标,有些是logo,有些是其他图标,其实这种https://blog.csdn.net/boke112/article/details/136263956
3.图标设计网站,让你的界面充满创意和个性图标作为界面设计的重要组成部分,不仅能够提升用户体验,还能够传达品牌形象和个人风格。而在图标设计方面,很多设计师和创意人才都面临着找不到合适素材的困扰。因此,图标设计网站的出现,不仅为设计师提供了丰富的素材资源,还为创意人才展示个人才华和创意才能提供了平台。https://www.300.cn/xxzx/3601.html
4.网站设计图标网站设计图标logo图案网站建设 篇八:大模型助力图标设计,零基础也能轻松搞定作者:科技Ins在我的个人网站建设中,有一些灵感是来自AI的支持,例如我的域名和logo的设计,都有AI大模型参与其中。今天给大家介绍下我是如何使用微软的Copilot进行图标设计的,之前应该都叫它New Bing,最近更名为了Copilot。设计logo我把自己的网站名字给了大模型https://d2film.com/nqt6qvpl.html
5.LOGO免费设计在线生成LOGO设计免费生成器拥有100万图标素材的LOGO设计在线生成神器!标点狗帮企业在线生成公司LOGO设计,标志设计,商标设计及品牌VI.1分钟自己设计个性标志,可免费下载!https://www.logoko.com.cn/
6.logo免费设计在线生成免费logo设计字体商标标志在线制作logo设计网为您提供上百种可商用字体,精美图标,经典模板,不论您是专业的设计师还是普通用户,均可在1分钟能获得自己满意的logo。https://www.shejilogo.com/
7.免费商标设计LOGO免费设计在线生成专注logo商标设计和知识产权保护服务6年! 为企业提供logo设计,商标注册查询以及免费的logo设计在线制作服务.注册品牌商标,就上LOGO世界!商标设计与注册一站式搞定!https://www.logosj.com/
8.设计师必备的34个工具网站,按工作流程整理好了虎课网是一个案例式短视频设计教学网站,在国内平台内自学专业度较高。 国内很多设计大咖在这里开课,行业影响力大,教程非常丰课程呈现为点状,有些教程只有一个案例,适合按需学习。每天可以免费看一集视频,开通全站VIP会员则可无限观看。 但是需要注意,虎课网没有在线笔记,课程介绍不是很明确,课程内容主要由合作老师自https://www.digitaling.com/articles/372365.html
9.设计图标哪里找?分享13个ICO下载网站———创新互联高端网站建设对于设计师来讲,不管是平面设计还是网站设计,都需要用到图标,有现成的图标选择可以让设计进行的事半功倍。以下分享几个下载ICO的网站,希望可以给大家提供帮助。 一、阿里巴巴图标库http://www.iconfont.cn/ 推荐指数:★★★ 1.界面简洁,支持中英文搜索,完全免费; 2.可以https://www.cdcxhl.com/news/226422.html
10.免费logo设计在线制作公司logo在线设计一键生成器万动力,为企业,公司,个人,店铺,品牌VI,网站提供商标自动在线logo生成,文字图标图片设计,标志艺术字体设计,字母头像制作,姓名字logo设计,创意loog制作,英文logo,无水印透明logo,可自己下载源文件.https://www.wandongli.com/
11.我收藏的这100+个”杀手级“网站,你用过几个?超过4100个用于网页设计的像素完美的图标,免费和开源的图标,旨在使你的网站或应用程序具有吸引力,视觉上一致,简单美观。 18、css.gg 网址:css.gg 开源的CSS、SVG和Figma UI图标,有SVG Sprite、styled-components、NPM和API版本。 19、fontastic 网址:fontastic https://developer.aliyun.com/article/1248577
12.有哪些免费的,小白也可以快速上手的在线图片设计网站?三、懒设计 Fotor在线设计工具主要是服务新媒体人的在线设计网站,网站提供了超多素材,可以快速完成公众https://www.zhihu.com/question/291013051
13.百万年薪和你的差距,可能都在这些私藏的PPT资源网站里3.Iconfont阿里巴巴矢量图标库(点击进入) 阿里旗下的矢量图标下载、交流平台,全部可以免费下载。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,网站支持在线搜索。 在下载页面,可以选择三种不同的图标格式:SVG、AI、PNG,其中,“AI”为源文件格式,可以随意更改。同时,在详情页面还可以进行实时的颜色https://post.m.smzdm.com/p/720059/
14.Canva可画在线设计协作平台平面设计作图软件在线设计协作平台Canva可画提供了海量的设计模板,涵盖海报、简历、名片、Logo、PPT、手抄报、二维码、Banner等数十种平面设计场景,更有千款中英文字体及千万张正版图片素材可供使用。精彩设计,随时随地!https://www.canva.cn/
15.免费logo在线制作,logo设计,logo在线生成,字体logo设计,U钙网U钙网遵循标志logo设计理念的艺术规律,创造性地探求恰当的艺术表现形式和手法,使所设计的标志logo具有高度的整体美感、获得最佳视觉效果。 最新原创设计更多 免费LOGO设计案例 最新图标字母图标动物图标厨师美食房屋建筑植物图标龙凤神兽商标设计文字设计欧式花纹 https://www.uugai.com/
16.豆瓣前言2024,依旧是不断摆烂,没有目标浑浑噩噩的一年,生活中和观影上都没有取得任何成就,但却是在时间的催促下相继迎来了转折点,在同学们全都忙着实习、找工作、毕业论文的时候,我还闲的去参加了北影和上影,在入职前的最后一点空隙,还去了海南看了不少新片,对比国内其他几个电影节,海南显得相对冷清,观众更少,关注https://www.douban.com/
17.FeatherFeather是一个免费的在线图标下载网站。它提供了大量的开源免费图标,每个图标都设计在24×24的像素网格上,强调简单、一致和灵活。所有图标都基于 MIT License 开源协议,这些图标适用于各种个人或商业用途。 Feather上的图标在功能、一致性和简约设计上都具有相同特性,因此非常适合在开发项目中使用。无论是设计师还是开发https://pidoutv.com/sites/14225.html
18.设计神器AllTheFreeStock!高质量可在线编辑素材资源网站高质量可在线编辑素材资源网站 所以今天神器小分队送给大家一个超级新年大礼包——免费图片素材、样机、视频素材、音乐素材、配色、网站模板、字体、图标、邮箱模板…这么多的设计素材,全在这一个网站~ 快来跟着西西一起看下吧! 首先,进入首页是酱婶的…https://uiiiuiii.com/?p=128080
19.千图网免费在线设计图片素材网站千图网(www.58pic.com) 是专注正版商用图片素材在线设计与下载的网站!提供矢量图素材、背景图片、psd素材、字体模板、设计素材、PPT模板、视频素材、插画绘画、海报设计模板、网站设计素材等下载服务。https://www.58pic.com/
20.U钙网免费logo在线制作官网,提供智能AI商标logo设计服务的在线专业专注:平台拥有十几年的专业经验,专注于智能LOGO设计,服务的用户已超过千万。 艺术性与实用性:U钙网遵循标志设计的艺术规律,探求恰当的艺术表现形式和手法,确保设计出的LOGO具有高度的整体美感和最佳视觉效果。 广泛的设计案例:网站提供多种设计案例,包括最新图标、字母图标、动物图标、厨师美食、房屋建筑、植物图标https://www.8kmm.com/sites/3703.html
21.创客贴平面设计作图神器免费设计模板创客贴,极简好用的平面设计作图软件,在线图片编辑器,免费使用.提供免费设计模板,有海报、名片、公众号图片、PPT、邀请函等65个场景模板,一键搞定设计印刷https://www.chuangkit.com/
22.推荐11个超好用的在线做图网站!就可以进入网站提供的电商专栏 挑选你喜欢的精美创意模板 找到后直接在网站就可以随意编辑 变成自己想要的图片 网址:www.gaoding.com 02 ARKie智能设计助手 ARKie是一款号称10秒就能设计海量海报 ,而且是秒级自动生成作品的设计平台。 现在的多大在线设计工具都是提供很多精美模板,然后自己可以在模板上修改文字替换图片,https://www.niaogebiji.com/article-35895-1.html
23.在线图标设计在线图标素材在线图标图片觅知网为您找到106个原创在线图标设计图片,包括在线图标图片,在线图标素材,在线图标海报,在线图标背景,在线图标模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于在线图标素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、Phttps://www.51miz.com/so-sucai/3729774.html
24.10个css在线样式设计网站1、Neumorphism 地址:https://neumorphism.io/ 2、带有渐变的图标 地址:https://www.iconshock.com/svg-icons/ 3、Interactions 地址:https://easings.co/ 4、大型数据库 地址:https://bansal.io/pattern-css 5、自定义形状分隔线 地址:https://www.shapedivider.app/ https://www.jianshu.com/p/8ab5640641c5
25.app图标在线制作图怪兽app图标在线制作专题为您精选app图标在线制作模板,包含app图标在线制作的图片素材等可根据您的需求选择,不同图片尺寸进行在线替换文字制作,即可一键生成一张正版可商用模板图片免费下载。https://m.818ps.com/shejiimg/9181.html
26.觅元素免费PNG素材觅元素专注于提供高质量版权素材图片免费下载的网站,提供优质png素材、高清背景素材、图片素材、设计素材,找高质量版权素材就来觅元素.https://www.51yuansu.com/
27.十大好用的LOGO设计网站推荐logo在线设计制作网站有哪些→MAIGOO十大logo设计网站 Smashinglogo(网址:https://smashinglogo.com/en/logo-maker/) 标小智LOGO神器(网址:https://link.zhihu.com/) Squarespace Logo(网址:https://logo.squarespace.com/) 小威logo(网址:http://logo.xwzn.cn/) Logo Type Maker(网址:https://logotypemaker.com/)https://www.maigoo.com/top/442502.html