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

图标设计注意事项

新闻来源:本站 日期:2021-07-19
图标存在的目的是起引导作用,在丰富页面视觉的同时,帮助用户更快的获取信息(当然图标的使用意义还有很多)。设计师在将文字翻译成图标前,必须先理解其文字含义。因为最终呈现的图标,需要用户一眼能准确反翻译其中含义(艺术抽象、装饰类图标除外)。
    1、简洁美观

    图标是否美观,会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中,通常会尽量减少不必要的细节,降低图标复杂度,来帮助用户快速识别。当然图标也有丰富细节的做法,常见在一些重要运营入口上。

    2、易于识别

    识别度的问题,在最前面明确语义中就有提到过,这里就不赘述。

    3、细节统一

    在细节中包含:表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等(不同风格图标的细节不同,这里只是列举部分),上述细节在系列图标中都应保持一致。

    4、像素对齐

    在图标绘制中,需尽量避免坐标位置xy或宽高参数出现小数点,以此保证最终导出的图标是清晰的。


UI设计


    5、视觉大小一致

    由于不同图标外轮廓不同,就会导致哪怕在物理大小上相同的图标(假设都是24×24),但视觉上可能还是会给人大小不一致的感受,因此我们需要借助前面提到的图标盒子进行约束调整。

    6、饱满透气

    图标的饱满透气,不一定需要加入很多笔画(描边、装饰等)细节。而是尽可能在形成风格的同时,简化能影响识别度的关键笔画,通过调节笔画大小、长短、位置使图标达到一个最平衡状态。

    以如下途牛_我的页面_功能区图标为例:

    图中标红图标就存在饱满度不足,及内部较拥挤的情况,第一感受是看起来不舒适,品质感比较低。除此外,还存在如下问题:

    图标大小很明显不一致

    设计语言不统一,有圆角有直角

    图标风格不一致,有透明度+分割形式(我的保单)、有纯透明度形式(专属顾问、我的收藏)、还有其余单色实心形式

    7、融入品牌基因

    在图标中融入品牌基因可以有效的提升产品品牌感,作为高阶设计师必备技能之一,常见提取维度:

    颜色

    设计语言

    Logo轮廓

    以我之前的豆果美食项目为例,提取到如下细节:

    颜色:提取黄色、绿色两类颜色

    曲率(设计语言):品牌Logo走线顺滑、自然、圆润,个性鲜明

    分离(设计语言):黄色区域与绿色区域虽不相交,但存在联系。(分离间留白)

    根据提取到的基因,最终得到如下两套风格不同,但语言相同且都具备品牌感的图标。

    Logo轮廓:在图标中融入品牌logo外轮廓(GooglePlay),或根据logo轮廓结合应用特性进行延展(Microsoft)。