2015年图标在网页ui设计中的关键点(包含图标资源和例子)

图标设计很重要,今天分享的这片文章就是来帮您分析图标设计的趋势和要点的,新年马上就要到来,用这篇文章来祝贺大家新年快乐,2015年有一个好的开始!

现代的图标变成了一个业务的入口,它们可以很轻松组织起内容,它们往往都是轻量级的,就算是mp3播放也是如此。iPod的图标就是一个典型的例子,因为这样是一个快速直观的方法来传达信息。

在网页设计领域几乎从图标一出现就开始使用了,这些图标符号,通过使用能被用户普遍接受的图像(如:文件夹、打印机、鼠标、箭头等)这些已经发展成自己的语言。在本篇文章中,我们将分析一些现在网络上的图标设计想法,并且包含一些图标素材和教程合集。

设计风格

那句短语“图标设计”囊括两个设计方向,第一个是主张极简主义,也常被叫做扁平化风格,而另外一个是指通过Photoshop或Illustrator等软件绘制真实感很强的拟物化图标。每个项目对设计都有不同的要求,我们通常从这两个方向去定图标风格。

流行的极简主义风格让全世界大批设计师追随。描边风格图标是IOS7和iOS8的主要风格,其他的手机操作系统也紧跟其后。选择用什么图标都没有对错,只看是否合适。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)flat vs realism website landing page graphics

我认为,该网站的Flat vs Realism是比较这两个方向的最好案例。图标的设计结合了光线、阴影等许多原则。当你想做拟物的图标的时候拟需要考虑纹理和阴影,这些虽然需要大量的工作,但是他们看起来很有意义。

公司品牌

品牌vi设计中图标设计的作用显而易见,但是这是很值得一提的,以为一些优秀的网站往往具有令人难以置信的品牌。图标的设计是一个与客户沟通的好方式。如果公司的品牌标识和吉祥物能给用户留下一个难以忘记的印象,那么这个将会更容易打中用户的心。

你可以为一个品牌做一套专用的图标。由于图标设计具有如此广泛的风格,所以你可以考虑做一套很大的图标合集。如果每个图标都很独特,它必将提升网站的效果,并帮助网站在同类中脱颖而出。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)mail bakery email homepage service icons branding

MailBakery 就是这样一个例子,它使用了大量的图标去展示他们的服务。当您单击每个滑块框下方的图标,新的内容将出现在您眼帘。每个图标与图形的设计风格完全一样,以保持整体的一致性。

也就是说这些图标是专门为这个网站而定制的。当然他们也完全可以使用一套免费的图标,但是免费的图标可能在其他多至20个网站上出现过。如果是这样,你的网站的独特性和潜在的品牌机会将丢失。

 因此,我们建议有抱负的设计师要学习如何制作外观类的图标界面,这将让你的专业发展到另一个层次。

导航链接

在过去图标很多时候被当作导航文字。也就是说用图标来区分链接或按钮。现在的Facebook navigation导航也遵循这个原则,这样使得很多看上去差不多的链接能够快速被区分。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)facebook nav links examples ui

虽然你不会这样用,但是这确实是一个帮助用户理解内容的好方式。下拉菜单式一个不错的使用场景,以为用户往往会集中精力看下拉菜单展现出来的内容,但是如果下拉菜单的内容太长,使用图标会大大提高可读性。

定义内容识别度

网页设计中使用图标的最大原因是帮助用户理解内容。图标很容易表达一个明确的信息视觉线索。它们可以让文字篇幅很长的内容页面获得视觉的平衡。图标设计中最重要的一“课”是学会如何用一个单一的图标去表达一个明确的信息。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)github education landing page handdrawn icons

 

我最喜欢的这种效果的例子可以在GitHub的教育网页上找到。标题部分使用GitHub的Octocat 创造与黑板和粉笔字的感觉。当你向下滚动,每个模块都适用了相应的符合模块风格的图标。

请注意,所有的图标都包含手绘效果,而且他们都很搭。每个图标即有个性也能让整个页面效果统一。但更重要的是,图标帮助直观地定义内容。文字能直观的传递消息,图标则帮助用户理解。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)glazed and infused doughnut bakery website

你也可以在Glazed & Infused的首页上看到相识的效果。小块文字结合图标去解释他们的餐饮、咖啡、礼品等。这些梦幻般的图标是很必要的。他们会迅速引起用户的注意,并提供更深层次的含义。

矢量背景

从重复平铺背景到矢量图形,你可以有很多选择去制作网页背景。如今的网站背景不仅仅是简单的循环纹理图形了,现在发挥空间更大了,现在我们可以通过矢量图形在背景上创建整改让人震撼的场景。

矢量图形很好用,但是却很难创造出逼真的效果。矢量图形不支持复杂的图层样式,需要不少的努力才能获取这些诀窍,但是你学习的过程中将会觉得有趣而且充实。

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)bota iusti background vector artwork website

Bota Iusti是一个矢量图形的典型案例。页面本身是相应式的,大小随着窗口的变化而变化。矢量艺术的最大的好处是你可以让它在任何屏幕上完美显示,而且显得高档。

设计教程和资源

提高自己设计图标水平的最佳方式就是看在线教程。要精通这项能力没有快捷方式可以走。所以你能做的就是尽你的所能练习和研究。

尽管图标设计是一个非常大的学问,但是用这些简单的例子让你们开始,虽然时间总是需要挤,但是如果你真的想提高,就从现在开始吧!

16×16 px Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)16 pixel icons howto design

Weather Line Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)weather line icons vector design tutorial

Flat Social Icon

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)flat vector social icons tutorial

Tab Bar Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)create ios7 flat tab bar icons

Bat Icon

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)bat icon vector tutorial illustrator

Gem Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)flat precious gem tutorial illustrator

Water Pistol

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)water pistol illustration tutorial

Mail Alert

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)envelope mail alert icon tutorial vector

Notebook

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)yellow notepad notebook icon illustrator

Almost Flat

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)almost flat illustrator glossy icons howto

免费图标

以下是一些免费的图标资源,可以帮助你更快进入角色。

40 Flat Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)forty free flat icons iconset

Mini Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)mini pixel icons pack download

Colorful Iconset

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)free colorful bright icons freebie

Simple Flat

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)basic single flat iconset download

Sport & Fitness

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)100 sport fitness icons freebie

Chat & Email

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)email chat icons white freebie simple

Atitel Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)atitel icons green line simplistic

Tab Bar Icons

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)freebie pack ios tabbar icons psd

Simple Lines

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)simple white line icons flat set2

Flatified

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)flatified iconset psd freebie download

Web Design Iconset

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)web design iconset

iOS Settings Icon

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)sketch app freebie settings ios

Colorful Switch

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)colorful purple switch psd freebie

Synthesizer

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)flashy glossy synthesizer icon psd freebie

Book App Icon

2015年图标在网页ui设计中的趋势分析(包含图标资源和例子)mac osx book app icon psd freebie

 

 

原文:http://webdesignledger.com/trends-2/icons-in-web-design-tips-resources-examples(云瑞译

分享到:

常见问题

  • 1、为什么PPT、APP和网页等模版里没有示例图片?
    因为这些素材只是模版,一般不包含里面的示例图片,示例图片是需要另外购买的;
  • 2、百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
  • 3、解压时提示损坏,是什么原因?
    可能没下载完,如果打不开请确定您下载的文件和百度网盘上一模一样大,如果您用的是MAC,下载下来的文件会比网上的大一些,如果文件一样大,还不能打开,请在底部留言;
  • 4、PS动作文件如何安装和使用?
    1.双击安装好所有的笔刷(.abr)、图案(.pat)和动作(.atn)等文件;
    2.选择分辨率在3000PX*3000PX,72dpi左右的高清素材图;
    3.使用英文版的Photoshop (PS中文变英文的办法 https://www.yrucd.com/74023.html);
    4.用PS打开素材,并且保证素材在background图层上(将素材合并到background上);
    5.新建空白图层,名为brush;
    6.在brush图层上用画笔覆盖素材主体物(该图层一般命名为brush,少量资源命名为profactions);
    7.在动作面板执行该动作,实现效果;
  • 5、素材更新频率和质量问题
    目前云瑞素材的日更新量增加了不少,所以多了很多不同种类的素材,之所以发这些素材,是为了满足更多人的需求,素材种类多了,就很难保证所有素材每一个人都喜欢,但品质我们还是会精选,也会根据用户数据反馈来调整更新策略;另外,后续也会和今日头条一样,做智能推荐,推荐你喜欢的内容,这样你不点的素材就很难再看到了。
  • 6、素材能商用么?
    素材仅供个人学习使用。

评价交流

公众号
云瑞公众号