UI基础|界面图标规范，一文看懂！

UI基础|界面图标规范，一文看懂！

好的图标设计不仅仅是美化界面的元素，也是传递信息、增强交互体验的重要工具，更是一个设计师专业力的体现。本文整理了6条图标设计规范，在日常设计中灵活运用，让界面更美观：

1. 图标寓意

• 表意准确：表达的寓意清晰，是工具图标的基本要求。并能贴近用户心里的隐喻和认知。
• 清晰识别：图标还要能在各种环境下（例如在各种色彩丰富或单一的壁纸上）都被清晰识别。
• 除此之外，简洁的造型更容易被识别和记住。

在APP界面中，图标可以修饰整个应用，点缀和美化界面，让页面布局变的不在生硬。也是对信息的提炼和浓缩。同时也可以作为视觉引导，增加网站或应用、软件的交互性。

2. 图标的类型

在UI设计界面中，根据界面功能分为五大类。

• 顶部导航栏图标：常见有搜索、收藏、消息、扫一扫等图标
• 底部导航栏图标：常见有主页、我的等一些主要模块图标
• 金刚区图标：是UI界面中的核心功能区域，承载主要功能和重要信息
• 表单内图标：常见于“我的”页面。根据产品类型不一样而有差异
• 通用图标：常见于箭头、睁眼、闭眼、返回、我的等

3. 图标设计基本原则

• 表意准确：图标设计的第一原则，要让用户快速理解图标所代表的含义。
• 细节一致：包括风格、圆角、线条粗细、透视、颜色等细节的一致
• 尺寸一致：相同规格的图标使用统一的画布区域，而不是跟随图形尺寸。
• 比例一致：相同尺寸的图标要有视觉感受一致的形体比例，让视觉平衡。
• 简洁明了：图标应传达单一、明确的信息。避免过多的细节，保持简洁。
• 可用性：图标应提高用户体验和界面可用性，确保功能明确并能快速引导用户操作。
• 差异性：在设计图标时，突出产品核心功能的同时，避免同质化要表现出差异性，力求给用户留下深刻的印象。

4. 界面中的图标尺寸

• 常用图标尺寸：界面中常用的图标尺寸包括12x12、16x16、18x18、24x24、32x32、48x48等。这些尺寸基于不同的使用场景和元素层级，可帮助保持界面的一致性。
• IOS平台规范：IOS界面的网格系统基于4pt的倍数。苹果官方建议最小可点击区域为44pt，以确保用户在操作时的准确性和舒适度。因此，设计IOS图标时应以此为参考，确保交互元素的可点击性。
• Android平台规范：Android界面使用8dp的倍数作为网格基础，最小操作热区要求为48dp。因此，通常建议采用48px作为常规图标的设计尺寸，以便在不同设备和分辨率下都能保持良好的触控体验。
• 设计建议：尽量使用符合平台规范的尺寸，以确保图标在不同设备和系统下的显示效果和交互体验一致。同时，选择适当的尺寸有助于减少用户误操作，提高应用的可用性。

5. 图标绘制规范

• 图标的删格：删格系统即(Keyline)就是把圆、正方向、三角形、长方形(纵向和横向)合并到一起的参考物，方便我们在设计不同图标时进行参照对比。正确的使用删格会让设计更加标准和统一。网格以24*24为基准，可成倍放大或缩小。
• 1212，2424，4848等尺寸都可以，以下用2424进行绘制，在里面绘制不同的形状有不同的长宽数值。

6. 常见图标风格

• 线性图标：线性功能图标是最常见的风格，通过线条的描边轮廓勾勒出来的，线性图标让视觉看起来简单、直观。
• 面性图标：对内容区域进行色彩填充的图标样式。常见有单色、多色以及微渐变风格等表现形式，相比较线性图标应用场景更加丰富。
• 线面结合：既有线性描边的轮廓，又有色彩填充的区域，趣味性较强，具备个性化特点，可以做Tab选中状态。
• 毛玻璃图标：也叫磨砂玻璃质感图标，是轻质感的表现形式之一。采用简单的背景模糊绘制，通过元素叠加背景虚化的方法形成的玻璃模糊质感。
• 渐变色图标：丰富渐变色更适合运营入口设计，有年轻化、热烈的氛围。
• 插画风图标：插画风图标是插画风格的简化融入，以此提升图标设计的特征感使得图标具备差异化的视觉效果，也能烘托出整体设计的质量。
• 主题化图标：主题化图标设计风格多样，会结合活动主题或者节日庆典等内容根据主题设计图标更能体现产品温度。
• 扁平化图标：扁平化图标是一种简单的设计风格，通过简单的图形、字体和颜色的组合，达到直观、简洁的设计效果。
• 微质感图标：相较于扁平化设计而言，更能突出细节的深入和真实感的体现微质感图标的层次感也更丰富，该技法也是设计师的必备技能。
• 晶白风图标：晶白风图标常用于金刚区栏目，利用白色不透明度关系和背景色关系进行圈标设计图标质感、层次感、空间感等都能得以体现。
• 立体感图标：立体感图标分为2.5D、伪3D、3D建模等形式，也可以利用AI工具完成该类型图标。