Axure如何自定义设计下拉列表交互

 时间:2024-10-13 02:50:30

1、首先我们先设计好下拉列表的组件,这里自定义的下拉组件组成为:一个箭头、一个背景、四个矩形框。

Axure如何自定义设计下拉列表交互

2、接下来我们要实现当鼠标移入对应选项时,选项出现颜色变化。1、同时选中三个选项的矩形框,然后点击新建交互,选择鼠标悬停2、这里我将悬停时的交互填充颜色为蓝色,字体为白色

Axure如何自定义设计下拉列表交互
Axure如何自定义设计下拉列表交互

3、设计完悬停效果之后,我们设计下拉框的选中状态,当选中下拉框时,箭头朝下,否则朝上,交互如图。需要注意的是,当我们设计好选中状态事件时,需要设计单击事件,令其选中状态为切换

Axure如何自定义设计下拉列表交互

4、箭头的选中效果完成后,我们需要使鼠标点击组件时切换滑动出现选项,这里利用动态面板。1、将背景以及选中状态转换为动态面竣淠仝螃板并命名为下拉选项_01,设为隐藏2、之后我们在下拉框的选中状态为面板设计事件,当选中时显示下拉选项_01并向下滑动,取消选中时滑动并隐藏下拉选项_01,如下图。

Axure如何自定义设计下拉列表交互
Axure如何自定义设计下拉列表交互

5、以上步骤完成后,大致交互效果就完成了。下一步我们要实现选择选项时,下拉选项_01滑动隐藏双击进入下拉选项_01的动态面板,分别为各个矩形框设置单击时,下拉框的选中状态为假,如下图。

Axure如何自定义设计下拉列表交互

6、第二步我们要设计选择下拉选项时,下拉框获取到该文本值。利用函数,如下图为各个选项设置。

Axure如何自定义设计下拉列表交互
Axure如何自定义设计下拉列表交互

7、以上都完成后即可点击预览,就可以看到自定义设计的下拉框效果啦

  • Axure怎么实现页面载入时元素旋转效果
  • HTML怎么设置文本的背景色
  • Axure RP8怎样设置元件默认禁用状态?
  • 如何创建Axure高分辨率自适应视图
  • JavaScript如何获取和修改div中style中的值
  • 热门搜索
    预防病毒手抄报内容 中秋节手抄报图画 母亲节手抄报简单字少 抗击肺炎手抄报 读书手抄报资料 十一手抄报 数学手抄报五年级 3.8妇女节手抄报 祖国在我心中的手抄报 健康心理手抄报