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

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

　　UI 设计中的图标设计大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。在此基础上，又可以通过光源、阴影打造出不同的图标质感。

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

　　线性图标简单点说是以线做延伸绘制的物体轮廓的图标，基于线的粗细大小、端点类型、圆角、描边等绘制成型，优点简洁、整齐。常用于app的标签栏和导航栏，这样一定程度上减少用户的视觉干扰，使用户的视觉中心回归到产品或者app体验本身。

　　面性图标常以实心图形为表现形式绘制，高度概括其表达含义。相较于线性图标应用场景更加丰富，视觉表现力更强，细节丰富。常用于功能图标，并且可以让用户迅速定位图标位置，预知点击后的状态，对用户体验更友好。

　　图标质感风格表现与整体的 UI 设计风格相关，虽然近几年的 UI 设计的图标风格趋于扁平化，但是不同风格杏彩体育登录、质感的图标从未消失。比如最近一两年流行的新拟态风格、毛玻璃质感图标都很受欢迎。

　　毛玻璃效果的图标设计，通过元素叠加背景虚化的方式形成的玻璃模糊质感，毛玻璃风格图标层次丰富，通透感比较强，应用场景广泛，不止应用于图标设计中。

　　新拟态风格是近几年非常流行的设计风格，主要利用光影原理融合背景形成的一种立体感的效果，但应用场景比较受限制，对背景颜色依赖性比较强。

　　扁平分格图标应用场景更加广泛，常用的手机app大多是扁平风格的图标设计，这种类型设计组成元素简单干净，外形突出，信息传达更直观。

　　MBE风格图标设计是从线框图Q版画演变出来的，这种风格设计多采用更大更粗的描边和围绕图标的点，相较于没有描边的扁平风格图标，去掉了多余的色块区分，颜色更加统一系统。

　　风格图标常用于简笔画风格的app和网站设计中，主要是使用插画的设计手法，更加有可爱、温暖、活泼有趣的设计产品中。

　　轻拟物风格介于简洁和写实之间，主要以平面表现风格为主，增加细节表现，辨识度相对更高，贴近真实生活，非常注重细节。

　　立体风格可以分为2.5D和3D两种风格，这类风格图标也是介于简洁和写实之间，以立体表现为主，不同于轻拟物风格，更加有视觉冲击力和表现力。

　　超写实风格目前应用不多，非常贴近实物的设计，也更加注重细节，设计时要注意光影和阴影的效果，也更加展现设计功底。

　　图标网格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。下图以 Android 和 iOS 系统为例，展示了两种常见的图标网格，这些网格都有共同的特征：留有边距、为典型的几种图标外形提供了辅助图形参考。

　　图标网格通常包含三部分内容：活动区域，修饰区域杏彩体育登录，关键线）活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主要内容都在该区域内。

　　（2）修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。

　　（3）关键线形状：关键线形状是网格的基础。使用这些核心形状作为准则，你可以在产品图标的设计中保持一致的视觉比例。

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

　　设计师设计时，通常只用设计一个 App Store 的图标（1024×1024 px ），这是最佳设计尺寸。其他尺寸可用 iOS 图标生成器自动输出一套，小尺寸图标单独微调下细节即可。iOS 系统会自动切割圆角，所以在设计图标时，我们只需根据 App 图标的尺寸输出直角的图片即可。

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

　　为了不误触图标旁边的元素，图标与周围应保持一定的距离，间距为：8dp。在一些极端情况，允许可点击范围小于 48*48dp，例如： 文章中的链接、日期选择器。

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

　　「Iconduck」是一个收录 146 个免费图标集（还在持续增加中）、超过 11 万个免费图案的网站，主要以开放原始码图标和向量图标为主，可以通过搜索或直接预览图标图案，网站会提供原始页面来源，大多数图标集都可被用于个人或商业用途（取决于图标本身使用的授权方式，有些会要求需要标注来源） 。

　　到这里是图标分享的全部内容，相信你也应该掌握了不少图标设计的知识。最关键的是在日常设计时，学会运用和思考。转发自@知群公众号 仅供学习