新知榜官方账号
2023-10-02 09:04:24
理解图标,首先关注的是图标本身的类型,在整个UI体系中,图标基本就分成3个大类:工具图标、装饰图标和启动图标。B端项目中应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。
工具图标的应用主要包含两个部分,线性图标和面性图标。适合B端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。
对B端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。所有同规格类型图标具有一致性的特征,这些特征包含了粗细一致、圆角一致、透视一致、大小一致等。
在AntDesign的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。格线层通常由4个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。格线只是一个图标大小设置的参考工具,一切以最终效果为标准。
图标尺寸设定,就是根据当前位置合适的尺寸来制定。使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可。图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现参考图标的具体尺寸、使用面性还是线性的风格更合理、参考图标的设计风格是圆还是尖锐更合理、参考相关隐喻的图形样式哪种更合理。
图标的色彩应该避免使用彩色、渐变色、投影等花哨的元素。普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。
最适合切图的格式就是位图的PNG格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合。
微信扫码咨询
相关工具
相关文章
相关快讯
推荐
阿里Accio中文版上线!一键搞定复杂采购
2025-08-19 09:13
视频“用嘴编辑”的时代来了,但钱包顶得住吗?
2025-08-15 17:59
智谱新模型GLM-4.5V全面开源,玩家们有福啦!
2025-08-12 17:56
扎心文案+AI插画=爆款!揭秘8万赞视频的制作全流程
2025-08-12 10:08
GPT-5没你想的那么好,附实测体验~
2025-08-11 11:07
一站式搞定AI绘图+视频,AI短片效率飙升的秘密在这儿!
2025-08-08 09:26
打工人新神器!10款国产AI,让你告别996!
2025-08-08 09:24
豆包视觉推理深度体验,AI也能“边看边想”了!
2025-08-08 09:19
300美元的AI男友来了!马斯克的情感生意从女友做到男友
2025-08-01 17:56
Agent智能体:2025年企业新员工,月薪仅需一度电?
2025-07-30 17:49