UI设计中标签栏图标设计规范
图标其实存在于界⾯中的许多地⽅，今天我就带⼤家来聊⼀聊标签栏中的关键元素——图标。但因为是主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结⼀套标签栏图标设计规范。这些⽅法在图标制作过程中都是相通的，⼤家可以举⼀反三。在此之前，如果你还没有了解标签栏，可以回顾：《UI设计中标签栏总结》
⼀、标签栏图标规范
1.1 图标样式
图标具体样式风格的定义是⾮常主观的，⽹络上也流传着许多的教程教⼤家如何设计五花⼋门的图标，所以在这⾥我就不再赘述了。我主要来总结⼀下基础的标签栏图标⼀般有哪些样式变化。
我调研了诸多的应⽤程序，发现主流的APP标签栏样式变化，⼤致分为以下五种。其中最占⽐最多的是“由线型转⾯型”。
调研的应⽤程序中，所有使⽤到线性图标的应⽤程序，都将描边粗细限制在1pt-2pt之间。
1.2 图标视觉⼤⼩
上⼀期我们讲到，iOS定义了⼀套标签栏图标的尺⼨规范。
iOS在这⾥所定义的尺⼨并不是图标⽂件最后输出的尺⼨，⽽是给设计师作图时，针对不同图标形状的参考尺⼨，⽬的是为了让图标的视觉⼤⼩看上去⼀致。
那么为什么iOS会根据不同的图标形状给出不同的图标尺⼨呢?因为50px*50px的正⽅形⽐50px*50px的圆形⾯积更⼤，所以正⽅形的视觉⼤⼩也会⼤于圆形。为了统⼀图标的视觉⼤⼩，正⽅形要做适当的⾯积收缩处理。(矩形同理)
于是我们看到许多平台都推出了图标辅助⽹格规范¹。其实如果遵从“⾯积相等”原理，理论上所有的图标⽹格都应该由下⾯这⼀套推理公式得出(以Material Design 标准图标⽹格为例)：
但实际情况是，不同平台的图标辅助⽹格规范建议尺⼨都有⼀定的差异。原因就在于，虽然有时候我们参考“⾯积相等”原则对图标视觉尺⼨进⾏了规范，但项⽬落地后发现视觉上可能还是有⼀些不协调，所以最终设计师还是会凭借⾃⼰的主观判断再进⾏微调。
记住：好的设计作品是理性的设计理论与设计师本⾝感性的碰撞结果，⼆者缺⼀不可。
1.3 图标输出尺⼨
iOS规定标签栏图标的输出尺⼨统⼀为31pt*28pt;Material Design规定标签栏图标的输出尺⼨统⼀为24dp*24dp。
但我们发现，在借助了图标⽹格解决了图标视觉⼤⼩的问题之后，每⼀个不同形状的图标，尺⼨其实是不同的。为了⽅便前端落地，我们在输出切图⽂件时，要保持每⼀个图标⽂件的输出尺⼨是相同的。该怎么办呢?
于是我们将⼀组图标都放置在⼀个⽐图标本⾝略⼤的相同尺⼨容器中。⽽图标与这个容器之间的空⽩像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发⽣，所以我们称这个区域为“安全边距”。
对于安全边距的规定：Material Design全平台规定图标的安全间距统⼀2dp;iOS则根据不同的图标使⽤场景给出的不同的图标⽹格和图标安全间距²。
的图标⽹格和图标安全间距²。
⼆、静态图标
标签栏的图标⼀般分为静态图标和动态图标两种。
2.1 位图图标
使⽤位图时请注意以下两点：
1)不同项⽬环境输出的切图套数不同
交付iOS原⽣的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图⽂件;
交付Android原⽣的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图⽂件(@0.75x和@1x切图层分别⽤于ldpi 和mdpi分辨率设备，但这些设备现在⼏乎已退出市场，所以可不考虑，但最终视项⽬真实需求确定。);
交付web项⽬的切图需要试情况⽽定，⼀般常⽤ @2x 切图，因为@2x向下适配@1x、向上适配@3x，都不会产⽣太⼤的图⽚失真。但有时候前端⼩哥会要求⽤到其他倍率切图，所以最终以具体需求⽽定。
请注意：这⾥我所提到的倍率全都是“绝对倍率”，这个概念⾮常关键。
“绝对倍率”指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺⼨。⽽当你使⽤@2x作图时，为了保证“绝对倍率”不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。
如果你在@2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的⽂件尺⼨最终其实是 @2x/@4x/@6x。
有⼀点绕的话，我们以Sketch导出位图切图为例：
所以如果你⽇常使⽤的是Sketch，也是⽤Sketch原⽣导出⼯具，那你的切图预设应该根据你的作图尺⼨⽽定，见下表：
如果你⽇常使⽤的是PS，⽤Cutterman切图，那么Cutterman会⾃动识别你当前的画板，然后根据它的宽(横屏情况下是⾼)来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是“绝对倍率”，不⽤像Sketch当中⼀样换算。前提是“设置当前画布为：Auto(⾃动识别)”。
假设你在@2x下作图，执意不管不顾“绝对倍率”，⼜忘了交代前端⼈员⼿动处理切图尺⼨的话，那你所有的切图尺⼨实际都是设计稿所需图标尺⼨的2倍。就算前端⼩哥帮你⼿动处理了切图尺⼨，每⼀张切图所包含的像素信息，都⽐项⽬真实所需的要多很多，完全就是在徒增所需切图⽂件的⼤⼩。
2注意切图⽂件⼤⼩
切记，公司的线上项⽬中，⽤户从服务器下载的每⼀单位的流量都是要公司花钱的，所以许多项⽬管理者都是很在意控制线上⽂件⼤⼩的。于是压缩切图是UI必备的技能之⼀。
虽然图标的⽂件⼤⼩⼀般只有⼏KB，但是项⽬⼤了难免积少成多，所以在真实项⽬中，不管任何切图我都会⼿动压缩⼀次。
这⾥推荐⼀个压缩.png⽂件⼤⼩，但⼏乎不会产⽣失真的免费⽹站 tinypng³(是我曾经深爱的⼀位前端⼩哥推荐给我的，在此表⽰感谢)。
2.2 ⽮量图
2.2 ⽮量图
位图切图会⾯临交付的倍率图过多、容易失真、⽂件⼤⼩难控制等问题，但对于⽮量图，这些问题都得到了解决。⽬前.svg⽮量图落地也在项⽬中越来越流⾏了。UI可以在Sketch或Ai中制作。
⼀般与前端⼈员对接有在线图标库对接与本地⽂件对接两种。
在线⽮量图标库有很多，国内⽐较流⾏的是阿⾥巴巴⽮量图标库-iconfont⁴；本地对接就是直接将⽂件发送给前端⼈员，他们会⾃⾏进⾏项⽬⽂件的管理与调⽤。
如果.svg切图输出后，与设计稿中样式不符，请注意排查以下三点：
svg不⽀持渐变颜⾊填充;
svg不⽀持描边，请将所有的描边轮廓化。Sketch中可通过“图层-轮廓化”(快捷键⌥⌘O);Ai中可通过“对象-路径-轮廓化描边”;
要确保⼀组图标的⽂件尺⼨⼀致，需在图标下⽅增加⼀个透明⽅形，和图标⼀同导出。
三、动态图标
为了提升⽤户体验和产品趣味性，动效微交互的标签栏图标也越来越流⾏了。
动效在前端落地的⽅法其实有很多：
前端代码直接实现：代码是很强⼤的，但通常⽤代码直接写复杂动效会很浪费项⽬时间。简单维度的动效如位移、透明度、⼤⼩变化等可以借助代码，但复杂动效就不要去打扰前端⼩哥了;
直接刚gif：这已经是⽼旧技术时代的动画解决⽅案了，⽂件⼤且请求⽂件也需要时间，有时候⽆法给⽤户及时的触控反馈。再者它是位图的原因，在⾼分辨率屏幕上缩放容易失真。
png序列帧：我们知道，动画是⼀张⼀张的静态图交替变化形成的。如果将每⼀帧动画都拆分成⼀张图⽚，就有了png 序列帧。所以⼀套动画的png序列帧往往⾮常多，⽂件⼤⼩⾃然就变⼤了。所以后来也有团队引进了雪碧图的⽅式，但⽂件⼤⼩依然不乐观。并且同样是位图的原因，⾼分辨率屏幕容易失真。
Facebook Pop/Rebound/Keyframes：Facebook Pop/Rebound是Facebook给iOS和Android提供的常
⽤动画预设，是较早将动效代码化的开源技术⽅案，但动画效果预设只有弹簧/衰减等⼀些简单样式。后来Facebook⼜推出了Keyframes，允许设计师⾃⼰在Ae中⾃定义动画并导出，然后交付给前端⼈员。svg图
Lottie动画：和Facebook Keyframes相同，都是结合Ae输出动画代码。但是Lottie更厉害的地⽅在于，它⽐起Facebook Keyframes来⽀持的Ae样式更多，例如蒙版、遮罩、修剪路径等等。
所以综上所述，落地标签栏动态图标，⽬前最⾼效可⾏的还是Lottie动画。
四、总结
我已经全部整理出来了。⾸先要注意图标的规范，然后制作位图、⽮量、动效图标时的注意点，我⼏乎把我在真实项⽬中踩过的坑都告诉⼤家了。剩下的创造性的环节就交给你了! 因此，您现在已经了解了与UI设计师的⼯作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会发包含有关在该领域⼯作的更多相关⽂章。
UI设计中Android和IOS设计差异总结
UI设计中如何更好的运⽤排版法则
UI设计中如何更好的运⽤排版法则UI设计软件中PS2021总结
后台列表设计避坑指南_下
后台列表设计避坑指南_上

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。