摹客原型有哪些状态交互种类

 时间:2024-10-12 06:34:15

摹客在线原型设计中,提供了多种状态:悬停、按下、选中、焦点、禁用等,还可以自定义新的状态。下面就来看看这几种已有状态各是什么样的效果吧!

工具/原料

摹客在线原型

悬停

1、利用悬停状态,可以轻松实现鼠标移入、移出的不同效果。

摹客原型有哪些状态交互种类

2、第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“悬停”的状态。

摹客原型有哪些状态交互种类

3、第二步:选中组件,右上角弹窗中切换到“悬停”,改变组件的填充颜色即可。演示时,就可以看到鼠标移入和移动的不同效果了!

摹客原型有哪些状态交互种类

按下

1、按钮组件通常会用到该状态。利用按下状态,可以轻松实现鼠标按下时、松开时的不同效果。

摹客原型有哪些状态交互种类

2、那么上面的效果是如何实现的呢?第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“按下”的状态。(某些组件的右上角面板中,默认会有按下这个状态,则直接查看第二步。)

摹客原型有哪些状态交互种类

3、第二步:选中组件,右上角弹窗中切换到“按下”,改变组件的填充颜色即可。演示时,就可以看到鼠标按下时、松开时的不同效果了!

摹客原型有哪些状态交互种类

选中

1、复选框、单选按钮组等具有选中属性的组件,常常会用到该状态。演示时,将选项的默认状态设置为已选中。

摹客原型有哪些状态交互种类

2、那么上面的默认选中的效果是如何实现的呢?选中组件,右上角弹窗中切换到“选中”即可,你还可以改变选中状态下文字的颜色。演示时,选项的默认状态就是已选中了!

摹客原型有哪些状态交互种类

焦点

1、输入框通常会用到该状态,来呈现输入状态和非输入状态的不同效果。

摹客原型有哪些状态交互种类

2、那么上面的效果是如何实现的呢?选中组件,陴查哉厥右上角弹窗中切换到“焦点”,可以看到输入框的边框加粗了,这是默认的样式,你还可以改变边框或填充的颜色。演示时,就可以看到输入状态和非输入状态的不同效果了!

摹客原型有哪些状态交互种类

禁用

1、禁用是一种常用的状态,用来表示该组件不可用。

摹客原型有哪些状态交互种类

2、实现禁用的方式很简单,选中组件,点击右上角组件状态弹窗中“禁用”前面的圆点即可。

摹客原型有哪些状态交互种类

自定义状态

1、你还可以新添加一个自定义状态,来实现丰富的效果。

摹客原型有哪些状态交互种类

2、下面我们来看看利用自定义状态是如何实现鼠标移入、移出的不同效果的。第一步:选中组件,点击右上角组件状态弹窗中的 + 号,添加一个“自定义状态“。

摹客原型有哪些状态交互种类

3、第二步:选中组件,右上角弹窗中切换到“状态1”,改变组件的填充颜色。

摹客原型有哪些状态交互种类

4、第三步:将组件右上角的圆点拖向组件本身,触发方式选择“鼠标进入”,命令选择“切换状态”,在艚硒渤恨弹出面板的“状态”选为“状态1”;接着再重复前一步操作,触发方式选择“鼠标离开”,命令选择“切换状态”,在弹出面板的“状态”选为“正常状态”。

  • 使用PHP+MySQL开发简单的会员系统教程
  • 常见电商模式有哪些?创想范一篇文章告诉你
  • 用CorelDRAWX7绘制孔雀开平
  • 微信小程序与公众号文章实现接口对接
  • 怎样人物抠图
  • 热门搜索
    美德少年手抄报内容 中秋节 手抄报 庆元旦手抄报内容 8k手抄报版面设计图 小学生三年级手抄报 数学手抄报四年级下册 美丽的校园手抄报 爱读书手抄报 关于热爱生命的手抄报 小学数学手抄报图片