今天跟大家聊一聊如何制定IOS的系統(tǒng)圖標(biāo)柵格的那些事。之前的文章我們講解了圖標(biāo)設(shè)計的6大原則,在文章中有一條很重要的原則是使用統(tǒng)一的系統(tǒng)圖標(biāo)柵格系統(tǒng)。那么IOS的系統(tǒng)圖標(biāo)的柵格系統(tǒng)如何定制呢。今天我們就來獨家揭秘IOS系統(tǒng)圖標(biāo)的柵格系統(tǒng)定制的奧秘。
《秩序之美》中的黃金分割,√2和三分法。iOS7的圖標(biāo)柵格是對這個三個比例的完美運用。
以64px為一個單位,即a=64px。那么大正方形的邊長的一半=8a,大圓半徑=7a,中圓半徑=4.25a,小圓半徑=3a
8a/(8a-3a)=1.6 小圓與大正方形接近黃金比
7a/4.25a≈1.647 中圓與大圓接近黃金比
4.25a/3a≈1.417 中圓與小圓比例接近√2
整個柵格系統(tǒng)中的尺寸都是通過黃金比例互相聯(lián)系的。
IOS的應(yīng)用圖標(biāo)是放在手機屏幕上的每一個圖標(biāo)都必須要有一個圓角的正方形作為圖標(biāo)背景板,這個背景板是為了統(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。
在IOS界面中底部導(dǎo)航欄的系統(tǒng)圖標(biāo)標(biāo)準(zhǔn)大小為44*44px,所以就以44*44px作為標(biāo)準(zhǔn)尺寸來定制系統(tǒng)圖標(biāo)柵格。我們將應(yīng)用圖標(biāo)的內(nèi)圓部分提取出來并且將尺寸等比例縮小為44px,并且添加一個44px的正方形邊框,這樣我們就得到了一個系統(tǒng)圖標(biāo)的基本柵格。
基本柵格
系統(tǒng)圖標(biāo)的造型多種多種,但是在其看似復(fù)雜的造型背后我們可以把系統(tǒng)圖標(biāo)概括為四種基本型:圓形圖標(biāo),正方形圖標(biāo),橫長形圖標(biāo)和豎長形圖標(biāo)。我們都知道如果按照圖標(biāo)的實際尺寸設(shè)計圖標(biāo)的話會出現(xiàn)圖標(biāo)視覺大小不統(tǒng)一的問題那么我們應(yīng)當(dāng)如何解決這個問題呢?這個問題就是我們要制定系統(tǒng)圖標(biāo)柵格系統(tǒng)的原因。
那么是什么原因?qū)е聦嶋H尺寸下圖形的視覺大小會不一致呢。通過觀察我們得知在相同的實際尺寸下是由于圖形的形狀不同導(dǎo)致視覺張力不同,所以最終表現(xiàn)出不同的視覺大小。那么下邊我們通過實驗對比來證明造成視覺大小不同的原因。在前邊的文章中我們講到過正方形和圓形的案例,這次我們依然用這兩個圖形作為例子來試驗。
1.首先我們對比正方形和圓形在實際尺寸下的視覺大小對比,我們發(fā)現(xiàn)實際尺寸都是140*140px的情況下正方形看起來要比圓形大.
2.為了證明尺寸的正確性,下圖給出了輔助線和數(shù)值。
3.為了讓他們呢看起來一樣大小,小便我們將正方形適當(dāng)縮小50px,我們看到縮小后的正方形和圓形視覺大小基本一致了。
4.然后我們把上面兩個圖形進行了重疊
左圖(140px的正方形與140px的圓形),圓形完全被包含進了正方形里面,正方形超過了圓形4個a區(qū)域,正是造成視覺誤差的原因。
右圖(140px的正方形與140px的圓形),正方形超過了圓形4個a區(qū)域,而圓形也超過了正方形4個b區(qū)域,兩個區(qū)域相互抵消。雖然他們的尺寸不同,但卻有著相似的面積,所以圓形和正方形在視覺上達到了平衡。
由此我們得出一個定論:
兩個圖形的視覺大小是否一致,是由兩個圖形的面積是否相同決定的。也就是說只要能夠保證兩個圖形的面積基本相同,那么我們就能保證兩個圖像的視覺大小基本一致。
下面我們首先定制圓形圖標(biāo)的柵格,因為系統(tǒng)圖標(biāo)的最大尺寸為44*44px,又因為圓形有天然的收縮性,所以我們將圓形撐滿整個網(wǎng)格。在稱滿整個網(wǎng)格的情況下是圓形在固定尺寸內(nèi)的最大視覺大小。這樣其他的三種圖形(正方形,橫長形和豎長形)只需要適當(dāng)縮小尺寸就可以和圓形圖標(biāo)保持視覺一致了。
在系統(tǒng)圖標(biāo)中圓形圖標(biāo)的出現(xiàn)頻率非常之高,例如我們經(jīng)常會用到的微信里的發(fā)現(xiàn)圖標(biāo),視頻app中的視頻播放圖標(biāo)等。圓形本身是具有很強的視覺收縮性的所以我們在定制圓形圖標(biāo)的柵格時為了和其他圖形的圖標(biāo)保持視覺一致。我們在基本柵格中撐滿整個44*44px的網(wǎng)格來保證圓形圖標(biāo)的視覺張力。如下圖
方形圖標(biāo):
正方形圖標(biāo)在各種應(yīng)用中都常常能夠看到,比如在知識分享APP知乎的首頁圖標(biāo)就是一個典型的正方形圖標(biāo)。正方形圖標(biāo)在實際尺寸下比圓形圖標(biāo)多出了四個尖角所以為了和原型相統(tǒng)一我們縮小正方形3px??s小之后正方形的面積和圓拱形的面積基本一致了,如下圖
左側(cè)是正方形柵格,右側(cè)是與圓形柵格的重疊對比
橫長形圖標(biāo):
橫長形圖標(biāo)也是經(jīng)常遇到的典型的圖標(biāo)形狀,例如,天貓app首頁菜單中的會員圖標(biāo),就是非常典型的橫長形圖標(biāo)。那么制定山歌的原理跟正方形一樣,我們將圓形和橫長形重疊在一起,然后適當(dāng)壓低高度,直到圓形和橫長形的面積基本相同。如下圖
左側(cè)是橫長形柵格,右側(cè)是與圓形柵格的重疊對比
豎長形圖標(biāo):
豎長形圖標(biāo)跟橫長形圖標(biāo)其實一樣,只是吧角度旋轉(zhuǎn)90 就可以了。舒暢圖標(biāo)出現(xiàn)的幾率也非常高,比如餓了嗎app中的訂單圖標(biāo)。
左側(cè)是豎長形柵格,右側(cè)是與圓形柵格的重疊對比
異型圖標(biāo):
所謂的異性圖標(biāo)就是不能被簡單的歸納為幾何圖形的圖標(biāo),例如我的圖標(biāo)是一個人形上邊小下邊大,那這樣的圖形我們就是用于我們的基本柵格就好。然后根據(jù)圖標(biāo)的實際情況適當(dāng)?shù)恼{(diào)整圖標(biāo)大小即可。
左側(cè)是異形柵格,右側(cè)是與圓形柵格的重疊對比
通過上邊的分析我們就得出了最后的IOS系統(tǒng)圖標(biāo)柵格系統(tǒng)。下圖是尺寸規(guī)格分析。
騰訊視頻ICON:
知乎ICON:
花瓣ICON:
這次的文章主要為大家詳細的解讀了如何定制IOS圖標(biāo)的柵格系統(tǒng),希望對大家在理解柵格系統(tǒng)上有所幫助,下一篇文章我們將結(jié)合實際案例來分析什么樣的圖標(biāo)是優(yōu)秀的系統(tǒng)圖標(biāo)
相關(guān)文章--《如何用產(chǎn)品經(jīng)理的技能,解決情侶吵架的問題》
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2021/ lb577.com 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc