超详细的图标风格总结-面性图标

44天前发布

原创文章 / UI / 教程
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

图标在UI设计中占了一席之地,不同风格的图标会影响页面整体效果,今天就来跟大家聊聊面性图标设计。

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


1.图标的作用

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


▲ 1.1含义识别

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

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

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


▲ 1.2视觉识别

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

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


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

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

 

2.面性图标常见样式


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


1、面性单色


2、面性多色

多色的处理方法有:

 2.1 渐变 

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

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

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

 2.2透明度变化 

 2.3层叠 

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


3、面性模糊


4、面性写实


下面是部分案例示意图:

1、面性单色

1.1 面性-单色-无彩色

undefined      


1.2. 面性-单色-彩色

       undefined      


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

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

undefined       

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

undefined       

1.5. 面性-单色渐变

       undefined      


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

       undefined      


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

       undefined      








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

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

       undefined      


2、面性多色     

2.1.面性-双色-层叠 

undefined

undefined      

 

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


undefined       

 

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

undefined       

       undefined      

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

       undefined      

3、面性模糊

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

       undefined      

4、面性写实 

undefined       

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


图片素材来源于网络和应用截图,仅用于学习交流

- END -

更多精彩  可以关注公众号

泡芙喵F设计教室

4
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息