此教程針對(duì)新手階段剛開始做APP界面的同學(xué)，如果你是資深老司機(jī)看到這篇小教程可以自動(dòng)忽略，當(dāng)然也可以來互撩

初次做APP的同學(xué)，繪制圖標(biāo)是占界面問題比重較大的一塊內(nèi)容，雖然網(wǎng)絡(luò)資源很多, 但仍舊做不好一套統(tǒng)一風(fēng)格及趣味性的界面功能圖標(biāo)，特此，來專門舉證說一下這個(gè)問題, 如何繪制風(fēng)格統(tǒng)一的APP界面圖標(biāo)？

在這里我們先從最主要的功能圖標(biāo)做起，也就是tabbar一級(jí)功能圖標(biāo)，相對(duì)來說這里的圖標(biāo)不需要過多裝飾，做出富有自己產(chǎn)品風(fēng)格的圖標(biāo)就可以，需要注意的是，一級(jí)功能的圖標(biāo)需要做兩套，即 默認(rèn)的 和 點(diǎn)擊之后 的，通常點(diǎn)擊之后的圖標(biāo)需要更突出一些，你可以用顏色來區(qū)分或者線條轉(zhuǎn)為塊狀來區(qū)分。

首頁 :?即APP界面中的第一個(gè)頁面，相當(dāng)于用戶即將進(jìn)入產(chǎn)品、了解產(chǎn)品、 從而使用產(chǎn)品，所以很多首頁都會(huì)以房子的外觀形式來表示，當(dāng)然你也可以結(jié)合你的產(chǎn)品內(nèi)容來變換首頁圖標(biāo)的展示形式。

分類 :即APP界面中的第二個(gè)頁面，僅次于首頁，意為該產(chǎn)品有多項(xiàng)選擇內(nèi)容可供用戶使用，查看分類，大概就會(huì)了解該產(chǎn)品主要內(nèi)容是什么了。

發(fā)現(xiàn) :?這個(gè)頁面多用于在主要產(chǎn)品展示后，用戶會(huì)有新的發(fā)現(xiàn)內(nèi)容，比如發(fā)表個(gè)人動(dòng)態(tài)，查看關(guān)于這個(gè)產(chǎn)品的話題精選之類。

我的：也可以名為“個(gè)人中心”，是所有APP都會(huì)具備的功能頁面，因?yàn)橛脩暨M(jìn)入新的產(chǎn)品都應(yīng)該有自己的賬戶，那么就需要用戶來管理自己的賬戶，所以通常會(huì)有人物頭像來做為圖標(biāo)造型。

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

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

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

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

尺寸調(diào)整

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

細(xì)節(jié)調(diào)整

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

確認(rèn)風(fēng)格定稿

首頁功能與我們一級(jí)功能圖標(biāo)操作一致，但是！！因?yàn)槭窃诮缑媸滓墓δ苋肟?#xff0c;我們需要花點(diǎn)心思來提升圖標(biāo)的設(shè)計(jì)感，以此豐富界面的展示效果。在這里我們還是以導(dǎo)圖里面的功能為例進(jìn)行操作

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

以上除了羊角螺線復(fù)雜一些之外，想必大家都能夠理解了，當(dāng)然復(fù)雜的東西我已經(jīng)為大家做好了，文章最后會(huì)長傳一份源文件供大家參考學(xué)習(xí)使用。最后定好風(fēng)格顏色后可以調(diào)整下細(xì)節(jié)做出自己滿意的效果就大功告成了。

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

圖標(biāo)顏色這塊也涉及到配色的知識(shí)，如果要詳細(xì)來說的話可能又要寫一篇了，哈哈，在這里我把自己配色圖標(biāo)的經(jīng)驗(yàn)簡單和大家分享下，我們還是以首頁功能圖標(biāo)為例。

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

當(dāng)你把第一個(gè)圖標(biāo)的顏色調(diào)整完成之后，復(fù)制出一個(gè)，在復(fù)制出來的圖標(biāo)里，只需調(diào)整色相就可以，飽和度或明度可以進(jìn)行微調(diào)，到這里你基本可以自己掌握了。

從調(diào)色板里可以看出，我調(diào)整過的這四個(gè)圖標(biāo)明顯的能看出色相的變化，但是明度和飽和度幾乎都是在一個(gè)區(qū)域的，并且大家會(huì)發(fā)現(xiàn)，我是按照一冷一暖的色調(diào)來搭配的。看到這里，你是否已經(jīng)明白了圖標(biāo)的配色技巧呢。

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

OK,那么本次分享就到這里，喜歡本篇小教程的同學(xué)請(qǐng)點(diǎn)個(gè)贊吧!

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。