【导航设计】第一期进阶技巧1.0——动态图标
2023-11-28 21:31:40
1201
2
本篇为大家分享图标交互的设计方法的其中一种最为简单的设计方法。点赞评论后进Q群
59444965
下载素材
(后续有时间会发2.0/3.0等等关于导航如何做动态视觉效果)
原理:
利用按钮控件的三种交互颜色与png图标组合,按照层罗列,即可实现png图标与鼠标交互,引起颜色变化。
原理看不懂的话我
举个栗子
:你有一张中间漏了洞的白纸,当你看白纸时,中间漏洞的部分会随背景的变化而变化。上面说的png图标就是这个白纸,按钮的三种交互颜色就是背景。
操作方法:①准备一张png图片。(镂空部分及为成品颜色变化部分)
②在导航设计模板中插入一个[按钮],
层数设为1,
并在右侧控制属性——背景中设置常态颜色(我设计的常态背景色是和png图标背景色一致的)、高亮颜色、点击颜色。
③再插入一个[图片帧],层数为2,大小盖住按钮即可。
|
+1
3