摹客在线原型设计中,提供了多种状态:悬停、按下、选中、焦点、禁用等,还可以自定义新的状态。下面就来看看这几种已有状态各是什么样的效果吧!
工具/原料
摹客在线原型
悬停
1、利用悬停状态,可以轻松实现鼠标移入、移出的不同效果。
2、第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“悬停”的状态。
3、第二步:选中组件,右上角弹窗中切换到“悬停”,改变组件的填充颜色即可。演示时,就可以看到鼠标移入和移动的不同效果了!
按下
1、按钮组件通常会用到该状态。利用按下状态,可以轻松实现鼠标按下时、松开时的不同效果。
2、那么上面的效果是如何实现的呢?第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“按下”的状态。(某些组件的右上角面板中,默认会有按下这个状态,则直接查看第二步。)
3、第二步:选中组件,右上角弹窗中切换到“按下”,改变组件的填充颜色即可。演示时,就可以看到鼠标按下时、松开时的不同效果了!
选中
1、复选框、单选按钮组等具有选中属性的组件,常常会用到该状态。演示时,将选项的默认状态设置为已选中。
2、那么上面的默认选中的效果是如何实现的呢?选中组件,右上角弹窗中切换到“选中”即可,你还可以改变选中状态下文字的颜色。演示时,选项的默认状态就是已选中了!
焦点
1、输入框通常会用到该状态,来呈现输入状态和非输入状态的不同效果。
2、那么上面的效果是如何实现的呢?选中组件,陴查哉厥右上角弹窗中切换到“焦点”,可以看到输入框的边框加粗了,这是默认的样式,你还可以改变边框或填充的颜色。演示时,就可以看到输入状态和非输入状态的不同效果了!
禁用
1、禁用是一种常用的状态,用来表示该组件不可用。
2、实现禁用的方式很简单,选中组件,点击右上角组件状态弹窗中“禁用”前面的圆点即可。
自定义状态
1、你还可以新添加一个自定义状态,来实现丰富的效果。
2、下面我们来看看利用自定义状态是如何实现鼠标移入、移出的不同效果的。第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“自定义状态“。
3、第二步:选中组件,右上角弹窗中切换到“状态1”,改变组件的填充颜色。
4、第三步:将组件右上角的圆点拖向组件本身,触发方式选择“鼠标进入”,命令选择“切换状态”,在艚硒渤恨弹出面板的“状态”选为“状态1”;接着再重复前一步操作,触发方式选择“鼠标离开”,命令选择“切换状态”,在弹出面板的“状态”选为“正常状态”。