返回

从零开始学图标

#设计知识
#知识库
77%
进度
0/8
知识点
0
笔记
概述
图标是什么
图标的基本介绍
图标的使用场景
图标的基本分类
图标设计的基础知识
矢量图和位图
布尔运算和钢笔
图标的设计工具
图标的设计规范
表意的准确
图标的一致性
图形的视觉差
图标的栅格
像素对齐
图标设计实例
工具图标的设计实例
操作总结和线面转换
装饰图标的设计实例
启动图标的设计实例
工具图标的进阶
进阶线性图标
多种粗细风格
多色描边风格
描边缺口风格
装饰图标的进阶
轻拟物风格
玻璃拟态风格
实物贴图风格
首页知识库设计知识从零开始学图标

多种粗细风格

UX百科编辑部 编辑于 2024-01-1220人正在学
20

风格说明

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

设计要点

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

内部线段

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

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

增加内部线段

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

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

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

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

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

案例演示

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

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

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