APP主頁(yè)上常用的導(dǎo)航圖標(biāo)設(shè)計(jì)技巧
上個(gè)教程的尾部留了本次的預(yù)告，現(xiàn)在履行承諾發(fā)教程啦。大家每天畫(huà)那么多精美的圖標(biāo)，但真的用在APP界面上了嗎？ 這次分享幾個(gè)真能用的上的圖標(biāo)設(shè)計(jì)技巧給大家，也許下次的APP案例就能用的上哦(*^__^*)~
先來(lái)看看下面幾張圖：
看完后有沒(méi)有發(fā)現(xiàn)這些簡(jiǎn)單的圖標(biāo)，其實(shí)都隱藏著以下特別的技巧呢：比如第一張圖中的 內(nèi)缺角陰影圖標(biāo)按鈕 ，比如第二張圖中介于圓和圓角矩形中間的 橢圓矩形圖標(biāo)按鈕 ，又比如第三張圖中的通透命令的 扁平水晶圖標(biāo)按鈕 ，這些就是本次教程要分享的內(nèi)容了
下面開(kāi)始教程，這里先教大家三步完成 “內(nèi)缺角陰影圖標(biāo)按鈕” 的設(shè)計(jì)技巧，學(xué)會(huì)此技巧，從此變身一線大神~
第一步、這里拿上面的叉子圖標(biāo)做示范，先畫(huà)個(gè)120*120的圓，添加樣式漸變疊加，色值分別是上#ffc62d和下#ffb034，得到按鈕的底座
第二步、畫(huà)出按鈕中的刀叉，用鋼筆畫(huà)或者用矩形相交對(duì)切，能畫(huà)出來(lái)就行（當(dāng)然我知道你是不會(huì)畫(huà)的 o(∩_∩)o 哈哈，打開(kāi)這個(gè)網(wǎng)站搜索“刀叉”然后下載圖標(biāo)吧： http://www.iconfont.cn ，我珍藏多年的網(wǎng)站給掏出來(lái)了，下載后建議用鋼筆路徑照著描出來(lái)，養(yǎng)成制作矢量圖標(biāo)的好習(xí)慣，久而久之你就會(huì)發(fā)現(xiàn)自己也會(huì)畫(huà)圖標(biāo)了~）
第三步、用鋼筆路徑按我這樣隨意畫(huà)個(gè)大概的形狀出來(lái)，然后設(shè)置形狀填充為漸變，一邊透明度0%，一邊透明度10%，色值都為純黑#000000，然后縮小到合適大小后創(chuàng)建剪貼蒙版到刀叉圖標(biāo)上，噠啦~一個(gè)最最簡(jiǎn)單的內(nèi)缺角陰影圖標(biāo)就做出來(lái)啦！！
這種圖標(biāo)的好處是原版平凡普通的圖標(biāo)按鈕，加一點(diǎn)小改變就能立即變的與眾不同，讓APP頁(yè)面加分不少。依此類推，我們可以發(fā)揮創(chuàng)意按照?qǐng)D標(biāo)來(lái)畫(huà)出各種不規(guī)則形狀來(lái)剪貼上去，還可以給形狀添加色彩等變化，發(fā)揮你創(chuàng)造力給自己的APP頁(yè)面設(shè)計(jì)加分吧~~ （最后說(shuō)一句，內(nèi)缺角陰影是我起的名字，是今年才開(kāi)始流行的一個(gè)風(fēng)格哦~）
-------------------------------我是華麗的分割線--------------------------------
APP常用導(dǎo)航按鈕之： “橢圓矩形圖標(biāo)” ，下面開(kāi)始教大家怎么做下圖這種介于圓和圓角矩形中間的“橢圓矩”形圖標(biāo)按鈕，其實(shí)很簡(jiǎn)單，只需要兩步
第一步、找到形狀工具中的多邊形工具，然后按我下圖所示設(shè)置參數(shù)：邊4，并勾選平滑拐角，然后按住按住shift鍵畫(huà)出一個(gè)120px*120px的圓，看到?jīng)]有？這個(gè)圓跟我們平?？吹降恼龍A和矩形橢圓都不一樣吧o(∩_∩)o
第二布、放入我們上面提到的刀叉，在邊上再放個(gè)正常的圓，對(duì)比下哪個(gè)更好玩呢？ 這就是傳說(shuō)中的橢圓矩形，其實(shí)還有其他方法能夠畫(huà)出，但經(jīng)本人實(shí)驗(yàn)還是上述方法做出來(lái)的橢圓矩形更好看也最方便~
-------------------------------我是華麗的分割線--------------------------------
APP常用導(dǎo)航按鈕之： “扁平水晶圖標(biāo)按鈕” ，很簡(jiǎn)單吶，也是二步完成
第一步、老規(guī)矩先畫(huà)120*120的圖標(biāo)底座，我這里用的是橢圓矩形做底座。然后重點(diǎn)來(lái)了！只有特定的圖標(biāo)才適合制作這種圖標(biāo)按鈕，①是要求面性圖標(biāo)（不知道的可以百度下）②是圖標(biāo)可以拆分成兩塊，如下圖所示。（畫(huà)不出來(lái)的朋友依然老規(guī)矩，打開(kāi)網(wǎng)址搜索紅包，找個(gè)類似的下載即可 http://www.iconfont.cn ）
第二步、把拆分后較小的那一部分直接設(shè)置透明度60%，較大的那一部分設(shè)置形狀漸變，一邊透明度60%，一邊透明度100%，色值都為純白#FFFFFF（如果是下載的圖標(biāo)就把填充透明改成0%，然后添加漸變疊加樣式也行），噠啦~一個(gè)最最簡(jiǎn)單的扁平水晶圖標(biāo)就做出來(lái)啦?。?
這種圖標(biāo)的好處是操作簡(jiǎn)單，看起來(lái)精致美觀，通透像水晶一樣而且是扁平風(fēng)格，大家也可以發(fā)揮創(chuàng)意，添加我上期教程中說(shuō)的彌散陰影效果讓圖標(biāo)更精致： http://www.ui.cn/detail/87521.html，或者 像紅包圖標(biāo)一樣添加小斜杠等等效果，總之符合APP實(shí)際運(yùn)用即可
本文依然是帶大家入門，別整天畫(huà)亂七八糟沒(méi)用的圖標(biāo)（起碼我是覺(jué)得圖標(biāo)畫(huà)的好又不算啥，能完美運(yùn)營(yíng)到平常工作中才是真理）能用的上的才是好的，看完文章自己動(dòng)手試一試才能真的領(lǐng)悟到其中的奧妙哦，試著把你以前的設(shè)計(jì)稿中的圖表，改成以上的樣式，看看是否更精美呢。光看不做就變成看了那么多文章，為啥自己依然做不好的原因！
（文中圖片部份是網(wǎng)上找的，部份是我自己的，如果教程中善用了您的作品請(qǐng)聯(lián)系刪除( ^_^ )/~~）
聯(lián)系客服
