彩色抽象图标
# 彩色图标#
图标指具有指导意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。通常可以把图标理解为某个概念的抽象图形,通过设计清晰易懂的图形传达出比文字更高效率的信息。使用图标的目的是起引导作用,提升界面的美观程度,帮助用户更快的获取信息。通过线性图标和几何图形组合,搭配色彩使用来表达美的视觉感受。
案例图设计尺寸:
1、图标绘制在 32*32px 的像素网格上,并可等比缩放到不同大小以供实际场景应用。
2、在图标网格中预留了 2px 的出血,这样可以确保图标在导出时不会出现边缘被裁切的情况;同时在设计过程中,也为设计师留下了把控图标视觉平衡的余地。大多数情况下,不建议超出安全区域。
图标的设计原则:
1、明晰:快速传达给用户想要传达的信息,清晰表意。
2、一致性:保持相同的风格规则以实现整套图标的视觉和谐。
3、个性:简洁、精致、严谨、中性,传递出品牌的氛围。
图标的设计规范:
1、常用尺寸 在界面图标设计中最常用尺寸:12*12px、16*16px、24*24px、32*32px、48*48px (其他尺寸:64*64px、96*96px、128*128px、256*256px、512*512px)
2.图标网格(Icon Grids) 图标网格,就是一种框架约束,来源于Material design。通过图标网格大致基于面积相等来达到视觉平衡,通过这些核心形状为基准进行扩展,有利于使产品系列图标保持规范与统一。
Tips:图标网格(Icon Grids)的作用是规范基础形,是一种指南,而不是硬性规则,当影响图标表意时请以视觉为准。
3.图标绘制标准 图标的线宽,基于 32px 绘制标准,图标使用 2px 描边,包括曲线、内部以及外部的描边。
4.图标内外描边规范 采用不同的描边方式会影响图标的形状,大多数情况下建议采用「居中描边」进行设计,便于裁剪与布尔运算。
案例图
组1:搜索、运动图标(主要信息展示)
搜索图标的结构:
·搜索对象、搜索内容、信息碎片等
·搜索时使用的放大镜
运动图标的结构:
·体育项目、可代表运动的参照物
组2:循环、游玩图标(主要信息展示)
循环图标的结构:
·循环、连续、连接、无限等
·结构中包括首尾结构表示循环往复
游玩图标的结构:
·可用游玩项目形态表示此图标的形态
·例如:划船、建筑物、动物或者植物等
组3:冷饮、群组图标(主要信息展示)
冷饮图标的结构:
·可采用冰淇淋、饮料之类的参考物
群组图标的结构:
·群组就需要有多人的元素,可用两人或者三人
组4:缩放、图片图标(主要信息展示)
·缩放图标是由表示缩放的主体搭配四周的辅助图形组成。
·图片图标,可把图片、照片或者图像之类的图标作为参考元素。把画框作为主体,再用辅助图形做出图片部分即可。
组5:二维码、森林(主要信息展示)
·二维码图标可参考二维码样式,用辅助图形表示中间部分,整体不可过于复杂。
·森林图标可参考松树、圣诞树之类的作为参考元素。树干作为主体元素,树枝作为辅助图形。












































































