移动网站建设菜单栏标签时，喜欢用图标+文字的方式来表达，这种方式不仅让功能变的更加直观，用户易于理解，在网站建设上也能更加精彩、有活力。很多时候，为了更加丰富用户的操作体验，很多图标在选中时，会有微交互设计的添加。图标的微交互设计主要有两个部分：颜色的变化与动效，接下来，小编就这两个方面给大家详细讲讲移动网站建设如何做好图标的微交互设计。

一、颜色的变化

颜色的变化，即当用户点击图标时，图标会自动变色，用以反馈用户点击的结果，让用户知道其操作是成功的。

这里的颜色变化有两种形式，一种是图标线条的变化，另一种是线条透明，图标内有颜色填充，一般使用后者的变化设计。但是移动网站建设不管使用哪一种，在颜色的选择上，要注意选择具有网站标志的色彩，确保页面设计风格一致性的同时，也能强调品牌颜色，提升网站的辨识度。

二、动效

选中动效的添加一方面是为了让互动更清晰，另一方面，吸引用户注意力，缩短用户等待加载的过程，给用户留下良好的印象。

动效主要有两种类型，一种是图标设计没有变化，只是添加了逐渐变大、旋转、跳跃等基本的出场效果，以及加上颜色的变化，这种动效已经足够出彩，反馈的效果也较好。

另一种是用户点击图标后，系统在切换页面的同时，图标的有些设计元素也有相应的变化，提醒系统所处的状态，让交互更生动有趣，丰富用户的视觉、操作体验。

移动网站建设不同的图标微交互设计，对于交互颜色的选择不同，图标设计风格的不同也决定了其动效也不同，这些设计有一定的套路，需要根据自己网站建设的特色进行个性化定制。