在上一篇文章中，我們以全方位的方式解釋了系統(tǒng)圖標(biāo)的相關(guān)要點(diǎn)。也就是說系統(tǒng)圖標(biāo)的設(shè)計風(fēng)格，也是圖標(biāo)設(shè)計的網(wǎng)格系統(tǒng)。在我們所有人談?wù)摷垙堉?，我們今天將練?xí)它。畢竟，練習(xí)才是硬道理。

編者按：如何自定義iOS系統(tǒng)圖標(biāo)的網(wǎng)格系統(tǒng)，本文來到了iOS系統(tǒng)圖標(biāo)網(wǎng)格系統(tǒng)定制的獨(dú)家秘訣。 →《UI 新手福利!iOS系統(tǒng)圖標(biāo)柵格系統(tǒng)全方位解密》

我們使用實(shí)際案例來解釋如何設(shè)計具有獨(dú)特氣質(zhì)的系統(tǒng)圖標(biāo)樣式。在同一組圖標(biāo)的基礎(chǔ)上，我們通過改變不同的設(shè)計方法來改變圖標(biāo)樣式。它真的是干貨的圖標(biāo)設(shè)計。

系統(tǒng)圖標(biāo)示例教程

1.首先我們打開PS編輯器，選擇首選項，然后打開參考線選項，我們將網(wǎng)格間距設(shè)置為44px，這是ios系統(tǒng)中標(biāo)準(zhǔn)圖標(biāo)的大小。然后將子網(wǎng)格設(shè)置為8px。

2.創(chuàng)建一個新的800 * 800px畫布，然后按快捷鍵Ctrl +”調(diào)出剛設(shè)置的輔助線?，F(xiàn)在每個方格是44 * 44px。

3.打開從上一篇文章派生的系統(tǒng)圖標(biāo)網(wǎng)格系統(tǒng)，作為設(shè)計圖標(biāo)的參考。在這里，考拉老師提供iOS系統(tǒng)圖標(biāo)網(wǎng)格系統(tǒng)的下載地址，您可以自己下載。 （下載鏈接：https://pan.baidu.com/s/1dGFskZv密碼：d30b）共享的系統(tǒng)光柵系統(tǒng)是ai文件，請用AI打開，然后選擇光柵文件ctrl + c復(fù)制到PS，ctrl + v然后選擇智能對象選項。

這次我們選擇了UC標(biāo)題的圖標(biāo)作為重新設(shè)計的原型。選擇UC標(biāo)題的圖標(biāo)作為原型的原因是五個圖標(biāo)是代表性的，即圓形圖標(biāo)，垂直圖標(biāo)和不同圖標(biāo)。只缺少一個方形圖標(biāo)，因此我們將第一個主頁圖標(biāo)更改為方形信息圖標(biāo)。這樣我們就可以在同一組圖標(biāo)中比較5種不同形狀的圖標(biāo)設(shè)計。

款式設(shè)計1

首先，我們首先使用布爾運(yùn)算來制作一組方形圖標(biāo)，線條為2px，圖標(biāo)的角落設(shè)計成直角，給人一種方形感。我們使用此圖標(biāo)樣式作為基本形狀。下面我們將繼續(xù)改變這個圖標(biāo)的樣式，以創(chuàng)建各種不同的設(shè)計風(fēng)格。

風(fēng)格設(shè)計2

我們根據(jù)Style 1優(yōu)化了尖角作為圓形圖標(biāo)。圓角設(shè)計設(shè)置為4px，瞬間圖標(biāo)感覺圓潤而親密。這種風(fēng)格也是市場上最常用的系統(tǒng)圖標(biāo)設(shè)計風(fēng)格。

款式設(shè)計3

在Style 2的基礎(chǔ)上，我們將線條加工成3px的視覺風(fēng)格。由于線條粗細(xì)的調(diào)整，整套圖標(biāo)感覺更強(qiáng)大有力，給人一種非?？煽亢头€(wěn)定的感覺。

風(fēng)格設(shè)計4

繼續(xù)大膽的線條以4px視覺風(fēng)格，圖標(biāo)已經(jīng)非常強(qiáng)大，但由于設(shè)計有圓角，整套圖標(biāo)給人一種更可愛的感覺。這個圖標(biāo)形狀基本上是UC標(biāo)題的圖標(biāo)設(shè)計風(fēng)格。當(dāng)然，由于圖標(biāo)的大膽，我們發(fā)現(xiàn)訂單圖標(biāo)內(nèi)的橫桿在視覺上比其他圖標(biāo)更重，所以此時我們將正確切割圖標(biāo)內(nèi)的橫條以確保整體圖標(biāo)。一致的愿景。

風(fēng)格設(shè)計5

我們繼續(xù)根據(jù)樣式3斷開每個圖標(biāo)以形成破碎的樣式。請注意斷點(diǎn)的位置，通常位于圖標(biāo)的右側(cè)或下方。它通常不會出現(xiàn)在左上角和圖標(biāo)中心位置。此時，圖標(biāo)具有唯一的功能，這是一個斷點(diǎn)。一個微小的變化可以呈現(xiàn)出不同的視覺感受，看起來更加獨(dú)特。

款式設(shè)計6

按照上面的想法，我們在斷點(diǎn)的中間添加一個小點(diǎn)，整個圖標(biāo)集顯示出不同的感覺。它看起來更時尚，更明亮，印象更深刻。

款式設(shè)計7

我們還可以組合圖標(biāo)和應(yīng)用程序的主要顏色，將圖標(biāo)設(shè)計為雙色圖標(biāo)，并提取圖標(biāo)的線條或顏色塊的一部分以進(jìn)行顏色轉(zhuǎn)換。在這里，我們將圖標(biāo)中的所有圖標(biāo)與主題顏色混合在一起。黑色和檸檬黃的配色使圖標(biāo)的時尚感和形式大大增強(qiáng)，給用戶帶來明亮的感覺。

風(fēng)格設(shè)計8

當(dāng)然，我們也可以嘗試填充圖標(biāo)內(nèi)部的顏色，并在設(shè)計內(nèi)部錯位時給它一種高光感。這種形式非常適合點(diǎn)擊和選擇。以這種設(shè)計風(fēng)格選擇免費(fèi)魚應(yīng)用程序的菜單圖標(biāo)。

款式設(shè)計9

您還可以使用半透明設(shè)計，例如我們將圖標(biāo)內(nèi)的圖形設(shè)置為50％透明度。創(chuàng)造不同的視覺體驗。

圖標(biāo)的演變是一個設(shè)計思維的過程，我們可以嘗試通過不斷的實(shí)驗找到一些創(chuàng)意點(diǎn)。今天我們選擇一組圖標(biāo)作為例子進(jìn)化，并且有很多未提及的圖標(biāo)樣式，我們也可以嘗試探索更具創(chuàng)意的圖標(biāo)設(shè)計風(fēng)格。以上是今天解釋的內(nèi)容，希望對大家有所幫助。

« 苗元偉：我只是想告訴你如何不正當(dāng)?shù)匦麄餍“?/a> | 最佳汽車機(jī)車藍(lán)牙MP3充電器無損音質(zhì)呼叫更清晰 »