图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号。对于UI而言，主要针对的就是狭义的概念，它是UI界面视觉组成的关键元素之一。 我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。 色彩 color 、 文字 Font 、 图标 icon 、 图形 shape 、 图片 image 、 空间 space ，是我们做平面设计中非常重要的 6 个元素，而对于 UI 设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。显然，图标不是由界面设计师发明的。作为一种交流的对象，它们有着悠久而多样的历史，根植于古代。它们出现在地图、标志、方案、手册和许多其他信息来源中。然而，随着新技术和图形化用户界面的出现，图标经历了新的转折进步。从历史上看，施乐公司在20世纪70年代初的时候，在功劳中提到了第一个图形化用户界面的图标：图标是在一台名为Xerox Alto的机器上实现的，这台机器非常昂贵，并没有真正普及到广大的用户。然而，这只是一个漫长的故事的开始：1981年，Xerox Star（施乐之星）发布了，它被称为第一台将图标作为界面的一部分的消费类计算机。特别是，它应用了至今为止的文件夹和垃圾箱的图标。下面是图标从80年代表意图标（又称解释性图标）表意符号是指原本不存在实物的符号，是在发展过程中创造的一种符号，用于表达某些特定的含义或操作行为。而且在发展过程中，这些符号逐渐继承了一些象形符号的特性，将符号本身作为「实物」并且不断演化。例如「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号。交互图标具有双向信息传递能力，不仅可以向用户传递某种信息，引导帮助用户执行特定操作，同时也允许用户向程序传递控制信息，从功能重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性图标。装饰和娱乐用图标通常是用来提升整个界面的美感，加深个性化设计风格，并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。装饰性图标通常呈现出季节性和周期性的特征。例如线上活动、用户等级、空页面等应用图标不同数字产品在各个操作系统平台上的入口和品牌展示用的标识，它是这个数字产品的身份象征。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。象形图标ios相当长一段时间流行 “Skeumorphic设计理念”，属于超写实设计。并且认为只要有可能，在应用上增加现实的、物理的纬度，与现实越相像，操作越相同，就越容易使用户理解运作模式，接受度就越高。例如日本鼎鼎有名的富士山图标，由此说明好的设计不仅美观度高，功能性同样十分重要，特别是与旅游相关的设计，需要让人跨越语言的障碍。隐喻图标icon 中的隐喻元素很重要，它可以让我们一看到这个 icon 就知道是什么意思。比如，一个房子代表首页，一个叉叉代表出错或关闭。当我缩小一个 icon 时，我都会保留隐喻元素，来保证 icon 仍然可以准确传达信息。工具图标主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。比如：建筑行业，医疗行业，化工行业等等。混合图标也就是前三种的结合，目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物，多表达设计师个人设计风格或适用某类设计感较强的软件。字符图标字符图标“Glyph”一词是源自于排版领域，现在已经随着数字设计而逐步在数字设计领域扎根了，它源自于希腊语，含义为“雕刻”。在排版领域当中，符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的时候甚至是两者的组合。在这类图标设计中，比较典型的当属天气类图标了。从单个图标到组合图标，都能充分体现出来。扁平图标扁平图标包含线性、面型、线+面，面+面，变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。拟物化图标拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。2.5D图标和桌面应用图标。Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样。很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标。例如Windows UI一个图标能够表述清楚含义的时候，只需占用一个字符的位置就可以传递给用户操作信息。例如扫一扫、邮件发送成功，用文案表示需要3-4个字，英文或其它语言可能更长，而用图标代替只需要一个字符位置支付宝右上角 + 表示更多功能，此时一个字符位置解释清楚其含义；微信下一个类似声波图标表示语音，直观易理解进入碎片化时代和进入读图时代，几乎是相同的节奏。图片内容能在短时间内产生更大的影响力，研究表明，大脑处理图片内容的速度比文字内容快60000倍，人类大脑对图形图像的记忆也远胜于对文字的记忆。所以，在推广品牌时，图片内容可以说是一图胜千言。使用图标通过视觉引导帮助用户快速识别信息。Tik Tok和ins没有任何文字说明情况下，我们就知道第5个标签就是个人中心科学证明，在大脑中相对于其他感觉来说与视觉信息处理相关的脑区占统治地位，人脑对于图像的记忆远远高于文字。图标多采用几何图形，并以对称、一致的设计目标来进行设计，由于其高度浓缩的特性，图标具有更加简洁的特性，更加便于记忆。图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分，而当我们设计图标时候需要思考1、产品视觉风格定位（行业领域）2、图标具体应用的界面3、产品面相的用户人群是怎样的？先看一组不用风格的图标，由上面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达方式是不一样的，所以设计前需要思考，你需要表达的设计思路和产品的定位。1、拆解关键词及关键词联想将需求信息中的关键词进行拆解及发散，转化为生活中常见的事物，释放它所代表的内在含义。关键词的同义词、近义词、形状相关或相关联想的物体例如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩做为产品图标的主要造型2、根据关键词联想输出图形根据上一步拆解的词语或物体，通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具（sketch贝塞尔工具）或者布尔运算进行绘制3、根据场景输出这里的场景可能是实际应用的场景，比如大众点评tab标签栏、功能区（品类区）、运营类图标等这些图标需要引导用户去点击，所以在视觉上更加丰富一些；而个人中心、分类区、详情页更多侧重功能上的引导，相对来说较简洁，属于二级使用场景，线型图标居多。我们常见各个图标文章分析应该注意十几点，而这些没有规律和逻辑难以记忆，一时记住了也容易忘记。这些总结其实是从Material Design或者iOS规范中得来的。认真研究这些细节，图标制作就不难了图标端点分为直角和圆角，我们在设计过程中要统一图标端点，保持一致的设计语言拐角相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹(fovea centralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。圆角自身的圆形属性会给人圆润、可爱 ， 更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标直角则会给人一种尖锐、具有攻击性的感觉，图标整体细节更多，通常出现在金融等商务属性比较强的产品。比如：36氪、金融类产品等。倾斜角度统一内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下，第四个图标重心偏上，右边是早期PP助手的标签栏图标，图标内部挖空面积占比率相同，整体视觉和谐统一。在绘制描边图标时，要时刻注意图标的描边粗细是否统一。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有： 1px 、 1.5px、2px、3px ，1.5的粗细对显示屏要求比较高（半个单位的路径会导致图标在最终显示时边缘模糊，不清晰）细描边给人视觉感更加精致，粗描边相对更加粗犷，由于目前流行趋势的发展，常常也有粗描边和细描边结合的设计风格除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一。元素之间的最小间距，应该大于或等于描边的宽度。苹果、谷歌、IBM，国内的阿里Ant Design都出过相关的图标网格规范，这里以谷歌的Material System 图标网格来进行说明。在24*24px图标尺寸，上下左右安全边距是2px，关键形状的四个基本形状为圆形20*20px、正方形18*18px、纵向矩形和横向矩形20*16px。通过关键形状的规则统一图标大小及位置，达到视觉的平衡对齐像素点清晰度（像素完美对齐）为了避免使图标失真，可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用软件AI或者sketch的时候绘制基础图形不要出现小数点和奇数，多用偶数我们了解了 icon 的基本知识，怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。检验标准也是基于我们绘制的标准，分别是： 识别性，规范性、整体风格与品牌感。判断事物的价值在于它的用途是什么，图标的用途是帮助用户理解信息，所以表意准确（清晰准确的传达信息）就是图标最重要、最底层的价值，如果你设计的图标用户看不懂，即使视觉再美观也没有任何价值可言。含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。常见的就标签栏指南针表示发现，房子表示首页等视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。我们要保证图标在视觉大小的一致性，图标饱满度（正负形）、遵循同一种规律，细节统一性。这里的4点在前面绘制过程中已经写的非常详细了。整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如腾讯动漫，它的性格就是偏卡通可爱的类型，那么的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。一个广告语：复杂世界里，一个就够了，整个APP从启动图标到整体调性都是简洁干净，克制的色彩运用传达产品调性。品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。下面几款产品从产品名到启动图标设计高度融合。图标可用性测试是基本规则是根据图标验证推导的识别度：1、用户是否能够理解图标的含义？2、是否是用户熟悉的图标？3、是否与其他图标含义冲突？4、是否能通过5秒原则？5、图标的可扩展性怎么样？6、是否需要增加文字标签？设计是否统一1、视觉语言是否统一？2、图标的设计复杂程度是否统一？3、整体设计是否协调、统一、视觉体系高度集中？4、图标整体配色是否统一？品牌信息：图标是否独特性、能否传递品牌信息？一般情况下有 JPG、PNG、GIF、SVG 四种交付格式。其中JPG、PNG、GIF为位图，受图片本身的分辨率大小限制，无法灵活的修改尺寸。而SVG为矢量格式，支撑无损缩放。在没有SVG前因为要考虑到适配高清设备，需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能，比如蓝湖。JPG：兼容性强，自带背景，不支持缩放。PNG：支撑透明格式，不支持缩放，需要注意图标四周透明区域大小。GIF：简单的动态图标使用，透明背景时边缘会有锯齿，没有办法支持丰富的颜色。SVG：无损缩放矢量图形、体积小，单色模式下支持开发自行修改颜色，可修改样式参数。另外一种交付方式是将SVG格式的图标上传至类似iconfont的网站后，完成图标的交付。需要注意的是：1、SVG不支持渐变颜色填充2、SVG不支持描边，需要将描边转化为闭合图像3、图标的大小相同时，需要在图标下方增加一个相同尺寸的透明方形，同图标一起导出上传而iconfont对于图标制作要求严格，上传时需要注意查看自己的图标是否符合要求。 链接资料来源UI设计师想做好图标设计？请问图标历史了解过吗？图像学的简要历史《Icon Design Guide》《Icon Utopia》《the Ultimate Guide to an Interface Icon Set》 《svg图标库以及与icon font对比》

一、轮廓清晰带有渐变的图标渐变色也是这两年最热的趋势，它同样出现在图标设计当中。相对微妙的渐变在图标设计当中，增加了视觉的维度和层次，这使得图标拥有了更加立体化的细节，这种设计使得图标本身的高级感更加明显，也恰如其分地增加了整个设计的信息量和丰富度。二、色彩明快视觉有趣的图标并非所有的图标都必须是单色的，但是太多的色彩挤在一个小图标上的时候，会让整个设计显得混乱不堪。通过非常有限的几种色彩来设计图标，就能够让图标显得足够有趣了，同时，如果这几种色彩也足够明快，互相补充，就更吸引用户了。这一趋势在2018年也显得非常突出。三、形同APP ICON的图标类似APP ICON一样的图标一直都存在，但是没有像今年这么流行过。使用圆角边框外轮廓，带有彩色背景，中间是几何特征明显的图形和元素，但是并非用作APP的入口，而是运用在网页、APP内等其他的地方。它的流行可能是因为这种样式可以暗示用户，图标背后功能的价值。四、笔触粗重线条统一的图标这种[粗线条]的单色图标在今年尤其受追捧，线条清晰统一，笔触粗壮，比起常规的线性图标更加厚重，而且拥有一种莫名的萌感。虽然同样只是单色的设计，但是几何感更强，视觉重量更明显，让用户的双眼无法错过。五、仍然扁平但更加多变的图标扁平化设计仍然没有过时，始终还在流行。扁平化的图标在视觉上相对而言更加简约，可以被设计地更加多变，也可以同各种不同的设计风格兼容，和不同的元素搭配起来使用，因此也同样收到设计师和用户的青睐。六、表情符号化的图标表情符号，Emoji几乎已经成为一种独立的语言，而图标设计也同样受到了表情符号的影响，各种可供识别的视觉元素，尤其是各种角色头像，都被制作成为图标，在不同的场合使用。表情符号化的图标还有哪些更有趣的用法，还有待探究。七、永远经典的线性图标线性图标几乎可以用在任何场合，APP，网页，海报，说它们是不老的经典一点都不为过。线性图标有着良好的可塑性，无论是大是小都可以清晰地传达信息，表明概念。在2018年，线性图标依然是主流，依然是需求大户，相关的素材也一直都稳定地产出着。八、结构简单含义明确的图标对于简约设计的追求，一直贯穿着整个2018年。这一点也同样体现在图标设计上，更加图形化，更加简约的形体，但是保持清晰感知度的图标设计在今年大量的涌现。就像上面的这组图标，美食的轮廓通过简单的形体来塑造，细节则使用相同的小圆点和线条来补充，非常巧妙。

icon相信大家对这个词语并不陌生，我们做设计的也会经常遇到，诚筑说在UI设计培训中到结尾的整体作品是需要自己做icon的。而关于icon设计的六原则今天诚筑说小编就给大家分享一下啦。1.定义准确形象icon也是一种交互模块，只不过通常以分割突出界面和互动的形式来呈现的。其中以交互式为主要运用手段。而icon对于一般起是充当指示、提醒、概括、表述等作用，所以在icon定义的时候一定要准确，非但不能模糊反而比logo的定义还要清晰。比如：新建，添加，删除，搜索等都要遵循简洁通用这个一个基本的原则。否则用户辨识度上会导致操作成本上升的结果。通常也会造成阅读和操作的障碍。（在大同小异的基础上有自己的想法。）2.造型完整简明造型是icon设计的筋骨，就好象一个人是健康的还是有缺陷的。一个icon有没有美感很大程度就取决于造型是否优美和谐。在基本外形里，通常是矩形或圆形，我们会给予它们不同的设计感觉来定义它们能表达什么。举个栗子：在大幅空白的区域，圆形icon会更适合留白排版。当大幅文字段落或执行按钮的时候，矩形icon会更合适排版。3.表达符合的行为习惯在表达定义的时候，首页要符合一般使用的行为习惯，UI本身的意义就在于附加到“功能”上的一个表现层，具备最直接的操作和交互的功能。我们首先不要着重华丽和精妙上面，为了icon而做icon。而往往一些产品部门相关的人员并不会在乎华丽和精美。功能性是最重要的因素。而个性色彩比较浓的游戏类或教育类界面，一般都配有文字或归属感比较强的元素来进行设计。（本来icon的本意也是图标）4.风格表现统一风格是一种具备独有特点的形态，具备差异化的思路和个性。在UI中通过表现不那么特立独行也是因为行为习惯问题，这也解释了想微软、苹果、谷歌可以颠覆设计原则的原因，通常一个公司或一个组织没办法去改变设计规则。5.排版循序与位置的调整完成基本的icon设计后，还有根据UI界面布局来进行调整icon在整个布局中的位置。这个相当重要，而对于有经验的工作人员来说，一般icon的造型，复杂程度，基本外型都会进行调整；如简单相对复杂，圆形一列中会有重叠元素，也可以会有矩形来调和。对比调和后使得icon更加易读和方便识别。切忌糊涂一片，错乱反复。（可见icon在整体项目中的重要性）6.使用配色的协调给icon添加颜色是解决视觉冲击力的一种表现手段。一般赋予icon什么样的个性和使得突出重点，一般都会添加颜色。在添加颜色时首先我们可以用感觉来进行设计，思路对想法可以就行了。这时在整体界面中一般有背景色和主导色，那么一般我们选择的icon颜色要侧重于点缀色或者着重色，而其他不太重要的icon颜色尽量选择中性的颜色，想低纯度的蓝色，因为在UI界面设计中，蓝色几乎和黑白灰并称万用色。有时候UI界面或icon整体偏暖和冷就是因为补色没有运用好。导致很刺激人的感官，这里有个小技巧，就是运用补色。诚筑说UI设计培训，让你不再只会软件，不会设计。更有手绘icon设计哦

直接用这个在线的图片生成ico工具吧，方便快捷，常用的图片格式比如jpg/png/webp/bmp等等都可以直接生成ico图标，还可以在线裁剪缩放，选取你需要的尺寸等等，而且清晰度挺高的。在线ICO图标制作生成,图片转换ICO图标Pro版图片转换ICO图标Pro版步骤：一、点击或者拖拽到上传框中，即可上传你要转换的图片，直接将新图片拖入上传框即可更换图片。目前已知支持jpg、png等多种常见的图片格式，如果上传图片并转换ico图标成功，则代表支持该格式。二、此时预览框中会出现刚刚上传的图片，可以任意缩放拖拽裁剪框，选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中，左上方会有ico图标效果的实时预览。三、选择需要生成的ico图标的尺寸，主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。四、选择转换生成的ico图标的文件格式，默认的格式是.ico，并且有.jpg和.png格式可以选择。需要注意的是，ico图标一般都是背景镂空透明的图形，只有.ico和.png格式支持透明背景的图片。而.jpg格式的图片本身是不支持的。
制作 方法一，打开ps，直接新建ctrt+N,新建高宽为256像素大小的图像，（本人亲测，当高宽任一大于256像素的话，保存时都不能为ico格式），控制高宽像素小于256，然后拖进自己的图像，另存为ctrt+shift+s——选择保存ico格式.即可，出现对话框，就选择第二个选项。即可方法二，打开ps，打开自己的图片，ctrt+alt+i调整图像大小，控制高宽小于256像素，这个也实验过了，当大于256像素时如图：3当小于或等于256像素时，如图，那么可以保存了，保存时就有ico格式可以选择，此时文件差不多小于150K4 选择保存路径后，点击保存，然后选择第二个选项：png（vista）.....。点击OK即可。（如果选择第一个，那么文件基本是失败
用专门的icon制作软件啊. 比如articon 之类的.

直接用这个在线的图片生成ico工具吧，方便快捷，常用的图片格式比如jpg/png/webp/bmp等等都可以直接生成ico图标，还可以在线裁剪缩放，选取你需要的尺寸等等，而且清晰度挺高的。在线ICO图标制作生成,图片转换ICO图标Pro版图片转换ICO图标Pro版步骤：一、点击或者拖拽到上传框中，即可上传你要转换的图片，直接将新图片拖入上传框即可更换图片。目前已知支持jpg、png等多种常见的图片格式，如果上传图片并转换ico图标成功，则代表支持该格式。二、此时预览框中会出现刚刚上传的图片，可以任意缩放拖拽裁剪框，选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中，左上方会有ico图标效果的实时预览。三、选择需要生成的ico图标的尺寸，主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。四、选择转换生成的ico图标的文件格式，默认的格式是.ico，并且有.jpg和.png格式可以选择。需要注意的是，ico图标一般都是背景镂空透明的图形，只有.ico和.png格式支持透明背景的图片。而.jpg格式的图片本身是不支持的。
强烈推荐使用Axialis IconWorkshop 6.01 汉化版 汉化版下载地址：http://www.crsky.com/soft/6410.html微软Windows XP叫人最赏心悦目的改进之一就是其绚丽多彩的图标。但这些图标采用了真彩、半透明等特有技术，所以一般的图标、图像编辑软件都不能很方便的编辑它们。今天IconWorkshop的推出为我们解决了这一难题。这一全功能图标编辑软件除了可以让你自由编辑创作各种XP样式图标外，还可以在各种图标文件间互相转换。具体来说，它具备的功能包括：·集成式单窗口操作界面·支持所有格式Windows图标文件的全功能编辑·提供XP Alpha通道支持·支持Photoshop、PNG、BMP、ICL、Macintosh图标等常用格式文件的导入/导出/转换·各种内建图标特效·从单一文件一次性导出多种格式图标·内建强力搜索引擎·对程序或DLL文件中图标的编辑功能。带图像教程地址：http://www.citk.net/Article/pmsj/crd/200510/434.htm
可以用iconshop 查找一下就可以了！