輕松打造iOS7風(fēng)格圖標(biāo)

0 評論 3520 瀏覽 0 收藏 7 分鐘

隨著近年來iOS7的發(fā)布,很多網(wǎng)站和APP都忙于改頭換面,來適配這套全新的扁平纖細的iOS設(shè)計風(fēng)格。設(shè)計好圖標(biāo)是件棘手的事情,尤其當(dāng)你要設(shè)計一整套時,而設(shè)計線條式圖標(biāo)本身又是另一項挑戰(zhàn)。

下面,我為你準(zhǔn)備了一系列指南,能幫你通過簡單的步驟打造iOS7風(fēng)格的圖標(biāo)。

目標(biāo)是什么?

凡事分輕重緩急,你設(shè)計的圖標(biāo)或圖標(biāo)集是用于你的APP嗎(這里的APP也指網(wǎng)站)?對于這部指南來說,都無所謂。因為無論如何你都應(yīng)當(dāng)遵循下面這些步驟。既然對這一點明確無疑,我們來關(guān)注首要任務(wù)——研究。

研究別人是怎么做的

研究是一項需要預(yù)先完成的基本任務(wù)。這很明顯,也相對沉悶,你的每項工作都應(yīng)該從研究開始。不過,在圖標(biāo)設(shè)計中,還有些特別的東西需要了解。

Budicon tester

首先,看看別人怎么做。有助于了解當(dāng)下潮流趨勢,還有相關(guān)的設(shè)計守則。最重要的是,這能給你靈感!觀察各種神奇的圖標(biāo)作品能助你發(fā)現(xiàn)其中的創(chuàng)意閃光,當(dāng)你準(zhǔn)備畫手稿時,就能產(chǎn)生好點子。

iPhone Flat UI Concept

既然這個指南是針對iOS7的,研究蘋果的做法也不失為一個好主意。觀察它的圖標(biāo),無論是主屏圖標(biāo)(比如信息),還是app中的圖標(biāo)(比如時鐘應(yīng)用中的)。看看蘋果的iOS7設(shè)計準(zhǔn)則,你就知道他們建議你怎么做。

100 Free Vector Icons

iOS 7 Icon Guides PSD

著手畫點什么

既然你已經(jīng)充分了解別人的做法,也深受啟發(fā),是時候?qū)⒛愕南敕ǜ吨T于紙上了。在創(chuàng)作過程中,手稿也是一項基本步驟,因為它讓你仔細思考各個創(chuàng)意,使大腦快速進行頭腦風(fēng)暴產(chǎn)生新想法。當(dāng)你畫了一些簡單的手稿,并將它們都羅列在眼前,正確的方向立刻就顯現(xiàn)出來。

icon set

icon pattern sketch

手繪草稿最關(guān)鍵的一點,不求數(shù)量多,而是要多樣化。你畫了上百個相同的東西一點用也沒有。如果你有三個不同概念,那就有用和深刻得多。只要你保持手繪稿千變?nèi)f化,就會有好結(jié)果。廣泛收集靈感有助于找到合適類型的圖標(biāo),并確定應(yīng)該朝哪個方向前進。除此之外,看看這些各式各樣的草稿,能幫你更容易找出殘次品。當(dāng)你無法確定正確方向,卻能肯定其中哪些不會再深入下去時,這個辦法相當(dāng)于管用。

繪制實際圖標(biāo)

我可以肯定,在完成了這些手繪稿之后,你或你的團隊已經(jīng)有所偏好了。無論你選出了其中具體某一個,還是幾個不同方案來競爭,該把它們繪制出來了。首先要建立你的柵格系統(tǒng)。如果是創(chuàng)建主屏圖標(biāo),那你應(yīng)該遵循蘋果提供的新iOS7設(shè)計準(zhǔn)則。這類PSD模版網(wǎng)上隨處可見。

iOS 7 Icon Set - PSD + Sketch

Subway iOS 7 Style Icon Set

我的建議是盡你所能把這些不同圖標(biāo)都應(yīng)用于柵格系統(tǒng),不過先用常規(guī)做法來繪制圖標(biāo)。以后再回來修改細節(jié)和做統(tǒng)一化處理,反正你收工前還得再做調(diào)整。對我而言這很有效。全部繪制完成后,回頭來確保它們都吻合柵格,并具有統(tǒng)一的風(fēng)格——比如它們采用尖角還是圓角?同時,你也希望確認(rèn)這個圖標(biāo)是否符合整體設(shè)計的風(fēng)格,圖標(biāo)與app搭配嗎?主屏圖標(biāo)能體現(xiàn)app的設(shè)計嗎?

修飾圖標(biāo)

對于iOS7風(fēng)格圖標(biāo)設(shè)計,我有幾句話說。我知道iOS7提倡纖細線條的圖標(biāo)設(shè)計。但這也不是必須的,尤其對于主屏圖標(biāo)來說。不采用細線條,而采用飽滿圖形的大有人在,但它們和iOS7的整體風(fēng)格也相當(dāng)吻合。我不覺得細線條是唯一準(zhǔn)則,你不用也沒問題,尤其當(dāng)你的產(chǎn)品設(shè)計不適合甚至根本就不采用它們時。別管它就好。

Flat Design Icons

Reminder Icon

結(jié)論

創(chuàng)作iOS7圖標(biāo)不是什么難事。就此而言,我設(shè)計它們時,就像做其他類型的設(shè)計和圖標(biāo)一樣。關(guān)于iOS7最重要的一方面就是風(fēng)格,循著蘋果的腳步,你也能輕松做到。關(guān)于這套新設(shè)計風(fēng)格,有一點值得一提:為iOS7設(shè)計比擬物化設(shè)計要容易多了。

作者:十萬個為什麼;via:譯言網(wǎng)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!