020-29815005
预约专线时间:09:00-23:59

图标使用浅谈

新闻来源:本站 日期:2021-07-21
随着设计趋势的不断发展,近些年UI设计的风格愈发趋于简洁明确、突出细微质感以及凸显页面信息层级;而图标一直是UI设计中必不可少的一部分。那么,如何把控图标设计的风格,在什么场景该如何应用,是用线性还是面性,用单色还是双色,如何使用才是满足功能并且清晰明确的…
    1、首先,图标是什么。

    一般而言,图标是指具有明确指代意义的图形。作为一种直观语言,它以简单、显著、可识别的物象、图形、文字符号;除了表现、代替具体的事物外,还有表达意义、情感、指示等功能。这不仅仅是一种图形,更是一种符号,它具有高度浓缩和快速传递信息、易于记忆的特点。

    图表是一种最具有世界性的语言,无论您的母语是什么,无论您使用何种语言,都不会影响您解读图表所要表达的信息。

    从人类诞生之初,人类就开始使用图形表达思想、记录事件、与他人交流。

    图是文字诞生的基础,岩画、埃及象形文字至今已有数千年的历史,其中所表达的某些含义至今仍可读懂。

    2、图标传递信息很高效。

    调查显示,人类的平均注意力每年都在下降,从12秒到8秒(比金鱼还要短)。

    所以,信息传递的速度越来越重要。

    随着时间的推移,图形化的信息成为我们生活中最基本的信息资源。对冗余信息进行降噪和净化,使人一瞥便可精确获得复杂信息,无论是一眼找到自己需要的APP,还是在一个陌生城市准确搜索地铁的位置,或者是在大型商场里找到洗手间的位置等,为人类节省了大量的时间。

    3、【高识别度】【高度浓缩】【便于记忆】

    【高识别】一眼就认出你,胜过一切。

    在室外场景中,图标是信息传送者与受众进行沟通的方式,当信息以实物形式转化为符号,在人与人之间发生符号化的传递时,这种信息就成为标识。因为文字和眼睛之间的距离,图标通常比文字更具有快速的引导意义。

    [高浓缩]

    文字往往是信息内容的理性表达,而图形是图像的图像。并且在二维平面上,图形表示复杂意义的面积要小于文字。因此,图标符号在视觉形式上必须表现为高度概括的简单图形,采用在实际应用中起到导向方位、确定位置、确立次序、提示安全等作用,所以图形元素的构成是规范而不是随意。

    对于UI设计,由于手机屏幕的限制,我们必须在32*32,48,48,60*60的像素范围内精确地完成图标图标,并且图标表示的意义更加抽象,指代实物变成指代意义与指令,我们需要对图形进行精确描述。

    使用更精确的网格系统,更精确的比例倍数等等。

    [方便记忆]

    与视觉信息处理相关的大脑区域占主导地位,而人脑对图像的记忆则比语言记忆要多得多。

    并且图标多采用几何图形,并以“对称”“一致”的设计目标来设计,因其高度浓缩的特性,图标更具简洁性,更容易记忆。

    在我们平时的UI设计工作中,按照功能分区划分图标可以分为这三类:

    图解图示(解释说明)、互动图标(操作说明)、装饰图示(图示)。

    解说图示功能的解释说明。

    图解图示主要用于阐述和解释说明特定功能或内容,这些图标不一定是可直接操作的UI元素,有时只是作为静态页面对文字的辅助说明;它们还经常配有辅助解释的文案,以增强网页设计的可识别性,是网页设计中应用最为广泛的图标使用手法。

    用户常常借助图标来获得信息,而非文字与文字搭配。

    交互图标影响用户行为。

    这样的图标不只是用户界面的展示功能,还将参与到用户交互中,是不可缺少的组成部分。他们可以点击并随之而来,最典型的就是转发操作;它可以帮助用户执行特定的动作,并触发相应的功能。


设计


    装饰图标的美学诉求。

    此图标通常用于提高整个界面的美感和视觉体验,不一定具有明显的功能性。但是他们同样重要。这种图标在设计风格上迎合了目标受众的喜好和期望,具有风格化的独特外观,提高了整个设计的可信度和友好度。

    更进一步,这些装饰图标不仅能吸引和保留用户,还能使用户体验更积极。

    图形设计风格。

    图标也随着设计风格的演变而产生了许多不同的风格变化,其中最常见的就是:

    面状图标-性质:稳定、安全,强调分量,体块较重;通常用于层次分割,区分信息的重要性;在使用时,需要仔细考虑信息层次与文字搭配时的体块比例。

    线形图标——特性:轻巧、一致、精致、体形较轻;常用于整体观感简洁、简洁的网页设计;但过大面积的使用容易使页面产生过于轻浮的感觉。

    直线+面——在线性图标的基础上填色或局部填色,使图标更加个性化,可扩展且灵活,相较于单纯线性或简单面性icon更具特色,更年轻化;通常用于需要强调的入口,相对于纯线性或面状场景而言更为复杂,不适合小体量场景。

    平面+平面——利用颜色和其它视觉元素所呈现的稍微复杂的图形,与线+面的形式相似,与美学气质和设计风格的选择有很强的关联,设计师可以在其中更灵活地运用色彩;相对于功能图标更适合装饰图标。

    2.5D图标——也是运用色彩构建的图标,整体上比平面图标有更多的立体感,使对于物象的表达更清晰不趋同;同样也更倾向于装饰图标。

    拟物——从手机界面开始兴起的风格,超级细致地模仿真实事物的元素,用来复制用户最初在界面设计中所进行的教育——模拟更加真实的实际场景。如今更多用于更个性化和细节的展示,目前仍然广泛应用于游戏场景。

    理解了图标的功能分类和图标的设计风格后,我们来看看图标的使用场景。