旗下產業(yè): A產業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI設計中面性圖標設計總結

UI設計中面性圖標設計總結

時間:2020-09-16來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-09-16點擊量:作者:Gella

  圖標在UI設計中占了一席之地,不同風格的圖標會影響頁面整體風格效果。主流的圖標可分為線性面性、線面結合3大類,之前跟大家分享過線性圖標今天AAA教育郭老師就來跟大家聊聊面性圖標設計總結
 

  1.圖標的作用
 

  事物的價值在于它的用途是什么,圖標的用途是幫助用戶理解信息,所以“識別性”是圖標重要的價值之一。識別性可以分為兩個方面,一是含義識別,二是視覺識別。
 

  1.1含義識別
 

  含義識別就是你的圖標能不能被用戶理解,在設計時要注意2個方面:
 

  1. 要符合大眾認知習慣,讓用戶不用思考就可以作出反應。
 

  2. 選擇真實世界中的物品為原型,使人下意識對圖標有預期認識,降低學習成本。
 

  1.2視覺識別
 

  視覺識別主要是視覺層面對用戶識別圖標的影響,主要包括圖標顏色和復雜度。
 

  比如一組精致的圖標縮小放在底部標簽欄時,會不會因為圖標內容過于密集而導致復雜呢?這種復雜就有可能造成圖標的視覺識別障礙。
 

  再比如面性圖標比線性圖標更被識別,如下圖面性的圖標是不是識別性更高一些呢。
 

  因為人眼要花更多時間來識別線性圖標,所以在實際應用中,一樣的圖標內容,線性圖標在裝飾性上效果更好。

 



 

  2.面性圖標常見樣式
 

  分析了市面上常見的圖標之后,這里總結出了以下幾種類型:
 

  1、面性單色
 

  2、面性多色
 

  多色的處理方法有:
 

  2.1 漸變
 

  漸變可以提升圖標質感,主要可分為弱漸變和強漸變
 

  弱漸變一般在同色系中變化,更有質感
 

  強漸變絢麗豐富大膽,常出現(xiàn)在一些運營活動或游戲界面
 

  2.2透明度變化
 

  2.3層疊
 

  通過顏色的深淺變化,使得形狀斜街處產生明暗變化,圖標更有有層次感。
 

  3、面性模糊
 

  4、面性寫實
 

  下面是部分案例示意圖:
 

  1、面性單色
 

  1.1 面性-單色-無彩色

 



 

  1.2. 面性-單色-彩色

 



 

  1.3. 面性-單色-透明度變化
 

  透明度的變化,讓原本單色的圖標設計細節(jié)更加豐富。

 



 

  1.4. 面性-單色-透明度層疊

 



 

  1.5. 面性-單色漸變

 



 

  1.6. 面性-單色-斜線漸變

 



 

  1.7. 面性-單色漸變-透明度變化

 



 

  1.8. 面性-單色漸變-層疊
 

  透明度變化,疊加之后產生交錯的負形,讓圖標增加了層次感和空間感,降低了厚重感。

 



 

  2、面性多色
 

  2.1.面性-雙色-層疊

 




 

  2.2. 面性-雙色-漸變-層疊

 



 

  2.3. 面性-底板漸變-透明度變化

 


  2.4. 面性-底板漸變-透明度漸變

 



 

 

  3、面性模糊
 

  高斯模糊的效果,使圖標富有層次感和空間感,也有較強的設計感。

 



 

  4、面性寫實

 



 

  還是那句話,對于設計,一定要長期積累,細心研究,總結分析,形成自己的方法論,這樣才能少走彎路。我也還在不斷研究的路上,希望大家互相學習進步,加油!
 

  好了,今天的分享就到這里了因此,您現(xiàn)在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關在該領域工作的更多相關文章。



 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖