从零开始绘图标系列:图标应用详解

作者:亚博yabo官网手机登录发布时间:2022-01-03 00:52

本文摘要:现在有许多资助我们举行标注和切图的协作工具好比蓝湖、Zeplin 等。我们只要将设计稿上传法式员可以自行获取图标对应的切图。 32pt:底部 TabBar 图标 应用图标的导出我们已经在上一章提到过所以下面还是以工具图标的说明为主。 固然如果使用矢量花样导出那么切记在分类文件夹的时候要将 iOS 和 Android 离开生存而不是混淆在一起。 下方是我自己做的原型演示在构建了这样的页面以后我会在原型中检查我总共用了几多种图标的尺寸它们划分会应用在哪些场景中然后整理出来。

亚搏手机版app下载

现在有许多资助我们举行标注和切图的协作工具好比蓝湖、Zeplin 等。我们只要将设计稿上传法式员可以自行获取图标对应的切图。

32pt:底部 TabBar 图标

应用图标的导出我们已经在上一章提到过所以下面还是以工具图标的说明为主。

固然如果使用矢量花样导出那么切记在分类文件夹的时候要将 iOS 和 Android 离开生存而不是混淆在一起。

下方是我自己做的原型演示在构建了这样的页面以后我会在原型中检查我总共用了几多种图标的尺寸它们划分会应用在哪些场景中然后整理出来。如果泛起了一些以为没有须要的可以将它们举行调整合并成一种尺寸。

定好了这 4 种规格我们在后续的设计上才有明确的设计偏向。再温习一遍为什么我们需要先定尺寸再设计而不是统一设计一套很大的图标举行缩小。

命名的花样可以分成 3 级花样大致为:「模块_名称_状态@1x」好比下面的案例:

2. 图标的气势派头

所以要让标注有效就一定不要偷懒只把图标置入画布中而没有透明矩形配景。

这个规格对于 iOS 还是 Android 都是通用的虽然另有 3x 以上的设备可是那些设备只要挪用 3x 的规格即可。

许多新人会在这个历程中发生疑惑那么在标注的历程中我们标注的到底是图形到其它元素的距离还是图标外轮廓到此外图形的距离。

当一个图标能被操作后那么我们就要注意到它的状态变化。

从导航栏图标举例通例的选中状态是更换色彩但也有越来越多的应用会在选中状态接纳差别的设计气势派头通过更富厚的样式体现来提升可看性。好比淘宝、QQ 的底部导航栏。

许多新手都以为我们只要设计一套大而全的图标在项目中对应提取即可。但有许多场景如果只使用一种图标类型那么效果会很是差劲。好比我们看看下面的淘宝设置页前后包罗了 6 种以上的图标。

是太庞大了没错但如果我们把图标都替换成同一套呢?

上一章启动图标的导特别式会凭据差别设备、场景导出差别的尺寸而且使用 PNG 的花样。不要担忧工具图标虽然也面临设备差别的问题但不需要导出这么多的规格。

下面讲讲两种图标的导出类型。

iOS 使用 PDF 的 1x 切图

1. 图标的尺寸

24pt:通例工具图标

位图花样

所以在这个案例中我整理出了 4 种图标的尺寸:

上一篇:新乡原阳县举办小学生书法大赛

下一篇:没有了