ICON

徐小马：在互联网产品的设计工作中，无论是参考、拼稿还是搭建中低保真原型，设计师时时刻刻都会用到图标，然而，如果不对不断收集或制作的图标加以管理，那么在查找使用的时候会非常低效。为了解决这个问题，笔者给大家推荐一款图标管理工具 Nucleo。 使用 Nucleo 里的图标 Nucleo 中最大的图标资源是由其团队自己设计的，超过23000个图标，主题丰富，比如体育、节日、旗帜等。在视觉上分为三种样式…

编者按：Icon8 是一个专注于图标设计的团队，流行、规范、迎合需求的图标是他们一直在设计的东西，勤奋、坚持和协作是这个团队最令人侧目的品质。5年绘制了超过3万个图标，这里面不仅仅有实实在在的产品，而且拥有经验与思考~ 每天坚持不辍地画图标连续5年，我们所得到的不仅仅是30000个图标而已。这5年时间里，我们借助图标重新认识了这个世界，明白了人性，也懂得了更多的知识和趋势。图标并不仅仅是草稿、PS…

@P大点S微博 ：今天给大家带来一个调节旋纽的图标教程，与往常一样，依旧是图层样式的应用为主，源文件已打包，一起来练个手！ 源文件打包：http://pan.baidu.com 我们的最终效果： 新建一个渐变调整层，做一个45度的从 #a1a5ae 到 #eef2f3 的线性渐变。 光是渐变背景，感觉差了点什么，添加点质感吧。复制一层渐变图层，转智能对象，添加一个杂色。 执行“滤镜—风格化—浮雕效…

编者按：今天的AI教程比较考验大家的耐心，但是绘制一套完整的图标和一个图标的收获绝对大不一样，这篇教程提到很多AI的实用技巧，设置图标的齿轮怎么画才方便？活动图标的渐变如何变得有质感？练个手你就知道了！ 图标展示： 1. Apple Watch 图标准则 Apple Watch 的图标被设计成与其他iOS图标非常相似的新潮的扁平化风格，一个引人注目的特定特征：图标是圆形的。 你可以下载一个非常漂亮…

新版Instagram 的UI去掉了图标下面的文字，但去掉文字的图标真的能带来更好的用户体验么？今天这篇好文通过一个简单的小实验（附测试网址），帮这个一直争议不休的话题盖棺定论，顺便聊聊图标的作用以及未来图标的发展，干货丰富，建议阅读。 作为一名用户体验行业的从业者，经常会碰到这样的情景：当需要向客户，同事，或朋友展示某个用户体验的概念时，比起在情感层面引发共鸣，更重要的是使对方快速准确的明了概念…

戴均开：图标在页面设计中被广泛使用，图标设计的好不好、图标应用效果如何，是设计师非常关心的问题。本文作者提出从发现性、理解性、预测性、吸引力这4个方面来评价图标，也为图标设计构思提供了一个方向。 引言 设计师经常使用图标来节省页面空间、提高用户识别速度。随着像智能手机、可穿戴设备等这些小屏设备越来越流行，图标的使用也更多了。但是，这些图标是否可用？唯一的方法就是对这些图标进行用户测试。 如何进行图…

编者按：六月天变化莫测，今天带同学们来撸一发天气图标，包括彩虹、太阳、阴雨天和雨伞图标，教程不难，不过绘制的时候用了很多小技巧（比如绘制太阳的Ctrl+Shift+Alt+T），全是实用又酷炫的，新手拿来临摹再好不过。 最终效果： 让我们开始学习吧！ 1. 做一个彩虹图标 第一步 我们开始画彩虹的最外层红色条纹。 用椭圆工具（快捷键U）画一个450 x 450 px的圆，打开属性面板（窗口>…

编者按：经常看Dribbble和Behance的同学可能早就听说过Tubik Studio 这个工作室，他们的UI设计案例和图标设计一直以简约传神而著称，色彩搭配上也相当的有一套。作为一个在UI设计领域深耕的工作室，Tubik Studio 在图标设计上也非常的有经验。今天的文章内容并不复杂，也许你看过之后就忘掉了，但是确实是经验之谈，仔细思考，你会发现要做到也并不简单。希望能这篇文章能给你一点启…

UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章，今天是下一小节，强烈建议阅读。上一篇戳这里：《好图标的秘密！顶尖设计师分享的6个图标设计优化指南（上）》 这6个步骤应该作为一个指南而非教条来准守。 2、从简单的形状…

UI的工作曾经被很多人等同于画图标，然而大家真的会画图标么？优质的图标和不够好的图标的区别其实非常小，但是这些细微的差别对于设计质量的影响却是很大。这篇文章分享的是如何用6个步骤来优化图标的设计。少有的icon设计理论结合实践的文章，强烈建议阅读。 这6个步骤应该作为一个指南而非教条来准守。 这篇文章中我们会将这六个步骤应用到一只柯基犬的图标上。这个图标有潜质，但是还不足以被认为是优秀的。下图是修…

这篇文章是 Flinto 设计团队设计师 Peter Nowell 的专访整理而成，采访中 Peter 介绍了他是如何设计 Flinto 的图标，以及一些经验心得。 Flinto 团队 最近采访了我关于Flinto用户界面图标背后的设计流程。 你是怎么为Mac版本的Flinto贡献自己的设计？ 我参与了Flinto新的Mac版本的用户界面部分和用户体验部分的设计，就在他发布之前的几个月。但是因为F…

为什么人们会认为它变得平庸？Instagram 希望成为一个怎样的产品？这个更改其实与设计风格关系不大，而与 Instagram 自身定位和未来计划更有关联。一起来看设计背后的故事。 作者：好奇心日报-朱凯麟 胡莹 3 年前，苹果推出 iOS 7 ，当时一同席卷互联网的还有“扁平化”设计思潮。短暂争议过后，设计师和创意总监们纷纷朝着“拟物风格”的尸体上吐唾沫，并高呼：“打倒渐变！模糊背景！” 直到…

今天竹子要介绍的这6个图标绘制招数，简单易懂，但功效卓著。久习可得奇效，达到任何矢量图形都易如反掌，无论各种横的，竖的，奇形怪状的图形都信手拈来。（以下界面演示以Photoshop CC为演示工具） 第一剑 少商剑 形状图层 特点：剑路雄劲，颇有石破天惊，风雨大至之势。 PS是一个像素处理软件，可以做到和AI一样绘制各种复杂的矢量图形。有读者会问为什么不用AI，而要学习PS绘制路径，因为PS才是适…

编者按：今天@P大点S微博 来一篇超简单的PS教程，教你绘制一枚方形图标，操作简单易上手，源文件已打包，假期花十分钟来练个手吧。 源文件打包   百度云下载：http://pan.baidu.com/s/1qXWcD1i 新建个文档，我用的尺寸是800*600像素，大家请随意，做一个渐变背景，用圆角矩形工具画一个圆角矩形，我用的颜色是#1a181a！ 用两个椭圆相减，画出企鹅的围巾，这里我用的颜色…

@5key ：昨天发现 Nucleo 时我的第一感受这是一个类似 iconjar 的图标管理工具，应该没有什么特别的地方。本着凡事多看一眼的原则，我还是去官网了解了一番。也辛亏多去看了一眼，否则我可能会错过这个不错的图标管理工具。 首先，Nucleo 图标 icon 管理工具，可以配合 Sketch、PS、AI、XD 来提升整体的操作效率。当设计过程中需要使用 icon 时，只需要从 Nucleo…

编者按：今天这组图标虽然是婚礼系列，不过机智的设计师们应该都知道，无论是情人节/七夕节/纪念日...... 等等，只要有关爱情的，都能派上用场！图标资源一向都是付费下载，类似今天这样的机会不多，@北树 已经打包好了，来收！ 素材打包  百度云下载：http://pan.baidu.com/s/1pK0Is0z 如果链接失效/页面不存在/涉嫌xx已屏蔽，先换个浏览器试试，再让别人试试，最后还不行点左…

编者按：这可能是今年质量最高，风格最全，资源最多的图标素材了，@北树 已经打包好咯，49组图标素材一键下载，提前搞定2016全年的图标素材需求，好货不怕早，收好！ 字体素材打包   百度云下载 同系列素材：《打包好了！可能是2015年最不能错过的英文字体素材免费下载》 纯CSS版本图标 文件类型图标的纯 CSS 版本。可以不用图片来创建文件图标。这部分图标单击网站即可。 icono Pure CS…

冬天是个神奇的季节，它代表着结束也孕育着开始。寒冷赋予这个季节以独特的气质，谈及冬天你的脑子里会立刻闪现许多关键词。从猫冬到滑雪，从圣诞到春节，冬天值得玩值得关注的东西太多了。 考虑到圣诞和新年的临近，相关主题的图标与设计素材无疑是必需品。今天的文章集结了一批相关的图标和插画素材，其中囊括了相关的体育运动（滑雪、单板滑雪），保暖衣物（毛衣、手套、靴子），节日（圣诞老人、节日装饰），以及天气标识（雪…

作为目前最有影响力的设计规范之一，Material Design呈现出蓬勃而持久的生命力，不论是移动端UI设计还是网页设计，设计师们对 Material Design 的运用越来越熟练了。在图标和小型插画的运用上，要匹配Material Design的整体风格还是需要一定技巧的，在保证直观简约的同时，确保色调的协调而不会产生喧宾夺主的效果，在排版设计上控制好留白和细节的优雅。 Material D…

提供免费图标的网站不少，但若要找动态 GIF 图标就不容易了，毕竟 GIF 图示在开发难度上会更困难一些，大部分都要付费才能取得。今天这个Animaticons 网站，提供了不少优质精致、可自定义化的动态 GIF 图标让用户免费下载，来收！ Animaticons 提供的素材很特别，不是一般 GIF 图示，而是透明背景、可依照你网站实际需要来微调的图示集。更明确解释，这些图示可自由更换颜色、停止自…

编者按：超1000枚图标免费打包下载！图标类型非常丰富，包括圣诞节专用图标包、2015年世博会展馆图标、经济类、法律类，450枚常用的极简线性图标等等，不仅特别好看，而且都是矢量的，修改非常方便，@北树 已经给大家打包好了，来收！ >>> 素材打包  百度云下载：http://pan.baidu.com/s/1gd6UpG3 顺便附上这组超实用的最美素材：《46款高大上的网页渐变…

编者按：实用资源马住！在UI设计中为了帮新用户熟悉软件，通常会用手势按钮来引导用户操作。今天这组手势资源，风格从简约、复古到Material Design等应有尽有，不仅囊括了大多数手势操作，格式也非常丰富，PSD、AI、PNG、SVG等都齐全了，@北树 同学已打包好，来收。 素材打包  百度云下载：http://pan.baidu.com/s/1hq34dmO Touch Gestures Ic…

编者按：双十一刚过，后面还有感恩节、圣诞节，除夕春节等等，机智的设计师应该提前搜集素材了，今天这30组免费的图标，质量高题材好，@北树 同学已经全部打包好了，收好不谢！ 图标打包 百度云下载：http://pan.baidu.com/s/1bndV9gV 圣诞图标 情人节图标 创意图标 60个图标 2px 线性图标 免费图标 72 图标打包 线性图标 70 简单图标 图标集 游戏图标 随机图标集 …

配色是设计中永恒的话题。许多设计师都认为三种色彩构成的配色是最平衡也是最漂亮的，多一色显得太花，少一色又过于朴素，这也是为什么许多配色方案的构成多为3种色彩。如果将这种配色美学运用在最小的UI元素上会是什么效果呢？这就是今天我们要探讨的案例：三色图标设计。 三种色彩能够让网页拥有奢华的视觉效果，也可以让极简的图标拥有细腻精致的特征，温润致密的质感，最大程度地体现色彩本身的优势。 接下来让我们看看这…