火星網(wǎng)校
【UI設(shè)計技巧】常見APP導(dǎo)航圖標設(shè)計教程
發(fā)布時間：2024-03-07 15:47:39 瀏覽量：164次
大家每天畫那么多精美的圖標，但真的用在APP界面上了嗎？ 這次分享幾個真能用的上的圖標設(shè)計技巧給大家，也許下次的設(shè)計APP就能用的上技巧哦(*^__^*)~
看完后有沒有發(fā)現(xiàn)這些簡單的圖標，其實都隱藏著以下特別的技巧呢：比如第一張圖中的內(nèi)缺角陰影圖標按鈕，比如第二張圖中介于圓和圓角矩形中間的橢圓矩形圖標按鈕，又比如第三張圖中的通透命令的扁平水晶圖標按鈕，這些就是本次教程要分享的內(nèi)容了
下面開始教程，這里先教大家三步完成“內(nèi)缺角陰影圖標按鈕”的設(shè)計技巧，學(xué)會此技巧，從此變身一線大神~
第一步、這里拿上面的叉子圖標做示范，先畫個120*120的圓，添加樣式漸變疊加，色值分別是上#ffc62d和下#ffb034，得到按鈕的底座
第二步、畫出按鈕中的刀叉，用鋼筆畫或者用矩形相交對切，能畫出來就行（當(dāng)然我知道你是不會畫的 o(∩_∩)o 哈哈，打開這個網(wǎng)站搜索“刀叉”然后下載圖標吧：http://www.iconfont.cn，我珍藏多年的網(wǎng)站給掏出來了，下載后建議用鋼筆路徑照著描出來，養(yǎng)成制作矢量圖標的好習(xí)慣，久而久之你就會發(fā)現(xiàn)自己也會畫圖標了~）
第三步、用鋼筆路徑按我這樣隨意畫個大概的形狀出來，然后設(shè)置形狀填充為漸變，一邊透明度0%，一邊透明度10%，色值都為純黑#000000，然后縮小到合適大小后創(chuàng)建剪貼蒙版到刀叉圖標上，噠啦~一個最最簡單的內(nèi)缺角陰影圖標就做出來啦??！
這種圖標的好處是原版平凡普通的圖標按鈕，加一點小改變就能立即變的與眾不同，讓APP頁面加分不少。依此類推，我們可以發(fā)揮創(chuàng)意按照圖標來畫出各種不規(guī)則形狀來剪貼上去，還可以給形狀添加色彩等變化，發(fā)揮你創(chuàng)造力給自己的APP頁面設(shè)計加分吧~~
-------我是華麗的分割線------
APP常用導(dǎo)航按鈕之：“橢圓矩形圖標”，下面開始教大家怎么做下圖這種介于圓和圓角矩形中間的“橢圓矩”形圖標按鈕，其實很簡單，只需要兩步
第一步、找到形狀工具中的多邊形工具，然后按我下圖所示設(shè)置參數(shù)：邊4，并勾選平滑拐角，然后按住按住shift鍵畫出一個120px*120px的圓，看到?jīng)]有？這個圓跟我們平常看到的正圓和矩形橢圓都不一樣吧o(∩_∩)o
第二布、放入我們上面提到的刀叉，在邊上再放個正常的圓，對比下哪個更好玩呢？ 這就是傳說中的橢圓矩形，其實還有其他方法能夠畫出，但經(jīng)本人實驗還是上述方法做出來的橢圓矩形更好看也最方便~
-------我是華麗的分割線------
APP常用導(dǎo)航按鈕之：“扁平水晶圖標按鈕”，很簡單吶，也是二步完成
第一步、老規(guī)矩先畫120*120的圖標底座，我這里用的是橢圓矩形做底座。然后重點來了！只有特定的圖標才適合制作這種圖標按鈕，①是要求面性圖標（不知道的可以百度下）②是圖標可以拆分成兩塊，如下圖所示。（畫不出來的朋友依然老規(guī)矩，打開網(wǎng)址搜索紅包，找個類似的下載即可 http://www.iconfont.cn）
第二步、把拆分后較小的那一部分直接設(shè)置透明度60%，較大的那一部分設(shè)置形狀漸變，一邊透明度60%，一邊透明度100%，色值都為純白#FFFFFF（如果是下載的圖標就把填充透明改成0%，然后添加漸變疊加樣式也行），噠啦~一個最最簡單的扁平水晶圖標就做出來啦?。?/p>
這種圖標的好處是操作簡單，看起來精致美觀，通透像水晶一樣而且是扁平風(fēng)格，大家也可以發(fā)揮創(chuàng)意，添加我上期教程中說的彌散陰影效果讓圖標更精致，或者像紅包圖標一樣添加小斜杠等等效果，總之符合APP實際運用即可
本文依然是帶大家入門，別整天畫亂七八糟沒用的圖標（起碼我是覺得圖標畫的好又不算啥，能完美運營到平常工作中才是真理）能用的上的才是好的，看完文章自己動手試一試才能真的領(lǐng)悟到其中的奧妙哦，試著把你以前的設(shè)計稿中的圖表，改成以上的樣式，看看是否更精美呢。光看不做就變成看了那么多文章，為啥自己依然做不好的原因?。ㄎ恼聢D片來源于網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系作者刪除）
想學(xué)習(xí)了解更多UI設(shè)計方面的知識和往期UI設(shè)計知識，可以點擊下面文章了解：
信息過剩的時代，設(shè)計師如何應(yīng)對困擾？
【課程介紹】UI設(shè)計全能實戰(zhàn)就業(yè)班
如何從模仿進階成為一名優(yōu)秀設(shè)計師！
2018年第4期UI設(shè)計畢業(yè)學(xué)員就業(yè)及作品集
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
