Icon 图标设计规范


概述

图标是整个 UI 体系中不可或缺的一部分。通常我们所理解的图标设计含义,是将某个抽象的概念转换成清晰易读的图形,从而提升用户的阅读效率,优化界面的美观度。

设计原则

  • 准确: 设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。
  • 简单: 在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。
  • 节奏: 挖掘构图中的秩序之美。
  • 愉悦: 赋予适度的情感。

设计规范尺寸

图标的尺寸一般选择4的倍数,这样有利于在成倍缩放的时候,不会造成半像素的情况。

基础画板与安全边界

实例以48px*48px为基础画板进行制作。

为避免给开发切图时贴边节,导致图标出现不自然的边界,我们需要在图形外围预留安全边界,图标不要画超过这个界线。如红色外框为48×48,蓝色内框也就是安全边界为:44×44

定义网格系统

产品图标网格被用来促进图标的一致性,以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。

网格规范算法

画图标的时候,物体会有长有扁,有圆有方,因此我们要统一体量感保证正方形、圆形、纵向矩形、水平矩形视觉保持一致大小。

上次编辑于: