赞助商
立即赞助

掏空家底!图标设计落地全方位指南

UI设计3年前 (2021)发布 流光
2.5K 0 0

如期而至,这是标签栏控件总结的第二。这一真掏空职业验,希望对的作所帮。

掏空家底!图标设计落地全方位指南

这一我们聊一聊标签栏中的关键元素——图标。

图标实存在于界面中的许多地方,但因为这一期要分析标签栏,我会借标签栏中较流的图标样式,总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的,大可举一反。

掏空家底!图标设计落地全方位指南

标签栏图标规范

1. 图标样

图标具体样风格定义是常主观,网络上也流传着许多教程教大家如何设计五花八图标,所以在这里我不再赘述了。我主要来结下基础标签栏图标般有哪些样变化。

我调研了诸多的应用程序,发主流的 APP 标签栏样式变化,致分以下五种。其中占比多的「由线型转面型」。

掏空家底!图标设计落地全方位指南

调研的应用程序中,所使用到线性图标的应用程序,都将描粗细限制 1pt-2pt 之间。

掏空家底!图标设计落地全方位指南

2. 图标视觉大小

上期我们讲到,iOS 定义了套标签栏图标尺寸规范。

掏空家底!图标设计落地全方位指南

iOS 在这里所定义尺寸并不是图标文件最后输出尺寸,而是设计师作图时,针不图标形状参考尺寸,目是为了让图标视觉大小看上去致。

那么什么 iOS 会根据不同的图标形状给出不同的图标尺寸呢?因 50px×50px 的方形比 50px×50px 的圆形面积,所以方形的视觉小也会于圆形。了统一图标的视觉小,方形当的面积收缩处理。(矩形同理)

掏空家底!图标设计落地全方位指南

于我们看到许多平台都推出了图标辅网格规范 ¹。其实如果遵从「面积相」原理,理论所的图标网格都应该由下面这一套推理公式得出(以Material Design 标准图标网格例):

掏空家底!图标设计落地全方位指南

但实际况,不同平台的图标辅网格规范建议尺寸都一的差异。原因就于,虽然时候我们参考「面积相」原则对图标视觉尺寸行了规范,但项目落后发视觉可能还一些不协调,所以终设师还会凭借自己的主观判断再行微调。

记住:好的设计作是性的设计论与设计师本身感性的碰撞结果,二者缺一可。

3. 图标输尺寸

iOS 规定标签栏图标的输尺寸统一为 31pt×28pt;Material Design 规定标签栏图标的输尺寸统一为 24dp×24dp。

但我们现,在借助图标网决图标视大小的问题之,每一个不同形状的图标,尺寸其是不同的。为方便前端落地,我们在输出切图文件时,要持每一个图标文件的输出尺寸是相同的。该怎么办呢?

于是将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标这个容器之间的空像素,正好也帮助规避了图标落地后,切图边缘像素可能被截断的现象发生,所以称这个域为「安全边距」。

掏空家底!图标设计落地全方位指南

对于安全边距的规定:Material Design 全规定图标的安全间距统一 2dp;iOS 则根据不同的图标使用景给出的不同的图标网格和图标安全间距 2。

静态图标

标签栏的图标一为静图标和动图标种。

静态图标实现法相容易,可以与前端沟确定本项目交付标签栏图标文件是采用位图是矢量图。如是位图议交付 .png 格文件;如是矢量图议交付 .svg 格文件。

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倍。就算前端小哥帮你手处了切图尺寸,每一张切图包含的像素信息,都项目真实需的要多很多,全就是在徒增需切图件的大小。

注意切图件大小

切记,公司的线上项目中,户从务器载的每一单位的流量都是要公司钱的,许多项目管者都是很在意控制线上件大小的。于是压缩切图是 UI 必备的技能之一。

虽然图标的件大小一般只有几 KB,但是项目大了难免积成多,在真实项目中,管任何切图我都会手压缩一次。

里推荐一个压缩 .png 文件大小,但几乎不产生失的免费网站 tinypng³(是我曾经深爱的一位前端小哥推荐给我的,在此表示感谢)。

掏空家底!图标设计落地全方位指南

2. 矢量图

位图切图会面临交付的倍率图过多、容易失真、文件大难控制等问题,但对于矢量图,这些问题都得了解决。目前.svg矢量图落地也在项目中越来越流行了。UI 可以在 Sketch 或 Ai 中制作。

般与前端员接有在线图标库接与本地文件接两。

线矢图标库很多,内比较流行的阿里巴巴矢图标库-iconfont⁴;本对接就直接将文件发送给端人员,他们会自行行项目文件的理与调用。

如果 .svg 切图输后,与设计稿中样式符,请注意查点:

svg 不支持渐变颜填充;

  • svg 支持描边,请将有的描边轮廓。Sketch 中可通过「图层-轮廓」;AI 中可通过「对象-路径-轮廓描边」;
  • 要确一组图标的文件尺寸一致,需在图标下方增加一个透明方形,和图标一同导出。

掏空家底!图标设计落地全方位指南

动态图标

为了提升用户体验和品趣味性,动效微交互标签栏图标也越来越流了。

掏空家底!图标设计落地全方位指南

动效在前端落地法其实有很多:

  • 前端代码直实现:代码是大的,但通常用代码直写复杂动效会浪费项目间。简维度的动效如位移、透度、大变化等可以借助代码,但复杂动效就不要去扰前端哥了;
  • 接刚 gif:这已经是旧技术时代动画解决案了,文件大请求文件也需要时,有时候法用户及时触控反馈。再者它是位图原,在高分辨率屏幕上缩放容易失真。
  • png 序列帧:我们知道,动画一张一张的静态图交替变化形的。如果将每一帧动画都拆分一张图片,就了 png 序列帧。所以一套动画的 png 序列帧往往非常多,文件小自然就变了。所以后也团队引了雪碧图的方式,但文件小依然不乐观。并且同样图的原因,高分辨率屏幕易失真。
  • Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 给 iOS 和 Android 供的画预设,是较早将效代码的开源技术方案,但画效果预设只有弹簧/衰减等一些简单样式。后来 Facebook 又推了 Keyframes,允许设计师自己在 Ae 中自定义画并导,然后交付给前端人员。
  • Lottie 动画:和 Facebook Keyframes 相同,是结合 Ae 输出动画代码。但是 Lottie 更厉害的地方在,它比 Facebook Keyframes 来支持的 Ae 样式更,例蒙版、遮罩、修剪路径等等。

综上述,落地标签栏态图标,目前最效可行的还是 Lottie 画。

1. Lottie的背景

Lottie 是 Airbnb 开源的一个跨动画库。表现层面它是一张图片,但实现的方式是通过代码,所以它是矢量的。花式的动画也可以把文件大做非常。

UI 与前端接是过交付个 json 代码文件。

如果这第一次接触 Lottie,再好不过的体验方法就玩一玩阿里提供的一站式动画平台:犸良动画 5。它底层采用的技就 Lottie,只被阿里二次封装了许多预设的动画效果,可以自义其中的元素与参数,然后试导出的第一 json 文件。

2. Lottie如何上手

接下简单粗暴的 UI 与端对接实 Lottie 动画落的全骤参考。此之,全方了解 Lottie 的相关信息,请参阅 Lottie 官方明文档 6。

骤一:安装 Ae  bodymovin

制作 Lottie 动画,首先必需两具:Ae  bodymovin 插件。

Ae 最低版本要求为 Ae CC2014。又因为据很多设计师反馈,目前 bodymovin 在汉后的 Ae 中使会现诸多问题,后面的程都是基于 Ae 英版。如果你汉了Ae,最好在需要制作 Lottie 画时取消汉。

获取 bodymovin7。bodymovin 插件更新至今,版已非常,并不一定最新版就适用你当前的项目,因为前端使用的 bodymovin 析包能无法析你用最新版 bodymovin 插件输出的 json 文件。

掏空家底!图标设计落地全方位指南

一旦确定使用 Lottie,前端人在 GitHub 查询 Lottie 相关文档的,所以 UI 只需要合前端确定一下合适的 bodymovin 插件版就以。最终走查时,一定要确当前 bodymovin 输出的动画在项目所需要运行的所有境中运行,才说明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 析包版是兼容的。

获取了 bodymovin 后,将 bodymovin 拖入 ZXP Installer8 中,ZXP Installer 会动识别插件安装 Ae。

掏空家底!图标设计落地全方位指南

安装完成后,就可以在 AE 的「窗-扩展」中 bodymovin 。

掏空家底!图标设计落地全方位指南

步骤二:将 Sketch 或 Ai 中的文件导 Ae

果你技术娴熟,当也以直接在 Ae 中绘图案动画。但果你还是习惯先在其他软件中绘基础图案,到 Ae 中动画,你需要何将图案导 Ae。

Ai 和 Ae 都是 Adobe 旗下的工,所以 Ae 是可以完美解析 .ai 文件的,如果你是使用 Ai 作图,可直存储为 .ai 文件,再在 Ae 中开。

掏空家底!图标设计落地全方位指南

如果你使用的是 Sketch,可以先导出为 .svg,再用 Ai 开该 .svg 文件,转换存储格式为 .ai,最后 Ae 中开。

然,Sketch 有接和 Ae 接插件,AEUX(前身 Sketch2AE)9。需要在 Sketch 和 Ae 时安装 AEUX 插件,Sketch 负责传送,Ae 负责接收。具体使用法可以在官网教程查看,我不再赘述了。

掏空家底!图标设计落地全方位指南

步骤三:制作动效并输出

和静图标同理,为了保证落地图标视觉大一致,一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定成文件的尺寸。Lottie 官方建议:因为 Lottie 输出的是矢量动画,所以建议以 @1x 输出动效,前端人员在任何屏幕上放大并不会失真。

掏空家底!图标设计落地全方位指南

在制作之前请必详细阅读 Lottie 所支持的 Ae 参数文档10,以免辛苦做出的动效,前端无法解析。别提醒:生环中 bodymovin 是不支持解析 Ae 表达式的。

完成制作动效后,可以过 bodymovin 导出动效了。

掏空家底!图标设计落地全方位指南

步骤四:预览交付

导出完成后在你的目的地文件夹中将存在一个 .json 文档,如果你的动效中还使用了位图,系统还会动生成一个 images 文件夹。这些都是你需要交付给你对的前端开发人员的文件。

掏空家底!图标设计落地全方位指南

.json 文件中记录的动效代码 UI 不需要过多关心,但是其中个息你是一定要了解的。它是你前端对沟通和获悉文件息的一些关键参数。

掏空家底!图标设计落地全方位指南

UI 检动效或其相关人员需要预览动效的候,可以用 LottieFiles11,拖入 .json 文件即可预览。iOS 和 Android 还可以下载 LottieFiles APP,扫描预览页中的二维码即可在移动端预览。

掏空家底!图标设计落地全方位指南

总结

整个图标的流程我已经部整理出来。首先要注意图标的规范,位图、矢量、动效图标时的注意点,我几乎把我在项目中踩的坑告诉大家。剩下的创造的节就给你。

所有在文中涉及的文档地址和插件下载链:https://pan.baidu.com/s/1xJGXB14dOm32PAJxu_4_0g 提取码: sfpj

备用下载链接:https://share.weiyun.com/5wBV1Nt

欢迎家关注作者微信公众:「UCD耍家」

掏空家底!图标设计落地全方位指南

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可...
图标
官方的指南虽然篇幅较短,但更侧重于细节层面,仍然可以帮助你在真正上手新系统及深色设计之前,对相关设计原则,特别是颜色...
iOS 13
如何定义组件库 UI 设计组件库(UI KIT),直译过来就是用户界面成套元件。我们日常工作中所构建的组件库,一般是把所有界面...
sketch
针对 UXD 的讨论,其实从来就没有消停过,不同的人,对其理解也不太一样。作者恰好从产品 UI 转 UXD 将近两年,有点自己的小...
UI
@Daidai丶呆 :有读者说,面试的时候面试官提到了一个问题,但不知道怎么回答。 这个问题是:实心图标和空心图标的区别是什...
图标设计
很多平台的设计风格都是偏可爱类型的,尤其是用户年龄段比较低的,比如动漫类的,校园类的等等。 就在前不久,我刚刚悟出了...
可爱图标
前面的章节,已经系统地讲解了图标的设计方法,相信认真学习并实践的同学,已经可以设计出优秀的图标了。 但是,在 UI 设计...
入门
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计