设计图标 简单(精选图标设计)

编辑导语：图标是界面视觉构成的关键元素之一，了解这些图标的基础知识也是词条设计的必要条件之一。笔者总结了一些产品图标，分析了图标的基础知识。让我们看一看。
在我们的日常生活和工作中，我们与各种各样的界面打交道。作为设计师，图标是界面视觉构成的关键元素之一。了解图标的相关知识和正确规范的绘制方法是入门设计的必要条件之一。本文将系统介绍图标，希望我的文章能给你带来一些帮助。
一、什么是图标1。概念图标是图形标志的一种，有广义和狭义两个概念。广义主要是指具有指称意义的图形符号，它高度集中，传递信息快，容易记忆。图标是代表文件、程序、网页或命令的小图片或对象。
图标帮助用户快速执行命令和打开程序文件。单击或双击图标执行命令。图标也用于在浏览器中快速显示内容。所有扩展名相同的文件都有相同的图标。
随着计算机的出现，图标被赋予了新的含义和新的用途。在这里，图标变成了具有明确参考意义的计算机图形。桌面图标是软件logo，界面中的图标是功能logo。在计算机软件中，它是程序标志、数据标志、命令选择、方式信号或转换开关以及状态指示。
图标在计算机可视化操作系统中起着极其重要的作用。它可以代表文档、程序、网页或命令。我们还可以通过图标执行命令或者打开某一类文档。你所要做的就是点击或双击图标。
图标是具有指称意义和识别性的图形。它不仅是一个图形，也是一个标志。它高度集中，传递信息快，容易记忆。
2.范围图标应用广泛，软硬件网页、社交场所、公共场所无处不在。比如：商场内的导向系统，男女厕所的指示牌以及各种交通标志等。狭义主要指在计算机软件中的应用，包括：程序识别、数据识别、命令选择、模式信号或开关、状态指示等。
二。图标发展史1。起源图标不仅历史悠久，从远古时代的图腾到20世纪和21世纪的各种更有意义和功能的图标，而且应用广泛，可以说是无处不在。1973年，它在施乐公司的帕洛阿尔托研究中心被发明。这台电脑第一次使用了桌面隐喻和鼠标驱动的图形用户界面(GUI)技术，诞生了最早的具有图形界面的电脑——著名的施乐奥拓(Xerox Alto)。
但是当时计算机性能不足，董事会不喜欢，也没有商业化，所以这个概念机没有进入人们的视野。但其后续机型施乐Star于1981年问世，成为计算机史上的里程碑。
1979年，乔布斯参观了PARC施乐研究所，看到了施乐的原型机施乐奥拓。乔布斯决定开发一款带有图形用户界面的新电脑。1983年，苹果推出了Apple Lisa，这是第一台带有GUI的商用电脑。1985年，微软通过使用GUI推出了Windows 1.0。
2.上世纪80年代，我就想把图标做得具象化，但由于当时电脑性能不足，设计师只能在有限的空间里创作，而且标准越具象越好。
微软和苹果相继推出了新的系统界面。随着1995年电脑显卡分辨率和色域的提升，设计师或美工有了更大的发挥空间，使用了更多的颜色，出现了更多透视效果的可能性。起初，我们只能用单色设计简单的图标。后来可以进行各种设想，达到各种效果。直到现在。
2007年，苹果发布了第一代iPhone和iOS系统。主题图标和当时的mac OS系统一样，玻璃质感和伪物化风格可圈可点。它的出现打破了人们对“传统手机”的定义。这款iPhone的主题图标风格一直稳定到iOS7发布，才出现了颠覆性的变化。
2013年WWDC发布会，苹果发布的iOS7系统开始将系统界面改为扁平化风格。这次发布会也让拟像风格逐渐走下坡路，直到平面风格全面普及，拟像风格不再被广泛使用。
2020年，WWDC20苹果发布了mac OS Big Sur，此次更新对图标采用了“新拟像”。“新拟像”的前身是拟像图标(simulacrum icon)，这是苹果最先提出的设计理念，即在界面中模仿真实物体的纹理，设计特定光线下的效果；目的是让人们在使用界面时习惯性地联想到实物的使用。而“新拟像”就是把真实的光用于虚拟物体。
三。产品应用图标产品应用图标，也叫启动图标，是品牌和产品的核心元素。图标以简单、大胆和友好的方式传达产品的核心思想和意图。由于产品应用图标的设计者不一样，设计无法统一，所以苹果官方在ios系统中统一了圆角矩形的大小，并在限定的区域内进行设计。而Android则没有那么规范，处于百家争鸣的现象。
1.汉字图标常见的汉字图标分为单字符、多字符和字符加图形。从产品名称中提取最具代表性的独立字符，设计字体，调整笔画和整体骨架，达到产品特色和视觉差异化的目的。由于国人对汉字的敏感性，这种设计大大降低了用户对品牌的认知成本。
2.英文字母图标英文字母图标通常是通过提取产品名称的首字母来设计的。由于英文字母本身形状简单，结合产品特点进行创意处理，很容易达到美感和辨识度的双重效果。
3.数字图标数字对我们来说是非常敏感的，用数字进行设计可以给人以亲和力。因为数字的辨识度强，所以容易传播品牌，记住用户。
4.特殊符号图标特殊符号图标在应用程序图标的设计案例中比较少见。因为符号本身的含义会对产品属性有一定的限制，所以针对性很强。
5.几何图形的应用设计给人以简约、现代、个性、充满空间感等视觉感受。从单一的具象图形到复杂空间感的创造，几何图形有着非常丰富的表现形式。
6.动物/单线和双线剪影图标动物剪影通常提取动物的整体形象或局部特征部分作为设计元素。这些应用图标的背景是单色或者渐变，少量会辅助一些图形作为背景元素。动物以单色填充，多为白色。
简单是指应用图标只显示一个或两个轮廓。有很多元素可以作为生活中的剪影。比如食物、工具、日用品、学习用品、娱乐道具等等。可以独立形成剪影图形，也可以根据产品特点进行创意加工，最终形成应用图标独特的造型图案。
7.图形重复图标将相同的图形有序排列，排列形式有渐变、等与等排列、规则重复、色差、大小分散等。这种设计可以给单调的图形增加层次感和饱满的构图，有一定渐变变化和规律重复的图形组合可以传达一定的节奏感和运动感。
8.正反图标的设计是标志平面设计中常用的表现手法。用于图标设计，以正形为底突出负特征，以负形表达产品属性。利用正反形状进行设计，平面设计感强，正反形状能更充分的表达产品特点和服务。
9.线性图标线性图标风格给人一种简单明快的感觉。线性设计方法分为封闭和开放，可以是一条连续的线，也可以是几条线段。彩色背景上的线条通常是高亮的，背景设计可以是单色、渐变、其他辅助图形设计等。
10.白色渐变图标白色渐变图标用白色渐变填充，不透明度设置在100%和X%之间。白色渐变图形具有空间感、质感和良好的视觉效果，广泛应用于应用程序图标设计中。
1.颜色渐变图形颜色渐变图标使用各种颜色进行渐变。与白色渐变图形相比，彩色渐变图形的色彩表现更加丰富。当多种颜色逐渐相连时，要注意色调的对比，以营造空间感。
12.动物局部图标使用动物部位进行图形设计，可以使元素特征更加明显。与展示整个动物形象相比，局部特征的视觉表现力更强。
13.人体部位图形以人体部位为图形设计元素，常用的有眼睛、嘴巴、手掌、头等。利用人体的元素进行设计，用户对图形更加敏感，容易传播和记忆。
14.卡通图标卡通形象很容易和动物形象混淆，因为很多卡通形象都是基于动物设计演变而来的。这里单独提取出来，对一些单纯以动物外形为设计元素的表现手法进行分类。卡通形象设计在应用程序图标的设计中非常常见，容易对用户形成回忆。
15.拟人化图形图标通过在接近圆形或充满构图的图形中加入眼睛等元素，可以将整个图形拟人化。赋予原本冰冷的图形以生命，有一定的情感表达，让产品更加亲民，更容易被用户接受和记住。
16.从功能服务中提炼图形为了更清晰地传达产品的某种功能和服务，基于产品功能服务的图形设计也是一种常用的表现手法，如计算器、日历、导航等。直接提取相关图形元素进行设计，传达产品信息一目了然。也可以从产品和服务的内容上进行提炼，比如教育产品，学士帽可以提取出来进行设计。
17.渐变背景图标渐变背景的使用越来越受到设计师的青睐。相比单色背景，视觉表达更丰富，整体色彩给人通透的感觉。渐变可以是双色渐变，也可以是多色渐变，可以根据产品的气质灵活运用。
18.文艺风格图标文艺风格图标设计清新、复古、简约，适合文艺风格的产品。设计方向是简单的图形组合或文艺风格的字体设计，白色图标较多，配色简单，背景多为白色。如果是深色背景，以黑色复古为主。
19.活动气氛图标。用特定的活动氛围包装应用图标。将保留原有的图形外观，营造整体氛围，突出火爆的购物场景。
20.游戏角色图标游戏应用图标设计要求设计师在逼真的图标设计上有很强的基础。设计方向主要有：游戏角色、纯文字、道具或logos、明星头像、辅助图形或元素等。设计的表现力需要鲜艳的色彩、夸张的人物表情和动作、精美的设计和质感等。
IOS启动图标关键行规范：
苹果将正式给出生产模板文件。我们只需要用1024px*1024px的大小来设计启动图标，将设计好的启动图标放在文件中智能对象的图层中。这个时候你会发现，所有大小不一的图标都会被我们做的启动图标取代。
这里提醒一下，虽然我们看到的iOS图标是圆角矩形，但在机器上并不是标准的圆角矩形，而是一条连续的曲线。但是我们肉眼很难看出区别，所以也不用纠结它的圆角，按照直角矩形的大小来画就行了。
Android启动图标关键线规范：
安卓材质设计要求的基本尺寸是48dp，但这是1:1的尺寸，也是原来的尺寸。绘制时要求为基本尺寸的400%，即192dp，对应的网格基准由1px改为4px。通过保持此比率，对原始图像所做的任何更改都将被放大或缩小，从而在缩放值返回到100%(48dp)时保持清晰的边缘并正确对齐。
图标为图形元素的一致但灵活的定位建立了清晰的规则。关键线条形状是基于网格的，通过使用这些核心形状作为基线，您可以在整个产品图标中保持一致的视觉比例。这些关键线型使用预设的标准：圆形、方形、矩形、正交线和对角线。它们统一了产品图标，并在网格上保持一致的位置。
四。功能图标1。单色线状图标风格简单，造型简洁，辨识度高，视觉感受轻松干净。
2.双色线性图标表现力更强，细节更丰富。结合颜色的叠加、对比、互补，增强了图标的层次感和丰富性。
3.不透明度线状图标不透明度的叠加和变化可以增强图标的层次感和空间感，减少图标的压迫感。
4.渐变线性图标渐变线性显示图标的纹理。结合“深浅不同”或“饱和度不同”的变化，图标有了更多的细节和层次。
5.单色表面修饰色图标形状使用统一的颜色，结合图标不同的属性感知使用不同的颜色进行修饰；或者用不同的颜色作为主色调，黑白作为点缀。
6.双色图标通过对比色和相邻色的搭配，营造出整体的图标氛围，提高了图标的层次和丰富度。两种颜色的表达也增加了图标的趣味性。
7.渐变图标弱渐变增强图标的纹理。渐变的方向会影响整体图标的视觉效果，所以可以根据不同设计的需要进行调整。
8.不透明度/灰度/饱和度的变化使单色图标更有层次感和空间感，设计细节更丰富，降低了单色区域图标的厚度。
9.不透明度/弧度/饱和度变化的渐变设计提高了人脸图标的质感，在色彩上有一定的丰富性。在渐变的基础上，还可以区分图标的颜色，使其更有层次感。这种图标应用在UI界面的列表中或者顶部入口。
10.颜色叠加穿透图标。透明叠加后，产生交错的负形，叠加第三表面。整体设计保持扁平化，但有层次感，并加入了图标的细节。
11.渐变叠加的整体效果接近不透明度的变化。通过渐变深度的变化，在形状的交界处有明暗的对比，所以图标也有厚重感和层次感。
12.磨砂玻璃图标利用了背景模糊的效果，比透明度变化或颜色叠加更有空间感。图标有很强的设计感。
13.轻纹理图标类似于渐变层次叠加，不同的是颜色更丰富。使用多色块、多种颜色或多角度渐变和阴影，整体风格偏向插画风格和渐变纹理，视觉上更接近立体图形，整体风格偏向多彩的颜色风格，纹理和细节丰富。它们大多用于类别区域，需要比传统的单色图标更吸引人。
14.光拟像图标的核心基础与拟像设计保持一致，省略了较为复杂的细节，注重光影的表达，高光和阴影都很到位。
15.逼真的图标用来直接反映和投射几年后的现实，让用户一眼就能知道设置了什么功能或者这个按钮是干什么用的。后来因为显示器分辨率跟不上，风格逐渐平淡，近几年又逐渐起来。最典型的就是苹果Mac系统上的图标。
16.2.5D图标以轴测图为基础，XYZ轴，有立体透视的感觉。
17.卡通图标更适合固定的功能区/类别区，一般用在更多的操作位。
18.图片处理图标在生鲜app中很常见，让食物看起来更加真实生动。
19.装饰图案填充图标黑白线品牌色，或两种相近的颜色。
20.整体填充的弱面强线的图标形状识别度更高，更符合图标的表达。
21.线面错位图标在双色图标的基础上，将线面按照统一的百分比进行缩放，或者采用统一/规则的图案设计透视和位移，整体呈现出交错的视觉效果。
22.卡通插画图标整体感觉是卡通，可爱，次要。
动词（verb的缩写）设计规范图标是任何设计系统或产品体验的重要组成部分。图标可以帮助我们快速导航，它们与语言无关，最重要的是：它们非常小，所以不占太多空间。图标是设计良好的系统的基本组成部分。因此，科学严谨的设计规范可以帮助我们设计出精致统一的图标。
1.大小是ios的删除格式4的倍数，Android的删除格式8的倍数。想要两头都合适，就得选择8的倍数，而且由于ios的最小可点击面积是44px，所以48px是比较合适的尺寸。这不是一个硬性规定。最好按照4或8的倍数。
图标基于48x48px画布绘制线性图标，线宽默认为4px。
不同场景比例的使用：
图标为64x64px时，线宽为6px(参考线宽)；图标为32x32px时，线宽为3px(参考线宽)；图标为24x24px时，线宽为2px(参考线宽)。
2.图标的关键线图标网格为图形元素的一致但灵活的定位建立了明确的规则，关键线形状是网格的基础。通过使用这些核心形状作为指导，您可以在系统图标之间保持一致的视觉比例。
3.图标关键图形图标网格用作绘制图标元素的参考，有助于建立清晰的内容轮廓边界。关键是在设计过程中促进图标的统一，简化比例调整的成本。你需要参考一个小正方形的关键线来画一个小图形。
4.图标的角1)直角角
当基准图形是一个完整的集装箱正方形时，建议使用3倍圆角。当基准图形是全高(宽)的矩形时，建议使用2X圆角。当基础图形为小矩形(宽度和高度小于1/2)时，建议使用1X圆角。
2)非直角拐角
非直角根据图标场景，通常不考虑角度，默认为1X圆角；除了特殊弧度的曲线“拐角”，要根据图标设计的需要单独考虑。
5.图标区域——封闭和非封闭的封闭区域，是由封闭曲线形成的封闭区域，可以用独立的颜色填充。
由非闭合曲线组成的非闭合区域是非闭合区域。原则上不允许独立颜色填充。
当封闭区域为曲线且有相交线段时，原则上不能进行独立的颜色填充。
6.图标构图——线段和端点为了保证风格的整体一致性，图标的所有线段端点默认都应该是与线段等宽的圆形端点；一般来说，线段和可编辑节点的端点坐标比整数坐标好。
基于默认48dp画布绘制的线性图标，默认线宽为4dp；线条宽度和曲线宽度始终保持一致。
7.图标绘制规则当线段与曲线相交或不垂直于直线时，线段的末端为圆形；当线段与直线垂直相交时，线段的终点是正方形；当点的直径与线宽相同时，用图形而不是线段来绘制点。
当圆和正方形小于16px时，建议用图形而不是线条来画。
8.图标中的倾斜角度图标中的倾斜角度应该是45的倍数，与钥匙线中的对角线或十字垂直交线保持平行关系。
在矩形框架的情况下，倾斜角也可以平行于矩形的对角线或垂直交线。
45、30和60角的对角线比13.7或81等不均匀角的对角线看起来更锐利。
9.图标断裂和间距内部结构与外框之间的间距不得小于线条宽度；元素之间的间距不应小于
帧的端口大小渐变：4px，8px，12px，建议大小是4的倍数。
10.图标样式转换图标允许特定规则下不同样式之间的转换，即线性样式(默认)、填充样式、混合样式和多色混合样式。
1.命名规则科学高效的命名规则可以帮助我们快速定位自己的图标，缩短命名时间，加快团队合作。图形命名可以采用“业务_类型_功能_大小_状态”的格式，最好是英文。
13.UI模块VI。图标设计的标准。我们已经知道了图标的基本理论，那么如何设计一个好的图标呢？如何看自己设计的图标是否符合产品？这里我们将从四个方面来学习，什么是好的图标。
1.可识别的设计师有时过于注重形式而忽视了自身的功能，导致图标难以识别，这就打破了其最重要的图形图像属性——图标传达意义的功能必须放在首位。
图标是对象或动作的可视化表示。如果用户不清楚这个图标的含义，图标马上就失去了实用价值，变成了视觉干扰。在图标的设计中，我们必须确保图形简洁、严谨、清晰、边缘干净，这是提升产品界面质量的重要和基础部分，而不是一味追求流行的视觉风格和作秀。
除了达到基础水平，我们还可以通过在图标中融入品牌信息和有趣的细节，让图标更具吸引力，提升用户对产品/品牌的好感度。
图标设计理念的本质是简化到最简单的形式——简化图标是为了减少学习曲线的需要。设计要保证，即使图标在小尺寸下可读性更强，更清晰，精心设计的图标也要能够快速识别，一目了然。
2.标准化我们需要确保每个图标视觉尺寸的一致性。图标网格用作绘制图标元素的参考，有助于建立内容的清晰轮廓边界。关键是在设计过程中促进图标的统一，简化比例调整的成本。
3.团结。在绘制一整套图标时，统一性非常重要。不要把不同风格的图标混搭成一整套图标。风格的一致性将有助于用户识别图标，并理解它们具有相同的重要性或地位。
界面中的图标一般都是系列设计的。除了保持相同的视觉风格和特征外，同一产品中相同的功能和信息图标也应保持相同的形状，以免用户混淆。图标的统一性可以从线条的粗细、颜色、圆角、倾斜角度来检查。
4.呼吸感呼吸感意味着适当的留白。无论是做图标还是做界面，适当的留白都可以突出主体，让空间更有张力，更有可视性。图标相邻元素之间的间距不能过小，整体不一致。定义最小间隙，并将其保持在任意位置，以避免轮廓“粘连”。
七。摘要图标设计是设计师必备的能力。图标绘制看似简单，做好却不容易。好的图标设计不仅能帮助用户更高效地解决问题，还有助于产品和品牌的差异化，这就考验设计师的细节了。但是，UI设计处处充满细节，如果你想让自己的界面更加精致，就不要忽略每一个可以改进的地方。
以上分享的大部分图标基础知识就是这些了。图标本身就是一个比较大的范围，本文难免有很多不深入的内容。欢迎各位导演的评论。最后，感谢您的阅读。希望今天的文章能帮到你。
附录参考《Material Design》
《Apple Developer》
《History of icons》
《An oral history of the hamburger icon》
《Hopefully, the Ultimate Guide to an Interface Icon Set》
《设计师必看的图标设计指南》
本文由导演郝
本文由@费明原创发布。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。