今天跟大家聊一聊如何制定iOS的系統(tǒng)圖標(biāo)柵格系統(tǒng)的那些事蟀淮。眾所周知，在圖標(biāo)設(shè)計(jì)中都會(huì)使用統(tǒng)一的系統(tǒng)圖標(biāo)柵格系統(tǒng)怠惶。那么iOS的系統(tǒng)圖標(biāo)的柵格系統(tǒng)如何定制呢，這篇文章就來(lái)獨(dú)家揭秘iOS系統(tǒng)圖標(biāo)的柵格系統(tǒng)定制的奧秘脓魏。
通過(guò)ios7圖標(biāo)柵格轉(zhuǎn)化系統(tǒng)圖標(biāo)設(shè)計(jì)柵格
分享之前我還是要推薦下我自己建的iOS開(kāi)發(fā)學(xué)習(xí)群：680565220通惫，群里都是學(xué)ios開(kāi)發(fā)的，如果你正在學(xué)習(xí)ios 履腋，小編歡迎你加入，今天分享的這個(gè)案例已經(jīng)上傳到群文件俐末，大家都是軟件開(kāi)發(fā)黨奄侠，不定期分享干貨（只有iOS軟件開(kāi)發(fā)相關(guān)的）载矿，包括我自己整理的一份2017最新的iOS進(jìn)階資料和高級(jí)開(kāi)發(fā)教程垄潮，歡迎進(jìn)階中和進(jìn)想深入iOS的小伙伴闷盔。
今天我們來(lái)詳細(xì)講解下如何通過(guò)iOS應(yīng)用圖標(biāo)柵格推導(dǎo)出系統(tǒng)圖標(biāo)的柵格系統(tǒng)。首先我們先了解一下應(yīng)用圖標(biāo)柵格系統(tǒng)的比例關(guān)系分析逢勾，為我們下一步推導(dǎo)提供依據(jù)。
桌面圖標(biāo)柵格黃金比例分析
《秩序之美》中的黃金分割逃贝，√2和三分法。iOS7的圖標(biāo)柵格是對(duì)這個(gè)三個(gè)比例的完美運(yùn)用沐扳。
以64px為一個(gè)單位，即a=64px躯嫉。那么大正方形的邊長(zhǎng)的一半=8a杨拐，大圓半徑=7a，中圓半徑=4.25a哄陶，小圓半徑=3a。
8a/(8a-3a)=1.6 小圓與大正方形接近黃金比
7a/4.25a≈1.647 中圓與大圓接近黃金比
4.25a/3a≈1.417 中圓與小圓比例接近√2
整個(gè)柵格系統(tǒng)中的尺寸都是通過(guò)黃金比例互相聯(lián)系的舱痘。
應(yīng)用圖標(biāo)柵格和系統(tǒng)圖標(biāo)柵格的區(qū)別
iOS的應(yīng)用圖標(biāo)是放在手機(jī)屏幕上的离赫，每一個(gè)圖標(biāo)都必須要有一個(gè)圓角的正方形作為圖標(biāo)背景板，這個(gè)背景板是為了統(tǒng)一應(yīng)用圖標(biāo)的外形而設(shè)定的渊胸。而系統(tǒng)圖標(biāo)直接就是圖標(biāo)本身不要任何的背景板。因此系統(tǒng)圖標(biāo)的柵格系統(tǒng)可以直接沿用應(yīng)用圖標(biāo)內(nèi)圓部分的柵格比例作為系統(tǒng)圖標(biāo)的柵格系統(tǒng)胖翰。也就是這部分的比例關(guān)系切厘，8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ，中圓與大圓接近黃金比疫稿，4.25a/3a≈1.417 中圓與小圓比例接近√2。
系統(tǒng)圖標(biāo)基本網(wǎng)格的制定
在iOS界面中底部導(dǎo)航欄的系統(tǒng)圖標(biāo)標(biāo)準(zhǔn)大小為44*44px舀凛，所以就以44*44px作為標(biāo)準(zhǔn)尺寸來(lái)定制系統(tǒng)圖標(biāo)柵格途蒋。我們將應(yīng)用圖標(biāo)的內(nèi)圓部分提取出來(lái)并且將尺寸等比例縮小為44px，并且添加一個(gè)44px的正方形邊框，這樣我們就得到了一個(gè)系統(tǒng)圖標(biāo)的基本柵格梯醒。
△ 基本柵格
制定系統(tǒng)圖標(biāo)柵格的理論依據(jù)
系統(tǒng)圖標(biāo)的造型多種多種奸晴，但是在其看似復(fù)雜的造型背后我們可以把系統(tǒng)圖標(biāo)概括為四種基本型：圓形圖標(biāo)，正方形圖標(biāo)逮光，橫長(zhǎng)形圖標(biāo)和豎長(zhǎng)形圖標(biāo)墩划。我們都知道如果按照?qǐng)D標(biāo)的實(shí)際尺寸設(shè)計(jì)圖標(biāo)的話，會(huì)出現(xiàn)圖標(biāo)視覺(jué)大小不統(tǒng)一的問(wèn)題乙帮，那么我們應(yīng)當(dāng)如何解決這個(gè)問(wèn)題呢？這個(gè)問(wèn)題就是我們要制定系統(tǒng)圖標(biāo)柵格系統(tǒng)的原因驾茴。
那么是什么原因?qū)е聦?shí)際尺寸下圖形的視覺(jué)大小會(huì)不一致呢氢卡？通過(guò)觀察我們得知在相同的實(shí)際尺寸下是由于圖形的形狀不同導(dǎo)致視覺(jué)張力不同，所以最終表現(xiàn)出不同的視覺(jué)大小译秦。那么下面我們通過(guò)實(shí)驗(yàn)對(duì)比來(lái)證明造成視覺(jué)大小不同的原因。在前邊的文章中我們講到過(guò)正方形和圓形的案例们拙，這次我們依然用這兩個(gè)圖形作為例子來(lái)試驗(yàn)阁吝。
首先我們對(duì)比正方形和圓形在實(shí)際尺寸下的視覺(jué)大小對(duì)比，我們發(fā)現(xiàn)實(shí)際尺寸都是140*140px的情況下装盯，正方形看起來(lái)要比圓形大与境。
為了證明尺寸的正確性猖吴，下圖給出了輔助線和數(shù)值。
為了讓他們看起來(lái)一樣大小共屈，我們將正方形適當(dāng)縮小50px，我們看到縮小后的正方形和圓形視覺(jué)大小基本一致了拗引。
然后我們把上面兩個(gè)圖形進(jìn)行了重疊矾削。
左圖140px的正方形與140px的圓形，圓形完全被包含進(jìn)了正方形里面欲间，正方形超過(guò)了圓形4個(gè)a區(qū)域断部，正是造成視覺(jué)大小誤差的原因。
右圖128px的正方形與140px的圓形蝴光，正方形超過(guò)了圓形4個(gè)a區(qū)域，而圓形也超過(guò)了正方形4個(gè)b區(qū)域趁耗，a區(qū)域和b區(qū)域兩個(gè)區(qū)域相互抵消做瞪。雖然他們的尺寸不同，但卻有著幾乎相同的面積装蓬，所以圓形和正方形在視覺(jué)上達(dá)到了平衡。
由此我們得出一個(gè)定論：兩個(gè)圖形的視覺(jué)大小是否一致儡遮，是由兩個(gè)圖形的面積是否相同決定的暗赶。也就是說(shuō)只要能夠保證兩個(gè)圖形的面積基本相同，那么我們就能保證兩個(gè)圖像的視覺(jué)大小基本一致十嘿。
下面我們首先定制圓形圖標(biāo)的柵格岳锁，因?yàn)橄到y(tǒng)圖標(biāo)的最大尺寸為44*44px，又因?yàn)閳A形有天然的收縮性，所以我們將圓形撐滿整個(gè)網(wǎng)格勿决。在撐滿整個(gè)網(wǎng)格的情況下是圓形在固定尺寸內(nèi)的最大視覺(jué)大小招盲。這樣其他的三種圖形（正方形，橫長(zhǎng)形和豎長(zhǎng)形）只需要適當(dāng)縮小尺寸就可以和圓形圖標(biāo)保持視覺(jué)一致了咆繁。
編者注：其實(shí)在設(shè)計(jì)過(guò)程中控乾，我們經(jīng)常會(huì)因?yàn)楦鞣N原因的影響導(dǎo)致我們對(duì)于「看見(jiàn)」的事物的理解產(chǎn)生偏差。這一點(diǎn)對(duì)UI的設(shè)計(jì)非常影響蜕衡。既然無(wú)法繞過(guò)，那么久脯，我們就要學(xué)會(huì)如何去「適配」人類的視覺(jué)慣性畫(huà)出“正確”的界面→《?視覺(jué)誤差镰吆！對(duì)UI設(shè)計(jì)的影響和解決方案?》
圓形圖標(biāo)
在系統(tǒng)圖標(biāo)中圓形圖標(biāo)的出現(xiàn)頻率非常之高，例如我們經(jīng)常會(huì)用到的微信里的發(fā)現(xiàn)圖標(biāo)万皿，視頻app中的視頻播放圖標(biāo)等牢硅。圓形本身是具有很強(qiáng)的視覺(jué)收縮性的，所以我們?cè)诙ㄖ茍A形圖標(biāo)的柵格時(shí)减余，為了和其他圖形的圖標(biāo)保持視覺(jué)一致，我們?cè)诨緰鸥裰袚螡M整個(gè)44*44px的網(wǎng)格來(lái)保證圓形圖標(biāo)的視覺(jué)張力如筛。如下圖：
方形圖標(biāo)
正方形圖標(biāo)在各種應(yīng)用中都常常能夠看到抒抬，比如在知識(shí)分享APP知乎的首頁(yè)圖標(biāo)就是一個(gè)典型的正方形圖標(biāo)。正方形圖標(biāo)在實(shí)際尺寸下比圓形圖標(biāo)多出了四個(gè)尖角所以為了和原型相統(tǒng)一妖胀，我們縮小正方形3px∽鲈粒縮小之后正方形的面積和圓拱形的面積基本一致了捉撮，如下圖：
△ 左側(cè)是正方形柵格巾遭，右側(cè)是與圓形柵格的重疊對(duì)比
橫長(zhǎng)形圖標(biāo)
橫長(zhǎng)形圖標(biāo)也是經(jīng)常遇到的典型的圖標(biāo)形狀，例如灼舍，天貓app首頁(yè)菜單中的會(huì)員圖標(biāo)，就是非常典型的橫長(zhǎng)形圖標(biāo)炫乓。那么制定柵格的原理跟正方形一樣献丑，我們將圓形和橫長(zhǎng)形重疊在一起，然后適當(dāng)壓低高度创橄，直到圓形和橫長(zhǎng)形的面積基本相同。如下圖：
△ 左側(cè)是橫長(zhǎng)形柵格邦邦，右側(cè)是與圓形柵格的重疊對(duì)比
豎長(zhǎng)形圖標(biāo)
豎長(zhǎng)形圖標(biāo)跟橫長(zhǎng)形圖標(biāo)其實(shí)一樣醉蚁，只是把角度旋轉(zhuǎn)90°就可以了。豎長(zhǎng)形圖標(biāo)出現(xiàn)的幾率也非常高郭赐，比如餓了嗎app中的訂單圖標(biāo)确沸。
△ 左側(cè)是豎長(zhǎng)形柵格，右側(cè)是與圓形柵格的重疊對(duì)比
異形圖標(biāo)
所謂的異形圖標(biāo)就是不能被簡(jiǎn)單的歸納為幾何圖形的圖標(biāo)观谦，例如「我的」圖標(biāo)是一個(gè)人形桨菜，上邊小下邊大捉偏。那這樣的圖形我們就是用于我們的基本柵格就好泻红，然后根據(jù)圖標(biāo)的實(shí)際情況適當(dāng)?shù)恼{(diào)整圖標(biāo)大小即可。
△ 左側(cè)是異形柵格讹躯，右側(cè)是與圓形柵格的重疊對(duì)比
通過(guò)上面的分析缠劝，我們就得出了最后的iOS系統(tǒng)圖標(biāo)柵格系統(tǒng)。下圖是尺寸規(guī)格分析惨恭。
iOS柵格系統(tǒng)匯總
最后我們看下在運(yùn)用iOS系統(tǒng)圖標(biāo)的柵格系統(tǒng)下的實(shí)際案例效果脱羡。
騰訊視頻ICON：
知乎ICON：
花瓣ICON：
這次的文章主要為大家詳細(xì)的解讀了如何定制iOS圖標(biāo)的柵格系統(tǒng)锉罐，希望對(duì)大家在理解柵格系統(tǒng)上有所幫助。
