【APICloud系列|4】APP设计统一图标大小的方法

当我们想要在整理设计稿中出现的图标，整理除了汇总之外，还需要重新调整一下图标的大小，使他们看起来“差不多大”。想要弄成一致性和统一性，非常的麻烦和耗时。

最后在谷歌的Material Design找到了一种规定的方式。

举例：图标大小为48px*48px 。如果你还需要其他尺寸的图标可以做完之后等比放缩即可。那你设计的图标最好是矢量的或者是形状图标。

谷歌官方规定Material Design 图标的形状类型分为三种：圆形、方形和矩形。

1.判定图标应该套用那种尺寸？

将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸就是该图标需要规定的尺寸。

2.iconfont的问题

大部分团队都会将图标转换为iconfont，这样可以缩小整个项目的大小。

3.对齐

如果有仔细看，我这个方法指定的图标大小为48px*48px，但是里面有内容的部分，比如说圆形，就只会占据44px*44px，这时候我们当然会希望把图形放置在图标的中央。一个上下居中对齐，一个左右居中对齐。

仔细发现一下，你会发现看上去并不是居中的。这是由于人的视觉错觉造成的【2】，这时候就需要进行适当的调整，通过自己的视觉判断来进行对齐。

4.颜色统一

一般而言，图标设定为同一个色值（比如#FFFFF）就能统一颜色，但是也有遇到过某个图标会显得颜色比较浅，这是因为sketch处理图形的透明度有两个地方，一个是整体的透明度（在填充选项区域的上方），一个是填充的透明度，这个往往是因为整体透明度那里有问题，修改一下。

好啦，本期的内容就分享到这里，我们下期见！

好书不厌百回读，熟读自知其中意。让学习成为习惯，用知识改变命运，让博客见证成长，用行动证明努力。

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！

听说 👉 点赞 👈 的人运气不会太差，每一天都会元气满满呦！^ _ ^ ❤️ ❤️ ❤️

码字不易，大家的支持就是我坚持下去的动力。点赞后不要忘了👉 关注 👈我哦！

更多精彩内容请前往 孙叫兽的博客

微信公众号【电商程序员】，分享改变自己的项目。

如果以上内容有任何错误或者不准确的地方，欢迎在下面 👇 留个言。或者你有更好的想法，欢迎一起交流学习~~~