如何更好的設計圖標?這篇講透了!

2020-12-16 酷扯兒

本文轉載自【微信公眾號:阿門教你PS,ID:meitian_PS】經微信公眾號授權轉載,如需轉載與原文作者聯繫

這是一篇非常全面的圖標設計乾貨

側重於方法論方面的指南,涵蓋了從設計第一枚圖標開始到完成一整套圖標所需要的一切,而不是一篇側重於軟體技術方面的指南

作者Justas Galaburda

目錄

第一章:關於圖標的歷史與目的

什麼是圖標?

圖標的歷史

為什麼圖標很重要?

第二章:圖標設計的基本知識

圖標的種類

圖標的風格

圖標的大小與屬性

網格的作用

使圖標具有凝聚力

第三章:完成你的第一套圖標之前你需要知道的一切

怎樣選擇正確的主題

選擇要畫的圖標

怎樣為圖標選擇正確的隱喻

草圖的重要性

怎樣知道要用的風格

理想的網格大小

選擇使用的軟體

如何提取最簡潔的圖標造型

將你圖標中的所有元素完美對齊著色與技巧

使圖標獨一無二

完成你的圖標組

後記

第一章:圖標的歷史與目的

1.1 什麼是圖標

我認為圖標最精準和簡單的定義是圖標是一種通過相似性或類比性來代表對象的符號或者表現。

1.2圖標的歷史

1.3為什麼圖標很重要?

圖標使這個世界結合起來。無論你使用的是哪一種母語,圖標都是比語言更為容易理解的可視化語言。同時圖標傳遞信息非常的高效。人類能夠維持注意力的時間越來越短(已經比金魚還短了),因此傳遞信息的速度就越來越重要。

第二部分:圖標設計的基本知識

2.1圖標的種類

表象符號:通過和現實物體的相似性或參考性(reference)來傳遞信息的符號。比如飛機來代表飛機場。

表意符號:不是表現一個物體了,而是表達一個概念。比如加號減號都是這種。

同時表意符號和表象符號經常會被結合在一起用來傳達正確的信息。比如創建新文件這種。

2.2 圖標的風格

線性圖標

填充圖標(譯者:作者最擅長的就是這種,而且最近超流行的)

面型圖標

扁平圖標

手繪風格圖標

擬物圖標

2.3圖標的尺寸和屬性

畫圖標的時候最重要的一條就是所有的圖標都要能夠適應同一個大小的正方形畫板,不管你畫的東西實際生活裡面大小是多大,都得最後畫成差不多大。

那麼在選擇尺寸的方面,如果你是在畫ios或者安卓的圖標,按照對應的平臺規範來就好。如果是web或者練習用,可以選擇這幾種:16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512。

同時如果是剛開始畫圖標的話,建議選64-96px的會比較容易上手。

2.4網格的用法

雖然目前有很多先進的圖標網格系統比如ios和安卓都有碉堡了的網格系統。但是其實網格系統被過分強調了。我認為你在練習了上千個圖標之前其實是沒有必要去思考關於網格的問題的,

那麼網格到底是什麼呢?網格是一種畫板內的參考線,最大的作用就是通過保證一套合理的結構來讓你的圖標組看起來很和諧很一致。

那什麼應該在時候用網格呢?第一種情況是,如果你的圖標組有超過50個圖標的時候;

第二種是如果你在為已有一套網格系統的圖標繼續畫東西的時候。

第三種情況是,你知道日後有人會繼續接手你的圖標組的時候。

那應該怎麼使用網格?通常的話我會使用下面的這兩種:

這背後的原理是有時候一些圖形看起來會比另外一些大,比如正方形看起來比一樣大的圓形大。所以就會把正方形放在裡面的那個方形裡面。(譯者:這部分的話,大家可以去閱讀以下谷歌的圖標設計指南,裡面專門講過這部分)

2.5 讓圖標和諧

畫一個好看的圖標是很簡單的。分別畫幾個好看的圖標也不難,真正讓你崩潰的是怎麼讓他們看上去和諧。

首先我們要明白一個問題就是為什麼要讓圖標看起來很和諧?其實圖標是一種獨特的語言,每個圖標都是一個有獨特意義的單詞。但是只有當它們結合在一起的時候,才能組成句子。注意千萬不要在一套圖標裡用不同的風格!那樣就跟一句話裡面用不同的語言一樣。(譯者:想想說話的時候喜歡夾著英文單詞的人)

只使用一種風格的圖標。原因上面說過了使用同一種風格化的技巧。這裡說的跟使用同一種風格有一些區別。即使都是線性圖標,也可有成千上萬種不一樣的做法。所以要保持組成你的風格的元素一致,比如用多粗的線條,用多大的圓角,等等。大小很重要。不光是要在一樣大小的矩形裡面,而是要讓他們視覺上的大小保持一致。嘗試使用網格。我不是在打自己的臉,一定要記住不要過分使用!在整套圖標中使用一樣的元素。比如一樣大小的圓形,可以使他們看起來更和諧,也可以節約你的時間。使用同一套色板。同時要強調一點,永遠不要為了圖標的一致性犧牲了圖標的識別性。識別性才是讓圖標這麼牛逼的關鍵。

第三章:完成你的第一套圖標之前你需要知道的一切

怎樣選擇正確的主題

選擇要畫的圖標

怎樣為圖標選擇正確的隱喻

草圖的重要性

怎樣知道要用的風格

理想的網格大小

選擇使用的軟體

如何提取最簡潔的圖標造型

將你圖標中的所有元素完美對齊

著色與技巧

創造獨一無二的圖標

完成前的最後潤色

第三章 完成你的第一套圖標之前你需要知道的一切

3.1 怎樣選擇正確的主題?

如果這是你的第一套圖標的話,為自己而做並且選擇一個你自己覺得很有意思的主題。因為這樣不僅會減少不必要的限制條件同時能讓你在做圖標的過程中感受到樂趣。另外,你不會缺少這個主題下的想法。

3.2 選擇那些圖標來畫?

如果你在做你自己感興趣的主題的話你應該能很輕鬆知道選擇哪些最具有代表性。坐下來拿個紙和本子記錄下來你想到的關於這個主題的東西。當你想不到啥新鮮東西的時候就google一下,同時你也可以去一些圖標網站找點靈感(iconfinder,creativemarket,iconfont,nounproject)。即使你已經有一個很好的想法了,我還是建議你去跟你的朋友們一起做個腦暴。但是要注意不要光BB,要把每個詞都用進入你腦海的第一個印象畫下來,你會得到很多碉堡了的概念的。

3.3 怎麼樣找到每個圖標的最佳語義符號

當你遇到不知道怎麼選擇正確的語義符號來傳達你想要傳達的信息的時候,我再次推薦你谷歌一下。也可以去查一查有沒有已經發布的圖標組裡包含了你想要的那個。

3.4 草圖的重要性

當你有了想法之後,就應該去選擇適合你的最佳圖標。不要直接上軟體,先粗略的畫一畫草圖。很多小夥伴潛意識裡拒絕畫草圖是因為他們他們不知道怎麼做或者不習慣做。但是萬事開頭難,一旦你開始這樣做,你會根本停不下來。

草圖帶來最佳的想法

如果你直接上軟體你很有可能會陷進這個思路裡。第一個想法往往不是最好的,在草圖階段多做嘗試會讓你的圖標更趨近完美。

你的草圖本就是你的靈感集

鐵律一:永遠帶著你的草圖本。隨時記錄下靈感,同時能讓你回顧你之前的作品,發現以前的作品,同時激勵你繼續努力練習。

草圖會節約你的時間

有一種常見的錯誤思路就是認為草圖會浪費時間。這是錯的!想一想你用AI不斷返工修改的那些時間,如果你畫了草圖這些可能根本不會發生。想一下如果你要在ai裡面嘗試風格或者變化有多麻煩,我可以肯定的說這會要畫草圖的兩倍時間。

誰都可以畫草圖

這是最棒的一部分,你們說你們不會畫畫,其實我也不會!(譯者:信你有鬼,不要以為我沒看過你的視頻),但是如果你堅持做的話,你會畫的越來越好。而且你只是畫個草圖而已,不是要畫個大作,冷靜,放鬆,享受這個過程。

我的草圖流程

我的草圖流程分為兩個部分。第一個部分更類似腦暴。我會把我剛才的想法和icon全都簡單畫出來。這一步的目的是檢查對於同一個圖標來說哪個是最好的。

當我決定了哪個草圖看起來最好之後我會進入下一步——畫更具體的草圖。這裡我推薦大家使用網點本。

首先我會畫一個正方形作為邊界,然後選擇勝出的那個來細化它。在這個階段我會嘗試使用基本圖形,這是嘗試找到你的圖標的最佳結構的最好方式,因為現在你可以快速的草圖和修改。後面我們會詳細講。

當草圖完成之後我一般會把他們拍下來或者掃描一下作為矢量化的參考。

3.5 怎麼樣知道使用哪種風格?

通常根據那些令人激動品牌設計或者logo來選擇你的風格是很好的思路。我一般會搜一下我正在創作的圖標的相關品牌來找一些能夠很好表現它的元素。同時你應該好好留意一下那些形狀,顏色和字體等等。試著找一下他們的調性。所有的這些會告訴你你應該用什麼樣的風格同時會對你的工作流和風格化方面加上許多的限制。

3.6 理想的網格大小

網格的大小主要取決於你的圖標的使用場景

3.7 選擇使用的軟體

答案就是隨便,哪個順手用哪個。剛開始練習的時候建議不要去做32px以下的圖標,因為通過一個圖標去傳達正確的信息會變的很困難。

3.8 如何提取最簡潔的圖標造型

圖標應該看起來超級簡潔,但是簡潔不是一件容易的事。那麼,怎麼才能知道在一個圖標裡做多少的細節呢?圖標越小,細節應該越少。但是你應該在減少細節的過程中小心不要做過火。

看一下這個例子:

你能猜到這個的含義麼,他的意思是工作面試。這是一個典型的超簡潔的但是搞不懂意思的一個圖標。

谷歌的material design的圖標是更好的極簡圖標的範例。關鍵點在於在使圖標簡潔的同時含義清晰。同時不要忘記圖標應該是引人注目同時有一點點趣味的。你把所有的內容都拿走了,那它看上去肯定會很無趣。

使用基本圖形

複雜的圖標可以用基本圖形來組成,你要做的只是換個角度來看待問題。圖標的使命是傳達信息,因此它需要很明晰。這就是為什麼要使用基本圖形從而不會使圖標比它所需要的更複雜。

我知道初學者可能會在使用基本圖形將一個複雜實物變成一個簡單圖形的過程中遇到許多困難。解決這個只有一種辦法,練習。

首先,聚焦在你選擇的物體的特點上。在設計中強調關鍵元素非常的重要。同時牢記少即是多,如果有什么元素你去掉它也不妨礙理解,那麼去掉它就好。

第二個技巧是草圖。這樣做主要是因為會很快。

唯有不斷聯繫才能幫助你理解這一切。

看一些例子。

總結一下

把你的圖標簡約到它的本質是非常關鍵的一步,但是有時候會弄巧成拙。永遠牢記圖標的目的是傳遞信息。

3.9 將你圖標中的所有元素完美對齊

區分圖標的好與壞的一個重要因素就是元素的對齊和間距。正確的對齊和精確的間距可以將你的圖標帶到一個全新的境界。我已經強調過了使用一致的元素,但是同時使用一致的間距和對齊也同樣重要的原因是:

保證了一套圖標的一致性你的圖標看上去更加專業平衡的圖標看上去更有吸引力

當使用同一種間距 規則的時候你在相似的元素間創造聯繫——同時從另一個角度上來說,將主要元素和次要的分割開來。

一起來看一下這個信用卡的圖標:

這個圖標根據64px的網格來製作,同時我是用了4px的描邊。這樣做的原因是這樣我也可以把它變成最小的圖標。(16px)

在可能的情況下,總是根據你要使用的最小間距單位來選擇你要在圖標中使用的元素的大小。舉個例子,那個磁條的寬度是最小間距的三倍,所以信息的那個跳的寬度也是三倍。那個mastercard的元素的寬度是五倍,所以信息條下面的那條的寬度也是五倍。

當你開始畫第一個圖標的時候,就開始為剩下的圖標準備規則。比如對於同一種元素用4px的間隔對於不同組的元素用8px的間隔。再強調一下,這些規則不是死的,要靈活變通。

這樣我們的規則大概就是這樣

元素之間的間距:

1x - 4px

2x - 8px

物體的大小

1x-4px

3x-12px

5x-20px

在整套繪製的過程中你肯定會用到更多的尺寸,所以一定要確定你的最小間距的值不要變。

另外一件你要記住的事情是不要使用太多的間距尺寸,一般來說2-3中尺寸就足夠了,不要折騰太多不一樣的。

然後永遠記住的一點,永遠不要因為視覺犧牲圖標的識別性。

3.10 著色與技巧

色彩是非常強大的。這就是為什麼為你的圖標選擇合適的顏色如此重要。現在我來告訴你一些小秘密。

明確了解內容

一切都取決於你的圖標會被用在哪兒。在你開始之前有兩個事情要提前考慮的:

你的圖標會被用在哪兒誰是他們的目標人群

選擇正確的色板

取決你想要的風格你可以使用單色系列,使用一個顏色的不同色度。或者選擇一個配好不同顏色的色板,這是用來創作扁平圖標的常用方法。做出優秀的是配色確實不是一件容易的事情。我的建議是在整套中使用2-5種顏色。

可以找找Colourlovers或者adobe color來獲取靈感。不要害怕嘗試。

明白顏色的含義

關於這部分內容我就不翻譯了,強烈推薦小夥伴們去讀一些關於色彩方面的文章和書籍。

3.11 創造獨一無二的圖標

首先不要因為害怕沒有自己的獨特的風格就不去創造任何圖標了。掌握一個自己的風格是很難的一件事,需要上千個小時的練習。我認為在一個方面做到極致要好過在很多方面都平庸。如果你有一個自己的獨特風格,那麼喜歡你的風格的客戶就會直接來找你了。

而且有一個獨特和具有很強識別性的個人風格能夠成為你吸引狂熱粉絲的基礎。

那麼怎麼才能找到你的個人風格呢?

在我的概念中,最好的方式就是你每天都狂畫,但是不要去想那些什麼個人風格的問題。到最後你的個人風格自然會一點點慢慢匯聚起來的。

3.12 完成前的最後潤色

首先要說的是你不太可能在反覆修改前完成你的第一套圖標。在你完成所有的圖標後,就是你微調和修改他們的關鍵時刻了。這一步真的很重要,因為只有到了這個時候,你才能調整單個的圖標來時他們看起來更成套。你需要讓他們看起來很平均並且一樣漂亮。

有時候要發現所有的小問題是很難的。我喜歡把圖標列印下來。這樣能夠更輕鬆察覺到所有的不連貫的地方,微小的細節差別和所有要改正的地方。然後拿個鉛筆然後改就行了。反覆修改直到你感覺不到還有不對的地方。

但是一定要注意!

千萬不要因為完美主義而放棄完成你的一整套圖標!把你的圖標po出去,獲取建議,然後一步步提高。完成要比完美更棒。

相關焦點

  • ICON設計使用手冊:如何設計一個優秀的圖標?
    圖標設計,即icon設計,在界面設計中佔有很重要的位置,一個好的圖標,可以讓用戶「一秒即懂」,如何設計出優秀的圖標,這篇文章給你解答。在圖形交互界面(GUI)中,圖標(icon)是一種最常使用的設計元素之一。怎樣設計一個優秀的圖標呢?
  • 新手如何把ICON圖標設計做好
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 新手如何把ICON圖標設計做好?圖標設計,很多人都有自己的一套方法。這裡我跟大家分享一下自己的一些小經驗。
  • 如何點亮QQ旅遊圖標
    而對於喜歡旅遊的人來講,都想把這個圖標給點亮了。那麼這個圖標要如何才能點亮呢。現在,我來給大家講一下。點擊進入QQ,找到應用中心,然後搜索QQ旅遊進入,找到,並進入這個旅遊的頻道。點個中心,裡面會有一個點亮圖標的介紹,點擊進入。完成他們提出的要求,就可以達到點亮圖標了。點擊QQ微博,在搜索欄裡搜索QQ旅遊,進入其主界面後,點擊收聽對方。
  • 透水混凝土如何設計排水?
    透水混凝土如何設計排水?在做透水混凝土項目時很多人會諮詢海綿城市透水混凝土到底有什麼用?水往哪裡排?會不會造成地基下沉?透水混凝土都是要根據國家規定的行業要求來進行施工,路面的排水分表面排水和透水混凝土路面下的基層排水兩種方式。 透水混凝土路面表面排水的設計可參照《城市道路設計規範》CJJ37的有關規定。現在的網際網路各種信息很多,真假難辨!!
  • 「保姆級進階篇」多方位使用圖標包(前方多圖)手機美化
    新手篇學過之後,恭喜你現在已經步入小學階段下面帶大家進入下一個階段~這篇很長,想了解哪個部分,建議跳轉通篇要點:●如何手動替換單個軟體圖標●如何申請軟體圖標適配●如何手動修改文件夾樣式此篇以 【羞氣圖標包shy gas icons】 為例————————————————————1.很多第三方啟動器都會有,自主更換單獨軟體圖標的功能,如圖1(一般操作,長按想換圖標的軟體
  • 果凍LINE主題圖標設計
    2班一直以來都對圖標設計很感興趣,總想著有一天是否可以設計一套主題圖標來運用在自己的手機界面裡。來到火星後,經過圖標設計課程的學習,使我對圖標設計有了進一步的了解,這次是開放式的選題,我有很多的想法題材想去實現,最終選擇了自己最喜歡的卡通人物形象來進行本次主題圖標的設計製作。
  • UI設計中那些創意的圖標怎麼做
    有很多產品會用英文首字母或中文名稱中的第一個字來設計主圖標,當大家看到這樣的圖標時,立刻就能識別出這是哪個APP,如圖所示。字體直觀化的圖標圖標類型從表達形式上來講,圖標分為像素圖標、擬物化圖標、扁平化圖標、線性圖標和立體圖標。
  • 義大利陶瓷的運營模式,這篇文章講透了!
    可是我們中國能做到一點,就是把它做得更好、更特殊又更大,Why?義大利的陶瓷真的有那麼好嗎?我們下面來講一下為什麼?它好的地方在哪裡?我希望這次分享會以後,國內的陶瓷企業家甚至營運商大家都可以學習更多他們是如何把平臺做到這麼大。
  • 北京冬奧會圖標設計曝光,是江郎才盡還是經典傳承?
    有句講句,在初看到這組靜態圖標的時候,日站君還覺得整體上稍微有一些生硬,方塊和線條的組成顯得有點太粗放了。 結果看了動態,意外的居然感覺還不錯?整個畫面動感突出,瞬間香了起來!尤其是花樣滑冰的動作表現,肢體舒展動作優美,看起來還挺精彩的!
  • APP界面設計中如何建立更好的層次感?
    下面從五個角度分析如何在界面設計過程中營造層次感。文字的層級區分在界面設計中,文字部分的層級區分是決定一個界面是否具有層次感的重要因素。一般情況下,文字可以進行調整的屬性有字體、字號、色相、明度等。其中字號的大小是拉開文字層級的首要因素。
  • 做什麼事,聽什麼歌,這篇講透了
    許多研究探索了我們的大腦是如何受音樂影響的。人們一直在爭論這樣一個問題,「聽莫扎特的音樂會不會讓人變得更聰明?」一些人說可以,另外一些人又持有懷疑的態度。人們曾做過這樣一個實驗,一組大學生在聽過莫扎特音樂15分鐘後,聲稱他們在處理需要空間理解能力的任務時表現得更好。調查結果公布後,全世界的人一窩蜂地跑去買莫扎特的音樂唱片。
  • B端設計指南03——按鈕,究竟應該如何設計
    這篇文章主要是根據自身的工作經驗,結合當下對於按鈕設計的理解,去分析如何進行更合理的按鈕設計。 因為沒有了文字元素,會導致用戶在圖標的理解上出現偏差。為了解決這一問題,主要是通過用戶在Hover時使用展示Tooltip提示按鈕的含義,同時建議在圖標按鈕的使用上多為高頻且易理解的圖標。
  • Win10系統圖標如何更改?Se7en Theme Source Patcher來助你
    Se7en Theme Source Patcher是一款非常好用的軟體,它可以幫助你更換Win10系統的系統圖標,無論是什麼圖片,快速自定義更換,彰顯個性化。那麼要如何使用它進行圖標更換呢?下面小編就跟大家講講Se7en Theme Source Patcher的圖標更換方法。
  • 如何使用通用logo,美化網站圖標
    為了方便小夥伴們更好的完善自己的網站,松鼠君加了一個通宵班,製作了一批通用型的網站logo。後面會持續更新。▌通用logo是什麼每一個網站都會有自己的logo,但是鑑於logo的製作和尋找有時候也是挺麻煩的。
  • 金堂縣圖標設計怎麼樣_成都程睫文化傳播有限公司
    金堂縣圖標設計怎麼樣,成都程睫文化傳播有限公司,程睫文化深耕商業空間餐飲行業多年,主創團隊有全國數十個商業地產設計服務項目經驗,對各種類型的餐飲連鎖店、美食廣場、主題餐廳、主題美食街、白領食堂、主題餐飲商業街區有獨到和深入的了解。金堂縣圖標設計怎麼樣, 從政策和專業角度為客戶提供全方位智慧財產權服務。
  • PPT怎樣設計UI小圖標?學會可讓我們的設計煥然一新!
    在PPT中一個好的圖標設計可以讓演示效果更加直觀,一下點名主題的作用。學會設計一些小圖標可以給大家一種視覺舒適度,那麼具體在PPT上怎樣設計一些圖標呢?可以跟著小編一起學習一下的哦!第一步:首先我們要先準備一下素材,在瀏覽器中搜索一下「阿里巴巴矢量圖標庫」,然後下載一些原始的小圖標。以下是小編提前準備的一些圖標。第二步:我們插入一個比下載好圖標小一倍的圓形,然後設置一些比較亮一點的顏色。透明度調為30。
  • 北京冬奧會和冬帕運會體育圖標發布
    與北京奧運會會徽「中國印」遙相呼應  中央美術學院設計學院副院長、北京冬奧組委文化活動部形象景觀藝術總監、體育圖標設計團隊主創設計師林存真介紹,此次發布的體育圖標,和北京2008年奧運會會徽「中國印」的設計理念遙相呼應。兩者均為印章風格,都選擇了篆刻形式,既是北京這座「雙奧之城」留給世界獨特的文化印記,也體現了奧林匹克運動的文化傳承。
  • Win7系統如何隱藏任務欄應用圖標?任務欄圖標的隱藏方法
    使用win7系統的用戶都知道,在運行一些遊戲應用的時候,右下角任務欄會顯示圖標,熟知的人一看就知道你運行了什麼程序,為了不讓人看到就需要對其進行隱藏。那問題來了,怎麼隱藏任務欄內的圖標呢?下面小編就跟大家分享一些Win7系統如何隱藏任務欄應用圖標的方法。
  • 電腦右下角圖標怎麼隱藏,如何隱藏右下角的圖標
    電腦右下角圖標在默認情況下是在不活動的時候才會隱藏的,那麼當這些圖標所代表的程序在運行的時候我們怎麼隱藏它呢,比如說我們工作的時候登陸的私人QQ圖標,就會出現在電腦右下角,那麼我們這裡要如何隱藏右下角的圖標呢,下面我來說下關於電腦右下角圖標隱藏的詳細教程。
  • 實體店營銷如何更好的在裝修中體現?
    實體店營銷如何更好的在裝修中體現?最近開始走出去到實體店商家中做營銷觀察的學習工作,通過這種實地實打實的營銷觀察,讓我更加的學習到總結出實體店營銷如何更好的在裝修中體現?店面裝修是實體店營銷中的重要一環,門頭設計、動線設計、商品陳列……這些都是需要下功夫去做的,去想這些怎麼做才能吸引消費者到店?今天這篇文章不去重點去說具體到細節怎麼做,而是從實體店營銷在裝修大框架下的思維應該是什麼?