UI設計里的圖標是怎麼設計的？

今天又來跟大家分享一節非常實用的產品圖標設計的要點和知識點。可以把這些知識應用到我們日常的logo設計、圖標設計、圖形設計上都可以的。

那就是要學會解剖產品圖標結構。

對於一個給定的品牌，在這些圖標中，元素的一致性是形成一個共享視覺語言的關鍵。熟悉這些元素可以更容易地理解每個logo和它們之間細微差異的特徵。它也將幫助你學會識別logo設計的底層結構。

都會包含下面五個設計要點：

1、拋光

2、material背景

3、material前景

4、色彩

5、陰影

如下圖所示：直接從上方看，組件相互重疊。

第一步：構建視角

顯示圖標構造中各成分的立體分解圖。

根據上面那個五個識別logo設計結構的步驟我們來看下Material Design風格的圖標設計

1、拋光換句話說就是實現漸變特效

在所有元素之上，自左上到右下逐漸變淡，提供照明的柔和色彩。

2、看下Material Design的前景色和背景色：

上圖當中material背景色是最底層的藍色，而上面的白色為前景色。

中心圓圈的色彩為Material Design的斑點色：即增加到元素中一小部分的顏色。

3、色彩

色彩從當代建築、路標、人行橫道以及運動場館中獲取靈感，由此引發出大膽的顏色表達激活了色彩，與單調乏味的周邊環境形成鮮明的對比。強調大膽的陰影和高光。引出意想不到且充滿活力的顏色。

設計師一定要善用你的調色板。如下圖的色彩光暈效果。

4、圖標陰影設計

在一個上層元素周圍的加上柔和陰影效果。如上圖。

下面是Material產品圖標的設計欣賞：

其實上面這些優秀的Material Design Icons圖標設計，都是遵循以上Material產品圖標的五個設計要點。

希望各位APP設計師在設計安卓界面的時候，也是可以遵循這些設計規範來弄。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！