目录

1。图标的起源

2。图标设计的定义

iii。图标的类型

4。8图标设计原理

5。图标的6个函数

6。4改进图标设计的技巧

7。5图标网站建议

8。图标命名规格

1。图标的起源

在计算机开发的早期，用户界面主要基于由字母和数字组成的命令行，具有复杂的操作，对普通用户不友好。用户需要记住大量命令和参数来使用计算机系统。

随着计算机技术的开发，为了使计算机易于使用和理解，程序员开始开发图形元素以表示各种操作和功能，并且图标的概念诞生了。最初的目的是帮助新手用户在不记住复杂命令的情况下更轻松地组织文件和执行任务。

1。施乐的开拓性工作

1973年，美国的施乐公司在真正意义上启动了第一批具有图形用户界面的个人计算机-Xerox Alto。尽管这台计算机仅生产约2,000台，但它为后来开发计算机图形接口的基础奠定了基础。一些简单的图标出现在其界面中，例如垃圾桶，计算器，打印机，文件和文件夹，这些图标已成为后来图标设计的原型。

2。苹果的晋升

1979年，史蒂夫·乔布斯（Steve Jobs）在访问施乐的原型后受到启发，开发了自己的图形界面计算机。 1983年，苹果公司推出了Apple Lisa，这是Apple的第一台图形接口计算机，并进一步开发了界面中的图标设计。

在此期间，现代图标设计的母亲苏珊·卡尔（Susan Carr）担任苹果的创意总监。她设计的像素风格的图标是简单，清晰，易于理解的，并且具有很高的视觉平衡，即使在今天，它看起来也充满活力和有趣。 。

3。微软的后续和发展

1985年，微软发布了Windows 1.0操作系统，这是Microsoft在图形用户界面领域的重要尝试。该系统中的图标设计还借鉴了一些苹果的想法，但它也具有其自身的特征。随着Windows操作系统的持续开发和普及，图标设计逐渐成为用户界面设计中必不可少的一部分。

2。图标设计的定义？

图标设计是一项设计活动，主要创建代表各种元素的图形符号，例如对象，动作，概念等。

这些图形符号很简单，可以快速识别。例如，手机桌面上的微信号使用两个对话气泡的简单模式来表示该软件，这使人们一眼就能理解。 Icon Design在许多字段中都有应用程序，例如软件接口，网站，移动应用程序等，可以为用户提供视觉指导并促进用户的操作。

iii。图标的类型

图标在改善产品气质中起着不可估量的作用，并且经常在界面中获得最后的触感。无法想象没有图标的无聊和无聊的界面将如何出现，但是图标不能总是使用一个。形式的图标会让人们感到烦人，因此它们会导致图标的多样性。以下是我编制的常见图标类型：

1。就视觉表达而言，有以下12个主要类别的图标

2。就功能而言，有以下6类图标

tool图标：

工具图标被广泛用于B端项目，几乎每个组件都包含此类图标。例如，上面的文档编辑图标属于这种类型，其装饰性很少，它更像是功能载体。 。

❷规定图标：

在某些软件产品中，将强调品牌和情感设计，并且将启用大量3D装饰图标以增强界面的质地。

例如，下面的界面设计腾讯计算机管理器使用大量的装饰图标来传达信息并表达品牌。中央政府还使用腾讯计算机经理的IP图像作为入口点，可爱的图像无形地将其近。与观众的距离。

❸开始图标

在项目中，当用户想表达自己的品牌时，他们经常将徽标图标制成动态图片，以更好地传达品牌概念。例如，联想计算机管理器在启动页面时使用动态启动图标，以下内容也带有标语文本动画，该动画将安全性概念传达给用户的概念非常好。

❹过程提示图标

在软件接口中，通常需要过程提示，并且图标可以扮演此角色。例如，当腾讯计算机管理器清理垃圾时，图标内的风扇正在不断转动，这意味着正在进行清洁工作。

❺状态提示图标

当软件运行时，不可避免地会有错误或内容为空。目前，状态提示图标特别重要，这可以大大减轻人们的焦虑。

❻图标增加了接口兴趣

图标不仅可以提高人们在理解和使用方面的有效性，而且有时添加动画也会带来一些惊喜和乐趣。

例如，联想的动态加载图标看起来非常有趣，并且使人们无法提供帮助但欣赏它。

4。8图标设计原理

尽管AI现在很受欢迎，并且可以通过AI实现许多很酷的效果，但我们仍然需要了解一些使图标看起来更专业，精致和令人愉悦的秘密。了解这些设计原理可以以一半的努力导致结果两倍。当AI生产偏离时，我们可以优化，修复和调整自己。

1。大小的统一

图标尺寸是均匀的，也就是说，将一组图标放在一起，图标的大小应该看起来相同，并且它们不应该太大或太小。例如，这组图标的第三个图标显然太高了，如果将其与其他图标一起放置，它将出现。不太协调，美丽和统一。

就统一的大小而言，我们记得几何图形具有视觉差异。有时它们并不意味着大小是相同的，但大小是相同的。例如，以下数字集，左图的高度相同，但它们看起来很大。它不是很相似，中间的三角形看起来很小。右组的三角形比左侧和右侧更高，但它们的大小看起来相似。这是由几何图形引起的视觉差异，这是我们制作图片时的视觉差异，请记住更多的感觉。设计中的许多美丽无法通过1+1 = 2来清楚地解释。这是一种感觉。放开心脏中的浮躁，我们仍然可以感觉到它们之间的区别。 ，这种美丽并不是那么神秘。只要您小心，您绝对可以制作具有相同尺寸的图标。

2。统一的圆角

圆角是均匀的，即图标具有相同的形状，然后它们具有圆角，因此它们必须保持相同的圆角曲率。例如，以下图标具有方形形状，它们都具有圆角的曲线明显不同，这使它们看起来不合格和专业。

3。统一风格

接口中具有相同功能的图标的样式和样式需要保持一致。例如，这组图标的样式高度一致，它们由类似玻璃的哑光材料制成。

4。统一角度

这组平面图标具有一个小的色块，其颜色块与右侧相似，从而增加了图标的分层，并且相同的角度也会增加图标的一致性和串联感知。

5。统一的厚度

图标的厚度应该是均匀的，以使图标看起来更精致。例如，在下面的图标组中，图标的外帧线都是3px，图标内的线为2px，并且图标的厚度都保持不变。厚度和厚度是规则的，这些图标看起来相同和一致。

6。统一密度

下面是类似于插图样式的一组图标。图标的样式密集并且充满了接线，所有三个图标都遵循此原理，并且看起来令人惊讶地统一，因此它们看起来像一组图标。

7。透视统一

当设计的图标是三维的时，请注意，它们的观点必须统一。就像下面的2.5D图标集一样，它们的设计透视图仍然很一致。

8。易于识别

图标的优势和缺点首先取决于它是否可以允许用户一目了然地理解其表示的含义。这是一个非常重要的图标设计原理。

以下一组手机主题图标非常可识别，简洁且易于理解。

5。图标的6个函数

图标在接口设计中起着至关重要的作用，并且它们在应用程序的每个角落都无处不在。无论是导航栏，工具栏，标签栏还是主页页面，详细信息页面或个人中心页面，功能图标无处不在。图标的主要功能是传达信息。与文本相比，它们可以更直接地传达概念，并为用户的视觉体验增添乐趣。

1。提高界面的效率

功能图标通常以简单的图形呈现，从而有助于用户的标识和内存。该设计使用户可以快速找到所需的功能，而无需花费时间阅读文本说明或浏览冗长的菜单选项，从而大大提高了界面的效率。

关于华为云的此界面，有很多文本信息。由于图标的存在，人们可以非常有效地发现它，并且可以有效地找到所需的信息。

2。提高用户满意度

图标不仅可以提高接口使用的效率，还可以提高用户的身体和满意度。精致的图标使人们取悦眼睛。就像我们在街上看到一个美丽的女人一样，我们不禁要和我们在一起。相同的。

华为Cloud精美的图标动画效果使我有了很多视觉享受。图标设计非常精致，颜色匹配很舒适，并且动画效果也给用户提供了足够的满意。

3。降低人们的看法成本

许多图标来自生活和我们熟悉的事物。在界面中使用熟悉的图形将大大降低人们的认知成本，并引起更多人的共鸣。它的交流功能不受语言的影响，民族边界的边界是一种有效的界面表达语言。

这套华为云的图标使用了人们日常生活中人们非常熟悉的元素，具有强烈的共鸣感和学习和理解的成本非常低。

4。提高品牌形象

如果您仔细观察，您会发现生活中有许多软件产品可以将公司的徽标集成到日常产品的图标设计中，从而大大增加了品牌的曝光率。

腾讯云有一个很小的主意。它将将Tencent Cloud徽标集成到横幅图标设计中，传达信息，同时加强品牌曝光。

5。图标可以增加界面的丰富度

借助图标接口，该页面看起来更丰富，更强的分层感，并且在信息表达中更加清晰和整洁。

360AI Office界面看起来如此丰富的原因是，这是由于图标的应用。界面中有大型图标，小面图标和线性小图标。与对比相比，整个页面看起来更丰富。

6。减少界面的无聊感觉

相同的文字不可避免地会让您感到无聊，并使您不愿留下更多。图标和可爱的Q形外观的彩色颜色匹配将使您快乐。

如果Zuotang的接口没有被图标抛光，那么只要它只是功能点和文本介绍，可能会很无聊。但是，随着添加丰富多彩的图标，气氛立刻变得更加活跃。

6。4改进图标设计的技巧1。复制很多并故意练习

任何技能的获取都不是在开始时复制的。作为刚刚参与UI设计的工作场所的新来者，您可以首先复制，复制简单的人，然后逐步进行。复制更加困难，因此图标设计能力也将缓慢提高。

2。积累更多好样品

如果您想绘制漂亮的图标，则必须首先看到好看的图标。因此，我们应该养成收集更多优质图标并在日常生活中设计的习惯，以便在面对新需求时，我们不会急于并且不知道该如何开始。

3。学会分析

当您看到漂亮的图标设计时，我们必须学习分析。这套图标很好，对它有什么好处，以及给您留下深刻的印象。如果分析这些，您将在设计中不知不觉地应用智慧和智慧。想法，以便我们可以随时创建满足我们需求的原始图标设计。

4。澄清目标和听众

不同的目标受众，他们对图形的期望也将有所不同。例如，在设计儿童产品界面和B端产品界面时，所使用的颜色和形状非常精致。

儿童产品的图标设计将具有更圆形和彩色的颜色。但是，B-End产品的图标设计将具有非常约束的颜色，并且形状不会太圆。

七个图标网站建议

1。ICONFONT（）

Iconfont是阿里巴巴的图标库，也应该是Icon下载网站，受众群体最多。它大大改善了我们的日常工作，并使许多设计师受益。

2。ICONPARK（）

ICONPARK是Icon下载网站的bytedance。它可以在线切换多种样式的图标，结合线性，表面和线条，并且可以调整线的厚度和大小，这非常方便。

3。ikonate（）

Ikonate是一个可以在线编辑的图标网站，涵盖了一些常用的图标，可以调整线路的厚度和大小。导出格式为SVG。

4。iConfinder（）

我认为Iconfinder的优点是它具有足够丰富的形状，可以满足您有时无法修复的疼痛点。

5。iConduck（）

Iconduck的优点是它拥有273,858个免费图标库和插图库供每个人选择，并且储量丰富。

8。图标命名规格

图标通常具有四个状态：正常（NOR），亮点突出显示（hig），选择（SEL）和不可用（DIS）状态。一个好的命名习惯将为您的伴侣带来良好的成果。通常在编写界面时，前端以英语命名。在这里，我将列出我经常与同事合作的命名规范以供您参考：

模块类别功能的结构

例如：nav_button_message_sel

总结

在深入探索了丰富的图标设计世界之后，我相信每个人都可以根据不同的场合选择适当的图标风格和风格。

通过持续的摘要和归纳，我对图标设计的理解变得更加深刻。尽管此摘要可能仍需要改进，但请原谅我，并期待在下一篇文章中再次与您会面。