展示设计平面图标注图标-带你全面解锁图标设计

Icon（图标）设计一直是UI设计师基本功的重要标准，也是刚刚学习UI设计的新手最不可缺少的学习内容。 通常，图标是整个页面设计的核心。 不同风格、颜色、类型的图标展现出产品的特点和调性。 图标可以说是整个项目的关键核心。

那么这次我就详细的跟大家分享一下图标的种类以及设计规范的内容：

1. 图标类型

图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素。 不同类型的图标具有独特的魅力。 例如，线性图标简单、轻巧，而多面图标则厚重、直接，而且同一类型的图标也有多种不同的表现形式。

UI设计中的图标设计大致分为线性、曲面、线面结合三类。 组合三种基本类型的表达式可以创建各种各样的表达式。 在此基础上，可以通过光源和阴影创建不同的图标纹理。

目前的UI设计主要以扁平化风格为主，过于写实的风格逐渐被抛弃。 如图所示，是现在常见的图标类型的一个例子。

不同的图标类型

1. 线性图标

简单来说，线性图标就是根据线条的延伸来绘制物体轮廓的图标。 它们是根据线条粗细、端点类型、圆角、笔画等来绘制的展示设计平面图标注图标，优点是简洁、工整。 常用于app的标签栏和导航栏，从而在一定程度上减少对用户的视觉干扰，使用户的视觉中心回归到产品或app体验本身。

线性图标（来源：dribbble）

线性图标（来源：dribbble）

2. 脸部图标

面形图标往往以立体图形的形式绘制，高度概括了其所表达的意义。 与线性图标相比，应用场景更丰富ip形象，视觉表现力更强，细节丰富。 常用于功能图标，可以让用户快速定位图标位置，预测点击后的状态，更加人性化。

脸部图标（来源：dribbble）

脸部图标（来源：dribbble）

3. 线和面图标

线平面图标是一种将线和平面结合在一起的图标。 与线性和平面图标相比，它们更难以控制，并且实用场景有限。

线条图标（来源：dribbble）

线条图标（来源：dribbble）

2. 图标纹理风格

图标纹理风格表现关系到整体UI设计风格。 虽然近年来UI设计的图标风格趋于扁平化，但不同风格、质感的图标却从未消失。 比如近一两年流行的新拟态风格、磨砂玻璃质感的图标就很受欢迎。

常见的图标纹理类型如图所示。

不同的图标纹理

1.磨砂玻璃款式

磨砂玻璃效果的图标设计，元素叠加模糊背景形成玻璃的模糊质感，磨砂玻璃风格的图标层次丰富，透明感极强。 它可以用于广泛的场景，不仅仅是图标设计。

磨砂玻璃风格图标（来源：dribbble）

磨砂玻璃风格图标（来源：dribbble）

2.新形态风格

新拟态风格是近年来非常流行的设计风格。 它主要利用光影原理将背景融合，形成立体效果。 但应用场景相对有限，且对背景颜色依赖性较强。

新的模仿风格图标（来源：dribbble）

新拟态风格图标（来源：figma社区）

3.大苏尔图标

Big Sur 图标是苹果 2020 年发布的 macOS，将与 iOS 同步，从 X86 平台迁移到 ARM 平台，从 macOS 10 迭代到 macOS 11。本次版本更新称为 Big Sur。

Big Sur图标也源自“新准物”风格设计。

大苏尔风格图标（来源：dribbble）

4.扁平化风格

扁平网格图标的应用场景更加广泛。 大多数常用的移动应用程序都是扁平式图标设计。 此类设计元素简洁明快，造型突出，信息传递更加直观。

平面样式图标（来源：figma 社区）

平面样式图标（来源：dribbble）

5.MBE风格

MBE风格的图标设计是由Q版线框卡通演变而来。 这种设计风格大多在图标周围使用更大、更粗的笔划和点。 与没有描边的扁平化图标相比，去掉了多余的图标。 色块区分，色彩更加统一、系统。

MBE风格图标（来源：dribbble）

MBE风格图标（来源：dribbble）

6.卡通风格

卡通风格的图标常用于简笔画风格的app和网站设计，主要采用插画设计手法卡通形象，更加可爱、温馨、活泼、有趣的设计产品。

卡通风格图标（来源：dribbble）

卡通风格图标（来源：dribbble）

7. 轻拟物风格

轻拟物风格介于简约与写实之间。 主要是在扁平化的表达风格基础上，加入了细节，辨识度相对较高。 它贴近现实生活，非常注重细节。

浅色伪风格图标（来源：figma社区）

8.立体风格

三维风格可分为2.5D和3D两种风格。 该风格的图标也介于简约与写实之间，以三维表现为主要风格。 与浅色拟物风格不同，它更具视觉冲击力和表现力。

2.5D风格图标（来源：dribbble）

3D风格图标（来源：dribbble）

9.超写实风格

超写实风格目前应用并不广泛，而且设计非常接近实物，也比较注重细节。 设计的时候注重光影的效果，也更能体现出设计功底。

超写实风格图标（来源：dribbble）

超写实风格图标（来源：dribbble）

超写实风格图标（来源：dribbble）

3. 图标网格

图标网格用于促进图标一致性，并为图形元素的定位建立一套清晰的指南。 这种标准化的规范产生了一个灵活但有组织的系统。 下图以Android和iOS系统为例，展示了两种常见的图标网格。 这些网格有共同的特点：留有边距，并且为几种典型的图标形状提供了辅助图形参考。

图标形式

图标网格通常包含三部分：活动区域、装饰区域、关键线形状。

(1)活动区域：指图标主要内容的绘制区域。 一般来说，图标图形的主要内容就在这个区域。

(2)装饰区：指一些不寻常的图形，用来承载一些图标。 一些视觉比例较小的图形可以延伸到装饰区域展示设计平面图标注图标，但不能超出网格范围。

(3) 关键线形状：关键线形状是网格的基础。 使用这些核心形状作为指导，您可以在产品图标设计中保持一致的视觉比​​例。

4. 图标设计规范

图标设计尺寸

为了保证系统中图标的大小统一或者按照统一的规则变化，常见的平台设计规范对其大小都有相应的规范。 这里主要介绍Android和iOS系统的图标设计尺寸规范和转换标准。

1. Android应用程序图标设计

Google Play应用程序图标设计尺寸最大可以设计为512×512像素。

材质APP图标设计尺寸

2.iOS图标设计

设计时，设计师通常只设计一个App Store图标（1024×1024 px），这是最佳的设计尺寸。 对于其他尺寸，您可以使用iOS图标生成器自动输出一组，并对小尺寸图标进行细节微调。

iOS系统会自动切圆角，所以在设计图标的时候，我们只需要根据App图标的大小输出一个直角的图片即可。

iOS APP图标设计尺寸

图标元素大小和间距规范

1.图标最小尺寸

由于我们的拇指有一定的尺寸，所以图标的尺寸必须能够让拇指有效点击，最小尺寸不能小于：48dp*48dp（Android规范推荐）。 实际上，44dp-48pd 之间的点击尺寸是可以接受的。

2. 图标与相邻元素之间的最小间距

为了不意外碰到图标旁边的元素，图标与周围要保持一定的距离，间距为：8dp。

在某些极端情况下，允许可点击区域小于48*48dp，例如：文章中的链接、日期选择器。

在一个界面中，任何“可点击元素”的尺寸不能小于44*44dp； 在一个界面中，任何可点击的图标与其周围的距离不能小于8dp。

图标最小尺寸以及图标与相邻元素之间的最小间距

5. 图标设计注意事项

1.保持线性图标粗细一致

2.保持圆角一致

3.保持尺寸平衡

4.图标视觉权重平衡

6.图标网站

阿里巴巴的食物图标和插画资源网站

这是一套高品质且完全免费的图标素材！ 您可以使用内置功能直接自定义图标。

BigSur图标包包含100多个优质图标，每个APP图标均采用Apple官方模板精心制作

拥有 300 多个基于扁平化设计的高级图标，并在非常宽松的 MIT 许可证下获得了慷慨许可

“Iconduck”是一个网站，包含 146 个免费图标集（仍在增加）和超过 110,000 个免费图案，主要是开源图标和矢量图标。 您可以搜索或直接预览图标图案。 网站 会提供原始页面源码，大部分图标集可用于个人或商业用途（取决于图标本身使用的许可证，有些会要求注明出处）。

字节跳动（ByteDance） ByteCUX设计团队制作的开源图标库

总结

以上就是图标分享的全部内容了，相信你也应该对图标设计有很多了解了。 最重要的是在日常设计中学会运用和思考。