小紐扣

還記得上期帶來的線性圖標教程嗎–《有討厭自己畫不好圖標嗎?我有》,這期給大家帶來一篇升級版填充圖標的繪制技巧,配合上線性圖標,基本能繪制出APP中比較常見的icon圖標,希望這兩篇內容能對初級設計師朋友們有所幫助!

 

?填充圖標運用場景?

填充圖標也是在APP界面中較為常見的,一般作為很多功能分類,或者是功能入口,較為類似的有下面這些:

▲?從上面三張截圖可以看出,這類圖標大部分是以群體分布的,一般數量為8~10個,分排展示。雖然部分色系一致,但色值大部分都不一樣。

 

設計時3個小技巧?

個人總結的填充圖標繪制的3個小技巧:要符合預期、要造型簡約、要配色明快。

 

1.要符合預期

符合預期指圖標信息的傳遞性,也就是圖標的識別性。圖標的識別性在圖標設計當中永遠是第一位的。所以對于剛入行的設計師朋友,需要注意以下幾點:

▲?1、圖標形狀應與相應的功能相聯系,表達的含義一定要準確

 

▲ 2、圖標顏色應與相應的功能頁面色彩呼應

 

因此在圖標設計中,我們首先考慮的一點,就是如何使用圖形,來將這個圖形所表達的含義表達清楚,快速傳遞相應的信息。技法只是一種實現手段,不能因炫技法,而違背邏輯,忽略體驗。同時需要考慮圖標色彩情感,得和行業屬性相匹配,比如美妝一般粉紫色為主,就不應該用藍色。

 

2.要造型簡約

▲ 對于大腦識別信息的速度來說,簡單圖標會比復雜圖標識別速度更快一些。因此在填充圖標設計中,如果不是為了追求某種特殊的效果,我們可以把造型設計的更簡約一些,技能保證圖標的識別性,又能保證視覺美觀。

 

3.要配色明快

▲ 另外考慮到圖標會以群體分布,而且要突出重點功能,因此我們的顏色需要設計的相對明快。但是飽和度不宜過高,飽和度過高會顯得圖標不夠精致,不夠上檔次。另外就是圖標盡量不要超過5種色系,可以在色系上進行微調。

 

可以發現,將圖標飽和度調低后,圖標看起來會顯得高檔許多。在這里個人有個小技巧,就是在取色的時候,取以下圖中區間的色值是較為合適的。當然,這里還是需要多加以練習多以嘗試,直到圖標配色的感覺既能表現業務特征,又能顯得很高檔。

 

看看我怎么做的??

做一組練習,來鞏固這期學習的知識,還是使用AI工具來進行圖標繪制:

▲ 1、繪制好骨骼參考線,骨骼參考線很重要,能保證不同大小圖標的視覺重量一致性,關于骨骼線,iOS和谷歌材料設計有很詳細的文檔大家可以去看。

 

▲ 2、依次復制骨骼線,繪制好相應的形狀,繪制方法及原理同上一期(見文章底部鏈接)

 

▲ 3、根據圖標屬性填充相應的顏色,顏色飽和度不宜過高,但是也不能太灰,這里可以多次練習,多次調整,直至合適為止。

 

▲ 4、對圖標形狀細節進行調整,也可以通過不透明度來拉開圖標的層次感,這里的不透明度在50%~70%較為合適。

 

▲ 5、如果覺得顏色稍微有點灰,可以再最后階段再對色值進行相應的調整,最后再修飾一下一下細節,或者可以加個投影作為裝飾,最終得到圖標效果。

 

最后?

圖標的造型及配色感覺還是靠多練,多嘗試!成功路上沒有捷徑,靠的是不斷的努力,希望寫的這篇文章能對新手設計師朋友們有所幫助。

 

原文地址:我們的設計日記(公眾號)

作者:阿坤

 

轉載請注明:學UI網 » 有討厭自己畫不好圖標嗎?我有(下)

登錄收藏
 
你可能喜歡的:
深入了解彈窗應用【一】-B端設計深入了解彈窗應用【一】-B端設計
人人都喜歡極簡設計,怎么樣才算極簡?人人都喜歡極簡設計,怎么樣才算極簡?
電視端焦點移動規則電視端焦點移動規則
設計師必須掌握的6大視覺設計原理設計師必須掌握的6大視覺設計原理
電視端焦點樣式分析電視端焦點樣式分析
設計萬花筒丨如何利用十二種“碎片”來打造品牌:帶你了解感官品牌效應設計萬花筒丨如何利用十二種“碎片”來打造品牌:帶你了解感官品牌效應
原創 | IM聊天界面的設計規則原創 | IM聊天界面的設計規則
輕擬物設計解析&案例演示輕擬物設計解析&案例演示
《符號學》在設計領域的應用《符號學》在設計領域的應用
做設計有一道及格線,標準肯定是“它”做設計有一道及格線,標準肯定是“它”
?
网球比分雷速 快乐十分任五中四多钱 最近新股发行一览表 浙江体彩十一选五开奖号码走势图 《股市趋势技术分析 体彩20选5中奖规则 快乐十分技巧出号规律 怎么买平特一肖才能赢 幸运农场计划软件手机版 炒股票新手入门 湖北11选5一定牛