层级思维解构图标分类体系

2024-5-21    ui设计分享达人

前言
近年来,Ul设计行业蓬勃发展,图标设计风格更是呈现出多元化的特点,各种新颖、创意的设计风格层出不穷。图标样式早已从潺潺溪水变成汪洋大海,通过系统归纳和整理各类常用的面性图标设计类型与风格,我们构建了一套体系化的记忆框架,使得在日常工作中能够迅速且准确地作出图标样式的决策,从而有效提升设计效率与质量。本文章主要讨论近年UI界面中会经常使用的图标风格,线性图标样式组成一般过于简单,在此不做讨论。
 
本文在探讨图标的分类思维时,巧妙地运用了层级理念,
并特别关注层级是否穿透这一关键因素来区分不同类型的图标。这种分类思维不仅使图标的辨识变得更为便捷,还有助于人们更轻松地形成深刻的记忆印象。通过这种创新性的分类方法,我们得以更清晰地理解图标的本质与特点,进一步提升我们对常用图标的认知水平和应用能力。
 
无底板图标
单层级
单色扁平 
整体风格简洁大方。由于没有其他质感元素的加入,所以对图形要求更加需要简约而精致
层级思维解构图标分类体系
 
 
双色扁平 
主副图形对比色搭配,整体风格既简约又具备颜色丰富度
层级思维解构图标分类体系
 
 
微质感 
·渐变方向从上到下,这种渐变方向较为传统,呈现轻轻鼓起的圆润形态
层级思维解构图标分类体系
 
 
·渐变方向从下到上,为图标赋予了轻盈而灵动的视觉感受
层级思维解构图标分类体系
 
 
·渐变方向从左到右,融合了渐变圆弧形成的高光形状,形式较新颖
层级思维解构图标分类体系
 
 
多层级
多层级图标的设计,主要依据其是否具备穿透特性进行划分,即不穿透与穿透两大维度。在实际操作中,多数情况下,我们会借助不同层级的设计手法来塑造图标的层次感,而这其中往往融入了微妙的质感处理。因此,我们并不以扁平与质感作为多层级图标的主要划分标准。
层级不穿透
·色彩搭配邻近色
层级思维解构图标分类体系
 
 
·色彩搭配邻近色,渐变方向-左到右
层级思维解构图标分类体系
 
 
·色彩搭配邻近色,和谐统一,主图形内发光质感,边缘有1像素高光和副图形隔开
层级思维解构图标分类体系
 
 
 
·色彩搭配邻近色,采用强质感,多层级之间巧妙运用投影进行区分,使得每一层都清晰分明,互相映衬。主图形的质感通过渐变、内阴影或内发光等手法进行精细刻画,增强了视觉冲击力。
层级思维解构图标分类体系
 
 
·采用强质感,多层级,更贴近真实物体的质感和光影效果。用素描的三大调五大面思维,让光影细节拉满,通常需要手动加光,无法单纯用软件自带渐变
层级思维解构图标分类体系
 
 
层级穿透
主图形透出底部副图形形状,副图形被遮挡形状模糊处理,主图形通常边缘有1像素高光,呈现出精致而独特的分隔效果。
·邻近色穿透,底部图形通常为暗色
层级思维解构图标分类体系
 
 
层级思维解构图标分类体系
 
 
层级思维解构图标分类体系
 
 
·不同色系穿透
层级思维解构图标分类体系
 
 
层级思维解构图标分类体系
 
 
有底板图标
为减轻记忆压力,我们直接沿用先前提出的无底板图标风格分类方案。在此基础上,我们进一步引入一个底板构成元素,以此作为额外的区分点。因此,整个分类维度与异形图标分类方案保持高度一致,使得用户能够更轻松地进行识别和记忆。分类维度不再赘述,直接展示案例
单层级
·底板渐变+投影,渐变方向从下到上,主图形渐变方向从下到上,和底板统一
层级思维解构图标分类体系
 
 
·底板渐变+投影,渐变方向从下到上,主图形渐变方向上到下,和底板相反
层级思维解构图标分类体系
 
 
·底板渐变,渐变方向从右下到左上,主图形渐变方向上到下,并带有较强的投影
层级思维解构图标分类体系
 
 
多层级
·底板扁平,主图形和副图形之间投影区分
层级思维解构图标分类体系
 
 
·底板扁平,主图形和副图形之间投影区分,副图形降低透明度
层级思维解构图标分类体系
 
 
·底板渐变,主图形渐变方向根据物体造型来定制
层级思维解构图标分类体系
 
 
·底板渐变,主副图形穿透
层级思维解构图标分类体系
 
 


作者:香草设计铺
链接:https://www.zcool.com.cn/article/ZMTYyMDA0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档