现代图标已经成为每一个数字界面的主题。它们有助于识别内容，直至MP3时代都不被重视举足轻重。直等到ipods······至于ipod有图标的使用,因为他们是一个快速的视觉传递信息的方法。
在我记忆中网页设计领域里一直都有使用图标。这些形象化的图标通过广泛的使用已经形成了自己的语言了(例如文件夹、打印机、鼠标、箭头等)在本指南,我想分享一些关于现代标志设计的想法。我同样提供一个小的可免费下载的高质量图标设计资源库和相关教程。
设计风格
“图标设计”一词包含广泛的想法。一边是非常简单又小的图标,通常称为扁平设计风格。另一边是通过像用photoshop和Illustrator软件处理过的完整写实主义风格。每个项目都有不同的图形需要而图标风格通常介于这些需要的范围内。
流行的简约设计风格创造了许多世界各地的设计师。线性图标已成为“iOS7”和“iOS8”的主要设计风格其他智能手机操作系统也紧随其后。当提到图标设计设计时没有对与错——只是多种选择而已。
我认为网站无论是扁平还是写实都是很好的工作。图标设计包含了许多艺术原理例如深度、比例、光线等等。当你更倾向于写实的风格时你则需要学习如何创建纹理和阴影,以便看起来很真实。这需要大量的工作,却非常有益。
企业品牌设计
品牌设计可能是显而易见的,但值得一提的是,由于大部分优秀的网站常常有令人难忘的品牌设计。图标设计是与每个浏览者交流思想的方式。当公司品牌化产生的附属品如吉祥物、标志、图形都应该让每个浏览者深深难忘。
你也可以做一系列的不同图标用于单个品牌效应。自从图标设计有如此广泛的程度样式,你可以考虑做大量相同风格的图标。只要每个图标是相对独特的风格肯定会提高网站并帮助它在其他类似的布局中脱颖而出。
MailBakery就是这样一个例子,使用一个大的图形放在主页上体现他们的服务。当你点击每个图标时下方就有个滑块框,新内容将以动画形式呈现。每个图标与图形的设计完全在相同一致的水平。
这意味着所有这些图形都是专门为这个网站定制的。使用一套免费的预制图标当然没有错——但这些免费图标可以已经在其他20个网站中使用了。所以品牌独特性和潜在的机会被移去了。
因此,我一直建议有抱负的图标设计师学会制作工艺性的用户界面图标。这个项目将会跟随自己和客户很长一段时间。
导航链接
在过去，图标通常用于显示导航的内容。也就是说,图标帮助定义链接或按钮相关的网站或GUI。现代Facebook导航遵循同样的原则,方便浏览类似的链接列表。
尽管你可能不会使用这种技术。但也值得理解其优点。下拉链接通常使用良好,因为用户是看每个下拉菜单。但当你有一个大量的水平或垂直显示与十几个链接在一起，那么图标帮助描绘每个链接。
定义内容视觉
在网站设计中使用页内图标的最大的原因是帮助定义现有内容。图标是一个视觉线索,正确组织并传递的非常明确的信号。它们能平衡文字布局。学习图标设计最重要的一课是如何根据单个的图形传达明确的信息。
我最喜欢这种效果的例子,可以在GitHub Education页上找到。顶部使用GitHub Octocat的吉祥物与涂鸦背景创建了一中科学/教育感觉。当你向下滚动页面时每页的主要板块都使用一系列的图标来帮助说明这一点。
请注意,所有的图标都有手绘效果,它们看起来相互匹配。每个图标连接到更大的整体,从某种意义上提供创建了这一系列图标(确实如此)。但更重要的是,图标使内容更加形象化。文本提供足够的信息,——图标只是有助于阐明该消息。
在Glazed & Infused的主页上可以看到同样的效果。少的文本描述与合适的图片说明他们的餐饮、咖啡和礼物卡。这些奇妙的图标当然不是必需的,但他们确实迅速地吸引我的注意力,提供更深层次的内容含义。
矢量背景
从重复平铺的背景到矢量对象,有很多你可以用几个简单的矢量形状。网站背景也变得更加广泛不仅仅是简单的纹理。现在可以在背景中创建整个场景仅仅通过矢量的插图。
矢量图形往往更容易伸缩但很难创造写实的效果。矢量图形并不总是支持复杂的图层样式，你需要玩弄一段时间才能熟悉掌握这些形状。但是一旦你学习了这个过程就会变得很有趣,很充实。
Bota Iusti为了突出办公室设置的特点组合布局创建矢量图形。页面本身是纯粹的响应式并且背景随着页面调整尺寸。创建矢量艺术的好处是在任何分辨率下看起来的效果都很好。在Photoshop中可以创建矢量对象但是图层样式和过滤镜并不总是可调整的。
设计教程
提高图标设计技术的最好方法是跟随网上教程练习。任何事情都没有快速达到高水准的捷径。你所能做的就是研究那些更好的作品,尽你最大的努力继续前进并勤奋练习。
虽然图标设计是一个广泛的术语，当我已经准备了少量的教程以便你开始复习。看一看这些例子,看他们是否可以融入你的日常工作。我们总是被安排处理时间紧急的事务,但提高自己也一样迫切,即使争分夺秒。我说最好是本周开始,以免下周我们已经改变。
16×16 px Icons
Weather Line Icons
Flat Social Icon
Tab Bar Icons
Bat Icon
Gem Icons
Water Pistol
Mail Alert
Notebook
Almost Flat
免费图标
随着在线免费教程你可以学到很多东西。设计师们花时间在线发布他们的成果,因为它可以促进他们的工作,并帮助设计界。学习使用类似Photoshop的软件是第一步。然后一旦你掌握了基本知识，你可以分析学习他们是如何设置的并结合适应自己的方法。
下面我载入了15组免费图标为网页设计。每个免费赠品都有PSD和AI文件，同样也有类似的EPS或PNG格式文件。欢迎你来疯狂的下载这些免费(或全部)。我相信这些图标能充分证明这些设计师的水准并是方便有用的学习工具。
40 Flat Icons
Mini Icons
Colorful Iconset
Simple Flat
Sport & Fitness
Chat & Email
Atitel Icons
Tab Bar Icons
Simple Lines
Flatified
Web Design Iconset
iOS Settings Icon
Colorful Switch
Synthesizer
Book App Icon
