'“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”'

"


"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可記憶性

品牌的認知度高低和可記憶性有著緊密的關聯,這也是為什麼優秀的 LOGO設計,還需要搭配持續的營銷和推廣的積累。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可記憶性

品牌的認知度高低和可記憶性有著緊密的關聯,這也是為什麼優秀的 LOGO設計,還需要搭配持續的營銷和推廣的積累。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

普適性

設計師需要站在更高、更加普世的角度上,來找到能被更多人所能感知和共鳴的元素來進行設計。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可記憶性

品牌的認知度高低和可記憶性有著緊密的關聯,這也是為什麼優秀的 LOGO設計,還需要搭配持續的營銷和推廣的積累。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

普適性

設計師需要站在更高、更加普世的角度上,來找到能被更多人所能感知和共鳴的元素來進行設計。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

經典不過時

LOGO 的設計能夠不受時代審美的侷限,擁有著持久的生命力,隨著時間的推移能夠逐漸凸顯出獨特的品牌價值。

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可記憶性

品牌的認知度高低和可記憶性有著緊密的關聯,這也是為什麼優秀的 LOGO設計,還需要搭配持續的營銷和推廣的積累。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

普適性

設計師需要站在更高、更加普世的角度上,來找到能被更多人所能感知和共鳴的元素來進行設計。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

經典不過時

LOGO 的設計能夠不受時代審美的侷限,擁有著持久的生命力,隨著時間的推移能夠逐漸凸顯出獨特的品牌價值。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


今天就分享到這裡啦~~

如果有任何關於設計的問題

都可以添加Q群和大家一起討論喲!

QQ群:748077013

站長:小夥伴們可以關注一下偶滴抖音,我會定期給大家用詼諧幽默有意思的視頻來教大家更好的認識設計,打開抖音掃描下方二維碼或者直接搜索抖音號就可以看到我啦~筆芯

"


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


來源:優設

所有偉大的圖標都是一樣的偉大,所有失敗的圖標都玩著不一樣的戲碼。

和絕大多數優秀的設計一樣,最優秀最偉大的圖標大多是……隱形的。

最為我們熟知的搜索圖標,可以說是極為完美的,它簡單,可識別度強,每個人都知道它代表著什麼。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

圖標如果設計失誤,我們一定是會注意到的。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

很難想象,這種素質的圖標居然來自於一家著名的企業。

好圖標的設計原則

那麼,到底是什麼東西成就了一個優秀的圖標呢?

簡單點總結一下設計好圖標的原則:

  • 保持簡約
  • 單個圖標要貼合語境(所處的APP和網站),而圖標之間又彼此不同

真正要做到這一點,並不簡單。對於設計師而言,有大量的誘惑,促使著他們讓圖標設計變得複雜,混亂,甚至無法識別。接下來我所提到的6個誘惑,是讓設計師毀掉圖標的主要原因。

誘惑1:想用圖標表現全部的功能

回想一下,當我們想打印一份文檔的時候,會通過軟件中的打印功能來達成目標,通常會點擊一下文檔打印的圖標。這個時候,你通常還會碰到一個問題,打印機設置、查找打印機、添加打印機的圖標也是差不多的,甚至完全一樣的打印機圖標。這個案例被記錄在經典的 UI交互設計書《About Face 3》當中,直到今天,這個案例依然經典得讓你無法忘懷。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

也許你覺得這個問題是可以被解釋清楚的,可是不論怎麼覆盤,如何推導,還是很難解釋清楚。即使是最簡單的功能圖標,當你看到它的時候,也常常無法準確地解釋清楚它的真實功能。

就像 Office 的菜單當中,這一堆信封圖標,就無法準確清晰地表明它們的功能(如果不看旁邊的文本標籤的話)。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

事實上,就是解釋不清,沒有必要在設計的時候強求一定要使用一個圖標闡述清楚一個複雜的功能。

誘惑2:在圖標中保留3個甚至更多的視覺對象

在圖標中包含2個以上視覺對象本就是一件非常麻煩的事情。當然,即使是16×16 px的小圖標,包含2個簡單的對象也是可以的,但是,「可以」僅僅是一種針對承載能力的表述,並不是說這樣做就一定好,事實上,減少對象的數量可以增加圖標本身的可讀性和識別度。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

作為設計師,適當取捨,嘗試使用圖標來闡述一方面的功能。比如「網絡管理員」的圖標,可以使用一個帶著眼鏡的男性角色來代表,這個形象比較符合大眾對於這一角色的固有認知,就不要再在圖標上加上扳手或者電腦這樣的元素了。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

而這個安裝包圖標就是一個包含對象過多的典型。我們已經清楚的知道軟件是需要安裝到計算上的,所以沒必要弄這麼複雜。而考慮到軟件安裝包圖標的整個發展歷史和 CD光盤之間的緊密關聯,所以這個圖標的設計可以抽象為一個放在 CD盒上的 CD 也足夠清晰了。

誘惑3:對於細節刻畫過於具體

圖標本質上只是傳達信息,作為符號代表,和翻譯一樣是需要講究「信、雅、達」,而不是「抄現實」的繪畫:

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這個圖標的設計確實是很有風格,也足夠有調性,貌似也表達了什麼,但是大概的含義也並不清晰,功能性也不具備,作為個人表達還行,但是在商業產品中實際上是並不具備可用性的。

誘惑4:融入過多的品牌元素

作為設計師,如果你想使用品牌化的設計來取悅甲方或者老闆,這是無可厚非的。這個時候,你可能會使用品牌色將產品中的圖標統一起來,讓它們看看起來是一致的。千萬別這樣做!

將品牌配色和元素融入到圖標的設計當中,尤其是系統化地「格式化」圖標的時候,99%的可能會造成圖標可讀性降低。圖標的設計和使用,儘量還是遵循平臺(iOS、Andrlid、Material Design 或者 Windows)的設計規範來做。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面的這組圖標是按照營銷部門的要求和感覺來做的,你覺得這都是些啥?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

上面是另外一個反面案例,實際上看完也根本不清楚這些圖標代表什麼含義。這難道是某種遊戲?

誘惑5:在圖標上使用文字來闡述功能

不要在圖標上使用文本來闡述它的功能了,和圖標搭配在一起的文本標籤就能實現這個功能,圖標更多的是用來做視覺化表達的。否則,兩者功能就重疊了,意義何在呢?

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

看著圖標上的縮寫來猜測它的功能,還不如看旁邊的文本標籤,後者表述更加清晰,可讀性也更強。圖標本身的圖形化的信息,本質上能夠讓用戶通過圖形更快地判斷圖標背後所代表的功能、領域和屬性。

事實上,圖標+文本的搭配在很多情況下是必須的,作為設計師沒有必要在這個事情上糾結,也沒有必要非將繁複的文本信息融入到圖標當中。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

這些貨幣圖標就比較合理,使用國家和地區的特徵色彩和圖形加上貨幣符號來代表當地的金融單位,而沒有直接使用 EUR、CAD 和 HKG 這些縮寫文本來進行傳達。

誘惑6:增加面部細節

在設計帶有人物形象的圖標的時候,儘量不要讓面部包含太多的細節元素,因為這會分散用戶的注意力。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ iOS 中的帶有面孔的圖標

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

△ Office 中帶有面孔的圖標

為什麼這麼說呢?看看下面 Bidstrup 的經典漫畫中,面孔能夠傳達多少情緒吧。在很多情況下,圖標是功能性的,但是人類先天會對面部細節極為敏感,不自覺地就會被面孔和表情所吸引。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

總而言之,圖標是功能性的產物,它不是藝術品,它存在的目的是為用戶服務,清晰簡約是它應有的屬性。

One more thing

圖標和 LOGO 的設計常常被並舉,但是兩者在功能和定位上,存在著不小的區別。圖標本身是功能性優先的,而 LOGO 則在很多時候承載著品牌傳達和形象構建的工作,兩者目標上的差異使得實際的設計需求和規則有著不小的區別。

其實設計師在圖標設計中所面對的誘惑,也間接反映了圖標設計所需要遵循的原則。所以,在今天的文章結尾,我也附上 LOGO設計大師保羅·蘭德的 LOGO設計7原則,來供你參考和對比。

簡潔性

簡潔的設計並非現代才有。簡潔的設計才更加容易被記住,更加容易被理解,也更加易於被應用。在信息過載的現代設計,簡潔的設計也更貼合大家的深層偏好。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

獨特性

獨特性反映的是品牌的氣質,獨特性讓品牌形象更加突出,在市場競爭中更容易脫穎而出。而這也是 LOGO設計當中最考驗人的部分,而圖標設計上,則不會對獨特性有苛刻的要求。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可視性

LOGO 的設計在視覺傳達的時候要具備有辨識度,在複雜的環境下,能夠抓人眼球,讓人立刻注意到,這一點同樣很重要。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

適應性

品牌LOGO 的適用範圍是很廣,儘量使用簡約直觀的幾何圖形,具有凝聚力的配色和更加純粹的元素,才能確保 LOGO 在不同的環境下都能使用。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

可記憶性

品牌的認知度高低和可記憶性有著緊密的關聯,這也是為什麼優秀的 LOGO設計,還需要搭配持續的營銷和推廣的積累。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

普適性

設計師需要站在更高、更加普世的角度上,來找到能被更多人所能感知和共鳴的元素來進行設計。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

經典不過時

LOGO 的設計能夠不受時代審美的侷限,擁有著持久的生命力,隨著時間的推移能夠逐漸凸顯出獨特的品牌價值。

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”


今天就分享到這裡啦~~

如果有任何關於設計的問題

都可以添加Q群和大家一起討論喲!

QQ群:748077013

站長:小夥伴們可以關注一下偶滴抖音,我會定期給大家用詼諧幽默有意思的視頻來教大家更好的認識設計,打開抖音掃描下方二維碼或者直接搜索抖音號就可以看到我啦~筆芯

“偉大的圖標都一樣偉大,失敗的圖標都玩著不一樣的戲碼”

"

相關推薦

推薦中...