发布时间：2021-9-26 分类： 行业资讯
今天，我们来谈谈如何开发iOS系统图标网格系统。众所周知，统一的系统图标网格系统用于图标设计。那么如何定制iOS系统图标的网格系统，本文就来了iOS系统图标网格系统定制的独家秘诀。
通过ios7图标栅格转化系统图标设计栅格
今天我们将详细解释如何使用iOS应用程序图标网格派生系统图标的网格系统。首先，让我们看看应用程序图标网格系统的比例关系分析，为我们的下一步提供基础。
桌面图标栅格黄金比例分析
《秩序之美》中的黄金分割，√ 2和第三种方法。 iOS7的图标网格完美地使用了这三个比率。
以64px为单位，即a=64px。然后，大方块的边长的一半=8a，大圆的半径=7a，中间圆的半径=4.25a，小圆的半径=3a。
8a /（8a-3a）=1.6小圆圈接近大正方形的黄金比例
7a/4.25a≈ 1.647圆形和大圆形接近黄金比例
4.25a/3a≈ 1.417中间圆与小圆的比率接近√ 2
整个网格系统中的维度通过黄金比率相互关联。
应用图标栅格和系统图标栅格的区别
iOS应用程序图标位于手机屏幕上。每个图标必须有一个圆角正方形作为图标背景板。此背景板设置为统一图标的形状。系统图标直接是图标本身，没有任何背景板。因此，系统图标的网格系统可以直接使用应用程序图标的内圆部分的网格比例作为系统图标的网格系统。即该部分的比例关系，8a /（8a-3a）=1.6小圆和大正方形接近金比7a/4.25a≈ 1.647，中圆和大圆接近黄金比例，4.25a/3a和asymp; 1.417中小圆的比率接近√ 2。
系统图标基本网格的制定
在iOS界面中，底部导航栏的系统图标标准尺寸为44 * 44px，因此系统图标网格是以44 * 44px作为标准尺寸自定义的。我们提取了应用程序图标的内部圆圈，并将尺寸缩小到44px并添加了44px的方形边框，因此我们获得了系统图标的基本网格。
△基本网格
制定系统图标栅格的理论依据
有许多不同类型的系统图标，但在它们看似复杂的形状背后，我们可以将系统图标概括为四种基本类型：圆形图标，方形图标，水平图标和垂直图标。我们都知道，如果我们根据图标的实际尺寸设计图标，则会出现图标的视觉尺寸不均匀的问题。我们该如何解决这个问题？这就是我们必须开发系统图标网格系统的原因。
那么实际尺寸中图形的视觉尺寸会不一致的原因是什么？通过观察，我们知道在相同的实际尺寸下，由于图形的不同形状，视觉张力不同，因此最终显示出不同的视觉尺寸。然后让我们通过实验比较来证明视觉尺寸差异的原因。在上一篇文章中我们讨论了方形和圆形的情况，这次我们仍然用这两个数字作为例子进行测试。
首先，我们比较广场的视觉大小和实际大小的圆圈。我们发现当实际尺寸为140 * 140px时，正方形看起来比圆形大。
为了证明尺寸的正确性，下图显示了辅助线和值。
为了使它们看起来大小相同，我们将正方形缩小到50px，我们看到减小的正方形和圆形视觉尺寸基本相同。
然后我们重叠上面的两个图形。
在左侧，140px正方形和140px圆圈完全包含在正方形中。正方形超过圆形区域4，这是视觉尺寸误差的原因。
右图显示128px的正方形和140px的圆。正方形超过了圆的四个区域，圆也超过了正方形的四个b区域。区域和b区域的两个区域相互抵消。虽然它们的大小不同，但它们的面积几乎相同，因此圆形和方形在视觉上是平衡的。
由此我们得出结论，两个图形的视觉尺寸是一致的，并且由两个图形的面积是否相同来确定。换句话说，只要两个图形的面积可以保证基本相同，那么我们就可以确保两个图像的视觉尺寸基本相同。
下面我们首先自定义圆形图标的网格，因为系统图标的最大尺寸是44 * 44px，并且由于圆形具有自然收缩，我们将围绕整个网格。在全网格的情况下，圆的最大视觉尺寸在固定大小内。其他三个图形（正方形，水平和垂直）只需要适当减小尺寸，以保持与圆形图标的视觉一致性。
编者注：事实上，在设计过程中，由于各种原因，我们经常偏离对所见事物的理解。这对UI的设计有很大影响。既然我们无法绕行，那么我们必须学会如何“适应”人类视觉惯性来画出“正确”的界面→《大开眼界!视觉误差对UI设计的影响和解决方案(附案例)》
圆形图标
圆形图标在系统图标中非常频繁地出现，例如我们经常使用的微信中的发现图标，视频应用中的视频播放图标等。圆形本身具有强烈的视觉收缩，因此当我们自定义圆形图标的网格时，为了保持与其他图形的图标的视觉一致性，我们在基本网格中填充整个44 * 44px网格。确保圆形图标的视觉张力。如下图所示：
方形图标
方形图标经常出现在各种应用程序中，例如知识共享应用程序中的主页图标，它是典型的方形图标。方形图标的实际尺寸有四个尖角，而不是圆形图标。因此，为了与原型保持一致，我们缩小了3px的平方。收缩后，正方形区域和圆顶区域基本相同，如下图所示：
△左侧是方形网格，右侧是与圆形网格的重叠
横长形图标
水平长图标也是经常遇到的典型图标形状。例如，天猫应用程序主菜单中的成员图标是一个非常典型的横向长图标。然后网格的原理与正方形相同。我们将圆形和水平形状重叠，然后适当地向下按压高度，直到圆形区域和水平形状基本相同。如下图所示：
△左侧是水平长网格，右侧是圆形网格重叠
竖长形图标
垂直图标与水平图标相同，只需将角度旋转90度即可。也很可能出现垂直图标，例如应用程序中的订单图标。
△左侧是垂直网格，右侧是与圆形网格的重叠
异形图标
所谓的外星人图标是一个不能简单地概括为几何图形的图标。例如，“我的”图标是具有较小上侧的人形图。我们刚用于基本网格的那种图形，然后根据图标的实际情况调整图标大小。
△左侧是成形网格，右侧是与圆形网格的重叠
通过以上分析，我们来到了最终的iOS系统图标网格系统。下图是尺寸规格分析。
iOS栅格系统汇总
最后，让我们看看使用iOS系统图标的网格系统下的实际案例效果。
腾讯视频ICON：
知道ICON：
Petal ICON：
本文主要是为大家讲解如何自定义iOS图标的网格系统，希望能帮助大家了解网格系统。
