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

　　圖標在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教育，包含有關在該領域工作的更多相關文章。