此教程針對新手階段剛開始做APP界面的同學(xué)筒占，如果你是資深老司機看到這篇小教程可以自動忽略，當(dāng)然也可以來互撩
初次做APP的同學(xué)，繪制圖標(biāo)是占界面問題比重較大的一塊內(nèi)容，雖然網(wǎng)絡(luò)資源很多, 但仍舊做不好一套統(tǒng)一風(fēng)格及趣味性的界面功能圖標(biāo)玻淑，特此，來專門舉證說一下這個問題, 如何繪制風(fēng)格統(tǒng)一的APP界面圖標(biāo)呀伙？
在這里我們先從最主要的功能圖標(biāo)做起补履，也就是tabbar一級功能圖標(biāo)，相對來說這里的圖標(biāo)不需要過多裝飾剿另，做出富有自己產(chǎn)品風(fēng)格的圖標(biāo)就可以箫锤，需要注意的是，一級功能的圖標(biāo)需要做兩套雨女，即 默認的 和 點擊之后 的谚攒，通常點擊之后的圖標(biāo)需要更突出一些，你可以用顏色來區(qū)分或者線條轉(zhuǎn)為塊狀來區(qū)分氛堕。
首頁 :?即APP界面中的第一個頁面五鲫，相當(dāng)于用戶即將進入產(chǎn)品、了解產(chǎn)品岔擂、 從而使用產(chǎn)品位喂，所以很多首頁都會以房子的外觀形式來表示，當(dāng)然你也可以結(jié)合你的產(chǎn)品內(nèi)容來變換首頁圖標(biāo)的展示形式乱灵。
分類 :即APP界面中的第二個頁面塑崖，僅次于首頁，意為該產(chǎn)品有多項選擇內(nèi)容可供用戶使用痛倚，查看分類规婆，大概就會了解該產(chǎn)品主要內(nèi)容是什么了。
發(fā)現(xiàn) :?這個頁面多用于在主要產(chǎn)品展示后蝉稳，用戶會有新的發(fā)現(xiàn)內(nèi)容抒蚜，比如發(fā)表個人動態(tài)，查看關(guān)于這個產(chǎn)品的話題精選之類耘戚。
我的：也可以名為“個人中心”嗡髓，是所有APP都會具備的功能頁面，因為用戶進入新的產(chǎn)品都應(yīng)該有自己的賬戶收津，那么就需要用戶來管理自己的賬戶饿这，所以通常會有人物頭像來做為圖標(biāo)造型。
當(dāng)我們把功能圖標(biāo)的寓意都理解清楚了撞秋，就可以繪制自己的初稿圖標(biāo)了长捧，這里我們通常用AI軟件的鋼筆工具繪制線性圖標(biāo)，為了更方便精準的控制圖標(biāo)大小吻贿，你可以建立網(wǎng)格線來作為繪制圖標(biāo)的基準串结，點擊菜單“編輯／首選項/參考線和網(wǎng)格” 為網(wǎng)格線設(shè)置一下參數(shù)，然后對齊網(wǎng)格。網(wǎng)格線間隔1px肌割，次分割線1卧蜓， 這樣設(shè)置過后，每個網(wǎng)格和間距都是1px声功。
在這里需要注意一下視覺重量烦却，以上的圖標(biāo)高度一致，線條粗細一致先巴，但是在視覺效果上總覺得大小不一其爵，我們來舉例說明下這個問題
我們可以看到上面的三個圖形在軟件里的物理尺寸寬和高都是相等的，但是我們觀察它們各自的負空間（紅色區(qū)域）并不一樣大伸蚯。從而我們得出結(jié)論：它們只是寬度和高度相同而面積卻不同摩渺，那么我們就需要加大三角形和圓形的面積，來讓視覺重量達到一致的效果剂邮。
三角形和圓形分別往外延伸摇幻，這個延伸多少合適呢，一般情況挥萌，以眼睛看到的視覺大小舒適自然就可以绰姻，當(dāng)然如果你要精算一下各自的面積也可以。那么我們知道這個原理之后引瀑，就可以著手來做我們的圖標(biāo)了狂芋。
尺寸調(diào)整
這里說明下，一級功能圖標(biāo)的線條最好略微粗一些憨栽，一般我會用3px帜矾，最少也不要低于2px， 一級功能嘛屑柔，自當(dāng)讓它看起來有些分量的屡萤。
細節(jié)調(diào)整
在調(diào)整階段，最好是復(fù)制出一份來做調(diào)整掸宛，你想換幾種樣式就復(fù)制幾份來做相應(yīng)調(diào)整铡溪，不要在初稿里直接做調(diào)整呀非，那樣如果你再次去換種樣式調(diào)整的話倒淫，可能就比較麻煩了洲敢，良心忠告！劈愚！
確認風(fēng)格定稿
首頁功能與我們一級功能圖標(biāo)操作一致由缆，但是６遣ぁ箫章！因為是在界面首要的功能入口终抽，我們需要花點心思來提升圖標(biāo)的設(shè)計感圃郊，以此豐富界面的展示效果鞭光。在這里我們還是以導(dǎo)圖里面的功能為例進行操作
最初的圖形繪制好之后佩伤，我們就開始來給它美化上妝了孤荣，比如給它調(diào)整構(gòu)圖然后換個不同背景钱豁，大家應(yīng)該都會想到加背景肯定就是圓形或者圓角了，圓形都能理解疯汁，但是圓角會有不同的表現(xiàn)方式牲尺，不同的圓角形式，效果也會不一樣幌蚊。
以上除了羊角螺線復(fù)雜一些之外谤碳，想必大家都能夠理解了，當(dāng)然復(fù)雜的東西我已經(jīng)為大家做好了霹肝，文章最后會長傳一份源文件供大家參考學(xué)習(xí)使用估蹄。最后定好風(fēng)格顏色后可以調(diào)整下細節(jié)做出自己滿意的效果就大功告成了。
怎么樣沫换，是不是很Q 很彈 很好吃的樣子啊:-), 哈哈臭蚁，當(dāng)然大家也可以根據(jù)自己的創(chuàng)意做出不同風(fēng)格的主題icon, 在這里我們只是演示最通用的方式。
圖標(biāo)顏色這塊也涉及到配色的知識讯赏，如果要詳細來說的話可能又要寫一篇了垮兑，哈哈，在這里我把自己配色圖標(biāo)的經(jīng)驗簡單和大家分享下漱挎，我們還是以首頁功能圖標(biāo)為例系枪。
首先不管你的功能圖標(biāo)有幾個，第一個圖標(biāo)始終是以主色來調(diào)和的磕谅，比如我的主色是藍色私爷，那么我的第一個圖標(biāo)就是一個弱漸變的藍色為主，這樣可以更貼合你的界面風(fēng)格膊夹。 需要注意的是：雖然我說明了第一個圖標(biāo)為界面主色衬浑，但這并不是固定的規(guī)則，并且也不需要一定按照你的主色色值來做放刨，你只需要保證色相一致工秩，飽和度和明度可以根據(jù)情況來調(diào)整。
當(dāng)你把第一個圖標(biāo)的顏色調(diào)整完成之后进统，復(fù)制出一個助币，在復(fù)制出來的圖標(biāo)里，只需調(diào)整色相就可以螟碎，飽和度或明度可以進行微調(diào)眉菱，到這里你基本可以自己掌握了。
從調(diào)色板里可以看出掉分，我調(diào)整過的這四個圖標(biāo)明顯的能看出色相的變化倍谜，但是明度和飽和度幾乎都是在一個區(qū)域的迈螟，并且大家會發(fā)現(xiàn)叉抡，我是按照一冷一暖的色調(diào)來搭配的尔崔。看到這里褥民，你是否已經(jīng)明白了圖標(biāo)的配色技巧呢季春。
定好單色調(diào)之后，弱漸變的調(diào)整就簡單多了消返，只需要在漸變一頭的滑塊顏色調(diào)的更亮一些就ok了载弄，漸變色最好是上面淺下面深，90度或者斜角度漸變都可以撵颊，加上投影讓它更有立體感哦宇攻。關(guān)于圖標(biāo)內(nèi)容的層次就不多說了，主要是不同透明度的改變倡勇。嗯逞刷，希望本次分享能夠幫到大家解決實際中的一些問題哦。
OK,那么本次分享就到這里妻熊，喜歡本篇小教程的同學(xué)請點個贊吧!
