ICON指南(图标icon设计是什么)

图标中的隐喻元素很重要，它能让我们一看到这个图标就知道这个图标是什么意思。例如，房子代表首页，叉代表错误或关闭。当我缩小一个图标时，我总是保留隐喻的元素，以确保图标仍然能够准确地传达信息。
(3)工具图标
按主要行业类别分类，应用广泛，公众或业内人士认可度高，使用时间长。比如：建筑行业，医疗行业，化工行业等等。
(4)混合图标
即前三者的结合，旨在实现不同的视觉效果和应用结构。前段时间非常流行的MBE粗笔画风格图标，是综合图标的产物，多是表达设计者的个人设计风格，或者适用于某种设计感很强的软件。
3.基于视觉特征的分类(1)字符图标
“字形”一词起源于排版领域，如今随着数码设计逐渐扎根于数码设计领域。源于希腊语，意为“雕刻”。在排版领域，符号图标通常是包含特定含义、特定功能、可以表达或书写的类词系统。它们可以是字母或图形，有时甚至是两者的组合。
在这种图标设计中，天气图标是比较典型的一种。从单一图标到组合图标，都可以充分体现。
(2)平面图标
平面图标包括线状、面状、线状、面状，实现方式多样，扩展性强，更加个性化、年轻化，相同设计风格的相同图标，改变颜色后可以反映和传达不同的信息。
(3)拟物化图标
伪物化图标是平面图标的反义词。就像当初伪物化图标设计师常说的，是“复制现实”。尽量将现实世界中的形状、纹理、光影融入到整个图标的设计中，这是它的特点。伪物化图标的设计潮流几乎是伴随着Macintosh的诞生和演变，一步步走向极致的。然后从UI设计领域开始，被扁平化设计取代。但是，伪物化图标仍然被广泛应用于不同领域，尤其是游戏设计和游戏产品的图标设计。2.5D图标和桌面应用程序图标。
四。图标的优势
1.通用的Windows，iOS等。中英文版本甚至各种语言版本，打开菜单前基本都是一个样子。很多图标很快被大多数用户认可，甚至成为国际图标。例如Windows用户界面
2.节省空间。当一个图标可以表达一个明确的意思时，它只需要占据一个字符的位置就可以向用户传递操作信息。比如扫描，邮件发送成功，文案3-4个字，英文或其他语言可能更长，但图标替换只需要一个字符位置。
右上角的支付宝表示更多的功能，此时一个字符位置说明了它的意思；微信下一个类似声音的图标代表语音，直观易懂。
3.快手定位进入碎片化时代和读图时代几乎是同一个节奏。图片可以在短时间内产生更大的影响力。有研究表明，大脑处理图片的速度是文字的6万倍，人脑对图形图像的记忆远远好于文字。所以在推广品牌的时候，图片内容可以说是一张图胜过千言万语。使用图标通过视觉引导帮助用户快速识别信息。
没有任何关于Tik Tok和ins的文字描述，我们知道第五个标签是个人中心。
4.易于识别和记忆。科学证明，大脑中与视觉信息处理相关的脑区相对于其他感官是占优势的，人脑对图像的记忆远高于对文字的记忆。大多数图标使用几何图形，并设计了对称和一致的设计目标。由于其高度集中的特点，图标更简洁，更容易记忆。
5.图标的绘制过程图标的最低逻辑：线性图标、曲面图标、线和面图标、曲面图标、2.5D图标、拟像图标。互联网上的各种图标都是在这些基础上进行视觉区分的，而我们在设计图标的时候，需要思考：
具体应用的视觉风格定位(行业领域)图标界面。产品脸的用户人群是什么？首先看一组不同风格的图标。从上面不同的APP图标，可以看到不同的行业，不同的场景，不同的用户。图标的设计和表达方式都不一样，设计之前需要思考。你需要表达设计思路和产品定位。
1.设计与执行(1)反汇编关键词和关键词关联。
将需求信息中的关键词进行拆解传播，转化为生活中常见的事物，释放其所代表的内在含义。同义词、近义词、形状相关或相关的关键字关联对象
说到荣誉，比如奖杯、奖状、金牌、皇冠等。立即浮现在脑海里。然后通过这些词的联想，找一些气质相同的图片做情感版。通过情感版，你可以感受到产品的调性，然后从中提取一些形状和颜色作为产品图标的主要形状。
(2)根据关键词关联并输出图形。
根据上一步拆解的文字或物体，通过简单的基本造型，变成生活中常见的图形。常用的两种方法是用AI钢笔工具(草图贝塞尔工具)绘制或者布尔运算。
(3)根据场景输出
这里的场景可能是实际应用场景，比如大众点评标签栏、功能区(分类区)、操作图标等。这些图标需要引导用户点击，所以视觉上更丰富；个人中心、分类区、详情页更侧重于功能引导，相对简单，属于二次使用场景，多为线性图标。
不及物动词绘图时应注意的问题。各种图标文章的分析要注意十点，而这些没有规律和逻辑是很难记住的，记住一段时间也很容易忘记。这些总结实际上是从材料设计或者iOS规范中获得的。仔细研究这些细节，制作图标就不难了。
1.端点统一图标端点分为直角和圆角。我们应该在设计过程中统一图标端点，保持一致的设计语言。
2.统一角度(1)角
与其他图形相比，人眼更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理结构中有中央凹，这是视网膜中最敏感的区域)，处理圆形最快，而处理矩形边缘则需要大脑中更多的“神经影像工具”。因此，人眼更容易处理圆角，因为它们看起来比普通的矩形更接近圆形。
圆角的圆润属性会给人一种圆润、可爱、安全、亲密的感觉。所以社交、娱乐、直播、美食等图标经常使用圆形图标。
直角会给人一种犀利逼人的感觉，图标整体细节较多，通常出现在金融等业务属性较强的产品中。比如：36Kr，金融产品等。
(2)倾斜角度均匀。
3.内部空间比例均匀。内部空间比例不一致容易导致图标视觉焦点不一致。如下图所示，左边第二个图标重心偏下，第四个图标重心偏上，右边图标是早期PP助手的标签栏图标。图标的镂空区域比例一致，整体视觉和谐统一。
4.统一笔画风格在绘制笔画图标时，要时刻注意图标的笔画粗细是否统一。在@1x双图的设计模式下，如果以24px作为网格基准，常用的图标厚度有1px、1.5px、2px、3px，1.5的厚度对显示屏要求更高(半个单位的路径会导致最终显示时图标边缘模糊不清)。
细描给人的视觉感更细腻，粗描相对粗糙。由于目前流行趋势的发展，往往会出现粗描和细描相结合的设计风格。
5.除了在内边距保持相同的视觉权重外，图标的描摹宽度也应保持一致，以实现像素-
6.安全边际中国的苹果、谷歌、IBM、阿里蚂蚁设计都出台了相关的图标网格规范。这里以谷歌的材质系统图标网格为例进行说明。在24*24px的图标尺寸下，上、下、左、右安全边距为2px，关键形状的四种基本形状为圆形20*20px、正方形18*18px、垂直矩形和水平矩形20*16px。通过关键形状的规则统一图标的大小和位置，达到视觉平衡。
(1)对齐像素
清晰度(像素的完美对齐)为了避免扭曲图标，可以通过将x轴和y轴坐标设置为整数来将图标定位在像素上。用软件AI或者素描的时候，基本图形不要用小数点和奇数，要用偶数。
七。图标验证我们知道图标的基本知识。如何判断我们的图标是否合适，是否贴合整个产品？我们需要知道是什么造就了一个好的图标。检验标准也是基于我们制定的标准，即：可识别性、规范性、整体风格、品牌感。
1.可识别性(准确的表意表示)判断事物的价值在于其目的是什么。图标的目的是帮助用户理解信息，所以准确的表意表达(清晰准确的信息传递)是图标最重要也是价值最低的。如果你设计的图标不能被用户理解，即使视觉上很美，也没有任何价值可言。
意义识别：就是视觉语言是否取代了书面语言。简而言之，就是你的图标能被用户理解，不会给用户造成歧义。标签栏上常见的指南针表示发现，房子表示主页等。
视觉识别：是指图标的大小、颜色、粗细，这些都是影响视觉识别的因素，从而提高特定风格下的视觉识别。
花瓣和V LIVE标签栏没有文字描述，识别其含义非常重要。
2.归一化我们要保证图标视觉大小的一致性，图标的饱满度(正反形状)，规律一致，细节统一。这里的四点在之前的绘图过程中已经写的很详细了。
3.整体风格整体风格就是关注图标所传达的性格是否与app的基调一致。因为每个产品的定位和人群的不同，整个app的基调也不一样。比如腾讯动漫，它的角色是一个热爱漫画的类型，在图标设计上也要体现这种性格，尽量用一种漫画式的圆润的方法来设计。一句口号：在复杂的世界里，一个就够了。整个APP从启动图标到整体调性都简单干净，克制的色彩使用传达了产品的调性。
4.品牌感(Brand sense)品牌感是指我们要与品牌理念保持一致，向用户传达同样的感受。通过吸收品牌色彩，提取品牌元素，采用品牌吉祥物和品牌图形提取品牌基因。我们应该试着从品牌设计的角度去理解它，寻找我们产品独特的品牌气质，选择合适的手法。然后将这些元素可视化，整合到界面设计中。以下产品从产品名称到启动图标设计都高度集成。
八。图标可用性测试图标可用性测试是基本规则，来源于图标验证。
1.认可。用户能理解图标的含义吗？是用户熟悉的图标吗？和其他图标的含义有冲突吗？你能通过5秒规则吗？图标的可扩展性如何？需要添加文字标签吗？
2.设计统一吗？视觉语言统一吗？图标设计的复杂程度是否统一？整体设计是否协调统一，视觉系统是否高度集中？图标整体配色是否统一？
3.品牌信息九。一般来说，图标的交付格式有四种：jpg、PNG、GIF、SVG (JPG很少用)，其中JPG、PNG、GIF为位图，受限于图像本身的分辨率，大小不能灵活修改。SVG是矢量格式，支持无损缩放。
在SVG之前，因为需要适配高清设备，需要切割各种倍数的图标进行适配。但是现在的开发软件和插件都有切割多张图片的功能，比如蓝色泻湖。另外，投放方式是将SVG格式的图标上传到类似iconfont的网站，然后完成图标的投放。请注意：
SVG不支持渐变颜色填充SVG不支持描边。当需要将stroke转换成同样大小的闭合图像图标时，需要在图标下方添加一个同样大小的透明方块，它会和图标一起导出上传。iconfont对图标制作有严格的要求，上传时要注意检查自己的图标是否符合要求。
来源：
图像学简史主流界面设计语言的变迁《Icon Design Guide》 《Icon Utopia》 《the Ultimate Guide to an Interface Icon Set》 《svg图标库以及与icon font对比》 Icon Grids关键线路揭秘本文由@ Jian Xian原创发布，人人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。