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

图标设计流程

新闻来源:本站 日期:2021-07-19
图标存在的目的是起到引导作用,在丰富页面视觉效果的同时,帮助用户更快地获取信息(当然图标还有很大的意义)。设计者必须了解文字的含义,然后才能翻译成图标。由于最终呈现图标,需要用户一眼就能准确地反译其中的含义(艺术抽象、装饰类图标除外)。

    1.清晰的语义。


    在C端设计中,以Tab为例,一些常见的文案:首页,分类,发现,我,这类语义还算比较清晰。但是在B端设计或工具类APP中可能会遇到一些复杂的语义。就我的工作而言,目前正在做一个网站搭建工具,后台经常需要设计组件和相应的图标,如:滑动商品、多图列表、上拉图片列表等语义较为复杂的图标,在一定程度上会比较难传达文案。


    2.关键字详细说明。

    这个步骤与情绪化版本使用有些相似,但不同的是:我们需要对确定的词(A)进行详细解释,然后把解释文案中的关键词语分离出来,得到一系列相关单词(A1,A2,A3…)。还有时间来找出那些与之相关的图片,然后看看这些相关的图片,有什么细节可以传达出我们最初认定的单词(A)的含义。


设计


    3.确定风格。

    借助于情感版,根据产品定位和目标用户描述,再结合应用场景,寻找符合产品气质、符合当前模块视觉层次的图标风格。

    之前我们已经了解到,目前常见的图标风格有三类:线性、面型、线型,其中还有许多细分,如线性中又分粗线(稳重、有力)、细线(质)、曲线(女性化),还有圆角、直角,每一种类型所传递的感觉都不一样。在创意前期,我们合理地对每一个点进行随机组合(如下图),从而创造出更新颖的风格。

    4.提取造型。

    在经过关键字细化散乱之后,实际上我们已经获得了非常精细的节点,接下来对这些细节点进行合理的融合,就可以得到相同语义但形式不同的基础图标样式(此时还只是构思阶段,可以通过手绘记录组合形式,不必特别精细)。

    5.输出创意。

    我们需要了解两个重要知识才能执行设计:

    图示设计说明

    图示设计要点。

    5.1图标设计说明。

    通用图标尺寸。

    使用图标盒。

    5.1.1通用图标尺寸。

    最常用的界面图标尺寸设计:12×12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)

    5.1.2使用图标盒。

    什么样的图标盒?它的作用是什么?

    “图标框”即图标约束网格,来自于设计。利用图标框,可以使我们创建的图标序列保持规范和统一。