二维码 购物车
部落窝在线教育欢迎您!

超全面的图标基础知识总结,原来图标用法也有大讲究!(上篇)

 

作者:陈臣来源:部落窝教育发布时间:2019-10-24 18:21:00点击:6099

分享到:
0
收藏    收藏人气:0人
版权说明: 原创作品,禁止转载。

编按:

   图标类型千变万化,什么场景该用什么类型的图标?又该如何把控图标的风格?这些你都了解吗?本篇文章将为你详细介绍图标类型及特点以及适用场景,快快收下这份图标入门指南。


作为设计师来说,图标往往是从入门开始就会接触的基础内容,不论是产品的一个logo,还是产品内部界面的标签栏,处处都能用到它们。我将以往所学有关图标的碎片化知识及经验进行如下的复盘总结,融合为一个较为完善的知识体系,并分为上篇和下篇两个部分进行讲解,希望对新手朋友们有所帮助。

 

一 、图标是什么

广义上来说,图标指的是有指代意义的一系列图形。人们早在远古时期,就有了用图标来表达信息、传递信息的习惯,岩画、符号、象形文等等都属于图标,并且几千年后的我们依然可以知晓它们的一些含义。


图标在我们日常生活中也随处可见,比如地铁站中的指向箭头、卫生间标识,道路上的人行横道标识等等,这些都属于图标。由于人脑对于图形的辨识能力和记忆能力远远高于文字,因此用图标代替冗长的文字信息可以快速提升信息的获取速度,并便于记忆。


 

二 、图标的分类

在当前UI设计工作中,按照功能一般可将图标分为以下三大类:

1. 解释性图标

这类图标往往是产品中最普遍最常用的图标,主要起到解释特定文字信息、业务和工具的作用,让用户直接通过图标快速获取信息。比如QQ音乐中“我的音乐”菜单部分,以及支付宝“财富管理”模块中的业务入口,都配上了有具体指代意义的图标,而不仅仅是单纯的文字。


 

2. 功能性图标

这类图标一般出现在需要用户进行交互的场景,通过单击等手势的触发,完成一个交互动作来达到用户的目的和心理期望,往往出现在特定的产品功能当中,比如QQ音乐的“播放”“音量调节”等图标,知乎的“赞同”“反对”“评论”等图标,都可以被点击并随之响应,触发一个具体的功能。


 

3. 装饰性图标

这类图标往往是设计师们最容易忽略的一类图标,虽然从产品的基本功能上来说它们可有可无,但是增添这些细节可以从情感上巧妙地提升用户体验,而且可以打造自己独一无二的品牌特性,吸引用户,提升用户的留存率。


比如淘宝的网络异常界面用了渐变图标降低用户的挫败感,滴答清单打卡数据为0时会有个扁平图标鼓励用户打卡。如果仅仅用单纯的文字表示这些空状态界面,用户只会觉得沉闷无聊,因此设计师所要做的就是用合理的装饰性图标来调动用户的情绪,提升他们执行行为的可能性。


 

三、 图标的设计风格及应用场景

图标从表现手法上来说可以大致分为以下四种风格:

1.  线性图标

线性图标具备轻量化、精致的特点,往往适用于底部标签栏的未选中态、导航栏、金刚区的功能型入口等。

如支付宝的金刚区,由于偏向工具型,为突出其安全可靠的调性使用了克制、简洁的线性图标。


 

 

2.  面性图标

面性图标饱满,更吸引用户眼球,具备很高的辨识度,一般用于分割层次,以及区分信息的重要程度,往往适用于底部标签栏的选中态和未选中态、金刚区的业务导流入口等。


如美团的金刚区,偏业务需求,较强的视觉冲击力可以诱导用户快速点击,因此统一使用了更吸引用户注意力的面性图标。

 

 

另外,面性图标相比线性图标具有更高的辨识度,因此目前更多的产品将标签栏的未选中态也改为了面性图标,这样一来大大增加了未选中图标的存在感,提升了二级页面的点击率。如ios12的所有原生App底部标签栏未选中态都由ios11的线性更新为了面性。发生同样变化的还有最新版的简书App

 

 

3.  线面图标

线面图标是在线性图标的基础上加入颜色的填充,具备个性化、有趣的特点,往往适用于特定风格产品的底部标签栏选中态和金刚区的业务导流入口等,但由于其较多的视觉层级导致其不适用于面积较小的图标。

 

4.  拟物图标

在移动智能设备刚刚进入人们的视野时,需要用映射的方式,将人们对现实物体的操作和逻辑带入屏幕当中,因此才诞生了拟物的设计风格,减少人们的学习成本,快速熟悉上手。但是当人们早已熟知它们的逻辑后,拟物显得过时低效,增加了用户的辨识成本。因此这个阶段需要更高效的使用,由拟物过渡到扁平后,大幅减少了视觉噪声,用户的使用效率也得以提高。

目前的拟物图标多用于个性化风格的展示,或者游戏UI中。

 

有关图标的定义、分类、设计风格及应用场景就先讲到这里~下篇我会着重讲解图标的标准化绘制方法以及相关的绘制技巧和注意事项。

 

 

本文配套的练习素材请加QQ群:465481414下载

PS高手,快速提升工作效率,部落窝教育《 Photoshop全面精通班视频和《 AI平面与电商设计从零到精通直播课全心为你!

扫下方二维码关注公众号,随时随地学习PS

 

相关推荐:

AI教程,轻松绘制Yoga风日落图标

利用AI打造鹿形针织效果图标

小白必看!一分钟玩转描边图标