入门级丨下拉选择菜单项的实现

访客4年前黑客工具1048

1月份从实习公司告退,在秋招的尾巴找到就业公司,12月份遏制了投稿,经验疫情后,不久前公司才布置了入职。时隔半年再次投稿,教各人如何实现下拉选择菜单项的结果。

入门级丨下拉选择菜单项的实现

实现结果预览

初始状态:

点击菜单后:

入门级丨下拉选择菜单项的实现

选择菜单后:

原型预览地点:https://92wc31.axshare.com

所需元件:三个矩形、一个热区、一个动态面板

总体元件:

入门级丨下拉选择菜单项的实现

动态面板内的元件:

入门级丨下拉选择菜单项的实现

操纵步调 摆放元件

将元件摆放好,个中热区安排在显示规模的矩形和显示标记的矩形外面。

配置热区交互行动—鼠标单击时

Case1(if菜单项不行见)

入门级丨下拉选择菜单项的实现

Case2(Else if菜单项可见)

入门级丨下拉选择菜单项的实现

配置动态面板内元件的交互行动—鼠标单击时

每个矩形的交互都是一样的:

入门级丨下拉选择菜单项的实现

按F5预览原型结果 思考

在预览原型时,各人会发明该原型与其他下拉选择菜单项的区别,只能通过点击热区才气将显示的菜单项埋没起来。正常环境下,当我们将菜单项显示出来后,点击页面的空缺处,菜单项也应该自动埋没才对。那么需要怎么配置才气实现这种结果?

小记

各人假如有什么不懂的接待在评论区提问和接头~

#相关阅读#

Axure教程:鼠标移入时切换抽屉气势气魄菜单

Axure教程:鼠标移入时切换菜单

Axure教程:实现菜单下拉结果

Axure教程:抽屉气势气魄的菜单实现

#专栏作家#

Nilz,人人都是产物司理专栏作家。存眷用户交互体验,产物成果设计。擅长原型设计。

相关文章

产品管理流程及规范3:产品原型设计

产品管理流程及规范3:产品原型设计

产物原型的类型化,目标是清楚表达产物设计理念和成果交互及执行逻辑,提高产物、研发、UI及业务部分之间的相同效率。本文主要讲授了产物原型设计的一些尺度、类型及实际操纵方法,要领,与各人分享。 01 拟...

Web产品的原型尺寸需要遵循什么规范?

Web产品的原型尺寸需要遵循什么规范?

编辑导读:在产物司理开始画Web产物原型之前,必然要清楚利用什么尺寸来画出原型的页面。本篇文章作者具体先容了Web产物原型尺寸的常用类型和相关步调,并对每个步调需要留意的问题举办了梳理阐明,与各人分享...

Axure教程:Axure中继器实现动态树结构控件详解

Axure教程:Axure中继器实现动态树结构控件详解

树布局是原型设计中常用的控件之一,常用于组织架构等成果。本文作者参照钉钉靠山组织架构样式,利用Axure中继器实现动态树布局控件。 一、交互样式 初始样式(以钉钉靠山-通讯录-组织架构为例): 初始...

以个人书架业务为例,解析原型图的设计流程

以个人书架业务为例,解析原型图的设计流程

原型图到底该怎么画?这是大多产品经理入门时遇到的问题。有人会把原型图画成一幅精美的设计图;也有人在纸上手绘线框图;甚至有人不画图直接就进入开发了。本文作者从自身工作经验出发,结合实际业务对如何设计原型...

原型设计-Axure中继器实现动态穿梭框

原型设计-Axure中继器实现动态穿梭框

穿梭框(Transfer)是原型设计中较为常用的控件之一,本期我们实验利用Axure中继器实现动态穿梭框控件。 一、交互样式 动态交互结果如下: 1. 初始载入时 仅在待选区显示待选项,已选区现...

Axure教程:高保真的上传效果(图片、文件)

Axure教程:高保真的上传效果(图片、文件)

今天教大家怎么做一个高保真的上传图片、文件的效果。该原型用中继器做的,所以使用的时候只需要简单填写表格内容即可,也可以当做学习中继器交互的案例。如有喜欢该原型或者有什么疑问的都可以在评论区留言。 为...