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

2024-6-19    ui设计分享达人

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

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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

日历

链接

个人资料

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

存档