UI 新手福利！iOS系统图标栅格系统全方位解密

今天跟大家聊一聊何定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≈1.417 圆与小圆比例接近√2。

系统图标基本网格的制定

在iOS界面中导航栏的系统图标标准大小为44*44px，就44*44px作为标准尺寸来定制系统图标栅格。我们将应图标的圆分取来并且将尺寸等例缩小为44px，并且添一个44px的正方形边框，这样我们就得到了一个系统图标的基本栅格。

△ 基本栅格

制定系统图标栅格的理论依据

系统图标的多种多种，但是在看似复杂的背后我们可把系统图标概括为种基本：圆形图标，正方形图标，横长形图标和竖长形图标。我们都知道如果按照图标的实际尺寸设计图标的话，会现图标视觉大小统一的问题，那么我们应当如何解决这个问题呢？这个问题就是我们要制定系统图标栅格系统的原因。

那么是什么原导致实尺寸下图形视觉大小会不致呢？过观察我们知在相实尺寸下是由于图形形状不导致视觉张力不，所以最终表现出不视觉大小。那么下我们过实验比来证明造成视觉大小不原。在前边文章我们讲到过正形和圆形案例，这我们依然用这两个图形作为例子来试验。

首先我们对比正方形和圆形在际尺寸下的视大小对比，我们现际尺寸是140*140px的情况下，正方形看来要比圆形大。

为证明尺寸的正确，下图给出辅助和数值。

为让他们看来一样大小，我们将正方形适当缩小50px，我们看到缩小的正方形和圆形视大小基一致。

然后我们把上两个图形进了叠。

左图140px的正方形与140px的圆形，圆形完被包含进正方形里面，正方形超圆形4个a区域，正是造成视大小误差的原因。

右图128px的方形与140px的圆形，方形超过了圆形4a区域，圆形也超过了方形4b区域，a区域b区域两区域相互抵消。虽然他们的尺寸不同，但却几乎相同的面积，所以圆形方形视觉达到了平衡。

由此我们得出一论：两图形的视觉小否一致，由两图形的面积否相同决的。也就只能够保证两图形的面积基本相同，那么我们就能保证两图的视觉小基本一致。

下面首先定制圆形图标的栅格，因为系统图标的最大尺寸为44*44px，因为圆形有然的收缩性，所以将圆形撑整个网格。在撑整个网格的情况下是圆形在固定尺寸内的最大视觉大。这其的三种图形（正方形，横长形和竖长形）只需要适当缩尺寸就可以和圆形图标保持视觉一致了。

编者注：实在设计过程中，我们经会因为各种原因的影响导致我们对于「看见」的事物的解产生偏差。这一点对UI的设计非影响。既然无法绕过，那么，我们就要会如何「适配」人类的视觉惯性画“正确”的界面→《大开眼界！视觉误差对UI设计的影响和解决方案（附案例）》

圆形图标

在系统图标中圆形图标的现频率非之，例如我们经会到的微信里的发现图标，视频app中的视频播放图标等。圆形本身是具有很强的视觉收缩性的，我们在定制圆形图标的栅格时，为了和他图形的图标保持视觉一致，我们在基本栅格中撑满整个44*44px的格来保证圆形图标的视觉张。如图：

方形图标

正方形图标在各种应用中都常常能够，比如在知识享APP知乎的首页图标就是一个典型的正方形图标。正方形图标在实际尺寸下比圆形图标多出了四个尖角所以为了和型相统一，缩正方形3px。缩之后正方形的面积和圆拱形的面积基本一致了，如下图：

△ 左侧是正方形栅格，右侧是圆形栅格的重叠对比

横长形图标

横长形图标也是经常遇的典型的图标形状，例如，猫app首页菜中的会员图标，就是非常典型的横长形图标。那制定栅格的理跟正方形一，将圆形和横长形重叠在一起，然后适当压低高度，直圆形和横长形的面积基本相同。如下图：

△ 左侧是横长形栅格，右侧是圆形栅格的重叠对比

竖长形图标

竖长形图标跟横长形图标其实一，只是把角度旋转90°就可以了。竖长形图标出现的率也非常高，比如饿了吗app中的订图标。

△ 左侧是竖长形栅格，右侧是圆形栅格的重叠对比

异形图标

所谓的异形图标就是不能被简的归纳为何图形的图标，例如「的」图标是一个人形，上边下边大。那这的图形就是用于的基本栅格就好，然后根据图标的实际情况适当的调整图标大即可。

△ 左侧是异形栅格，右侧是圆形栅格的重叠对比

通过上面的分析，我们就得了最后的iOS系统图标栅格系统。图是尺寸规格分析。

iOS栅格系统总

后我们看下运用iOS系统图标的栅格系统下的实际案例效果。

腾讯视频ICON：

知乎ICON：

花瓣ICON：

这次的文章主要为大家详细的解读了如何定制iOS图标的栅格系统，希望对大家在理解栅格系统上有所帮助。

注作者的微信公众号：