此教程針對新手階段剛開始做APP界面的同學，如果你是資深老司機看到這篇小教程可以自動忽略，當然也可以來互撩

初次做APP的同學，繪制圖標是占界面問題比重較大的一塊內容，雖然網絡資源很多, 但仍舊做不好一套統一風格及趣味性的界面功能圖標，特此，來專門舉證說一下這個問題, 如何繪制風格統一的APP界面圖標？

在這里我們先從最主要的功能圖標做起，也就是tabbar一級功能圖標，相對來說這里的圖標不需要過多裝飾，做出富有自己產品風格的圖標就可以，需要注意的是，一級功能的圖標需要做兩套，即 默認的 和 點擊之后 的，通常點擊之后的圖標需要更突出一些，你可以用顏色來區分或者線條轉為塊狀來區分。

首頁 :?即APP界面中的第一個頁面，相當于用戶即將進入產品、了解產品、 從而使用產品，所以很多首頁都會以房子的外觀形式來表示，當然你也可以結合你的產品內容來變換首頁圖標的展示形式。

分類 :即APP界面中的第二個頁面，僅次于首頁，意為該產品有多項選擇內容可供用戶使用，查看分類，大概就會了解該產品主要內容是什么了。

發現 :?這個頁面多用于在主要產品展示后，用戶會有新的發現內容，比如發表個人動態，查看關于這個產品的話題精選之類。

我的：也可以名為“個人中心”，是所有APP都會具備的功能頁面，因為用戶進入新的產品都應該有自己的賬戶，那么就需要用戶來管理自己的賬戶，所以通常會有人物頭像來做為圖標造型。

當我們把功能圖標的寓意都理解清楚了，就可以繪制自己的初稿圖標了，這里我們通常用AI軟件的鋼筆工具繪制線性圖標，為了更方便精準的控制圖標大小，你可以建立網格線來作為繪制圖標的基準，點擊菜單“編輯／首選項/參考線和網格” 為網格線設置一下參數，然后對齊網格。網格線間隔1px，次分割線1， 這樣設置過后，每個網格和間距都是1px。

在這里需要注意一下視覺重量，以上的圖標高度一致，線條粗細一致，但是在視覺效果上總覺得大小不一，我們來舉例說明下這個問題

我們可以看到上面的三個圖形在軟件里的物理尺寸寬和高都是相等的，但是我們觀察它們各自的負空間(紅色區域)并不一樣大。從而我們得出結論：它們只是寬度和高度相同而面積卻不同，那么我們就需要加大三角形和圓形的面積，來讓視覺重量達到一致的效果。

三角形和圓形分別往外延伸，這個延伸多少合適呢，一般情況，以眼睛看到的視覺大小舒適自然就可以，當然如果你要精算一下各自的面積也可以。那么我們知道這個原理之后，就可以著手來做我們的圖標了。

尺寸調整

這里說明下，一級功能圖標的線條最好略微粗一些，一般我會用3px，最少也不要低于2px， 一級功能嘛，自當讓它看起來有些分量的。

細節調整

在調整階段，最好是復制出一份來做調整，你想換幾種樣式就復制幾份來做相應調整，不要在初稿里直接做調整，那樣如果你再次去換種樣式調整的話，可能就比較麻煩了，良心忠告！！

確認風格定稿

首頁功能與我們一級功能圖標操作一致，但是！！因為是在界面首要的功能入口，我們需要花點心思來提升圖標的設計感，以此豐富界面的展示效果。在這里我們還是以導圖里面的功能為例進行操作

最初的圖形繪制好之后，我們就開始來給它美化上妝了，比如給它調整構圖然后換個不同背景，大家應該都會想到加背景肯定就是圓形或者圓角了，圓形都能理解，但是圓角會有不同的表現方式，不同的圓角形式，效果也會不一樣。

以上除了羊角螺線復雜一些之外，想必大家都能夠理解了，當然復雜的東西我已經為大家做好了，文章最后會長傳一份源文件供大家參考學習使用。最后定好風格顏色后可以調整下細節做出自己滿意的效果就大功告成了。

怎么樣，是不是很Q 很彈 很好吃的樣子啊:-), 哈哈，當然大家也可以根據自己的創意做出不同風格的主題icon, 在這里我們只是演示最通用的方式。

圖標顏色這塊也涉及到配色的知識，如果要詳細來說的話可能又要寫一篇了，哈哈，在這里我把自己配色圖標的經驗簡單和大家分享下，我們還是以首頁功能圖標為例。

首先不管你的功能圖標有幾個，第一個圖標始終是以主色來調和的，比如我的主色是藍色，那么我的第一個圖標就是一個弱漸變的藍色為主，這樣可以更貼合你的界面風格。需要注意的是：雖然我說明了第一個圖標為界面主色，但這并不是固定的規則，并且也不需要一定按照你的主色色值來做，你只需要保證色相一致，飽和度和明度可以根據情況來調整。

當你把第一個圖標的顏色調整完成之后，復制出一個，在復制出來的圖標里，只需調整色相就可以，飽和度或明度可以進行微調，到這里你基本可以自己掌握了。

從調色板里可以看出，我調整過的這四個圖標明顯的能看出色相的變化，但是明度和飽和度幾乎都是在一個區域的，并且大家會發現，我是按照一冷一暖的色調來搭配的。看到這里，你是否已經明白了圖標的配色技巧呢。

定好單色調之后，弱漸變的調整就簡單多了，只需要在漸變一頭的滑塊顏色調的更亮一些就ok了，漸變色最好是上面淺下面深，90度或者斜角度漸變都可以，加上投影讓它更有立體感哦。關于圖標內容的層次就不多說了，主要是不同透明度的改變。嗯，希望本次分享能夠幫到大家解決實際中的一些問題哦。

OK,那么本次分享就到這里，喜歡本篇小教程的同學請點個贊吧!

總結

以上是生活随笔為你收集整理的app图标圆角角度_教你如何绘制风格统一的APP界面图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。