今天分享一组Tab栏图标优化知识点，直接上干货。上面是自己曾经做过的一组图标，当初觉得还可以，现在再看，其实还差很多意思。特别是任务和我的两个图标，太普通，没有什么出彩的点。下面是现在改完的版本，虽然不是很出彩，但是比之前会好很多。

第一个是首页，当初做的时候是把里面门给倒置了下，虽然和一般首页有点差异，但是还不够。因为我们是做偏游戏的APP，产品希望加入一点趣味性。于是我把里面的门该成了一个微笑曲线外面是封闭线条形成一个面，里面笑脸是一个线，线面结合，比上面确实好点，但是总觉得还差一点。再想了下可不可以再把点加进去呢，点、线、面三者结合，于是加了两个点在右上角，变成了这样感觉有点奇怪，两个点立不住，有点飘，于是把两个点变成两个线看看，再加一点错位这样感觉就好多了。

第二个是游戏图标，我们APP里面的游戏都是一些类似小程序游戏这些，用一个手指就可以操作，所以当初我就做了这样一个食指点击的动作。也是有点普通，于是我又给它加了一条线首页就是线面结合，刚好和首页相呼应。后来发现这样的识别度不是很好，于是直接换了一个方向，改成了游戏机手柄识别度是有了，但是出现了一个新问题，整体不是太稳，放到他们在中间，有点不搭，就像这样于是我选择了比较稳的圆形把它加了上去把手柄放圆形里面，加一点倾斜增加生动性，圆形把手上面的线高光很重要，没了会逊色很多。而且我一开始是把线放在右边，看着总有点变扭。后来观察到，这个把手是往右倾斜，重心在右边，如果再放右边，那视觉上肯定更偏右，于是就把它转到了左边，就Nice多了。

第三个是圈子，类似于社区的功能，让用户发帖讨论的地方。圈子改动不是很大，原版本造型我觉得还行，圆形和信息框结合，就是右上角的点加的不咋地，于是我把大的造型留着不变，仅仅把那个点换了一下。这样刚好和首页图标有点呼应，但是和它又有差异，完美。

第四个是任务，任务这个当初做的就有点过分了，虽然大造型可以，很稳，但是，毫无亮点，平平无奇。于是我在原基础上把内部的两条线做成一长一短，再加一条竖线增加变化，最后把整体角度逆时针旋转了8度，感觉一下字就有了其实有时候你只要加了一个小点可能就会使你做的东西不一样，就比如这个任务旋转和没旋转的差别。

差别是不是很明显。

最后一个是我的，其实我的没做多大变化，就是根据整体风格做了一点差异。之前的版本头部和身体占比几乎差不多，看起来很平。于是我把头变小，身体变大增加一点变化性，更加耐看。但是身体太大，里面没东西就会导致很空，于是我又在身体里面加了一条竖线，这样即解决了很空的问题，又解决了和其它图标不搭的问题，一举两得。

以上就是五个图标的优化过程和思路。

最后再看一下改版前后的差别。后面还把他们做成了动效，先看一下效果，后面会单独出一篇文章讲解。以上就是今天分享的内容，希望对你有帮助。

其实有格局的人已经点赞收藏了。

Powered by Froala Editor