上一章 启动图标的设计实例

多种粗细风格

UX百科编辑部2024-01-12 发布
770人在学·3条笔记
收藏

风格说明

多种粗细风格是基础线性的一种简单的变体,它通过调整线性图标内部一部分秒变的粗细来增加描边的层次感,从而让图标不会显得那么无聊。

设计要点

多粗细图标最关键的就是要挑选更改粗细的那条线,但每个图标的个体情况有差异,就无法一概而论,大致上可以有两种选择。

内部线段

在大多数基础线性图标中,都存在外部和内部两个部分的轮廓,这时候我们可以直接选择内部的独立线段改变粗细。

例如设置图标中间总是有一个圆形的独立结构,那么可以选择中间的圆形改变粗细;优惠券图标内部总是有一条虚线段来表示其虚接线,那么我们可以选择这条虚线变粗细;查看图标中间也总有一个圆形的独立结构代表眼球,那么可以选择它来改变粗细。

增加内部线段

而在一些本身只有一个结构的图标 (如爱心),或两个结构无法分出内外 (如搜索) 时,就得想办法强行再在内部加出一个结构来改变粗细。例如下图中的案例,在搜索中选择增加一条弧线段来改变粗细;在爱心中增加一条心电图线段来改变粗细。

不要在一条线中出现粗细变化

而在另一些图标中,我们或许无论如何也没法增加一条有意义的内部线条,这时候可能会想到从粗边上延伸出一条线段来改变粗细,比如云:

但这是错误的,我们不能在同一条线段上强行做出粗细的区分,这样做会导致一个问题,一定会出现一个奇点,这个点左右两侧的粗细不一致也无法对齐,观感非常不好。

在这种情况下依旧只能增加线段来改变其粗细,哪怕这条线段是没有任何意义的。

案例演示

改变粗细本身并不是什么很难的操作,在描边属性设置中直接修改数值便可,具体数值上可以选择粗边的一半或三分之二 (取约合后的整数),过细和过粗都不太适合。

这里只展示最终的结果,便不再赘述图标绘制的操作过程 (基础线性图标的操作过程可见 3.1 工具图标的设计实例 )。

770人在学·3条笔记
收藏
已学会
20人已学会
下一篇多色描边风格
风格说明 多色描边风格和多种粗细非常相似,后者是在图标中选择一段线段,做出秒变粗细的变化,而前者则是做出色彩的变化,而色彩的醒目程度永远比粗细更加明显,所以多色描边是更常用的线性图标变体。 设计要点 线段选择 与多种粗细风格图标相同的是,在大部分图标中我们仍然可以选择其内部的独立结构进行变色,或添加...
本章笔记
仅看自己
logo
用户名长的话就这样发布于 2024-08-16
而在一些本身只有一个结构的图标 (如爱心),或两个结构无法分出内外 (如搜索) 时,就得想办法强行再在内部加出一个结构来改变粗细。例如下图中的案例,在搜索中选择增加一条弧线段来改变粗细;在爱心中增加一条心电图线段来改变粗细。
改变粗细本身并不是什么很难的操作,在描边属性设置中直接修改数值便可,具体数值上可以选择粗边的一半或三分之二 (取约合后的整数),过细和过粗都不太适合。
回复
用户名长的话就这样发布于 2024-08-16
例如设置图标中间总是有一个圆形的独立结构,那么可以选择中间的圆形改变粗细;优惠券图标内部总是有一条虚线段来表示其虚接线,那么我们可以选择这条虚线变粗细;查看图标中间也总有一个圆形的独立结构代表眼球,那么可以选择它来改变粗细。
例如设置图标中间总是有一个圆形的独立结构,那么可以选择中间的圆形改变粗细;优惠券图标内部总是有一条虚线段来表示其虚接线,那么我们可以选择这条虚线变粗细;查看图标中间也总有一个圆形的独立结构代表眼球,那么可以选择它来改变粗细。
回复