今天跟大家聊一聊如何制定iOS的系統圖標柵格系統的那些事。眾所周知，在圖標設計中都會使用統一的系統圖標柵格系統。那么iOS的系統圖標的柵格系統如何定制呢，這篇文章就來獨家揭秘iOS系統圖標的柵格系統定制的奧秘。

歡迎關注作者的微信公眾號：UI酷設計

通過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圖標的柵格系統，希望對大家在理解柵格系統上有所幫助。

歡迎關注作者的微信公眾號：

「帶你深入了解柵格系統」

• 《新手科普文！每個設計師都該懂的柵格系統基礎六要素》
• 《高手的平面課堂！網格系統的入門基礎知識+案例演示》
• 《基礎小科普！3種國內外最常見的響應式柵格》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com