旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 热门文章 > UI设计 > UI设计中面性图标设计总结
UI设计中面性图标设计总结
时间:2020-09-16来源:www.aaa-cg.com.cn点击量:作者:Gella
时间:2020-09-16点击量:作者:Gella

  图标在UI设计中占了一席之地,不同风格的图标会影响页面整体风格效果。主流的图标可分为线性面性、线面结合3大类,之前跟大家分享过线性图标今天AAA教育郭老师就来跟大家聊聊面性图标设计总结
 

  1.图标的作用
 

  事物的价值在于它的用途是什么,图标的用途是帮助用户理解信息,所以“识别性”是图标重要的价值之一。识别性可以分为两个方面,一是含义识别,二是视觉识别。
 

  1.1含义识别
 

  含义识别就是你的图标能不能被用户理解,在设计时要注意2个方面:
 

  1. 要符合大众认知习惯,让用户不用思考就可以作出反应。
 

  2. 选择真实世界中的物品为原型,使人下意识对图标有预期认识,降低学习成本。
 

  1.2视觉识别
 

  视觉识别主要是视觉层面对用户识别图标的影响,主要包括图标颜色和复杂度。
 

  比如一组精致的图标缩小放在底部标签栏时,会不会因为图标内容过于密集而导致复杂呢?这种复杂就有可能造成图标的视觉识别障碍。
 

  再比如面性图标比线性图标更被识别,如下图面性的图标是不是识别性更高一些呢。
 

  因为人眼要花更多时间来识别线性图标,所以在实际应用中,一样的图标内容,线性图标在装饰性上效果更好。

 



 

  2.面性图标常见样式
 

  分析了市面上常见的图标之后,这里总结出了以下几种类型:
 

  1、面性单色
 

  2、面性多色
 

  多色的处理方法有:
 

  2.1 渐变
 

  渐变可以提升图标质感,主要可分为弱渐变和强渐变
 

  弱渐变一般在同色系中变化,更有质感
 

  强渐变绚丽丰富大胆,常出现在一些运营活动或游戏界面
 

  2.2透明度变化
 

  2.3层叠
 

  通过颜色的深浅变化,使得形状斜街处产生明暗变化,图标更有有层次感。
 

  3、面性模糊
 

  4、面性写实
 

  下面是部分案例示意图:
 

  1、面性单色
 

  1.1 面性-单色-无彩色

 



 

  1.2. 面性-单色-彩色

 



 

  1.3. 面性-单色-透明度变化
 

  透明度的变化,让原本单色的图标设计细节更加丰富。

 



 

  1.4. 面性-单色-透明度层叠

 



 

  1.5. 面性-单色渐变

 



 

  1.6. 面性-单色-斜线渐变

 



 

  1.7. 面性-单色渐变-透明度变化

 



 

  1.8. 面性-单色渐变-层叠
 

  透明度变化,叠加之后产生交错的负形,让图标增加了层次感和空间感,降低了厚重感。

 



 

  2、面性多色
 

  2.1.面性-双色-层叠

 




 

  2.2. 面性-双色-渐变-层叠

 



 

  2.3. 面性-底板渐变-透明度变化

 


  2.4. 面性-底板渐变-透明度渐变

 



 

 

  3、面性模糊
 

  高斯模糊的效果,使图标富有层次感和空间感,也有较强的设计感。

 



 

  4、面性写实

 



 

  还是那句话,对于设计,一定要长期积累,细心研究,总结分析,形成自己的方法论,这样才能少走弯路。我也还在不断研究的路上,希望大家互相学习进步,加油!
 

  好了,今天的分享就到这里了因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请访问AAA教育,包含有关在该领域工作的更多相关文章。



 

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

老师想和你聊一聊

©2007-2021/ www.aaa-cg.com.cn 北京漫动者教育科技有限公司 备案号: 京ICP备12034770号 监督电话:010-53672995 邮箱:bjaaa@aaaedu.cc

京公网安备 11010802035704号

网站地图