色彩 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设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。25D图标和桌面应用图标。
Windows,iOS, etc, 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样。很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标。例如Windows UI
一个图标能够表述清楚含义的时候，只需占用一个字符的位置就可以传递给用户 *** 作信息。例如扫一扫、邮件发送成功，用文案表示需要3-4个字，英文或其它语言可能更长，而用图标代替只需要一个字符位置
支付宝右上角 + 表示更多功能，此时一个字符位置解释清楚其含义；微信下一个类似声波图标表示语音，直观易理解
进入碎片化时代和进入读图时代，几乎是相同的节奏。内容能在短时间内产生更大的影响力，研究表明，大脑处理内容的速度比文字内容快60000倍，人类大脑对图形图像的记忆也远胜于对文字的记忆。所以，在推广品牌时，内容可以说是一图胜千言。使用图标通过视觉引导帮助用户快速识别信息。
Tik Tok和ins没有任何文字说明情况下，我们就知道第5个标签就是个人中心
科学证明，在大脑中相对于其他感觉来说与视觉信息处理相关的脑区占统治地位，人脑对于图像的记忆远远高于文字。图标多采用几何图形，并以对称、一致的设计目标来进行设计，由于其高度浓缩的特性，图标具有更加简洁的特性，更加便于记忆。
图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、25D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分，而当我们设计图标时候需要思考
1、产品视觉风格定位（行业领域）
2、图标具体应用的界面
3、产品面相的用户人群是怎样的？
先看一组不用风格的图标，由上面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达方式是不一样的，所以设计前需要思考，你需要表达的设计思路和产品的定位。
1、拆解关键词及关键词联想
将需求信息中的关键词进行拆解及发散，转化为生活中常见的事物，释放它所代表的内在含义。关键词的同义词、近义词、形状相关或相关联想的物体
例如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想，去找一些气质相符的制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩做为产品图标的主要造型
2、根据关键词联想输出图形
根据上一步拆解的词语或物体，通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具（sketch贝塞尔工具）或者布尔运算进行绘制
3、根据场景输出
这里的场景可能是实际应用的场景，比如大众点评tab标签栏、功能区（品类区）、运营类图标等这些图标需要引导用户去点击，所以在视觉上更加丰富一些；而个人中心、分类区、详情页更多侧重功能上的引导，相对来说较简洁，属于二级使用场景，线型图标居多。
我们常见各个图标文章分析应该注意十几点，而这些没有规律和逻辑难以记忆，一时记住了也容易忘记。这些总结其实是从Material Design或者iOS规范中得来的。认真研究这些细节，图标制作就不难了
图标端点分为直角和圆角，我们在设计过程中要统一图标端点，保持一致的设计语言
拐角
相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹(fovea centralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。
圆角自身的圆形属性会给人圆润、可爱 ， 更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标
直角则会给人一种尖锐、具有攻击性的感觉，图标整体细节更多，通常出现在金融等商务属性比较强的产品。比如：36氪、金融类产品等。
倾斜角度统一
内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下，第四个图标重心偏上，右边是早期PP助手的标签栏图标，图标内部挖空面积占比率相同，整体视觉和谐统一。
在绘制描边图标时，要时刻注意图标的描边粗细是否统一。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有： 1px 、 15px、2px、3px ，15的粗细对显示屏要求比较高（半个单位的路径会导致图标在最终显示时边缘模糊，不清晰）
细描边给人视觉感更加精致，粗描边相对更加粗犷，由于目前流行趋势的发展，常常也有粗描边和细描边结合的设计风格
除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一。元素之间的最小间距，应该大于或等于描边的宽度。
苹果、谷歌、IBM，国内的阿里Ant Design都出过相关的图标网格规范，这里以谷歌的Material System 图标网格来进行说明。在2424px图标尺寸，上下左右安全边距是2px，关键形状的四个基本形状为圆形2020px、正方形1818px、纵向矩形和横向矩形2016px。通过关键形状的规则统一图标大小及位置，达到视觉的平衡
对齐像素点
清晰度（像素完美对齐）为了避免使图标失真，可以通过将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对比》
UI设计的培训课程主要分为设计理念的培训和软件 *** 作的培训,具体课程如下:
1视觉设计基础:通过Illustrator软件图形应用系统的学习,使学员掌握图形视觉设计基础。
2光影结构视觉应用技术:通过Illustrator软件光影结构体系的学习,使学员掌握物体光影结构表现技法。
3UI设计:通过Illustrator与Photoshop软件图形图像系统学习,使学员掌握高品质UI图形设计的方法。
4超写实应用与表现:通过Illustrator软件超精度表现系统学习,完成超写实制作技巧。
5构成与视觉语言:学习构成视觉语言,使学员掌握设计应用视觉表现技术。
6视觉艺术表现与应用:通过色彩艺术与视觉表现形式的结合应用,使学员的设计能力达到商业级别的要求。
7Flash平台应用:通过Flash软件系统学习,使学员掌握Flash动态应用基础。
8超媒体综合应用技术:通过Flash软件高级应用学习,使学员掌握动态结构表现语言技术。
9交互式平台应用技术:通过Flash ActionScript 3 软件程序系统学习,使学员掌握高级别交互结构表现。
如果能够完全掌握这些知识,你将成为优秀的UI设计师,实现稳定高薪就业。前面也说过了,UI设计师如今被重视,所以比起普通的设计师更有前途,未来的发展前景也更为广阔。
软件如下：
1PSCC2017
PS 全称 Photoshop
UI设计用的最多的软件，90%以上的UI设计师都是要会PS的，其处理功能非常强大，调色方面也不错，还有图层样式，布尔运算方面都是UI设计必备的。不过也有劣势，就是无法绘制矢量图形，排版也不是很好。还有图层也有点多。管理起来不是很方便。在UI设计中主要的用途是用来绘制界面和图标。
2AICC2017
AI 全称 Illustrator
一款矢量绘图软件，在做UI图标上非常不错。特别是绘制扁平化图标这块。很好用。也有矢量功能画出来的图形可以放大缩小。劣势就是不能调色。做拟物化图标也不是很好做。
3AECC2017
AE 全称 After Effects
主要是做来做影视后期视频特效的，但是在UI这个的话就是用来做一些UI的交互动效。动效这块是效率最高的软件，不过不能用AE画图标做界面。这个AE不擅长。
4ARP 全称 Axure RP Pro
主是要用来做原型图的，在交互设计原型这块是比较火的一款软件。
最后也补一句，软件只是一个工具，千万不要觉得会了软件就会了设计，不要太依靠软件了，会了工具后还要学习理论知识才能成为一个合格的设计师。
扩展资料：
UI设计（或称界面设计）是指对软件的人机交互、 *** 作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。
好的UI设计不仅是让软件变得有个性有品位，还要让软件的 *** 作变得舒适简单、自由，充分体现软件的定位和特点。
设计内容：
与之相应，UI设计师的职能大体包括三方面：
1图形设计，软件产品的产品“外形”设计。
2交互设计，主要在于设计软件的 *** 作流程、树状结构、 *** 作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。
3用户测试/研究，这里所谓的“测试”，其目标恰在于测试交互设计的合理性及图形设计的美观性，主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来极大的风险。
参考资料：
百度百科-UI设计师
在设计图标的时候就要非常注重图形的简洁，避免在小尺寸展示时候不清晰不能被识别的情况，同时简洁的图形设计形式也会提升图标的设计品质。应用图标在手机屏幕的显示尺寸仅为120120px，这个尺寸是最重要的设计尺寸。
2、准确的产品属性传达
一个高品质的应用图标应该能够让用户在第一眼就能够感知到这个应用的属性和功能。另外图标设计应当高度提炼产品特色找到最能代表产品属性的图形元素，并对这个元素进行突出设计。
3、独特的设计语言
要想在众多的应用图表中脱颖而出，设计师在设计图标时就必须强调应用图标的独特性，突出产品的核心特征和属性。
4、艳丽的色彩
鲜亮明快的色彩搭配能够为应用图标带来更多的关注度。其中对比色和互补色的渐变搭配是最有代表性的设计手法。无论是纯色的色彩运用或者是渐变色的色彩运用。
5、品牌形象的延续
在设计应用图标的时候应当充分的利用已有的品牌形象加以运用，让品牌的深厚积淀继续发挥作用并且让品牌形象延续从而赋予品牌更强的生命力。
6、多场景测试
在设计应用图标的时候也要考虑到应用图标的展示场景，避免图标不能完美展示的情况。在不同场景下应用图标需要根据需求做相对应的设计优化，，避免给用户带来简单粗糙的视觉印象。
7、避免使用大量文字
文字太多会导致应用图标看起来拥挤用户也很难看清楚信息。大量使用文字的另一个致命的后果是会大大降低应用图标的设计美感，不仅不能使用户产生好的印象反而会招致用户的反感。
掌握以上原则，你就可以做出好看的图标作品。
对于有基础的人来说，图标制作最好的方式是临摹，通过大量的临摹去解剖、学习和分析图标制作的方法，然后再大量的练习、修改。图标绘制虽然看起来是个UI设计中很小的一部分，但是也是不可忽视的一部分，图标的风格多种多样，最重要的还是需要依据产品特色设计出符合该产品的图标。
一、制作图标的视频教程那我们来简单分享几个不同风格的图标，去看看这些风格的图标应该如何制作呢？
1、剪影图标
剪影图标大多数是单色表现，当然也有双色图标。剪影图标简洁大方、高度提炼出图标的意义，能够通过最简单的线条的表现出该图标代表的作用。看似简单的剪影图标，其实考验了设计者对于产品需求的高度提炼，突出理性与感性在功能传达上的逻辑思维。
2、扁平图标
扁平化设计风格在APP的设计中常常都能看到，那图标也不例外。所以学习扁平化的设计风格有很高的通用性，在平时设计工作中也会经常遇到。那扁平化风格其实是从iphone开始流行起来，其特点就是所有元素的边界都干净利落，没有特效、没有过多的装饰效果，组成元素简单，能够直观的传达信息。
4、临摹图标
都说学习图标设计最好的方式是先临摹，
那我们选择毛线图标、毛球图标和播放器图标去看看，这类的图标是如何设计出来的。
毛线图标和毛球图标是两种图标的表现形式，毛线型的图标绘会将毛线针织的一针一线体现在设计中，有中温暖和温馨的感觉。如果毛线的质感运用得恰当，会让设计出彩，那毛球图标也是一样。虽然这类的图标实用性较小，但是了解一下增加一下自己的设计知识储备。
5、拟物图标
虽然现在大多数应用都是扁平化发展，但是流行是个圈，拟物化风格又在悄悄开始流行起来了。想必UI设计师们都能感受到“新拟物风格”这股风现在刮的多么凶猛了。那我们通过拟物话筒图标、拟物篮球图标、拟物伞、水滴图标、拟物甜甜圈图标的学习去紧跟这个流行趋势吧。
二、图标网站学习的过程汇总需要大量的临摹素材，在这里分享几个图标类的网站。
1、阿里巴巴矢量图标库：国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。
来源：Iconfront
2、IconStore：是一个提供一流的免费图标包素材的站点,汇集了很多优质的icon素材。
来源：IconStore
3、Flaticon：图标设计丰富。
来源：Flation
4、Material Design Icons：包含常用的图标，如用于媒体播放、通讯、内容编辑、连接等等。
通过视频和图标网站的分享，希望能对你学习图标设计与制作有些帮助。
Mac系统文件图标制作,最近很多网友问这个问题,还不知道的小伙伴快点跟上小编一起来看看吧！随着苹果OS X Yosemite 1010系统的发布,扁平化的图标逐渐已经成为Mac系统的主流。一下子由拟物化的世界突然降落到扁平风格的次元世界,有不少用户对于这个风格的界面图标有抵触感,其实Mac系统下我们也可以自己制作并修改文件的图标,让你Mac文件图标变成自己喜欢的风格款式,下面一起来看看吧。一、下面小编以制作QQ图标为例1、我们可以自己画一张比较有个性的QQ图标,画完后保存成png格式。其实画图标最好用画矢量图形的软件,比如Ai、coreldraw、sketch等等2、然后再用iconvert-icons,它是一款能快速拖放转换批量图标；所有主流图标格式双向转换,如icns；先进的大小选择等等3、因为苹果默认图标格式为icns,这软件能够把JPEG、PSD、png等主流格式都能转化为icns,你可以把你老婆、孩子家人的照片转换成图标,然后替换掉你想替换的软件图标,个性化打造你想要的桌面二、然后接下来是怎样去替换软件图标了,其实过程非常简单。1、将你已经制作好的图标文件名修改,举例说明：MacQQ logoicns,放入QQ的Contents\Resources文件夹替换旧的图标即可,如要马上看到效果,command+i新图标,左上角点图标缩略图,command+C复制,然后点QQapp程序也command+i显示简介,点左上角图标缩略图,command+V粘贴覆盖旧图标即可,也可以直接用鼠标把icns文件拖拽进去。2、如果你想用回原来的图标,记得替换时保存原来的图标,方法是一样的。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）