圖標是設計中不可或缺的一部分，是引導各種操作的視覺提示，可以賦予產(chǎn)品獨特的身份。文章通過設計實操來幫助大家發(fā)現(xiàn)圖標設計的更多可能性。

01 谷歌Material Design原則

使用簡單的幾何形狀和大膽的顏色

扁平化的設計趨勢啟發(fā)了Material Design，它也是基于基本的扁平形狀，仔細選擇最能代表圖標所描繪的元素的形狀。

用細微的陰影增加深度

陰影是為設計賦予深度感的好方法，可以展示光線投射到物體上的效果。另外需要注意的是，模擬的自然光通常來自左上角。

使用顏色替換陰影

▲ 每種顏色通過多種色調(diào)的變化來模擬視覺深度。在上一版的Gmail圖標中，可以看到M的形狀使用了不同深淺的紅色，而信封下面使用了多種灰色陰影。

02 分步進行圖標設計實操

了解了基本原則，接下來就到了實操環(huán)節(jié)，通過下面這些圖標的實操演示一步步掌握這種簡潔易用的設計風格。

閃電圖標

▲ 通過在兩個形狀的相交處創(chuàng)建陰影，實現(xiàn)頂層形狀懸浮的效果；使用三種黃色陰影–頂層較淺、底層較深和最深的陰影。

聊天圖標

▲ 復制頂層聊天氣泡，并將副本向右下移動來作為顏色最深的陰影。

標記圖標

▲ 復制圖標，并刪除右上角多余的點；復制左側形狀，并移動到右側形狀的頂部；兩個形狀相交以創(chuàng)建陰影效果。

旗幟圖標

▲ 將圖形導角，提取標志底部的錨點繪制兩條相交的線來創(chuàng)建折疊效果。

心形圖標

▲ 復制心形圖標，隔離形狀的左半部分；從右上角向下畫一條對角線；將生成的形狀與心形重疊，然后向右移動以減去陰影形狀。

山峰圖標

▲ 創(chuàng)建兩個不同大小的三角形；將較小的圖形向右移動，并將得到的重疊部分作為陰影形狀；最亮的顏色保持在左側；最后運用圓角來調(diào)整圖形。

人物圖標

▲ 選擇并復制左側人物形狀的下半部分；將副本與右邊的形狀對齊；擇三個重疊的形狀，使用路徑查找器做出陰影形狀。

浮動圖標

▲ 把下方的形狀向上移動至中點；復制上面的菱形，并將副本向下移動10-20像素；選擇下面的兩個形狀，使用路徑查找器保留陰影形狀。

信封圖標

▲ 使用“直接選擇工具（A）”，選擇信封形狀的第二高的點；使用“鋼筆工具”在線段右側添加一個點；抬起上面的兩個點并向左右移動（如圖所示），將負空間看著像抽出來的信紙效果。

蛋糕圖標

03 最后：嘗試改變圖標的感覺

跟著過程一步步來設計，你也能做出效果很棒的圖標。最后幫大家整理了圖標實操詳細GIF教程，關注公眾號，后臺回復： 實操 即可獲取！

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網(wǎng)》出色的圖標是如何一步步設計出來的？來學學這些實操方法！

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務