返回

从零开始学图标

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

多色描边风格

UX百科编辑部 编辑于 2024-01-1218人正在学
10

风格说明

多色描边风格和多种粗细非常相似,后者是在图标中选择一段线段,做出秒变粗细的变化,而前者则是做出色彩的变化,而色彩的醒目程度永远比粗细更加明显,所以多色描边是更常用的线性图标变体。

设计要点

线段选择

多种粗细风格图标相同的是,在大部分图标中我们仍然可以选择其内部的独立结构进行变色,或添加一条原本不存在的线段进行变色,这是通用的做法。

多种粗细风格图标不同的是,多色描边可以在同一条线段中呈现不同的色彩变化。但也并不是线段的任意一部分改变色彩都会好看,到底选择哪一部分更改色彩,仍需要大家不断尝试比较。例如:优惠券图标将虚接线左侧的部分变色这或许非常符合逻辑,是可行的;但如果将爱心图标中随意截取一段进行变色,则会略显草率。

色彩选择

多色描边风格图标中,色彩是比较重要的一个部分,因为引入了第二个色彩,所以如何取色也是一个需要说明的问题。大致有以下几种做法:

  • 主色:变色的部分可以取用主色,这是比较普遍的做法,在App中体现品牌色是非常有必要的。
  • 明度:两部分使用同色相但不同明度的色彩,也可以增加图形色彩的层次感。
  • 邻近色:如非必要其实很少会采用两个彩色,毕竟线性图标多用于功能性图标,没有很高的视觉需求;但如果非要采用两个彩色,那么邻近色会比较好的方案,例如:青蓝、红黄之类的经典邻近配色。

案例演示

与多种粗细图标一样,改变色彩本身并不是什么很难的操作,选择好需要变色的线段之后,在属性中修改成对应的色彩就可以完成了。

点赞
收藏
学会
5271018
下一篇: 描边缺口风格
风格说明 描边缺口风格,是在原有的线性图标基础上,刻意增加一个或两个缺口,让图形处于非闭合的状态,从而让图标的样式不那么呆板,更具个性。 设计要点 缺口的位置 对于外轮廓为矩形、圆形等规则图形的图标来说,因为这些图形的对称性,缺口位置的选择并没有什么讲究,只要别扣掉一个角,其他位置都可以。 对于大多...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞