提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
图标是UI工作中很重要的一部分,记得我第一份工作的时候,领导让我画几种金刚区的图标备选,我画来画去只是在原有基础上稍稍改动,并没有系统的认识到这个图标的种类。所以才总结这篇文章,给小白避避雷,好,废话不多说,上茶艺~
首先,什么是图标?
图标具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。通俗讲就是为了信息好找好记!!!
图标有什么优点?
1.节省屏幕空间:有些内容两三个字表达不了意思,通过图标来简化文字信息。例如发新动态,只需要一个加号即可传达清楚;
2.不受地域语言限制:各个地区有各个地区的语言,但是一些图形就可以做到统一,比如拨打电话,放大镜搜索,分享,添加等等,我们看国外的一些软件时,虽然语言不通,但是并不影响我们对图标的理解和使用。
3.减少用户辨识时间:互联网经过这几年的快速发展,用户对于一些图标形成了一些约定俗成的认知。用户在使用产品时, 通过图标一眼便可分辨自己所需要的功能。
4.扩展点击区域:比如文字太小,配一个图标,点击区域更大,用户操作更方便;
5.提升视觉体验:也可以称作装饰,通过图标对页面进行润色,使页面看上去更加饱满。同时,通过图标增加页面的层次感,使页面各部分内容得以区分。下面为美团和饿了么图标对比,好的图标更能激发用户的点击欲。
图标的分类
众所周知,图标一般分为线性图标、面型图标、线面结合图标、拟物图标。不同类型的图标都有着独特的魅力,当然同一种类型的图标也具有很多不同的表现形式。
1.线性图标
线性图标就是用简单的线条勾勒出的图形形状,简洁、精致,适用于功能性图标,装饰性作用的图标。
a.图标的线条粗细不同,图标的力度和重量感也会有差异。
粗线的图标:粗壮、厚重,视觉上看更加突出。
细线的图标:精致、透气。
b.圆角半径大小,视觉上影响也很大
圆角越小:视觉上越硬朗和稳重
圆角越大:视觉上越柔美和活泼
c.线性类型拓展
2.面性图标
面性图标,即使用对内容区域进行色彩填充的图标样式。面性图标比线性图标更能表达出图标的力量感和重量感。同样,在这类图标中,也不是只能应用纯色的方式进行填充,还有非常多的视觉表现类型。
a.圆角大小,同线性图标一样,圆角影响视觉效果
圆角越小:视觉上越硬朗和稳重
圆角越大:视觉上越柔美和活泼
b.微渐变
微弱的渐变提升了图标的质感和色彩,使图标更具活力。
c.透明度变化
渐变的设计提升了面性图标的质感,从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化,使得图标具有了层次感。
d.玻璃效果
与其他相比都更具层次感和空间感,同时图标也具有较强的设计感。
3.线面结合
结合了线性和面性的优点,既保持了面性的重量感,同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。
a.线包含面
这个是线面结合视觉比重最轻的,一般面部结合品牌色进行设计,增加品牌辨识度。
b.线面错位
这个是视觉比重最重的,整体呈现出来的是一种交错叠加的视觉效果,相比普通的线面结合更加丰富。适用于金刚区图标,或者标签栏选中状态。
c.线面各半
线和面的结合按 50% 的比例进行设计,依据上下、左右、居中等基础方式的结构化设计,整体图标的视觉效果较为跳跃。
d.线面分离
这种组合对比更强烈,线面颜色上做差异化,趣味性更强。
3.拟物图标
拟物图标也叫微质感图标,细节的丰富度与现实感知接近。 这类图标目前多用在购物类、美食类、运营类设计,图标更细腻、立体、质感会比较强烈,使用户点击欲更强
总结:图标的种类远远不止文章介绍的这些,但是图标设计的原则就是,用户一眼看过去就知道它是做什么的,这就是一个好的图标。如果用户看到一个图标,停顿5秒还不知道这个图标代表什么,那么图标就失去了存在的意义。
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册