图标在生活中随处可见。相比文字来说,图标可以让人在更短的时间内认知并了解信息,并且大大提升信息的视觉美观性,增加设计的艺术感染力。在用户界面中使用图标,是一种用户熟知的设计模式。而线性图标是通过提炼图形轮廓,简单勾勒而成的图标。线条描边越粗,视觉层级越高,多在同一产品内且功能入口较多的情况下使用。「一起来动手设计一套线性图标吧 ~
详细相关线性图标等相关资料:即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。https://js.design/f/xSLLq_?p=bJ13hj1yow&y=hd&j=26&source=csdn&plan=yb6282&mode=design
播放:
新建画板(快捷键为:A)尺寸为:28PX ^ 28PX ,设置背景色 #FFFFFF ;绘制圆形(快捷键为:O)尺寸为:22PX ^ 22PX,取消填充;设置描边:颜色 #142743、居中、大小为 2;
选择左侧工具栏中的「三角形」,绘制尺寸为 10PX ^ 10PX的三角形,旋转90°;
双击三角形或者选中三角形按回车键,进入「编辑模式」,框选三个端点设置圆角度为1.5,再调整尺寸为 10PX ^ 8PX;⭐Tips:选中端点时可通过键盘上的方向键来改变形状的大小;
开关
复制画板,绘制圆形,同样取消填充;设置描边:颜色 #142743、居中、大小为 2;双击圆环并在上方添加两个锚点,选中顶部的锚点并删除;
设置圆环的描边属性为「圆头端点」;
绘制矩形,居中对齐圆环;⭐Tips:线性图标主要是通过元素“线“去延伸,基于线的粗细大小、端点类型、圆角、描边、颜色等基础属性塑造成型。在绘制中要保持线的粗细一致、圆角相同,视觉一致性;