功能图标的UI设计规范及尺寸

 

    功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。

    1.图标的规范

 

    图标是良好UI设计系统的基本组成部分，对营销材料非常有帮助。他们是插画内容的基础构建块，但他们也具有很高的技术性。因此科学严谨的设计规范能帮助我们设计精致、风格统一的图标。

 

    2.图标尺寸

 

    一致性是UI设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数（安卓是8的倍数，iOS是4的是倍数）。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。

 

    通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

    不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。